/*
   红尘资源网
   https://www.hcw3.cn/
*/

body,h1,h2,h3,h4,ol,p,ul {
 margin:0
}
.btn,.confirm-bar>div,.confirm-content h2,.page-box,.tc {
 text-align:center
}
html {
 -webkit-tap-highlight-color:transparent;
 font-size:20px
}
body {
 line-height:1.4;
 -webkit-text-size-adjust:none
}
ol,ul {
 padding-left:0;
 list-style-type:none
}
a img,img {
 border:0
}
em,i {
 font-style:normal
}
ul {
 list-style:none;
 padding:0
}
mark {
 background:0 0
}
a,body,button,h1,h2,h3,h4,h5,h6,input,select,textarea {
 color:#333;
 font-family:"微软雅黑",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",sans-serif
}
input:focus,select:focus,textarea:focus {
 outline:0
}
a {
 text-decoration:none
}
a:hover {
 color:#e81d62
}
* {
 -webkit-box-sizing:border-box;
 box-sizing:border-box
}
.fix:after {
 display:block;
 content:"clear";
 height:0;
 clear:both;
 overflow:hidden;
 visibility:hidden
}
.client-bg-box:after,.client-text-area p:before,.invitation-p:before {
 content:''
}
.bgw {
 background-color:#fff
}
.bgg {
 background-color:#F5F5F5
}
.rel {
 position:relative
}
.abs {
 position:absolute
}
.ovh {
 overflow:hidden
}
.z1 {
 z-index:1
}
.op0 {
 opacity:0
}
.m0 {
 margin-top:0!important
}
#horizontalMask {
 position:fixed;
 top:0;
 left:0;
 bottom:0;
 right:0;
 z-index:9999;
 background-color:#fff;
 display:none
}
.horizontal-box {
 height:10rem;
 width:7.5rem;
 position:absolute;
 top:50%;
 left:50%;
 margin:-5rem 0 0 -3.75rem
}
.horizontal-box aside {
 position:absolute;
 top:6rem;
 left:0;
 right:0;
 font-size:.7rem;
 height:1rem;
 text-align:center;
 overflow:hidden;
 color:#4EA8FB;
 opacity:.6
}
.horizontal-box aside div {
 -webkit-animation:orienttext 3s linear infinite 2s;
 animation:orienttext 3s linear infinite 2s;
 height:100%
}
.horizontal-box aside span {
 display:block;
 line-height:1rem
}
.horizontal-phone {
 height:3.25rem;
 width:5rem;
 background:url(./phone.svg) no-repeat;
 background-size:100% auto;
 top:1rem;
 left:50%;
 margin-left:-2.5rem;
 position:absolute;
 -webkit-animation:orient 3s linear infinite 2s;
 animation:orient 3s linear infinite 2s
}
.horizontal-logo {
 position:absolute;
 top:1.7rem;
 left:50%;
 width:1.2rem;
 height:1.2rem;
 margin-left:-.6rem;
 background:url(./mask-1.png) no-repeat;
 background-size:100% auto;
 -webkit-animation:orientlogo 3s linear infinite 2s;
 animation:orientlogo 3s linear infinite 2s
}
#msgBox,.confirm-box,.mask {
 position:fixed
}
@-webkit-keyframes orient {
 50% {
  -webkit-transform:rotate(-90deg);
  transform:rotate(-90deg)
 }
 from {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
 90%,from {
  opacity:1
 }
 to {
  opacity:0;
  -webkit-transform:rotate(-90deg);
  transform:rotate(-90deg)
 }
}
@keyframes orient {
 50% {
  -webkit-transform:rotate(-90deg);
  transform:rotate(-90deg)
 }
 from {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
 90%,from {
  opacity:1
 }
 to {
  opacity:0;
  -webkit-transform:rotate(-90deg);
  transform:rotate(-90deg)
 }
}
@-webkit-keyframes orientlogo {
 50%,from {
  background-image:url(./mask-2.png)
 }
 55% {
  background-image:url(./mask-1.png)
 }
 90%,from {
  opacity:1
 }
 to {
  opacity:0;
  background-image:url(./mask-2.png)
 }
}
@keyframes orientlogo {
 50%,from {
  background-image:url(./mask-2.png)
 }
 55% {
  background-image:url(./mask-1.png)
 }
 90%,from {
  opacity:1
 }
 to {
  opacity:0;
  background-image:url(./mask-2.png)
 }
}
@-webkit-keyframes orienttext {
 0%,100%,50% {
  -webkit-transform:translateY(0);
  transform:translateY(0);
  opacity:1
 }
 52%,98% {
  -webkit-transform:translateY(0);
  transform:translateY(0);
  opacity:0
 }
 53%,97% {
  -webkit-transform:translateY(-100%);
  transform:translateY(-100%);
  opacity:0
 }
 55% {
  opacity:1;
  -webkit-transform:translateY(-100%);
  transform:translateY(-100%)
 }
 95% {
  -webkit-transform:translateY(-100%);
  transform:translateY(-100%);
  opacity:1
 }
}
@keyframes orienttext {
 0%,100%,50% {
  -webkit-transform:translateY(0);
  transform:translateY(0);
  opacity:1
 }
 52%,98% {
  -webkit-transform:translateY(0);
  transform:translateY(0);
  opacity:0
 }
 53%,97% {
  -webkit-transform:translateY(-100%);
  transform:translateY(-100%);
  opacity:0
 }
 55% {
  opacity:1;
  -webkit-transform:translateY(-100%);
  transform:translateY(-100%)
 }
 95% {
  -webkit-transform:translateY(-100%);
  transform:translateY(-100%);
  opacity:1
 }
}
#msgBox {
 width:100%;
 height:3.2rem;
 top:-3.5rem;
 left:0;
 right:0;
 z-index:999;
 -webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.14);
 box-shadow:0 1px 2px 0 rgba(0,0,0,.14);
 display:-webkit-box;
 display:flex;
 -webkit-box-pack:center;
 justify-content:center;
 -webkit-box-align:center;
 align-items:center;
 opacity:.9;
 color:#fff;
 -webkit-transition:.2s;
 transition:.2s
}
#msgBox.success {
 background-color:#4caf50
}
#msgBox.error {
 background-color:#ef6666
}
#msgBox.active {
 top:0
}
.confirm-box {
 width:14rem;
 left:50%;
 margin-left:-7rem;
 background-color:#fff;
 -webkit-box-shadow:0 2px 6px rgba(0,0,0,.2);
 box-shadow:0 2px 6px rgba(0,0,0,.2);
 z-index:1000;
 border-radius:.5rem;
 overflow:hidden;
 -webkit-transform:translateY(-50%);
 transform:translateY(-50%);
 -webkit-transition:.5s;
 transition:.5s;
 top:-40%;
 opacity:0
}
.confirm-box.active {
 opacity:1;
 top:40%
}
.main-bg,.main-layout,.mask {
 top:0;
 left:0;
 bottom:0;
 right:0
}
.confirm-content {
 padding:1rem 1.1rem;
 border-bottom:1px solid #eee
}
.confirm-content h2 {
 font-size:.8rem;
 font-weight:700;
 margin-bottom:.6rem
}
.confirm-content p {
 font-size:.6rem;
 color:#535353
}
.confirm-bar {
 display:-webkit-box;
 display:flex
}
.confirm-bar>div {
 width:50%;
 height:2.1rem;
 line-height:2.1rem;
 font-size:.7rem;
 -webkit-transition:.3s;
 transition:.3s;
 cursor:pointer
}
.confirm-bar>div:active {
 background-color:#efefef
}
.confirm-cancel {
 color:#3D96FF;
 border-right:1px solid #eee
}
.confirm-submit {
 color:#3D96FF
}
.mask {
 background-color:#fff;
 z-index:999;
 -webkit-transition:.5s;
 transition:.5s;
 opacity:0;
 display:none
}
.btn,.main-bg,.main-layout,.page-box {
 position:absolute
}
.mask.active {
 opacity:.5
}
@media screen and (max-height:530px) {
 html {
  font-size:18px
 }
}
@media screen and (min-width:320px) and (max-width:359px) {
 html {
  font-size:16px
 }
}
@media screen and (min-width:360px) and (max-width:675px) {
 html {
  font-size:20px
 }
}
@media screen and (min-width:676px) and (max-width:997px) {
 html {
  font-size:28px
 }
}
@media screen and (min-width:998px) {
 html {
  font-size:32px
 }
}
@media screen and (min-height:600px) and (max-height:999px) {
 .invitation-swiper .swiper-slide:after {
  content:'';
  display:block
 }
}
@media screen and (min-height:530px) and (max-height:725px) {
 html {
  font-size:20px
 }
}
@media screen and (min-height:1000px) {
 .invitation-swiper .swiper-slide:after,.invitation-swiper .swiper-slide:before {
  content:'';
  display:block
 }
}
body {
 font-size:.8rem
}
.main-layout {
 -webkit-transition:2s;
 transition:2s;
 z-index:1;
 overflow:hidden
}
.main-bg {
 z-index:-1
}
.cricle-bg {
 height:120%;
 width:300%;
 background:url(/imgs/main/cricle.svg) center center no-repeat;
 background-size:auto 100%;
 -webkit-transform:translate(-27%,5%);
 transform:translate(-27%,5%);
 -webkit-transition:.8s cubic-bezier(.24,.8,.22,1.01);
 transition:.8s cubic-bezier(.24,.8,.22,1.01)
}
.btn,.client-bg-box {
 -webkit-transition:.8s
}
.btn {
 width:12rem;
 height:2.4rem;
 line-height:2.4rem;
 font-size:1rem;
 background:#4D4D4D;
 -webkit-box-shadow:0 2px 6px rgba(0,0,0,.2);
 box-shadow:0 2px 6px rgba(0,0,0,.2);
 border-radius:10px;
 bottom:3rem;
 left:50%;
 margin-left:-6rem;
 -webkit-user-select:none;
 user-select:none;
 transition:.8s
}
.btn:active {
 background:#393939
}
.page-box {
 top:13.5%;
 bottom:20%;
 width:100%;
 display:-webkit-box;
 display:flex;
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 flex-direction:column;
 -webkit-box-pack:justify;
 justify-content:space-between
}
.page-box .title1 {
 font-weight:700
}
.page-box .title1 div {
 display:inline-block;
 text-align:left;
 font-size:2rem
}
.page-box .title1 div aside {
 font-size:1.4rem
}
.page-box .text-1 {
 font-size:1rem;
 font-weight:300;
 margin-bottom:.4rem
}
.page-box .text-2 {
 font-size:1.4rem;
 font-weight:700
}
.page-box .text-1,.page-box .text-2 {
 position:relative
}
.page-box .text-1 span,.page-box .text-2 span {
 position:absolute;
 opacity:0;
 top:0;
 left:0;
 right:0;
 -webkit-transition:.5s;
 transition:.5s
}
.page-box .logo {
 height:8.4rem;
 background:center center no-repeat;
 background-size:auto 100%;
 -webkit-transition:2s;
 transition:2s;
 position:relative
}
.cricle-item-1 {
 width:12rem;
 height:12rem;
 border-radius:50%;
 position:absolute;
 -webkit-transition:all .8s cubic-bezier(.24,.8,.22,1.01),background-color 2s;
 transition:all .8s cubic-bezier(.24,.8,.22,1.01),background-color 2s
}
.cricle-item-2 {
 width:25.8rem;
 height:25.8rem;
 border-radius:50%;
 position:absolute;
 -webkit-transition:all .8s cubic-bezier(.24,.8,.22,1.01),background-color 2s;
 transition:all .8s cubic-bezier(.24,.8,.22,1.01),background-color 2s
}
.suspension-box-1 {
 height:74%;
 width:1px;
 position:absolute;
 top:13%;
 left:50%
}
.suspension-box-2 {
 height:50%;
 width:100%;
 position:absolute;
 top:10%;
 left:0
}
.suspension-item-1 {
 position:absolute;
 top:0;
 left:0;
 width:8rem;
 height:6rem;
 margin-left:-2rem;
 -webkit-transition:.8s .1s;
 transition:.8s .1s
}
.suspension-item-1>div {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:center center no-repeat;
 background-size:auto 100%;
 -webkit-transition:2s;
 transition:2s;
 opacity:0
}
.suspension-item-1 .sus-1 {
 background-image:url(../img/triangle1.svg)
}
.suspension-item-1 .sus-2 {
 background-image:url(../img/triangle2.svg)
}
.suspension-item-1 .sus-3 {
 background-image:url(../img/triangle3.svg)
}
.suspension-item-1 .sus-4 {
 background-image:url(../img/triangle4.svg)
}
.suspension-item-2 {
 position:absolute;
 bottom:0;
 left:2.2rem;
 width:4.5rem;
 height:4.5rem;
 border-radius:.6rem;
 -webkit-transition:1s;
 transition:1s
}
.suspension-item-3 {
 position:absolute;
 top:1rem;
 left:1rem;
 width:2.3rem;
 height:2.3rem;
 border-radius:.4rem;
 -webkit-transition:.5s .3s;
 transition:.5s .3s
}
.suspension-item-4 {
 position:absolute;
 right:-1.5rem;
 bottom:0;
 width:5rem;
 height:5rem;
 border-radius:50%;
 -webkit-transition:.8s .2s;
 transition:.8s .2s
}
.logo>div {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:center center no-repeat;
 background-size:auto 100%;
 -webkit-transition:2s;
 transition:2s;
 opacity:0
}
.logo .logo-1 {
 background-image:url(../img/logo1.png)
}
.logo .logo-2 {
 background-image:url(../img/logo2.png)
}
.logo .logo-3 {
 background-image:url(../img/logo3.png)
}
.logo .logo-4 {
 background-image:url(../img/logo4.png)
}
.main-layout-1 {
 background:#87E86C
}
.main-layout-1 .logo-1 {
 opacity:1
}
.main-layout-1 .btn {
 color:#D8FF0C
}
.main-layout-1 .cricle-item-1,.main-layout-1 .cricle-item-2 {
 background-color:#00D299
}
.main-layout-1 .cricle-item-1 {
 top:-5.6rem;
 right:-7.2rem
}
.main-layout-1 .cricle-item-2 {
 bottom:-11.6rem;
 left:-17.5rem
}
.main-layout-1 .suspension-item-2 {
 -webkit-transform:rotate(-330deg);
 transform:rotate(-330deg)
}
.main-layout-1 .suspension-item-3 {
 -webkit-transform:rotate(15deg);
 transform:rotate(15deg)
}
.main-layout-1 .suspension-item-2,.main-layout-1 .suspension-item-3 {
 background-color:#9659F9
}
.main-layout-1 .suspension-item-4 {
 background-color:#D8FF0C
}
.main-layout-1 .sus-1 {
 opacity:1
}
.main-layout-1 .text-1 .text-1-1,.main-layout-1 .text-2 .text-2-1 {
 opacity:1;
 -webkit-transform:translate(0);
 transform:translate(0)
}
.main-layout-2 {
 background:#F061A9
}
.main-layout-2 .logo-2 {
 opacity:1
}
.main-layout-2 .btn {
 color:#4FE3E1
}
.main-layout-2 .cricle-item-1,.main-layout-2 .cricle-item-2 {
 background-color:#E83D7A
}
.main-layout-2 .cricle-item-1 {
 width:24rem;
 height:24rem;
 top:-16rem;
 right:-16rem
}
.main-layout-2 .cricle-item-2 {
 width:14.4rem;
 height:14.4rem;
 left:-9rem;
 bottom:-3.8rem
}
.main-layout-2 .suspension-item-2,.main-layout-2 .suspension-item-3 {
 background-color:#FFD900
}
.main-layout-2 .suspension-item-3 {
 left:80%;
 -webkit-transform:rotate(30deg);
 transform:rotate(30deg)
}
.main-layout-2 .suspension-item-2 {
 width:3rem;
 height:3rem;
 left:-7.5rem;
 bottom:6.5rem;
 -webkit-transform:rotate(-330deg);
 transform:rotate(-330deg)
}
.main-layout-2 .suspension-item-4 {
 background-color:#4FE3E1
}
.main-layout-2 .suspension-item-1 {
 -webkit-transform:scale(.8) rotate(-30deg) translate(-3rem,-2rem);
 transform:scale(.8) rotate(-30deg) translate(-3rem,-2rem)
}
.main-layout-2 .sus-2 {
 opacity:1
}
.main-layout-2 .cricle-bg {
 -webkit-transform:translate(-33%,-35%) rotate(-16deg);
 transform:translate(-33%,-35%) rotate(-16deg)
}
.main-layout-2 .text-1 .text-1-2,.main-layout-2 .text-2 .text-2-2 {
 opacity:1;
 -webkit-transform:translate(0);
 transform:translate(0)
}
.main-layout-3 {
 background:#5CD0E2
}
.main-layout-3 .logo-3 {
 opacity:1
}
.main-layout-3 .btn {
 color:#00FD8E
}
.main-layout-3 .cricle-item-1,.main-layout-3 .cricle-item-2 {
 background-color:#7269CD
}
.main-layout-3 .cricle-item-1 {
 width:24rem;
 height:24rem;
 top:-8rem;
 right:75%
}
.main-layout-3 .cricle-item-2 {
 width:12rem;
 height:12rem;
 left:90%;
 bottom:-1rem
}
.main-layout-3 .suspension-item-2,.main-layout-3 .suspension-item-3 {
 background-color:#F54DA5
}
.main-layout-3 .suspension-item-2 {
 width:8rem;
 height:8rem;
 bottom:100%;
 -webkit-transform:rotate(-24deg);
 transform:rotate(-24deg);
 left:3rem;
 background-color:#00FD8E
}
.main-layout-3 .suspension-item-3 {
 left:80%;
 top:55%;
 -webkit-transform:rotate(45deg);
 transform:rotate(45deg)
}
.main-layout-3 .suspension-item-4 {
 background-color:#F54DA5;
 bottom:80%;
 right:56%;
 -webkit-transform:scale(.9);
 transform:scale(.9)
}
.main-layout-3 .suspension-item-1 {
 -webkit-transform:rotate(47deg) scale(.6);
 transform:rotate(47deg) scale(.6);
 top:60%;
 left:-7rem
}
.main-layout-3 .sus-3 {
 opacity:1
}
.main-layout-3 .cricle-bg {
 -webkit-transform:translate(-11%,-22%) rotate(33deg);
 transform:translate(-11%,-22%) rotate(33deg)
}
.main-layout-3 .text-1 .text-1-3,.main-layout-3 .text-2 .text-2-3 {
 opacity:1;
 -webkit-transform:translate(0);
 transform:translate(0)
}
.main-layout-4 {
 background:#FD0
}
.main-layout-4 .logo-4 {
 opacity:1
}
.main-layout-4 .btn {
 color:#FFE80B
}
.main-layout-4 .cricle-item-1,.main-layout-4 .cricle-item-2 {
 background-color:#FF8900
}
.main-layout-4 .cricle-item-1 {
 width:24rem;
 height:24rem;
 top:-16rem;
 right:-16rem
}
.main-layout-4 .cricle-item-2 {
 width:14.4rem;
 height:14.4rem;
 left:-9rem;
 bottom:-3.8rem
}
.client-bg,.swiper-slide,.swiper-wrapper {
 width:100%;
 height:100%
}
.main-layout-4 .suspension-item-2,.main-layout-4 .suspension-item-3 {
 background-color:#B9FF00
}
.main-layout-4 .suspension-item-2 {
 -webkit-transform:scale(.5) rotate(-30deg);
 transform:scale(.5) rotate(-30deg)
}
.main-layout-4 .suspension-item-3 {
 background-color:#A53BEF;
 top:70%;
 -webkit-transform:rotate(15deg);
 transform:rotate(15deg)
}
.main-layout-4 .suspension-item-4 {
 background-color:#A53BEF;
 -webkit-transform:scale(1.4) translate(1rem,0);
 transform:scale(1.4) translate(1rem,0)
}
.main-layout-4 .suspension-item-1 {
 -webkit-transform:rotate(-30deg) translate(-4rem,-3rem);
 transform:rotate(-30deg) translate(-4rem,-3rem)
}
.main-layout-4 .sus-4 {
 opacity:1
}
.main-layout-4 .cricle-bg {
 -webkit-transform:translate(-53%,-21%) rotate(-49deg);
 transform:translate(-53%,-21%) rotate(-49deg)
}
.main-layout-4 .text-1 .text-1-4,.main-layout-4 .text-2 .text-2-4 {
 opacity:1;
 -webkit-transform:translate(0);
 transform:translate(0)
}
@-webkit-keyframes rotate {
 0% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
 100% {
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg)
 }
}
@keyframes rotate {
 0% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
 100% {
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg)
 }
}
@-webkit-keyframes rerotate {
 100% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
 0% {
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg)
 }
}
@keyframes rerotate {
 100% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
 0% {
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg)
 }
}
.swiper-container {
 margin-left:auto;
 margin-right:auto;
 position:relative;
 overflow:hidden;
 z-index:1
}
.swiper-container-no-flexbox .swiper-slide {
 float:left
}
.swiper-container-vertical>.swiper-wrapper {
 -webkit-box-orient:vertical;
 flex-direction:column
}
.swiper-wrapper {
 position:relative;
 z-index:1;
 display:-webkit-box;
 display:flex;
 -webkit-transition-property:-webkit-transform;
 transition-property:-webkit-transform;
 transition-property:transform;
 transition-property:transform,-webkit-transform;
 -webkit-box-sizing:content-box;
 box-sizing:content-box
}
.swiper-container-android .swiper-slide,.swiper-wrapper {
 -webkit-transform:translate3d(0,0,0);
 transform:translate3d(0,0,0)
}
.swiper-container-multirow>.swiper-wrapper {
 -webkit-box-lines:multiple;
 -moz-box-lines:multiple;
 flex-wrap:wrap
}
.swiper-container-free-mode>.swiper-wrapper {
 -webkit-transition-timing-function:ease-out;
 transition-timing-function:ease-out;
 margin:0 auto
}
.swiper-slide {
 -webkit-flex-shrink:0;
 -ms-flex:0 0 auto;
 flex-shrink:0;
 position:relative
}
.client-swiper,.introduce-swiper,.invitation-swiper {
 width:100%;
 height:100%;
 position:absolute;
 top:0;
 left:0;
 overflow:hidden
}
.client-bg {
 position:absolute;
 top:0;
 left:0;
 overflow:hidden
}
.client-bg-box {
 position:absolute;
 width:200%;
 height:200%;
 top:-50%;
 left:-50%;
 background-color:#F9DA53;
 -webkit-transform:rotate(-8deg);
 transform:rotate(-8deg);
 transition:.8s
}
.client-bg-box:after {
 position:absolute;
 width:100%;
 left:0;
 bottom:0;
 height:50%;
 background-color:#ED7538;
 -webkit-transition:.8s;
 transition:.8s;
 -webkit-box-shadow:0 0 6px rgba(0,0,0,.2);
 box-shadow:0 0 6px rgba(0,0,0,.2)
}
.client-bg-item {
 width:100%;
 height:100%;
 position:absolute;
 top:0;
 left:0;
 background:center center no-repeat;
 background-size:12.2rem auto;
 opacity:0;
 -webkit-transform:rotate(-180deg) scale(.5);
 transform:rotate(-180deg) scale(.5);
 -webkit-transition:1.2s cubic-bezier(.24,.8,.22,1.01);
 transition:1.2s cubic-bezier(.24,.8,.22,1.01)
}
.client-bg-1 {
 background-image:url(./client-bg-1.svg)
}
.client-bg-2 {
 background-image:url(./client-bg-2.svg)
}
.client-bg-3 {
 background-image:url(./client-bg-3.svg)
}
.client-bg-4 {
 background-image:url(./client-bg-4.svg)
}
.client-bg-5 {
 background-image:url(./client-bg-5.svg)
}
.client-logo {
 width:5.3rem;
 height:5.3rem;
 position:absolute;
 top:50%;
 left:50%;
 margin:-2.65rem 0 0 -2.65rem
}
.client-logo>div {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:center center no-repeat;
 background-size:cover;
 opacity:0;
 -webkit-transition:1.2s cubic-bezier(.24,.8,.22,1.01);
 transition:1.2s cubic-bezier(.24,.8,.22,1.01)
}
.client-logo .client-logo-1 {
 background-image:url(./logo5.png)
}
.client-logo .client-logo-2 {
 background-image:url(../img/logo1.png)
}
.client-logo .client-logo-3 {
 background-image:url(../img/logo3.png)
}
.client-logo .client-logo-4 {
 background-image:url(./logo6.png)
}
.client-logo .client-logo-5 {
 background-image:url(../img/logo2.png)
}
.swiper-0-active .client-bg-box {
 background-color:#F9DA53
}
.swiper-0-active .client-bg-box:after {
 background-color:#ED7538
}
.swiper-0-active .client-bg-1,.swiper-0-active .client-logo-1 {
 opacity:1;
 -webkit-transform:rotate(0) scale(1);
 transform:rotate(0) scale(1)
}
.swiper-1-active .client-bg-box {
 background-color:#3F74FF
}
.swiper-1-active .client-bg-box:after {
 background-color:#62CEDA
}
.swiper-1-active .client-bg-2,.swiper-1-active .client-logo-2 {
 opacity:1;
 -webkit-transform:rotate(0) scale(1);
 transform:rotate(0) scale(1)
}
.swiper-2-active .client-bg-box {
 background-color:#F061A9
}
.swiper-2-active .client-bg-box:after {
 background-color:#E83D7A
}
.swiper-2-active .client-bg-3,.swiper-2-active .client-logo-3 {
 opacity:1;
 -webkit-transform:rotate(0) scale(1);
 transform:rotate(0) scale(1)
}
.swiper-3-active .client-bg-box {
 background-color:#B561F0
}
.swiper-3-active .client-bg-box:after {
 background-color:#852DC3
}
.swiper-3-active .client-bg-4,.swiper-3-active .client-logo-4 {
 opacity:1;
 -webkit-transform:rotate(0) scale(1);
 transform:rotate(0) scale(1)
}
.swiper-4-active .client-bg-box {
 background-color:#B3F391
}
.swiper-4-active .client-bg-box:after {
 background-color:#7ED321
}
.swiper-4-active .client-bg-5,.swiper-4-active .client-logo-5 {
 opacity:1;
 -webkit-transform:rotate(0) scale(1);
 transform:rotate(0) scale(1)
}
.client-body .swiper-pagination {
 position:absolute;
 bottom:1rem;
 left:0;
 width:100%;
 text-align:center
}
.client-body .swiper-pagination-bullet {
 display:inline-block;
 width:.4rem;
 height:.4rem;
 border-radius:.2rem;
 opacity:.3;
 -webkit-transition:.6s;
 transition:.6s;
 background-color:#fff;
 margin:0 5px
}
.invitation-swiper .swiper-slide,.invitation-trans {
 display:-webkit-box;
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 flex-direction:column
}
.client-body .swiper-pagination-bullet.swiper-pagination-bullet-active {
 opacity:1;
 width:1rem
}
.client-bg-area {
 height:51%;
 position:relative
}
.client-text-area {
 height:47%;
 position:absolute;
 bottom:0;
 width:100%;
 left:0;
 color:#fff;
 padding:1.2rem
}
.client-text-area h1,.client-text-area h2 {
 color:#fff
}
.client-text-area h1 {
 font-size:1.5rem;
 margin-bottom:1.8rem
}
.client-text-area h2 {
 font-size:1rem;
 margin-bottom:.8rem
}
.client-text-area p {
 font-size:.8rem;
 line-height:1.3rem;
 padding-left:1rem;
 position:relative;
 margin-bottom:.8rem
}
.client-text-area p:before {
 position:absolute;
 height:.5rem;
 width:.5rem;
 border-radius:50%;
 background:#fff;
 top:.3rem;
 left:0
}
.invitation-swiper .swiper-slide {
 display:flex;
 -webkit-box-align:center;
 align-items:center;
 -webkit-box-pack:justify;
 justify-content:space-between;
 padding:1rem 0 2rem
}
.invitation-logo {
 width:1.5rem;
 height:1.5rem;
 background:url(./invitation/logo.png) no-repeat;
 background-size:cover
}
.invitation-banner-box {
 width:11.9rem;
 height:5rem;
 position:relative;
 text-align:center;
 -webkit-perspective:500;
 perspective:500;
 margin-top:2rem
}
.invitation-banner-box>div {
 position:absolute
}
.invitation-banner-box .invitation-logo {
 top:-2rem;
 left:50%;
 margin-left:-.75rem;
 opacity:0;
 -webkit-transform:scale(.3);
 transform:scale(.3)
}
.invitation-banner-box .line-horizontal {
 width:100%;
 height:.15rem;
 background-color:#4EA8FB;
 bottom:0;
 left:0;
 -webkit-transform:scale(0,1);
 transform:scale(0,1)
}
.invitation-banner-box .line-vertical {
 height:4.5rem;
 width:100%;
 border:.15rem solid #4EA8FB;
 border-top:0;
 border-bottom:0;
 bottom:0;
 left:0;
 -webkit-transform:scale(1,0);
 transform:scale(1,0);
 -webkit-transform-origin:50% 100%;
 transform-origin:50% 100%
}
.invitation-banner-box .inner-box {
 height:4.5rem;
 width:100%;
 bottom:0;
 left:0;
 z-index:-1;
 background-color:#fff
}
.invitation-banner-box .line-left,.invitation-banner-box .line-right {
 width:2.4rem;
 height:.15rem;
 background-color:#4EA8FB;
 top:.5rem;
 -webkit-transform:scale(0,1);
 transform:scale(0,1)
}
.invitation-banner-box .line-left {
 left:0;
 -webkit-transform-origin:0 50%;
 transform-origin:0 50%
}
.invitation-banner-box .line-right {
 right:0;
 -webkit-transform-origin:100% 50%;
 transform-origin:100% 50%
}
.invitation-banner-box .dot-left,.invitation-banner-box .dot-right {
 width:.5rem;
 height:.5rem;
 border-radius:50%;
 background-color:#4EA8FB;
 top:.325rem;
 opacity:0;
 -webkit-transition:opacity .2s;
 transition:opacity .2s
}
.invitation-banner-box .dot-left {
 left:2.3rem
}
.invitation-banner-box .dot-right {
 right:2.3rem
}
.invitation-banner-box .header {
 top:.1rem;
 width:100%;
 height:.55rem;
 -webkit-transform:scale(0,1);
 transform:scale(0,1)
}
.invitation-banner-box .header.tb {
 height:.7rem
}
.invitation-banner-box .header.ts {
 height:.52rem
}
.invitation-banner-box .header img {
 height:100%;
 display:#000;
 margin:0 auto
}
.invitation-banner-box .title {
 font-size:1.6rem;
 color:#5D6980;
 width:100%;
 left:0;
 top:1.3rem;
 -webkit-transform:rotateX(-90deg);
 transform:rotateX(-90deg);
 opacity:0
}
.invitation-banner-box .title.ts {
 font-size:1.4rem;
 top:1.4rem
}
.invitation-banner-box .aside {
 width:100%;
 left:0;
 bottom:.75rem;
 height:.7rem;
 -webkit-transform:rotateX(-90deg);
 transform:rotateX(-90deg);
 opacity:0
}
.invitation-banner-box .aside img {
 height:100%;
 display:#000;
 margin:0 auto
}
.invitation-page-1.current .line-horizontal,.invitation-page-1.current .line-left,.invitation-page-1.current .line-right,.invitation-page-1.current .line-vertical,.invitation-page.swiper-slide-active .line-horizontal,.invitation-page.swiper-slide-active .line-left,.invitation-page.swiper-slide-active .line-right,.invitation-page.swiper-slide-active .line-vertical {
 -webkit-transform:scale(1,1);
 transform:scale(1,1)
}
.invitation-page-1.current .dot-left,.invitation-page.swiper-slide-active .dot-left {
 -webkit-animation:dotleft 1335ms 1;
 animation:dotleft 1335ms 1
}
.invitation-page-1.current .dot-right,.invitation-page.swiper-slide-active .dot-right {
 -webkit-animation:dotright 1335ms 1;
 animation:dotright 1335ms 1
}
.invitation-page-1.current .aside,.invitation-page-1.current .title,.invitation-page.swiper-slide-active .aside,.invitation-page.swiper-slide-active .title {
 -webkit-transform:rotateX(0) scale(1,1);
 transform:rotateX(0) scale(1,1);
 opacity:1
}
.invitation-page-1.current .header,.invitation-page-1.current .invitation-logo,.invitation-page.swiper-slide-active .header,.invitation-page.swiper-slide-active .invitation-logo {
 opacity:1;
 -webkit-transform:scale(1,1);
 transform:scale(1,1)
}
.invitation-page-1.current .invitation-logo,.invitation-page.swiper-slide-active .invitation-logo {
 -webkit-transition:.5s .9s cubic-bezier(.17,.67,.36,1.23);
 transition:.5s .9s cubic-bezier(.17,.67,.36,1.23)
}
.invitation-page-1.current .line-horizontal,.invitation-page.swiper-slide-active .line-horizontal {
 -webkit-transition:.6s;
 transition:.6s
}
.invitation-page-1.current .line-vertical,.invitation-page.swiper-slide-active .line-vertical {
 -webkit-transition:453ms .6s;
 transition:453ms .6s
}
.invitation-page-1.current .line-left,.invitation-page-1.current .line-right,.invitation-page.swiper-slide-active .line-left,.invitation-page.swiper-slide-active .line-right {
 -webkit-transition:282ms 1053ms;
 transition:282ms 1053ms
}
.invitation-page-1.current .dot-left,.invitation-page-1.current .dot-right,.invitation-page.swiper-slide-active .dot-left,.invitation-page.swiper-slide-active .dot-right {
 opacity:1;
 -webkit-transition:opacity .2s;
 transition:opacity .2s
}
.invitation-page-1.current .header,.invitation-page.swiper-slide-active .header {
 -webkit-transition:.6s 1s cubic-bezier(.17,.67,.36,1.23);
 transition:.6s 1s cubic-bezier(.17,.67,.36,1.23)
}
.invitation-page-1.current .title,.invitation-page.swiper-slide-active .title {
 -webkit-transition:all 450ms .8s,opacity 50ms .8s;
 transition:all 450ms .8s,opacity 50ms .8s
}
.invitation-page-1.current .aside,.invitation-page.swiper-slide-active .aside {
 -webkit-transition:all 450ms .6s,opacity 50ms .6s;
 transition:all 450ms .6s,opacity 50ms .6s
}
.invitation-trans {
 height:7.5rem;
 display:flex;
 -webkit-box-align:center;
 align-items:center;
 -webkit-box-pack:justify;
 justify-content:space-between;
 -webkit-transition:.5s;
 transition:.5s
}
.invitation-body .swiper-pagination,.invitation-mask {
 flex-direction:column;
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal
}
.invitation-trans .dot {
 border-radius:50%;
 background-color:#4EA8FB;
 opacity:0;
 -webkit-transition:.3s;
 transition:.3s;
 -webkit-transform:scale(4);
 transform:scale(4)
}
.invitation-trans .dot-1 {
 width:.5rem;
 height:.5rem;
 -webkit-transition-delay:2035ms;
 transition-delay:2035ms
}
.invitation-trans .dot-2 {
 width:.4rem;
 height:.4rem;
 -webkit-transition-delay:2185ms;
 transition-delay:2185ms
}
.invitation-trans .dot-3 {
 width:.3rem;
 height:.3rem;
 -webkit-transition-delay:2335ms;
 transition-delay:2335ms
}
.invitation-trans .dot-4 {
 width:.2rem;
 height:.2rem;
 -webkit-transition-delay:2485ms;
 transition-delay:2485ms
}
.invitation-trans aside {
 font-size:.7rem;
 color:#707D93;
 text-align:center;
 opacity:0;
 -webkit-transform:translateY(-2rem);
 transform:translateY(-2rem);
 -webkit-transition:.5s 2835ms;
 transition:.5s 2835ms
}
.invitation-trans aside p {
 -webkit-animation:buling 3s .1s linear infinite;
 animation:buling 3s .1s linear infinite
}
.invitation-envelope-box {
 -webkit-perspective:500;
 perspective:500
}
.invitation-envelope {
 width:13.5rem;
 height:8.5rem;
 position:relative;
 z-index:1;
 opacity:0;
 -webkit-transform:translate3d(0,-5rem,-10rem);
 transform:translate3d(0,-5rem,-10rem);
 -webkit-transition:.8s 1535ms cubic-bezier(.18,.88,.3,.95);
 transition:.8s 1535ms cubic-bezier(.18,.88,.3,.95)
}
.invitation-envelope .invitation-logo-box {
 position:absolute;
 top:48%;
 left:50%;
 margin-left:-.75rem;
 z-index:5
}
.invitation-envelope .invitation-logo-shadow {
 width:1.5rem;
 height:1.5rem;
 border-radius:50%;
 position:absolute;
 top:0;
 left:0;
 -webkit-box-shadow:0 0 10px rgba(255,255,255,.5),0 0 20px rgba(255,255,255,.5),0 0 25px rgba(255,255,255,.5),0 0 30px rgba(255,255,255,.5),0 0 35px rgba(255,255,255,.5);
 box-shadow:0 0 10px rgba(255,255,255,.5),0 0 20px rgba(255,255,255,.5),0 0 25px rgba(255,255,255,.5),0 0 30px rgba(255,255,255,.5),0 0 35px rgba(255,255,255,.5);
 -webkit-animation:shadow 2.6s .1s linear infinite;
 animation:shadow 2.6s .1s linear infinite;
 font-weight:100
}
.invitation-envelope-b {
 z-index:-1;
 background:#2176C4;
 height:60%;
 position:absolute;
 top:5%;
 left:2.5%;
 right:2.5%
}
.invitation-envelope-bg {
 width:100%;
 height:100%;
 position:absolute;
 background:url(./invitation/envelope-bg.svg) no-repeat;
 background-size:cover;
 z-index:3
}
.invitation-envelope-top {
 width:100%;
 height:4.75rem;
 position:absolute;
 background:url(./invitation/envelope-top.svg) no-repeat;
 background-size:cover;
 z-index:4;
 top:2%;
 left:0;
 -webkit-transition:.4s;
 transition:.4s;
 -webkit-transform-origin:50% 5.7%;
 transform-origin:50% 5.7%
}
#envelope-btn {
 -webkit-transition:.6s;
 transition:.6s
}
.invitation-envelope-photo {
 overflow:hidden;
 width:12rem;
 height:18rem;
 position:absolute;
 bottom:.5rem;
 z-index:2;
 left:50%;
 margin-left:-6rem;
 -webkit-transition:all .8s 350ms,height .8s 350ms cubic-bezier(0,0,.34,2.53);
 transition:all .8s 350ms,height .8s 350ms cubic-bezier(0,0,.34,2.53)
}
.invitation-envelope-photo img {
 width:100%
}
.invitation-envelope-photo .photo-layout {
 padding-top:10rem;
 width:12rem
}
.invitation-envelope-photo .photo-scroll {
 overflow:hidden;
 height:100%;
 width:13rem
}
.invitation-page-1.enve-open .invitation-envelope-top {
 -webkit-transform:rotateX(180deg);
 transform:rotateX(180deg);
 background-image:url(./invitation/envelope-topb.svg);
 z-index:1
}
.invitation-page-1.enve-open .invitation-trans {
 opacity:0;
 filter:blur(10px)
}
.invitation-page-1.enve-open .invitation-logo-box {
 z-index:2
}
.invitation-page-1.enve-open .invitation-envelope-photo {
 height:27.6rem
}
.invitation-page-1.enve-open .invitation-envelope-photo .photo-scroll {
 padding-bottom:4rem;
 overflow:scroll;
 -webkit-overflow-scrolling:touch
}
.invitation-page-1.current .dot {
 -webkit-transform:scale(1);
 transform:scale(1);
 opacity:.8
}
.invitation-page-1.current aside {
 opacity:1;
 -webkit-transform:translateY(0);
 transform:translateY(0)
}
.invitation-page-1.current .invitation-envelope {
 -webkit-transform:translate3d(0,0,0);
 transform:translate3d(0,0,0);
 opacity:1;
 z-index:-1
}
.invitation-body .swiper-pagination {
 display:-webkit-box;
 display:flex;
 -webkit-box-pack:center;
 justify-content:center;
 -webkit-box-align:center;
 align-items:center;
 position:fixed;
 right:.3rem;
 height:100%;
 top:0
}
.invitation-body .swiper-pagination-bullet {
 width:2px;
 height:8px;
 margin:4px;
 background-color:#CAE6FF;
 -webkit-transition:.3s;
 transition:.3s
}
.invitation-body .swiper-pagination-bullet.swiper-pagination-bullet-active {
 width:4px;
 height:14px;
 background-color:#4EA8FB
}
.invitation-arrow {
 width:.8rem;
 height:.8rem;
 background:url(./invitation/arrow.svg) no-repeat;
 background-size:100% auto;
 position:absolute;
 bottom:.5rem;
 left:50%;
 margin-left:-.5rem;
 -webkit-animation:zhuan 3s linear infinite;
 animation:zhuan 3s linear infinite;
 -webkit-transition:.5s;
 transition:.5s
}
.invitation-p h2,.invitation-p p {
 -webkit-transition:.5s;
 opacity:0
}
.invitation-p {
 width:15.3rem;
 color:#5D6980;
 line-height:1.3rem;
 padding:.5rem 0 0;
 position:relative
}
.invitation-p.no-top {
 padding-top:0
}
.invitation-p.no-top:before {
 display:none
}
.invitation-p h2 {
 font-weight:300;
 color:#4EA8FB;
 font-size:.7rem;
 margin-bottom:.5rem;
 -webkit-transform:translateX(2rem);
 transform:translateX(2rem);
 transition:.5s
}
.invitation-p p {
 -webkit-transform:translateX(2rem);
 transform:translateX(2rem);
 transition:.5s
}
.invitation-p:before {
 top:0;
 left:0;
 width:1rem;
 height:.25rem;
 position:absolute;
 background-color:#4EA8FB;
 opacity:0;
 -webkit-transform:translateX(1rem);
 transform:translateX(1rem);
 -webkit-transition:.5s;
 transition:.5s
}
.invitation-p aside {
 font-size:.7rem;
 color:#999;
 margin-top:.6rem;
 opacity:0;
 -webkit-transform:scale(.3);
 transform:scale(.3);
 -webkit-transition:.5s;
 transition:.5s
}
.invitation-p aside h3 {
 font-weight:300;
 color:#4EA8FB
}
.invitation-span {
 font-size:.6rem;
 color:#4EA8FB;
 position:relative;
 text-align:center;
 opacity:0;
 -webkit-transform:translateY(2rem);
 transform:translateY(2rem);
 -webkit-transition:.5s;
 transition:.5s
}
.invitation-span:before {
 content:'“';
 left:-.2rem
}
.invitation-span:after {
 content:'”';
 right:-.2rem
}
.invitation-span:after,.invitation-span:before {
 position:absolute;
 top:0;
 opacity:0;
 -webkit-transform:translateY(1.3rem);
 transform:translateY(1.3rem);
 -webkit-transition:.6s cubic-bezier(.17,.67,.21,1.56);
 transition:.6s cubic-bezier(.17,.67,.21,1.56)
}
.invitation-aside {
 font-size:.6rem;
 color:#BDBDBD;
 width:15.3rem;
 opacity:0;
 -webkit-transform:translateY(2rem);
 transform:translateY(2rem);
 -webkit-transition:.5s;
 transition:.5s
}
.invitation-aside .box {
 margin-right:-1rem
}
.invitation-aside .box img {
 width:1rem;
 height:1rem;
 -webkit-transform:translate(0,25%);
 transform:translate(0,25%);
 margin-right:.2rem
}
.invitation-aside span {
 color:#8B8B8B;
 position:relative;
 margin-right:1rem
}
.invitation-speech {
 height:7.4rem;
 opacity:0;
 -webkit-transition:.4s;
 transition:.4s;
 width:10.8rem;
 position:relative
}
.speech-item {
 width:1.2rem;
 height:1.2rem;
 position:absolute;
 background:center center no-repeat;
 background-size:cover;
 opacity:0;
 -webkit-transform:scale(.3);
 transform:scale(.3);
 -webkit-transition:.5s cubic-bezier(.17,.67,.21,1.56);
 transition:.5s cubic-bezier(.17,.67,.21,1.56)
}
.speech-item aside {
 color:#4EA8FB;
 font-size:.6rem;
 font-weight:400;
 width:3rem;
 position:absolute;
 bottom:-1rem;
 left:50%;
 margin-left:-1.5rem;
 text-align:center;
 -webkit-transition:.5s;
 transition:.5s
}
.speech-item-1 {
 width:1.55rem;
 height:1.55rem;
 background-image:url(./invitation/speech-1.svg);
 top:1rem;
 left:50%;
 margin-left:-.75rem
}
.speech-item-1 aside {
 font-size:.7rem;
 bottom:auto;
 top:-1rem;
 height:1rem;
 position:relative
}
.speech-item-1 aside span {
 text-align:center;
 top:0;
 left:0;
 right:0;
 bottom:0;
 position:absolute
}
.speech-item-1 aside .t2 {
 opacity:0
}
.speech-item-2 {
 background-image:url(./invitation/speech-2.svg);
 bottom:1rem;
 left:2rem
}
.speech-item-3 {
 background-image:url(./invitation/speech-3.svg);
 bottom:1rem;
 right:2rem
}
.swiper-slide-active .invitation-speech.step2 .speech-item-2 aside,.swiper-slide-active .invitation-speech.step2 .speech-item-3 aside {
 bottom:1.3rem
}
.speech-text {
 position:absolute;
 color:#5D6980;
 font-size:.6rem;
 opacity:0
}
.speech-text p {
 opacity:0;
 -webkit-transition:.3s;
 transition:.3s
}
.speech-text .line {
 border-top:1px dotted #ccc;
 height:1px;
 position:absolute;
 -webkit-transition:.5s;
 transition:.5s;
 width:0
}
.speech-text-1 {
 top:3.8rem;
 left:50%;
 margin-left:-1em;
 -webkit-transition:.3s;
 transition:.3s
}
.speech-text-1 .line-1 {
 -webkit-transform:rotate(90deg);
 transform:rotate(90deg);
 -webkit-transform-origin:0 0;
 transform-origin:0 0;
 left:50%;
 top:-1.1rem
}
.speech-text-1 .line-2 {
 top:100%;
 left:0;
 -webkit-transform-origin:0 0;
 transform-origin:0 0;
 -webkit-transform:rotate(149deg);
 transform:rotate(149deg)
}
.speech-text-1 .line-3 {
 right:0;
 top:100%;
 -webkit-transform-origin:100% 0;
 transform-origin:100% 0;
 -webkit-transform:rotate(-149deg);
 transform:rotate(-149deg)
}
.speech-text-2 {
 top:3.1rem;
 left:2.4rem
}
.speech-text-2 .line {
 left:-1.1rem
}
.speech-text-3 {
 top:3.1rem;
 right:2.3rem
}
.speech-text-3 .line {
 left:-1rem
}
.swiper-slide-active .invitation-speech.step0 .speech-item {
 -webkit-transition-timing-function:ease;
 transition-timing-function:ease;
 -webkit-transition-delay:1.5s;
 transition-delay:1.5s
}
.swiper-slide-active .invitation-speech.step0 .speech-item-1,.swiper-slide-active .invitation-speech.step0 .speech-item-2 aside,.swiper-slide-active .invitation-speech.step0 .speech-item-3 aside {
 -webkit-transition-delay:1.5s;
 transition-delay:1.5s
}
.swiper-slide-active .invitation-speech.step0 .speech-item-1 aside span {
 -webkit-transition:1ms 1.6s;
 transition:1ms 1.6s
}
.swiper-slide-active .invitation-speech.step0 .speech-text-2,.swiper-slide-active .invitation-speech.step0 .speech-text-2 .line,.swiper-slide-active .invitation-speech.step0 .speech-text-2 p,.swiper-slide-active .invitation-speech.step0 .speech-text-3,.swiper-slide-active .invitation-speech.step0 .speech-text-3 .line,.swiper-slide-active .invitation-speech.step0 .speech-text-3 p {
 -webkit-transition-delay:1.4s;
 transition-delay:1.4s
}
.swiper-slide-active .invitation-speech.step1 .speech-item {
 -webkit-transition-timing-function:ease;
 transition-timing-function:ease
}
.swiper-slide-active .invitation-speech.step1 .speech-text-1 {
 opacity:1
}
.swiper-slide-active .invitation-speech.step1 .speech-text-1 .line-1 {
 width:1.1rem
}
.swiper-slide-active .invitation-speech.step1 .speech-text-1 p {
 opacity:1;
 -webkit-transition-delay:.6s;
 transition-delay:.6s
}
.swiper-slide-active .invitation-speech.step1 .speech-text-1 .line-2,.swiper-slide-active .invitation-speech.step1 .speech-text-1 .line-3 {
 width:1.65rem;
 -webkit-transition-delay:1s;
 transition-delay:1s
}
.swiper-slide-active .invitation-speech.step2 .speech-item {
 -webkit-transition-timing-function:ease;
 transition-timing-function:ease
}
.swiper-slide-active .invitation-speech.step2 .speech-item-1 {
 -webkit-transform:translate(-5rem,2rem);
 transform:translate(-5rem,2rem);
 -webkit-transition-delay:0s;
 transition-delay:0s
}
.swiper-slide-active .invitation-speech.step2 .speech-item-1 aside .t1 {
 opacity:0
}
.swiper-slide-active .invitation-speech.step2 .speech-item-1 aside .t2 {
 opacity:1
}
.swiper-slide-active .invitation-speech.step2 .speech-item-2 {
 -webkit-transform:translate(7.8rem,-2rem);
 transform:translate(7.8rem,-2rem);
 -webkit-transition-delay:.2s;
 transition-delay:.2s
}
.swiper-slide-active .invitation-speech.step2 .speech-item-3 {
 -webkit-transform:translate(-2.6rem,-2rem);
 transform:translate(-2.6rem,-2rem);
 -webkit-transition-delay:.2s;
 transition-delay:.2s
}
.invitation-bg,.invitation-mask {
 position:fixed;
 top:0;
 left:0;
 bottom:0;
 right:0
}
.swiper-slide-active .invitation-speech.step2 .speech-text-2,.swiper-slide-active .invitation-speech.step2 .speech-text-3 {
 opacity:1;
 -webkit-transition-delay:0s;
 transition-delay:0s
}
.swiper-slide-active .invitation-speech.step2 .speech-text-2 p {
 opacity:1;
 -webkit-transition-delay:1.4s;
 transition-delay:1.4s
}
.swiper-slide-active .invitation-speech.step2 .speech-text-2 .line {
 width:3.6rem;
 -webkit-transition-delay:1s;
 transition-delay:1s
}
.swiper-slide-active .invitation-speech.step2 .speech-text-3 p {
 opacity:1;
 -webkit-transition-delay:2.2s;
 transition-delay:2.2s
}
.swiper-slide-active .invitation-speech.step2 .speech-text-3 .line {
 width:3.45rem;
 -webkit-transition-delay:1.8s;
 transition-delay:1.8s
}
.invitation-page.swiper-slide-active .speech-item-1 {
 -webkit-transition-delay:1535ms;
 transition-delay:1535ms
}
.invitation-page.swiper-slide-active .speech-item-2 {
 -webkit-transition-delay:1835ms;
 transition-delay:1835ms
}
.invitation-page.swiper-slide-active .speech-item-3 {
 -webkit-transition-delay:2035ms;
 transition-delay:2035ms
}
.invitation-page.swiper-slide-active .speech-item {
 opacity:1;
 -webkit-transform:scale(1);
 transform:scale(1)
}
.invitation-page.swiper-slide-active .invitation-speech {
 opacity:1
}
.invitation-page.swiper-slide-active .invitation-span {
 opacity:1;
 -webkit-transform:translateY(0);
 transform:translateY(0);
 -webkit-transition-delay:2135ms;
 transition-delay:2135ms
}
.invitation-page.swiper-slide-active .invitation-span:after,.invitation-page.swiper-slide-active .invitation-span:before {
 opacity:1;
 -webkit-transform:translateY(0);
 transform:translateY(0)
}
.invitation-page.swiper-slide-active .invitation-span:before {
 -webkit-transition-delay:2535ms;
 transition-delay:2535ms
}
.invitation-page.swiper-slide-active .invitation-span:after {
 -webkit-transition-delay:2735ms;
 transition-delay:2735ms
}
.invitation-page.swiper-slide-active .invitation-aside {
 opacity:1;
 -webkit-transform:translateY(0);
 transform:translateY(0);
 -webkit-transition-delay:2535ms;
 transition-delay:2535ms
}
.invitation-page.swiper-slide-active .invitation-p h2,.invitation-page.swiper-slide-active .invitation-p p,.invitation-page.swiper-slide-active .invitation-p:before {
 opacity:1;
 -webkit-transform:translateX(0);
 transform:translateX(0);
 -webkit-transition:.5s;
 transition:.5s
}
.invitation-page.swiper-slide-active .invitation-p aside {
 -webkit-transform:scale(1);
 transform:scale(1);
 opacity:1;
 -webkit-transition:.4s;
 transition:.4s
}
.invitation-page.swiper-slide-active .invitation-p.d-1 h2,.invitation-page.swiper-slide-active .invitation-p.d-1:before {
 -webkit-transition-delay:.3s;
 transition-delay:.3s
}
.invitation-page.swiper-slide-active .invitation-p.d-1 p {
 -webkit-transition-delay:.4s;
 transition-delay:.4s
}
.invitation-page.swiper-slide-active .invitation-p.d-1 aside {
 -webkit-transition-delay:1s;
 transition-delay:1s
}
.invitation-page.swiper-slide-active .invitation-p.d0 h2,.invitation-page.swiper-slide-active .invitation-p.d0:before {
 -webkit-transition-delay:.5s;
 transition-delay:.5s
}
.invitation-page.swiper-slide-active .invitation-p.d0 p {
 -webkit-transition-delay:.6s;
 transition-delay:.6s
}
.invitation-page.swiper-slide-active .invitation-p.d0 aside {
 -webkit-transition-delay:1.2s;
 transition-delay:1.2s
}
.invitation-page.swiper-slide-active .invitation-p.d1 h2,.invitation-page.swiper-slide-active .invitation-p.d1:before {
 -webkit-transition-delay:1635ms;
 transition-delay:1635ms
}
.invitation-page.swiper-slide-active .invitation-p.d1 p {
 -webkit-transition-delay:1735ms;
 transition-delay:1735ms
}
.invitation-page.swiper-slide-active .invitation-p.d1 aside {
 -webkit-transition-delay:2335ms;
 transition-delay:2335ms
}
.invitation-page.swiper-slide-active .invitation-p.d2 h2,.invitation-page.swiper-slide-active .invitation-p.d2:before {
 -webkit-transition-delay:1835ms;
 transition-delay:1835ms
}
.invitation-page.swiper-slide-active .invitation-p.d2 p {
 -webkit-transition-delay:1935ms;
 transition-delay:1935ms
}
.invitation-page.swiper-slide-active .invitation-p.d2 aside {
 -webkit-transition-delay:2535ms;
 transition-delay:2535ms
}
.invitation-page.swiper-slide-active .invitation-p.d3 h2,.invitation-page.swiper-slide-active .invitation-p.d3:before {
 -webkit-transition-delay:2035ms;
 transition-delay:2035ms
}
.invitation-page.swiper-slide-active .invitation-p.d3 p {
 -webkit-transition-delay:2135ms;
 transition-delay:2135ms
}
.invitation-page.swiper-slide-active .invitation-p.d3 aside {
 -webkit-transition-delay:2535ms;
 transition-delay:2535ms
}
.invitation-mask {
 z-index:999;
 background-color:#fff;
 color:#aaa;
 display:-webkit-box;
 display:flex;
 -webkit-box-pack:center;
 justify-content:center;
 text-align:center;
 padding-bottom:100px;
 -webkit-transition:.6s;
 transition:.6s
}
.invitation-mask.active {
 opacity:0
}
.spinner {
 margin:0 auto;
 width:50px;
 height:80px;
 text-align:center;
 font-size:10px
}
.spinner>div {
 background-color:#4EA8FB;
 height:100%;
 width:6px;
 display:inline-block;
 -webkit-animation:stretchdelay 1.2s infinite ease-in-out;
 animation:stretchdelay 1.2s infinite ease-in-out
}
.spinner .rect2 {
 -webkit-animation-delay:-1.1s;
 animation-delay:-1.1s
}
.spinner .rect3 {
 -webkit-animation-delay:-1s;
 animation-delay:-1s
}
.spinner .rect4 {
 -webkit-animation-delay:-.9s;
 animation-delay:-.9s
}
.spinner .rect5 {
 -webkit-animation-delay:-.8s;
 animation-delay:-.8s
}
.invitation-bg .item-1,.invitation-bg .item-2 {
 width:19.5rem;
 height:18.25rem;
 background:url(./invitation/bg-11.svg) no-repeat;
 background-size:cover;
 position:absolute;
 -webkit-animation:line 10s infinite ease-in-out;
 animation:line 10s infinite ease-in-out
}
.invitation-bg .item-1 {
 top:-10rem;
 left:.5rem;
 -webkit-animation-delay:11.4s;
 animation-delay:11.4s
}
.invitation-bg .item-2 {
 bottom:-5rem;
 right:-16rem;
 -webkit-animation-delay:10s;
 animation-delay:10s
}
.invitation-bg .item-3 {
 width:14rem;
 height:12.5rem;
 background:url(./invitation/bg-3.svg) no-repeat;
 background-size:cover;
 position:absolute;
 top:32%;
 left:-45%;
 -webkit-animation:line 10s infinite ease-in-out;
 animation:line 10s infinite ease-in-out;
 -webkit-animation-delay:11s;
 animation-delay:11s
}
.invitation-bg .item-4,.invitation-bg .item-5 {
 width:16.7rem;
 height:16.7rem;
 position:absolute;
 background:url(./invitation/bg-2.svg) no-repeat;
 background-size:cover;
 -webkit-animation:line 10s infinite ease-in-out;
 animation:line 10s infinite ease-in-out
}
.invitation-bg .item-4 {
 top:3%;
 right:-44%;
 -webkit-animation-delay:12s;
 animation-delay:12s
}
.invitation-bg .item-5 {
 top:77%;
 left:-65%;
 -webkit-animation-delay:11.8s;
 animation-delay:11.8s
}
@-webkit-keyframes stretchdelay {
 0%,100%,40% {
  -webkit-transform:scaleY(.4)
 }
 20% {
  -webkit-transform:scaleY(1)
 }
}
@keyframes stretchdelay {
 0%,100%,40% {
  transform:scaleY(.4);
  -webkit-transform:scaleY(.4)
 }
 20% {
  transform:scaleY(1);
  -webkit-transform:scaleY(1)
 }
}
@-webkit-keyframes dotleft {
 0% {
  -webkit-transform:translate(3.05rem,4.325rem);
  transform:translate(3.05rem,4.325rem)
 }
 45% {
  -webkit-transform:translate(-2.475rem,4.325rem);
  transform:translate(-2.475rem,4.325rem)
 }
 79% {
  -webkit-transform:translate(-2.475rem,0);
  transform:translate(-2.475rem,0)
 }
 100% {
  -webkit-transform:translate(0,0);
  transform:translate(0,0)
 }
}
@keyframes dotleft {
 0% {
  -webkit-transform:translate(3.05rem,4.325rem);
  transform:translate(3.05rem,4.325rem)
 }
 45% {
  -webkit-transform:translate(-2.475rem,4.325rem);
  transform:translate(-2.475rem,4.325rem)
 }
 79% {
  -webkit-transform:translate(-2.475rem,0);
  transform:translate(-2.475rem,0)
 }
 100% {
  -webkit-transform:translate(0,0);
  transform:translate(0,0)
 }
}
@-webkit-keyframes dotright {
 0% {
  -webkit-transform:translate(-3.05rem,4.325rem);
  transform:translate(-3.05rem,4.325rem)
 }
 45% {
  -webkit-transform:translate(2.475rem,4.325rem);
  transform:translate(2.475rem,4.325rem)
 }
 79% {
  -webkit-transform:translate(2.475rem,0);
  transform:translate(2.475rem,0)
 }
 100% {
  -webkit-transform:translate(0,0);
  transform:translate(0,0)
 }
}
@keyframes dotright {
 0% {
  -webkit-transform:translate(-3.05rem,4.325rem);
  transform:translate(-3.05rem,4.325rem)
 }
 45% {
  -webkit-transform:translate(2.475rem,4.325rem);
  transform:translate(2.475rem,4.325rem)
 }
 79% {
  -webkit-transform:translate(2.475rem,0);
  transform:translate(2.475rem,0)
 }
 100% {
  -webkit-transform:translate(0,0);
  transform:translate(0,0)
 }
}
@-webkit-keyframes zhuan {
 0% {
  -webkit-transform:rotateY(0);
  transform:rotateY(0)
 }
 100%,50% {
  -webkit-transform:rotateY(540deg);
  transform:rotateY(540deg)
 }
}
@keyframes zhuan {
 0% {
  -webkit-transform:rotateY(0);
  transform:rotateY(0)
 }
 100%,50% {
  -webkit-transform:rotateY(540deg);
  transform:rotateY(540deg)
 }
}
@-webkit-keyframes shadow {
 0%,100%,50% {
  -webkit-transform:scale(.7);
  transform:scale(.7)
 }
 25%,75% {
  -webkit-transform:scale(1);
  transform:scale(1)
 }
}
@keyframes shadow {
 0%,100%,50% {
  -webkit-transform:scale(.7);
  transform:scale(.7)
 }
 25%,75% {
  -webkit-transform:scale(1);
  transform:scale(1)
 }
}
@-webkit-keyframes buling {
 0%,100%,30%,60% {
  opacity:.7
 }
 15%,45% {
  opacity:0
 }
}
@keyframes buling {
 0%,100%,30%,60% {
  opacity:.7
 }
 15%,45% {
  opacity:0
 }
}
@-webkit-keyframes line {
 0%,100%,40% {
  -webkit-transform:translate(0,0);
  transform:translate(0,0)
 }
 20% {
  -webkit-transform:translate(-170%,170%);
  transform:translate(-170%,170%)
 }
 21% {
  opacity:0
 }
 22% {
  opacity:0;
  -webkit-transform:translate(170%,-170%);
  transform:translate(170%,-170%)
 }
 23% {
  opacity:1
 }
}
@keyframes line {
 0%,100%,40% {
  -webkit-transform:translate(0,0);
  transform:translate(0,0)
 }
 20% {
  -webkit-transform:translate(-170%,170%);
  transform:translate(-170%,170%)
 }
 21% {
  opacity:0
 }
 22% {
  opacity:0;
  -webkit-transform:translate(170%,-170%);
  transform:translate(170%,-170%)
 }
 23% {
  opacity:1
 }
}
.introduce-swiper .swiper-slide {
 display:-webkit-box;
 display:flex;
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 flex-direction:column;
 position:relative
}
.introduce-swiper .introduce-box {
 position:relative
}
.introduce-swiper .introduce-box img {
 width:100%;
 -webkit-transition:.5s;
 transition:.5s;
 opacity:0
}
.introduce-swiper .introduce-text-area {
 -webkit-box-flex:1;
 flex:1;
 padding:2rem 1.2rem
}
.introduce-swiper .introduce-text-area h2 {
 font-size:1.3rem;
 font-weight:300;
 color:#4C4C4C;
 margin-bottom:.8rem
}
.introduce-swiper .introduce-text-area p {
 font-size:14px;
 color:#7F7F7F;
 line-height:1.2rem
}
.introduce-swiper .introduce-bl {
 width:6.1rem;
 height:1rem;
 position:absolute;
 bottom:3.3rem;
 left:1.6rem;
 background:center bottom no-repeat;
 background-size:100% auto
}
.introduce-swiper .introduce-bl.bl-1 {
 background-image:url(./introduce/1-1.svg)
}
.introduce-swiper .introduce-bl.bl-2 {
 background-image:url(./introduce/2-1.svg)
}
.introduce-swiper .introduce-bl.bl-3 {
 background-image:url(./introduce/3-1.svg)
}
.introduce-bg {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 color:#777
}
.introduce-bg>div {
 -webkit-transition:.8s;
 transition:.8s;
 position:absolute
}
.introduce-bg .item-rect {
 width:1.4rem;
 height:1.4rem;
 border:.3rem solid;
 right:1.8rem;
 bottom:5.7rem
}
.introduce-bg .item-circle {
 height:2.1rem;
 border:.2rem solid;
 right:4.5rem;
 bottom:3.5rem
}
.introduce-bg .item-circle:before {
 content:'';
 position:absolute;
 height:2.1rem;
 border:.2rem solid;
 top:-.2rem;
 left:-.2rem;
 -webkit-transform:rotate(90deg);
 transform:rotate(90deg);
 -webkit-box-sizing:border-box;
 box-sizing:border-box
}
.introduce-bg .item-f {
 right:1.9rem;
 bottom:2rem;
 width:1.6rem;
 height:1.6rem
}
.introduce-bg .item-f>div {
 width:1.6rem;
 height:1.6rem;
 opacity:0;
 -webkit-transition:.8s;
 transition:.8s;
 position:absolute;
 bottom:0;
 right:0;
 background:center center no-repeat;
 background-size:cover
}
.introduce-body.swiper-0-active .f-1,.introduce-body.swiper-1-active .f-2,.introduce-body.swiper-2-active .f-3 {
 opacity:1
}
.introduce-bg .item-f .f-1 {
 background-image:url(./introduce/1-2.svg)
}
.introduce-bg .item-f .f-2 {
 background-image:url(./introduce/2-2.svg)
}
.introduce-bg .item-f .f-3 {
 background-image:url(./introduce/3-2.svg)
}
.introduce-body .swiper-pagination {
 height:.4rem;
 position:absolute;
 bottom:.8rem;
 left:0;
 right:0;
 text-align:center
}
.introduce-body .swiper-pagination .swiper-pagination-bullet {
 width:.4rem;
 height:.4rem;
 margin:0 .2rem;
 display:inline-block;
 -webkit-transition:.5s;
 transition:.5s
}
.introduce-body .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
 width:.9rem
}
.introduce-body.swiper-0-active .swiper-pagination-bullet {
 background-color:#A2C6F2
}
.introduce-body.swiper-0-active .introduce-bg {
 color:#468DE5
}
.introduce-body.swiper-0-active .item-circle {
 -webkit-transform:rotate(0);
 transform:rotate(0)
}
.introduce-body.swiper-0-active .item-f,.introduce-body.swiper-0-active .item-rect {
 -webkit-transform:rotate(720deg);
 transform:rotate(720deg);
 border-color:#468DE5
}
.introduce-body.swiper-1-active .swiper-pagination-bullet {
 background-color:#F1B4B4
}
.introduce-body.swiper-1-active .introduce-bg {
 color:#CB637E
}
.introduce-body.swiper-1-active .item-circle {
 -webkit-transform:rotate(360deg);
 transform:rotate(360deg)
}
.introduce-body.swiper-1-active .item-f,.introduce-body.swiper-1-active .item-rect {
 -webkit-transform:rotate(360deg);
 transform:rotate(360deg);
 border-color:#CB637E
}
.introduce-body.swiper-2-active .swiper-pagination-bullet {
 background-color:#F9D0A1
}
.introduce-body.swiper-2-active .introduce-bg {
 color:#F3A144
}
.introduce-body.swiper-2-active .item-circle {
 -webkit-transform:rotate(720deg);
 transform:rotate(720deg)
}
.introduce-body.swiper-2-active .item-f,.introduce-body.swiper-2-active .item-rect {
 -webkit-transform:rotate(0);
 transform:rotate(0);
 border-color:#F3A144
}
.main-layout-2 .btn {
    color: #4FE3E1;
}
.copyright {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    bottom: 1rem;
  	text-align: center;
    transition: .8s;
   	position: absolute;
}