:root {
  --thm-font: 'Poppins', sans-serif;
  --thm-base: #6E6AFF;  /* 柔和高科技紫 */
  --thm-color: #0F172A; /* 深太空蓝（文字/背景色） */
--thm-color2: #fbac1c;
--thm-black: #252c4b;
--thm-white: #ffffff;
--thm-ase: #afb2bf;
--thm-gray: #8e8e8e;
--thm-f6: #F1F8FF;
--thm-fb: #f6f6f6;
--thm-p: #737789;
--thm-btn1: #737789;
--thm-btn2: #9800d7;
--heading-color: #19303f;
--para-color: #555555;
--theme-alt-color: #00dfb2;
--theme-color: #215b63;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
padding: 0;
background: transparent;
}
html {
margin: 0;
padding: 0;
background: linear-gradient(90deg,var(--thm-color),var(--thm-base));
font-family: 'Josefin Sans', sans-serif;


}


.d-grid {
display: grid;
}

.d-flex {
display: flex;
display: -webkit-flex;
}

.text-center {
text-align: center;
}

.text-left {
text-align: left;
}

.text-right {
text-align: right;
}


a {
text-decoration: none;
}

iframe {
border: none;
}

ul {
margin: 0;
padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
padding: 0
}

p {
color: #888;
font-size: 16px;
line-height: 24px;
}

.p-relative {
position: relative;
}

.p-absolute {
position: absolute;
}

.p-fixed {
position: fixed;
}

.p-sticky {
position: sticky;
}


/*--/wrapper--*/
.wrapper {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

@media (min-width: 576px) {
.wrapper {
  max-width: 540px;
}
}

@media (min-width: 768px) {
.wrapper {
  max-width: 720px;
}
}

@media (min-width: 992px) {
.wrapper {
  max-width: 960px;
}
}

@media (min-width: 1200px) {
.wrapper {
  max-width: 1140px;
}
}

.wrapper-full {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

/* /w3l-pricing-7*/
.w3l-pricing-7-main .pricing-7-sec {
  margin-top: -50px;
  
}

.pricing-grid {
display: grid;
min-height: 100vh;
align-items: center;
padding: 30px 15px;
}

.w3l-pricing-7-main h3.heading {
font-size: 40px;
line-height: 45px;
text-align: center;
color: #fff;
font-weight: 400;
}

.w3l-pricing-7-main .pricing-sec-7 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin: 45px auto;
  width: 85%;
  
  gap: 10px; /* 设置列之间的间隔为10px */
}

.w3l-pricing-7-main ul.links {
min-height: 100px;
}

.w3l-pricing-7-main ul.links li {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 10px;
align-items: center;
}

.w3l-pricing-7-main .tick-mark {
text-align: center;
}

.w3l-pricing-7-main ul.links li span {
color: var(--theme-color);
font-size: 13px;
}

.w3l-pricing-7-main h5 {
font-size: 17px;
line-height: 20px;
color: #1d2e42;
text-align: center;
text-transform: uppercase;
margin-bottom: 30px;
font-weight: 700;
}

.w3l-pricing-7-main h6 {
color: var(--theme-alt-color);
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
font-size: 25px;
line-height: 30px;
font-weight: 400;
}

.w3l-pricing-7-main p.para {
font-size: 16px;
line-height: 25px;
text-align: center;
}

.w3l-pricing-7-main h4 label {
font-size: 25px;
vertical-align: text-top;
}

.w3l-pricing-7-main h4 {
font-size: 40px;
line-height: 45px;
margin: 25px 0;
text-align: center;
color: #1d2e42;
}

.w3l-pricing-7-main h4 span {
font-size: 16px;
line-height: 25px;
color: #999;
font-weight: 400;
}

.w3l-pricing-7-main p.tick-info {
font-size: 15px;
line-height: 25px;
font-weight: normal;
align-self: center;
padding-top: 2px;
}

.w3l-pricing-7-main p.pric-foot {
text-align: center;
font-size: 17px;
line-height: 25px;
margin-top: 40px;
}

.w3l-pricing-7-main p.pric-foot a {
font-size: 17px;
line-height: 25px;
font-weight: 700;
color: #304659;
text-decoration: none;
}

.w3l-pricing-7-main p.pric-foot img {
vertical-align: middle;
}

.w3l-pricing-7-main ul.links li {
list-style: none;
margin-bottom: 5px;
color: #304659;
}

.w3l-pricing-7-main .pricing-gd-left {
padding: 3.5em 2.5em;
background: #fff;
border-radius: 10px;
align-self: center;
}

.w3l-pricing-7-main .pric-7-1 {
padding: 3.5em 2.5em;
border-right: 0;
}

.w3l-pricing-7-main .pric-7-2 {
padding: 3.5em 2.5em;
border-left: 0;

}

.w3l-pricing-7-main .pric-7-3 {
  padding: 3.5em 2.5em;
  border-left: 0;
}

.w3l-pricing-7-main .pricing-gd-left.active {
transform: scale(1.03);
-webkit-transform: scale(1.03);
-moz-transform: scale(1.03);
-o-transform: scale(1.03);
-ms-transform: scale(1.03);
z-index: 1;
margin: 0;
box-shadow: 0 10px 30px 0 rgba(17, 17, 17, 0.09);
border-radius: 6px;
}

.w3l-pricing-7-main .buy-button {
margin-top: 2em;
}

.w3l-pricing-7-main .buy-button a {
width: 100%;
padding: 10px 30px;
display: inline-block;
background: var(--theme-alt-color);
border: 2px solid var(--theme-alt-color);
color: #fff;
border-radius: 35px;
font-size: 17px;
line-height: 25px;
text-align: center;
border-radius: 6px;

}

.w3l-pricing-7-main .buy-button a:hover {
background: var(--heading-color);
border: 2px solid var(--heading-color);
color: var(--theme-alt-color);
}

.w3l-pricing-7-main .pricing-gd-left.active .buy-button a {
width: 100%;
padding: 10px 30px;
display: inline-block;
background: var(--theme-color);
border: 2px solid var(--theme-color);
color: #fff;
border-radius: 6px;
font-size: 15px;
line-height: 24px;
text-align: center;
}

.w3l-pricing-7-main .pricing-gd-left.active .buy-button a:hover {
border: 2px solid var(--heading-color);
background: var(--heading-color);
color: var(--theme-alt-color);
}

.w3l-pricing-7-main .copy-right p {
color: #ccc;
font-size: 17px;
}

.w3l-pricing-7-main .copy-right p a {
color: #fff;
}
.w3l-pricing-7-main .copy-right p a:hover {
color: var(--theme-alt-color);
}

@media (max-width: 1366px) {
.w3l-pricing-7-main .pricing-sec-7 {
  width: 90%;
}
}

@media (max-width: 1080px) {
.w3l-pricing-7-main .pricing-sec-7 {
  width: 100%;
}
}

@media (max-width: 1024px) {

.w3l-pricing-7-main .pric-7-1,
.w3l-pricing-7-main .pric-7-2,
.w3l-pricing-7-main .pric-7-3  {
  padding: 5em 2em;
}

.w3l-pricing-7-main .pricing-gd-left {
  padding: 1em 2em 3em;
}
}

@media (max-width: 900px) {}

@media (max-width: 991px) {
.w3l-pricing-7-main .pricing-sec-7 {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 30px;
  margin: 50px auto 0;
}

.w3l-pricing-7-main .pric-7-1 {
  border: 2px solid #dcefdc;
}

.w3l-pricing-7-main .pric-7-2 {
  border: 2px solid #dcefdc;
}

.w3l-pricing-7-main .pric-7-3 {
  border: 2px solid #dcefdc;
}

.w3l-pricing-7-main .pricing-sec-7 {
  width: 60%;
}

.w3l-pricing-7-main .pricing-gd-left {
  padding: 2em 2em 3em;
}

.w3l-pricing-7-main .pricing-gd-left.active {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
}
}

@media (max-width: 768px) {
.w3l-pricing-7-main .pricing-sec-7 {
  width: 75%;
}

.w3l-pricing-7-main h3.heading {
  font-size: 35px;
  line-height: 40px;
}
}

@media (max-width: 600px) {
.w3l-pricing-7-main p.pric-foot {
  margin-top: 25px;
}
}

@media (max-width: 568px) {
.w3l-pricing-7-main .pricing-7-sec h2 {
  margin-bottom: 1.3em;
}

.w3l-pricing-7-main .pricing-sec-7 {
  grid-gap: 20px;
  margin: 30px auto;
}
}

@media (max-width: 480px) {
.w3l-pricing-7-main .pricing-sec-7 {
  width: 80%;
}
}

@media (max-width: 415px) {
.w3l-pricing-7-main .pricing-sec-7 {
  width: 100%;
}

.w3l-pricing-7-main .copy-right p {
  font-size: 16px;
}

.w3l-pricing-7-main h3.heading {
  font-size: 30px;
  line-height: 35px;
}
}
@media (max-width: 375px) {
.w3l-pricing-7-main h3.heading {
  font-size: 28px;
  line-height: 33px;
}
}
/* //字母飘动*/

.animation-container {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100%; /* 可调整高度 */
z-index: -1;
background: transparent; /* 背景透明 */
pointer-events: none; /* 保证不会阻止点击 */
}
.animation-container span {
position: absolute;
color: whitesmoke;
display: block;
font-size: 18px;
font-family: 'Helvetica';
text-shadow: 0 0 1px white;
user-select: none;
pointer-events: none;
cursor: default;
z-index: 1;
opacity: 0;
top: 0;
will-change: transform, opacity;
animation-timing-function: ease-out;
animation-name: move;
}

@keyframes move {
0% {
  opacity: 0;
  top: 100%;
}
25% {
  opacity: 1;
}
50% {
  opacity: 1;
}
75% {
  opacity: 0;
}
100% {
  opacity: 0;
  transform: none;
}
}