body, h1, h2, h3, h4, ol, p, ul { margin: 0px; }
.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; text-size-adjust: none; }
ol, ul { padding-left: 0px; list-style-type: none; }
a img, img { border: 0px; }
em, i { font-style: normal; }
ul { list-style: none; padding: 0px; }
mark { background: 0px 0px; }
a, body, button, h1, h2, h3, h4, h5, h6, input, select, textarea { color: rgb(51, 51, 51); font-family: 微软雅黑, Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif; }
input:focus, select:focus, textarea:focus { outline: 0px; }
a { text-decoration: none; }
a:hover { color: rgb(232, 29, 98); }
* { box-sizing: border-box; }
.fix::after { display: block; content: "clear"; height: 0px; clear: both; overflow: hidden; visibility: hidden; }
.client-bg-box::after, .client-text-area p::before, .invitation-p::before { content: ""; }
.bgw { background-color: rgb(255, 255, 255); }
.bgg { background-color: rgb(245, 245, 245); }
.rel { position: relative; }
.abs { position: absolute; }
.ovh { overflow: hidden; }
.z1 { z-index: 1; }
.op0 { opacity: 0; }
.m0 { margin-top: 0px !important; }
#horizontalMask { position: fixed; inset: 0px; z-index: 9999; background-color: rgb(255, 255, 255); display: none; }
.horizontal-box { height: 10rem; width: 7.5rem; position: absolute; top: 50%; left: 50%; margin: -5rem 0px 0px -3.75rem; }
.horizontal-box aside { position: absolute; top: 6rem; left: 0px; right: 0px; font-size: 0.7rem; height: 1rem; text-align: center; overflow: hidden; color: rgb(78, 168, 251); opacity: 0.6; }
.horizontal-box aside div { animation: 3s linear 2s infinite normal none running orienttext; height: 100%; }
.horizontal-box aside span { display: block; line-height: 1rem; }
.horizontal-phone { height: 3.25rem; width: 5rem; background: url("./phone.svg") 0% 0% / 100% no-repeat; top: 1rem; left: 50%; margin-left: -2.5rem; position: absolute; animation: 3s linear 2s infinite normal none running orient; }
.horizontal-logo { position: absolute; top: 1.7rem; left: 50%; width: 1.2rem; height: 1.2rem; margin-left: -0.6rem; background: url("./mask-1.png") 0% 0% / 100% no-repeat; animation: 3s linear 2s infinite normal none running orientlogo; }
#msgBox, .confirm-box, .mask { position: fixed; }
@-webkit-keyframes orient { 
  50% { transform: rotate(-90deg); }
  0% { transform: rotate(0deg); }
  90%, 0% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-90deg); }
}
@keyframes orient { 
  50% { transform: rotate(-90deg); }
  0% { transform: rotate(0deg); }
  90%, 0% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-90deg); }
}
@-webkit-keyframes orientlogo { 
  50%, 0% { background-image: url("./mask-2.png"); }
  55% { background-image: url("./mask-1.png"); }
  90%, 0% { opacity: 1; }
  100% { opacity: 0; background-image: url("./mask-2.png"); }
}
@keyframes orientlogo { 
  50%, 0% { background-image: url("./mask-2.png"); }
  55% { background-image: url("./mask-1.png"); }
  90%, 0% { opacity: 1; }
  100% { opacity: 0; background-image: url("./mask-2.png"); }
}
@-webkit-keyframes orienttext { 
  0%, 100%, 50% { transform: translateY(0px); opacity: 1; }
  52%, 98% { transform: translateY(0px); opacity: 0; }
  53%, 97% { transform: translateY(-100%); opacity: 0; }
  55% { opacity: 1; transform: translateY(-100%); }
  95% { transform: translateY(-100%); opacity: 1; }
}
@keyframes orienttext { 
  0%, 100%, 50% { transform: translateY(0px); opacity: 1; }
  52%, 98% { transform: translateY(0px); opacity: 0; }
  53%, 97% { transform: translateY(-100%); opacity: 0; }
  55% { opacity: 1; transform: translateY(-100%); }
  95% { transform: translateY(-100%); opacity: 1; }
}
#msgBox { width: 100%; height: 3.2rem; top: -3.5rem; left: 0px; right: 0px; z-index: 999; box-shadow: rgba(0, 0, 0, 0.14) 0px 1px 2px 0px; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; opacity: 0.9; color: rgb(255, 255, 255); transition: all 0.2s ease 0s; }
#msgBox.success { background-color: rgb(76, 175, 80); }
#msgBox.error { background-color: rgb(239, 102, 102); }
#msgBox.active { top: 0px; }
.confirm-box { width: 14rem; left: 50%; margin-left: -7rem; background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px; z-index: 1000; border-radius: 0.5rem; overflow: hidden; transform: translateY(-50%); transition: all 0.5s ease 0s; top: -40%; opacity: 0; }
.confirm-box.active { opacity: 1; top: 40%; }
.main-bg, .main-layout, .mask { inset: 0px; }
.confirm-content { padding: 1rem 1.1rem; border-bottom: 1px solid rgb(238, 238, 238); }
.confirm-content h2 { font-size: 0.8rem; font-weight: 700; margin-bottom: 0.6rem; }
.confirm-content p { font-size: 0.6rem; color: rgb(83, 83, 83); }
.confirm-bar { display: flex; }
.confirm-bar > div { width: 50%; height: 2.1rem; line-height: 2.1rem; font-size: 0.7rem; transition: all 0.3s ease 0s; cursor: pointer; }
.confirm-bar > div:active { background-color: rgb(239, 239, 239); }
.confirm-cancel { color: rgb(61, 150, 255); border-right: 1px solid rgb(238, 238, 238); }
.confirm-submit { color: rgb(61, 150, 255); }
.mask { background-color: rgb(255, 255, 255); z-index: 999; transition: all 0.5s ease 0s; opacity: 0; display: none; }
.btn, .main-bg, .main-layout, .page-box { position: absolute; }
.mask.active { opacity: 0.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: 0.8rem; }
.main-layout { transition: all 2s ease 0s; z-index: 1; overflow: hidden; }
.main-bg { z-index: -1; }
.cricle-bg { height: 120%; width: 300%; background: url("") center center / auto 100% no-repeat; transform: translate(-27%, 5%); transition: all 0.8s cubic-bezier(0.24, 0.8, 0.22, 1.01) 0s; }
.btn, .client-bg-box { transition: all 0.8s ease 0s; }
.btn { width: 12rem; height: 2.4rem; line-height: 2.4rem; font-size: 1rem; background: rgb(77, 77, 77); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px; border-radius: 10px; bottom: 3rem; left: 50%; margin-left: -6rem; user-select: none; transition: all 0.8s ease 0s; }
.btn:active { background: rgb(57, 57, 57); }
.page-box { top: 13.5%; bottom: 20%; width: 100%; 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: 0.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: 0px; left: 0px; right: 0px; transition: all 0.5s ease 0s; }
.page-box .logo { height: 8.4rem; background: center center / auto 100% no-repeat; transition: all 2s ease 0s; position: relative; }
.cricle-item-1 { width: 12rem; height: 12rem; border-radius: 50%; position: absolute; transition: all 0.8s cubic-bezier(0.24, 0.8, 0.22, 1.01) 0s, background-color 2s ease 0s; }
.cricle-item-2 { width: 25.8rem; height: 25.8rem; border-radius: 50%; position: absolute; transition: all 0.8s cubic-bezier(0.24, 0.8, 0.22, 1.01) 0s, background-color 2s ease 0s; }
.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: 0px; }
.suspension-item-1 { position: absolute; top: 0px; left: 0px; width: 8rem; height: 6rem; margin-left: -2rem; transition: all 0.8s ease 0.1s; }
.suspension-item-1 > div { position: absolute; inset: 0px; background: center center / auto 100% no-repeat; transition: all 2s ease 0s; 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: 0px; left: 2.2rem; width: 4.5rem; height: 4.5rem; border-radius: 0.6rem; transition: all 1s ease 0s; }
.suspension-item-3 { position: absolute; top: 1rem; left: 1rem; width: 2.3rem; height: 2.3rem; border-radius: 0.4rem; transition: all 0.5s ease 0.3s; }
.suspension-item-4 { position: absolute; right: -1.5rem; bottom: 0px; width: 5rem; height: 5rem; border-radius: 50%; transition: all 0.8s ease 0.2s; }
.logo > div { position: absolute; inset: 0px; background: center center / auto 100% no-repeat; transition: all 2s ease 0s; 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: rgb(135, 232, 108); }
.main-layout-1 .logo-1 { opacity: 1; }
.main-layout-1 .btn { color: rgb(216, 255, 12); }
.main-layout-1 .cricle-item-1, .main-layout-1 .cricle-item-2 { background-color: rgb(0, 210, 153); }
.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 { transform: rotate(-330deg); }
.main-layout-1 .suspension-item-3 { transform: rotate(15deg); }
.main-layout-1 .suspension-item-2, .main-layout-1 .suspension-item-3 { background-color: rgb(150, 89, 249); }
.main-layout-1 .suspension-item-4 { background-color: rgb(216, 255, 12); }
.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; transform: translate(0px); }
.main-layout-2 { background: rgb(240, 97, 169); }
.main-layout-2 .logo-2 { opacity: 1; }
.main-layout-2 .btn { color: rgb(79, 227, 225); }
.main-layout-2 .cricle-item-1, .main-layout-2 .cricle-item-2 { background-color: rgb(232, 61, 122); }
.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: rgb(255, 217, 0); }
.main-layout-2 .suspension-item-3 { left: 80%; transform: rotate(30deg); }
.main-layout-2 .suspension-item-2 { width: 3rem; height: 3rem; left: -7.5rem; bottom: 6.5rem; transform: rotate(-330deg); }
.main-layout-2 .suspension-item-4 { background-color: rgb(79, 227, 225); }
.main-layout-2 .suspension-item-1 { transform: scale(0.8) rotate(-30deg) translate(-3rem, -2rem); }
.main-layout-2 .sus-2 { opacity: 1; }
.main-layout-2 .cricle-bg { transform: translate(-33%, -35%) rotate(-16deg); }
.main-layout-2 .text-1 .text-1-2, .main-layout-2 .text-2 .text-2-2 { opacity: 1; transform: translate(0px); }
.main-layout-3 { background: rgb(92, 208, 226); }
.main-layout-3 .logo-3 { opacity: 1; }
.main-layout-3 .btn { color: rgb(0, 253, 142); }
.main-layout-3 .cricle-item-1, .main-layout-3 .cricle-item-2 { background-color: rgb(114, 105, 205); }
.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: rgb(245, 77, 165); }
.main-layout-3 .suspension-item-2 { width: 8rem; height: 8rem; bottom: 100%; transform: rotate(-24deg); left: 3rem; background-color: rgb(0, 253, 142); }
.main-layout-3 .suspension-item-3 { left: 80%; top: 55%; transform: rotate(45deg); }
.main-layout-3 .suspension-item-4 { background-color: rgb(245, 77, 165); bottom: 80%; right: 56%; transform: scale(0.9); }
.main-layout-3 .suspension-item-1 { transform: rotate(47deg) scale(0.6); top: 60%; left: -7rem; }
.main-layout-3 .sus-3 { opacity: 1; }
.main-layout-3 .cricle-bg { transform: translate(-11%, -22%) rotate(33deg); }
.main-layout-3 .text-1 .text-1-3, .main-layout-3 .text-2 .text-2-3 { opacity: 1; transform: translate(0px); }
.main-layout-4 { background: rgb(255, 221, 0); }
.main-layout-4 .logo-4 { opacity: 1; }
.main-layout-4 .btn { color: rgb(255, 232, 11); }
.main-layout-4 .cricle-item-1, .main-layout-4 .cricle-item-2 { background-color: rgb(255, 137, 0); }
.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: rgb(185, 255, 0); }
.main-layout-4 .suspension-item-2 { transform: scale(0.5) rotate(-30deg); }
.main-layout-4 .suspension-item-3 { background-color: rgb(165, 59, 239); top: 70%; transform: rotate(15deg); }
.main-layout-4 .suspension-item-4 { background-color: rgb(165, 59, 239); transform: scale(1.4) translate(1rem, 0px); }
.main-layout-4 .suspension-item-1 { transform: rotate(-30deg) translate(-4rem, -3rem); }
.main-layout-4 .sus-4 { opacity: 1; }
.main-layout-4 .cricle-bg { transform: translate(-53%, -21%) rotate(-49deg); }
.main-layout-4 .text-1 .text-1-4, .main-layout-4 .text-2 .text-2-4 { opacity: 1; transform: translate(0px); }
@-webkit-keyframes rotate { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes rotate { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes rerotate { 
  100% { transform: rotate(0deg); }
  0% { transform: rotate(360deg); }
}
@keyframes rerotate { 
  100% { transform: rotate(0deg); }
  0% { 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: flex; transition-property: transform, -webkit-transform; box-sizing: content-box; }
.swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0px, 0px); }
.swiper-container-multirow > .swiper-wrapper { flex-wrap: wrap; }
.swiper-container-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0px auto; }
.swiper-slide { flex-shrink: 0; position: relative; }
.client-swiper, .introduce-swiper, .invitation-swiper { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow: hidden; }
.client-bg { position: absolute; top: 0px; left: 0px; overflow: hidden; }
.client-bg-box { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background-color: rgb(249, 218, 83); transform: rotate(-8deg); transition: all 0.8s ease 0s; }
.client-bg-box::after { position: absolute; width: 100%; left: 0px; bottom: 0px; height: 50%; background-color: rgb(237, 117, 56); transition: all 0.8s ease 0s; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 6px; }
.client-bg-item { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: center center / 12.2rem no-repeat; opacity: 0; transform: rotate(-180deg) scale(0.5); transition: all 1.2s cubic-bezier(0.24, 0.8, 0.22, 1.01) 0s; }
.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 0px 0px -2.65rem; }
.client-logo > div { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: center center / cover no-repeat; opacity: 0; transition: all 1.2s cubic-bezier(0.24, 0.8, 0.22, 1.01) 0s; }
.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: rgb(249, 218, 83); }
.swiper-0-active .client-bg-box::after { background-color: rgb(237, 117, 56); }
.swiper-0-active .client-bg-1, .swiper-0-active .client-logo-1 { opacity: 1; transform: rotate(0deg) scale(1); }
.swiper-1-active .client-bg-box { background-color: rgb(63, 116, 255); }
.swiper-1-active .client-bg-box::after { background-color: rgb(98, 206, 218); }
.swiper-1-active .client-bg-2, .swiper-1-active .client-logo-2 { opacity: 1; transform: rotate(0deg) scale(1); }
.swiper-2-active .client-bg-box { background-color: rgb(240, 97, 169); }
.swiper-2-active .client-bg-box::after { background-color: rgb(232, 61, 122); }
.swiper-2-active .client-bg-3, .swiper-2-active .client-logo-3 { opacity: 1; transform: rotate(0deg) scale(1); }
.swiper-3-active .client-bg-box { background-color: rgb(181, 97, 240); }
.swiper-3-active .client-bg-box::after { background-color: rgb(133, 45, 195); }
.swiper-3-active .client-bg-4, .swiper-3-active .client-logo-4 { opacity: 1; transform: rotate(0deg) scale(1); }
.swiper-4-active .client-bg-box { background-color: rgb(179, 243, 145); }
.swiper-4-active .client-bg-box::after { background-color: rgb(126, 211, 33); }
.swiper-4-active .client-bg-5, .swiper-4-active .client-logo-5 { opacity: 1; transform: rotate(0deg) scale(1); }
.client-body .swiper-pagination { position: absolute; bottom: 1rem; left: 0px; width: 100%; text-align: center; }
.client-body .swiper-pagination-bullet { display: inline-block; width: 0.4rem; height: 0.4rem; border-radius: 0.2rem; opacity: 0.3; transition: all 0.6s ease 0s; background-color: rgb(255, 255, 255); margin: 0px 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: 0px; width: 100%; left: 0px; color: rgb(255, 255, 255); padding: 1.2rem; }
.client-text-area h1, .client-text-area h2 { color: rgb(255, 255, 255); }
.client-text-area h1 { font-size: 1.5rem; margin-bottom: 1.8rem; }
.client-text-area h2 { font-size: 1rem; margin-bottom: 0.8rem; }
.client-text-area p { font-size: 0.8rem; line-height: 1.3rem; padding-left: 1rem; position: relative; margin-bottom: 0.8rem; }
.client-text-area p::before { position: absolute; height: 0.5rem; width: 0.5rem; border-radius: 50%; background: rgb(255, 255, 255); top: 0.3rem; left: 0px; }
.invitation-swiper .swiper-slide { display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; padding: 1rem 0px 2rem; }
.invitation-logo { width: 1.5rem; height: 1.5rem; background: url("./invitation/logo.png") 0% 0% / cover no-repeat; }
.invitation-banner-box { width: 11.9rem; height: 5rem; position: relative; text-align: center; perspective: 500px; margin-top: 2rem; }
.invitation-banner-box > div { position: absolute; }
.invitation-banner-box .invitation-logo { top: -2rem; left: 50%; margin-left: -0.75rem; opacity: 0; transform: scale(0.3); }
.invitation-banner-box .line-horizontal { width: 100%; height: 0.15rem; background-color: rgb(78, 168, 251); bottom: 0px; left: 0px; transform: scale(0, 1); }
.invitation-banner-box .line-vertical { height: 4.5rem; width: 100%; border-width: 0px 0.15rem; border-right-style: solid; border-left-style: solid; border-right-color: rgb(78, 168, 251); border-left-color: rgb(78, 168, 251); border-image: initial; border-top-style: initial; border-top-color: initial; border-bottom-style: initial; border-bottom-color: initial; bottom: 0px; left: 0px; transform: scale(1, 0); transform-origin: 50% 100%; }
.invitation-banner-box .inner-box { height: 4.5rem; width: 100%; bottom: 0px; left: 0px; z-index: -1; background-color: rgb(255, 255, 255); }
.invitation-banner-box .line-left, .invitation-banner-box .line-right { width: 2.4rem; height: 0.15rem; background-color: rgb(78, 168, 251); top: 0.5rem; transform: scale(0, 1); }
.invitation-banner-box .line-left { left: 0px; transform-origin: 0px 50%; }
.invitation-banner-box .line-right { right: 0px; transform-origin: 100% 50%; }
.invitation-banner-box .dot-left, .invitation-banner-box .dot-right { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: rgb(78, 168, 251); top: 0.325rem; opacity: 0; transition: opacity 0.2s ease 0s; }
.invitation-banner-box .dot-left { left: 2.3rem; }
.invitation-banner-box .dot-right { right: 2.3rem; }
.invitation-banner-box .header { top: 0.1rem; width: 100%; height: 0.55rem; transform: scale(0, 1); }
.invitation-banner-box .header.tb { height: 0.7rem; }
.invitation-banner-box .header.ts { height: 0.52rem; }
.invitation-banner-box .header img { height: 100%; margin: 0px auto; }
.invitation-banner-box .title { font-size: 1.6rem; color: rgb(93, 105, 128); width: 100%; left: 0px; top: 1.3rem; transform: rotateX(-90deg); opacity: 0; }
.invitation-banner-box .title.ts { font-size: 1.4rem; top: 1.4rem; }
.invitation-banner-box .aside { width: 100%; left: 0px; bottom: 0.75rem; height: 0.7rem; transform: rotateX(-90deg); opacity: 0; }
.invitation-banner-box .aside img { height: 100%; margin: 0px 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 { transform: scale(1, 1); }
.invitation-page-1.current .dot-left, .invitation-page.swiper-slide-active .dot-left { animation: 1335ms ease 0s 1 normal none running dotleft; }
.invitation-page-1.current .dot-right, .invitation-page.swiper-slide-active .dot-right { animation: 1335ms ease 0s 1 normal none running dotright; }
.invitation-page-1.current .aside, .invitation-page-1.current .title, .invitation-page.swiper-slide-active .aside, .invitation-page.swiper-slide-active .title { transform: rotateX(0deg) 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; transform: scale(1, 1); }
.invitation-page-1.current .invitation-logo, .invitation-page.swiper-slide-active .invitation-logo { transition: all 0.5s cubic-bezier(0.17, 0.67, 0.36, 1.23) 0.9s; }
.invitation-page-1.current .line-horizontal, .invitation-page.swiper-slide-active .line-horizontal { transition: all 0.6s ease 0s; }
.invitation-page-1.current .line-vertical, .invitation-page.swiper-slide-active .line-vertical { transition: all 453ms ease 0.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 { transition: all 282ms ease 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; transition: opacity 0.2s ease 0s; }
.invitation-page-1.current .header, .invitation-page.swiper-slide-active .header { transition: all 0.6s cubic-bezier(0.17, 0.67, 0.36, 1.23) 1s; }
.invitation-page-1.current .title, .invitation-page.swiper-slide-active .title { transition: all 450ms ease 0.8s, opacity 50ms ease 0.8s; }
.invitation-page-1.current .aside, .invitation-page.swiper-slide-active .aside { transition: all 450ms ease 0.6s, opacity 50ms ease 0.6s; }
.invitation-trans { height: 7.5rem; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; transition: all 0.5s ease 0s; }
.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: rgb(78, 168, 251); opacity: 0; transition: all 0.3s ease 0s; transform: scale(4); }
.invitation-trans .dot-1 { width: 0.5rem; height: 0.5rem; transition-delay: 2035ms; }
.invitation-trans .dot-2 { width: 0.4rem; height: 0.4rem; transition-delay: 2185ms; }
.invitation-trans .dot-3 { width: 0.3rem; height: 0.3rem; transition-delay: 2335ms; }
.invitation-trans .dot-4 { width: 0.2rem; height: 0.2rem; transition-delay: 2485ms; }
.invitation-trans aside { font-size: 0.7rem; color: rgb(112, 125, 147); text-align: center; opacity: 0; transform: translateY(-2rem); transition: all 0.5s ease 2835ms; }
.invitation-trans aside p { animation: 3s linear 0.1s infinite normal none running buling; }
.invitation-envelope-box { perspective: 500px; }
.invitation-envelope { width: 13.5rem; height: 8.5rem; position: relative; z-index: 1; opacity: 0; transform: translate3d(0px, -5rem, -10rem); transition: all 0.8s cubic-bezier(0.18, 0.88, 0.3, 0.95) 1535ms; }
.invitation-envelope .invitation-logo-box { position: absolute; top: 48%; left: 50%; margin-left: -0.75rem; z-index: 5; }
.invitation-envelope .invitation-logo-shadow { width: 1.5rem; height: 1.5rem; border-radius: 50%; position: absolute; top: 0px; left: 0px; box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 10px, rgba(255, 255, 255, 0.5) 0px 0px 20px, rgba(255, 255, 255, 0.5) 0px 0px 25px, rgba(255, 255, 255, 0.5) 0px 0px 30px, rgba(255, 255, 255, 0.5) 0px 0px 35px; animation: 2.6s linear 0.1s infinite normal none running shadow; font-weight: 100; }
.invitation-envelope-b { z-index: -1; background: rgb(33, 118, 196); 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") 0% 0% / cover no-repeat; z-index: 3; }
.invitation-envelope-top { width: 100%; height: 4.75rem; position: absolute; background: url("./invitation/envelope-top.svg") 0% 0% / cover no-repeat; z-index: 4; top: 2%; left: 0px; transition: all 0.4s ease 0s; transform-origin: 50% 5.7%; }
#envelope-btn { transition: all 0.6s ease 0s; }
.invitation-envelope-photo { overflow: hidden; width: 12rem; height: 18rem; position: absolute; bottom: 0.5rem; z-index: 2; left: 50%; margin-left: -6rem; transition: all 0.8s ease 350ms, height 0.8s cubic-bezier(0, 0, 0.34, 2.53) 350ms; }
.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 { 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; }
.invitation-page-1.current .dot { transform: scale(1); opacity: 0.8; }
.invitation-page-1.current aside { opacity: 1; transform: translateY(0px); }
.invitation-page-1.current .invitation-envelope { transform: translate3d(0px, 0px, 0px); opacity: 1; z-index: -1; }
.invitation-body .swiper-pagination { display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; position: fixed; right: 0.3rem; height: 100%; top: 0px; }
.invitation-body .swiper-pagination-bullet { width: 2px; height: 8px; margin: 4px; background-color: rgb(202, 230, 255); transition: all 0.3s ease 0s; }
.invitation-body .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 4px; height: 14px; background-color: rgb(78, 168, 251); }
.invitation-arrow { width: 0.8rem; height: 0.8rem; background: url("./invitation/arrow.svg") 0% 0% / 100% no-repeat; position: absolute; bottom: 0.5rem; left: 50%; margin-left: -0.5rem; animation: 3s linear 0s infinite normal none running zhuan; transition: all 0.5s ease 0s; }
.invitation-p h2, .invitation-p p { transition: all 0.5s ease 0s; opacity: 0; }
.invitation-p { width: 15.3rem; color: rgb(93, 105, 128); line-height: 1.3rem; padding: 0.5rem 0px 0px; position: relative; }
.invitation-p.no-top { padding-top: 0px; }
.invitation-p.no-top::before { display: none; }
.invitation-p h2 { font-weight: 300; color: rgb(78, 168, 251); font-size: 0.7rem; margin-bottom: 0.5rem; transform: translateX(2rem); transition: all 0.5s ease 0s; }
.invitation-p p { transform: translateX(2rem); transition: all 0.5s ease 0s; }
.invitation-p::before { top: 0px; left: 0px; width: 1rem; height: 0.25rem; position: absolute; background-color: rgb(78, 168, 251); opacity: 0; transform: translateX(1rem); transition: all 0.5s ease 0s; }
.invitation-p aside { font-size: 0.7rem; color: rgb(153, 153, 153); margin-top: 0.6rem; opacity: 0; transform: scale(0.3); transition: all 0.5s ease 0s; }
.invitation-p aside h3 { font-weight: 300; color: rgb(78, 168, 251); }
.invitation-span { font-size: 0.6rem; color: rgb(78, 168, 251); position: relative; text-align: center; opacity: 0; transform: translateY(2rem); transition: all 0.5s ease 0s; }
.invitation-span::before { content: "“"; left: -0.2rem; }
.invitation-span::after { content: "”"; right: -0.2rem; }
.invitation-span::after, .invitation-span::before { position: absolute; top: 0px; opacity: 0; transform: translateY(1.3rem); transition: all 0.6s cubic-bezier(0.17, 0.67, 0.21, 1.56) 0s; }
.invitation-aside { font-size: 0.6rem; color: rgb(189, 189, 189); width: 15.3rem; opacity: 0; transform: translateY(2rem); transition: all 0.5s ease 0s; }
.invitation-aside .box { margin-right: -1rem; }
.invitation-aside .box img { width: 1rem; height: 1rem; transform: translate(0px, 25%); margin-right: 0.2rem; }
.invitation-aside span { color: rgb(139, 139, 139); position: relative; margin-right: 1rem; }
.invitation-speech { height: 7.4rem; opacity: 0; transition: all 0.4s ease 0s; width: 10.8rem; position: relative; }
.speech-item { width: 1.2rem; height: 1.2rem; position: absolute; background: center center / cover no-repeat; opacity: 0; transform: scale(0.3); transition: all 0.5s cubic-bezier(0.17, 0.67, 0.21, 1.56) 0s; }
.speech-item aside { color: rgb(78, 168, 251); font-size: 0.6rem; font-weight: 400; width: 3rem; position: absolute; bottom: -1rem; left: 50%; margin-left: -1.5rem; text-align: center; transition: all 0.5s ease 0s; }
.speech-item-1 { width: 1.55rem; height: 1.55rem; background-image: url("./invitation/speech-1.svg"); top: 1rem; left: 50%; margin-left: -0.75rem; }
.speech-item-1 aside { font-size: 0.7rem; bottom: auto; top: -1rem; height: 1rem; position: relative; }
.speech-item-1 aside span { text-align: center; inset: 0px; 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: rgb(93, 105, 128); font-size: 0.6rem; opacity: 0; }
.speech-text p { opacity: 0; transition: all 0.3s ease 0s; }
.speech-text .line { border-top: 1px dotted rgb(204, 204, 204); height: 1px; position: absolute; transition: all 0.5s ease 0s; width: 0px; }
.speech-text-1 { top: 3.8rem; left: 50%; margin-left: -1em; transition: all 0.3s ease 0s; }
.speech-text-1 .line-1 { transform: rotate(90deg); transform-origin: 0px 0px; left: 50%; top: -1.1rem; }
.speech-text-1 .line-2 { top: 100%; left: 0px; transform-origin: 0px 0px; transform: rotate(149deg); }
.speech-text-1 .line-3 { right: 0px; top: 100%; transform-origin: 100% 0px; 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 { transition-timing-function: ease; 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 { transition-delay: 1.5s; }
.swiper-slide-active .invitation-speech.step0 .speech-item-1 aside span { transition: all 1ms ease 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 { transition-delay: 1.4s; }
.swiper-slide-active .invitation-speech.step1 .speech-item { 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; transition-delay: 0.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; transition-delay: 1s; }
.swiper-slide-active .invitation-speech.step2 .speech-item { transition-timing-function: ease; }
.swiper-slide-active .invitation-speech.step2 .speech-item-1 { transform: translate(-5rem, 2rem); 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 { transform: translate(7.8rem, -2rem); transition-delay: 0.2s; }
.swiper-slide-active .invitation-speech.step2 .speech-item-3 { transform: translate(-2.6rem, -2rem); transition-delay: 0.2s; }
.invitation-bg, .invitation-mask { position: fixed; inset: 0px; }
.swiper-slide-active .invitation-speech.step2 .speech-text-2, .swiper-slide-active .invitation-speech.step2 .speech-text-3 { opacity: 1; transition-delay: 0s; }
.swiper-slide-active .invitation-speech.step2 .speech-text-2 p { opacity: 1; transition-delay: 1.4s; }
.swiper-slide-active .invitation-speech.step2 .speech-text-2 .line { width: 3.6rem; transition-delay: 1s; }
.swiper-slide-active .invitation-speech.step2 .speech-text-3 p { opacity: 1; transition-delay: 2.2s; }
.swiper-slide-active .invitation-speech.step2 .speech-text-3 .line { width: 3.45rem; transition-delay: 1.8s; }
.invitation-page.swiper-slide-active .speech-item-1 { transition-delay: 1535ms; }
.invitation-page.swiper-slide-active .speech-item-2 { transition-delay: 1835ms; }
.invitation-page.swiper-slide-active .speech-item-3 { transition-delay: 2035ms; }
.invitation-page.swiper-slide-active .speech-item { opacity: 1; transform: scale(1); }
.invitation-page.swiper-slide-active .invitation-speech { opacity: 1; }
.invitation-page.swiper-slide-active .invitation-span { opacity: 1; transform: translateY(0px); transition-delay: 2135ms; }
.invitation-page.swiper-slide-active .invitation-span::after, .invitation-page.swiper-slide-active .invitation-span::before { opacity: 1; transform: translateY(0px); }
.invitation-page.swiper-slide-active .invitation-span::before { transition-delay: 2535ms; }
.invitation-page.swiper-slide-active .invitation-span::after { transition-delay: 2735ms; }
.invitation-page.swiper-slide-active .invitation-aside { opacity: 1; transform: translateY(0px); 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; transform: translateX(0px); transition: all 0.5s ease 0s; }
.invitation-page.swiper-slide-active .invitation-p aside { transform: scale(1); opacity: 1; transition: all 0.4s ease 0s; }
.invitation-page.swiper-slide-active .invitation-p.d-1 h2, .invitation-page.swiper-slide-active .invitation-p.d-1::before { transition-delay: 0.3s; }
.invitation-page.swiper-slide-active .invitation-p.d-1 p { transition-delay: 0.4s; }
.invitation-page.swiper-slide-active .invitation-p.d-1 aside { transition-delay: 1s; }
.invitation-page.swiper-slide-active .invitation-p.d0 h2, .invitation-page.swiper-slide-active .invitation-p.d0::before { transition-delay: 0.5s; }
.invitation-page.swiper-slide-active .invitation-p.d0 p { transition-delay: 0.6s; }
.invitation-page.swiper-slide-active .invitation-p.d0 aside { transition-delay: 1.2s; }
.invitation-page.swiper-slide-active .invitation-p.d1 h2, .invitation-page.swiper-slide-active .invitation-p.d1::before { transition-delay: 1635ms; }
.invitation-page.swiper-slide-active .invitation-p.d1 p { transition-delay: 1735ms; }
.invitation-page.swiper-slide-active .invitation-p.d1 aside { transition-delay: 2335ms; }
.invitation-page.swiper-slide-active .invitation-p.d2 h2, .invitation-page.swiper-slide-active .invitation-p.d2::before { transition-delay: 1835ms; }
.invitation-page.swiper-slide-active .invitation-p.d2 p { transition-delay: 1935ms; }
.invitation-page.swiper-slide-active .invitation-p.d2 aside { transition-delay: 2535ms; }
.invitation-page.swiper-slide-active .invitation-p.d3 h2, .invitation-page.swiper-slide-active .invitation-p.d3::before { transition-delay: 2035ms; }
.invitation-page.swiper-slide-active .invitation-p.d3 p { transition-delay: 2135ms; }
.invitation-page.swiper-slide-active .invitation-p.d3 aside { transition-delay: 2535ms; }
.invitation-mask { z-index: 999; background-color: rgb(255, 255, 255); color: rgb(170, 170, 170); display: flex; -webkit-box-pack: center; justify-content: center; text-align: center; padding-bottom: 100px; transition: all 0.6s ease 0s; }
.invitation-mask.active { opacity: 0; }
.spinner { margin: 0px auto; width: 50px; height: 80px; text-align: center; font-size: 10px; }
.spinner > div { background-color: rgb(78, 168, 251); height: 100%; width: 6px; display: inline-block; animation: 1.2s ease-in-out 0s infinite normal none running stretchdelay; }
.spinner .rect2 { animation-delay: -1.1s; }
.spinner .rect3 { animation-delay: -1s; }
.spinner .rect4 { animation-delay: -0.9s; }
.spinner .rect5 { animation-delay: -0.8s; }
.invitation-bg .item-1, .invitation-bg .item-2 { width: 19.5rem; height: 18.25rem; background: url("./invitation/bg-11.svg") 0% 0% / cover no-repeat; position: absolute; animation: 10s ease-in-out 0s infinite normal none running line; }
.invitation-bg .item-1 { top: -10rem; left: 0.5rem; animation-delay: 11.4s; }
.invitation-bg .item-2 { bottom: -5rem; right: -16rem; animation-delay: 10s; }
.invitation-bg .item-3 { width: 14rem; height: 12.5rem; background: url("./invitation/bg-3.svg") 0% 0% / cover no-repeat; position: absolute; top: 32%; left: -45%; animation: 10s ease-in-out 11s infinite normal none running line; }
.invitation-bg .item-4, .invitation-bg .item-5 { width: 16.7rem; height: 16.7rem; position: absolute; background: url("./invitation/bg-2.svg") 0% 0% / cover no-repeat; animation: 10s ease-in-out 0s infinite normal none running line; }
.invitation-bg .item-4 { top: 3%; right: -44%; animation-delay: 12s; }
.invitation-bg .item-5 { top: 77%; left: -65%; animation-delay: 11.8s; }
@-webkit-keyframes stretchdelay { 
  0%, 100%, 40% { transform: scaleY(0.4); }
  20% { transform: scaleY(1); }
}
@keyframes stretchdelay { 
  0%, 100%, 40% { transform: scaleY(0.4); }
  20% { transform: scaleY(1); }
}
@-webkit-keyframes dotleft { 
  0% { transform: translate(3.05rem, 4.325rem); }
  45% { transform: translate(-2.475rem, 4.325rem); }
  79% { transform: translate(-2.475rem, 0px); }
  100% { transform: translate(0px, 0px); }
}
@keyframes dotleft { 
  0% { transform: translate(3.05rem, 4.325rem); }
  45% { transform: translate(-2.475rem, 4.325rem); }
  79% { transform: translate(-2.475rem, 0px); }
  100% { transform: translate(0px, 0px); }
}
@-webkit-keyframes dotright { 
  0% { transform: translate(-3.05rem, 4.325rem); }
  45% { transform: translate(2.475rem, 4.325rem); }
  79% { transform: translate(2.475rem, 0px); }
  100% { transform: translate(0px, 0px); }
}
@keyframes dotright { 
  0% { transform: translate(-3.05rem, 4.325rem); }
  45% { transform: translate(2.475rem, 4.325rem); }
  79% { transform: translate(2.475rem, 0px); }
  100% { transform: translate(0px, 0px); }
}
@-webkit-keyframes zhuan { 
  0% { transform: rotateY(0deg); }
  100%, 50% { transform: rotateY(540deg); }
}
@keyframes zhuan { 
  0% { transform: rotateY(0deg); }
  100%, 50% { transform: rotateY(540deg); }
}
@-webkit-keyframes shadow { 
  0%, 100%, 50% { transform: scale(0.7); }
  25%, 75% { transform: scale(1); }
}
@keyframes shadow { 
  0%, 100%, 50% { transform: scale(0.7); }
  25%, 75% { transform: scale(1); }
}
@-webkit-keyframes buling { 
  0%, 100%, 30%, 60% { opacity: 0.7; }
  15%, 45% { opacity: 0; }
}
@keyframes buling { 
  0%, 100%, 30%, 60% { opacity: 0.7; }
  15%, 45% { opacity: 0; }
}
@-webkit-keyframes line { 
  0%, 100%, 40% { transform: translate(0px, 0px); }
  20% { transform: translate(-170%, 170%); }
  21% { opacity: 0; }
  22% { opacity: 0; transform: translate(170%, -170%); }
  23% { opacity: 1; }
}
@keyframes line { 
  0%, 100%, 40% { transform: translate(0px, 0px); }
  20% { transform: translate(-170%, 170%); }
  21% { opacity: 0; }
  22% { opacity: 0; transform: translate(170%, -170%); }
  23% { opacity: 1; }
}
.introduce-swiper .swiper-slide { 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%; transition: all 0.5s ease 0s; opacity: 0; }
.introduce-swiper .introduce-text-area { -webkit-box-flex: 1; flex: 1 1 0%; padding: 2rem 1.2rem; }
.introduce-swiper .introduce-text-area h2 { font-size: 1.3rem; font-weight: 300; color: rgb(76, 76, 76); margin-bottom: 0.8rem; }
.introduce-swiper .introduce-text-area p { font-size: 14px; color: rgb(127, 127, 127); line-height: 1.2rem; }
.introduce-swiper .introduce-bl { width: 6.1rem; height: 1rem; position: absolute; bottom: 3.3rem; left: 1.6rem; background: center bottom / 100% no-repeat; }
.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; inset: 0px; color: rgb(119, 119, 119); }
.introduce-bg > div { transition: all 0.8s ease 0s; position: absolute; }
.introduce-bg .item-rect { width: 1.4rem; height: 1.4rem; border: 0.3rem solid; right: 1.8rem; bottom: 5.7rem; }
.introduce-bg .item-circle { height: 2.1rem; border: 0.2rem solid; right: 4.5rem; bottom: 3.5rem; }
.introduce-bg .item-circle::before { content: ""; position: absolute; height: 2.1rem; border: 0.2rem solid; top: -0.2rem; left: -0.2rem; transform: rotate(90deg); 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; transition: all 0.8s ease 0s; position: absolute; bottom: 0px; right: 0px; background: center center / cover no-repeat; }
.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: 0.4rem; position: absolute; bottom: 0.8rem; left: 0px; right: 0px; text-align: center; }
.introduce-body .swiper-pagination .swiper-pagination-bullet { width: 0.4rem; height: 0.4rem; margin: 0px 0.2rem; display: inline-block; transition: all 0.5s ease 0s; }
.introduce-body .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 0.9rem; }
.introduce-body.swiper-0-active .swiper-pagination-bullet { background-color: rgb(162, 198, 242); }
.introduce-body.swiper-0-active .introduce-bg { color: rgb(70, 141, 229); }
.introduce-body.swiper-0-active .item-circle { transform: rotate(0deg); }
.introduce-body.swiper-0-active .item-f, .introduce-body.swiper-0-active .item-rect { transform: rotate(720deg); border-color: rgb(70, 141, 229); }
.introduce-body.swiper-1-active .swiper-pagination-bullet { background-color: rgb(241, 180, 180); }
.introduce-body.swiper-1-active .introduce-bg { color: rgb(203, 99, 126); }
.introduce-body.swiper-1-active .item-circle { transform: rotate(360deg); }
.introduce-body.swiper-1-active .item-f, .introduce-body.swiper-1-active .item-rect { transform: rotate(360deg); border-color: rgb(203, 99, 126); }
.introduce-body.swiper-2-active .swiper-pagination-bullet { background-color: rgb(249, 208, 161); }
.introduce-body.swiper-2-active .introduce-bg { color: rgb(243, 161, 68); }
.introduce-body.swiper-2-active .item-circle { transform: rotate(720deg); }
.introduce-body.swiper-2-active .item-f, .introduce-body.swiper-2-active .item-rect { transform: rotate(0deg); border-color: rgb(243, 161, 68); }
.main-layout-2 .btn { color: rgb(79, 227, 225); }
.copyright { width: 100%; height: 1rem; line-height: 1rem; bottom: 1rem; text-align: center; transition: all 0.8s ease 0s; position: absolute; }