body { margin: 0; padding: 0; background: linear-gradient(180deg, #f4f9fe 62%, rgba(244, 249, 254, 0) 98%), linear-gradient(90deg, #f4f9fe 0%, #a0cff8 100%); }
#header-placeholder { display: flex; justify-content: center; white-space: nowrap; position: fixed; top: 0; left: 0; right: 0; background-color: #ffffff85; opacity: 1; transition: opacity 0.3s ease; z-index: 1000; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nav { width: 1200px; display: flex; padding: 1.33vw 10.66vw; height: 28px; justify-content: space-evenly; }
.nav .icon { display: flex; align-items: center; padding: 8px; transition: opacity 0.6s ease, transform 1s; }
.nav .icon img { height: 32px; width: 40px; margin-right: 16px; }
.nav .icon .name { font-family: Alimama ShuHeiTi; font-size: 26px; font-weight: bold; line-height: 39.2px; letter-spacing: 1.12px; color: #1c1c1e; }
.nav .icon:hover { transform: scale(1.05); transition: opacity 0.2s ease, transform 0.3s; cursor: pointer; }
.nav .menu { margin: 0; padding: 0; flex: 1; display: flex; gap: 5px; }
.nav .menu .menu-item { flex: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: Source Sans Pro; font-size: 22px; font-weight: 600; line-height: 30.8px; text-align: center; letter-spacing: 0.22px; color: #6e7b8f; }
.nav .menu .menu-item .menu-item-text { width: 100%; padding-block: 10px; }
.nav .menu .menu-item:hover { transform: translateY(-5px) scale(1.08); border-radius: 8px; height: 40px; color: #fff !important; box-shadow: 0 12px 20px -10px rgba(33, 150, 243, 0.5), 0 8px 10px -6px rgba(33, 150, 243, 0.3), 0 4px 5px -2px rgba(33, 150, 243, 0.2); background: linear-gradient(135deg, #2196F3 0%, #0B7dda 100%); transition: transform 0.1s ease; }
.nav .menu .menu-item:hover::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%); transform: scale(0); opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: -1; }
.nav .menu .menu-item:hover:hover::before { transform: scale(1); opacity: 1; }
.nav .language { margin-left: 30px; display: flex; align-items: center; cursor: pointer; }
.nav .language svg { color: #39475d; }
.nav .language .language-text { margin-left: 10px; font-family: Source Sans Pro; font-size: 22px; font-weight: 600; line-height: 30.8px; text-align: center; letter-spacing: 0.22px; color: #39475d; }
.nav .menu-item:hover, .nav .submenu-item:hover, .nav .language:hover svg, .nav .language:hover .language-text { color: #2e86de; }
.nav .has-submenu { position: relative; }
.nav .has-submenu .arrow { margin-left: 10px; border: solid #6e7b8f; border-width: 0 2px 2px 0; padding: 4px; transform: rotate(45deg); transition: transform 0.3s; }
.nav .has-submenu .submenu { display: none; list-style: none; margin: 0; padding: 12px 0 12px 0; position: absolute; top: 100%; width: max-content; border-radius: 12px; background: #ffffff; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); font-family: Source Sans Pro; font-size: 14px; font-weight: normal; line-height: 12px; text-align: center; letter-spacing: 0.22px; color: #37474f; }
.nav .has-submenu .submenu .submenu-item { cursor: pointer; }
.nav .has-submenu .submenu .submenu-item .submenu-item-text { display: block; padding: 12px 20px; }
.nav .has-submenu:hover .arrow { border-color: #2e86de; transform: rotate(-135deg); }
.nav .has-submenu:hover .submenu { display: block; }
.nav.solid { opacity: 1; }
.footer { margin-top: 4.16vw; padding-block: 2.25vw; padding-inline: 4.16vw; background: #013f78; display: flex; justify-content: space-between; }
.footer .left .left-box1 { display: flex; align-items: center; }
.footer .left .left-box1 img { width: 37px; height: 32px; }
.footer .left .left-box1 .name { margin-left: 5px; font-family: 阿里妈妈方圆体 VF; font-size: 27px; font-weight: 600; line-height: 58.8px; letter-spacing: 1.68px; color: #ffffff; }
.footer .left .left-box2 .item { margin-top: 16px; }
.footer .left .left-box2 .item .value { margin-top: 3px; font-family: Roboto; font-size: 17px; font-weight: 600; line-height: 12.8px; letter-spacing: -0.64px; color: #ffffff; }
.footer .right { width: 50%; }
.footer .right .right-box1 { display: flex; justify-content: space-between; color: #d0d0d6; }
.footer .right .right-box1 .item { display: flex; flex-direction: column; gap: 4px; }
.footer .right .right-box2 { margin-top: 16px; display: flex; flex-direction: column; gap: 5px; align-items: end; justify-content: end; }
.footer .right .right-box2 .item { font-family: PingFangSC; font-size: 12px; font-weight: 500; line-height: 22.4px; text-align: center; letter-spacing: 0px; color: #ffffff; }
form { flex: 1; display: flex; flex-direction: column; }
form label { font-family: Roboto; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0px; color: #3a3a3c; }
form input, form select, form textarea { margin-top: 0.41vw; padding: 0.41vw 0.83vw; border-radius: 8px; border: 1px solid #d1d5db; font-family: Roboto; font-size: 16px; font-weight: normal; line-height: 24px; letter-spacing: 0px; color: #3a3a3c; }
form input::placeholder, form select::placeholder, form textarea::placeholder { color: #9ca3af; }
form select:invalid { color: #9ca3af; }
form select option { color: #3a3a3c; }
form button { margin-top: auto; padding-block: 0.625vw; cursor: pointer; border: none; border-radius: 4px; background: #2e86de; font-family: Roboto; font-size: 16px; font-weight: 500; line-height: 24px; text-align: center; letter-spacing: 0px; color: #ffffff; }
form .flex-2 { display: flex; gap: 1.25vw; }
form .form-item { flex: 1; display: flex; flex-direction: column; margin-bottom: 1.25vw; }
.success { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.success .title { margin-top: 1.25vw; font-family: Roboto; font-size: 30px; font-weight: 600; line-height: 36px; text-align: center; letter-spacing: 0px; color: #111827; }
.success .subtitle { margin-top: 0.83vw; font-family: Roboto; font-size: 16px; font-weight: normal; line-height: 24px; text-align: center; letter-spacing: 0px; color: #4b5563; }
.c2 { color: #8b8b93; }
.t1 { font-family: Source Sans Pro; font-size: 40px; font-weight: bold; line-height: 56px; letter-spacing: 0.8px; color: #3a3a3c; }
.t2 { font-family: Source Sans Pro; font-size: 20px; font-weight: normal; line-height: 32px; letter-spacing: 0px; color: #37474f; }
.t3 { font-family: Source Sans Pro; font-size: 20px; font-weight: normal; line-height: 32px; text-align: justify; letter-spacing: 0.4px; color: #37474f; }
.t4 { font-family: Roboto; font-size: 15px; font-weight: normal; line-height: 28px; letter-spacing: 0px; }
a { text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.3s ease; transform-origin: center; max-width: 100%; height: auto; }
a:hover { transform: scale(1.1); }
.hidden { display: none !important; }
img { cursor: pointer; transition: transform 0.3s ease; transform-origin: center; max-width: 100%; height: auto; }
img:hover { transform: scale(1.1); }
@media (max-width: 768px) { .image-hover-zoom { transition: transform 0.2s ease; } .image-hover-zoom:hover { transform: scale(1.05); } }
.new1:hover { transform: scale(1.05); transition: transform 1s ease, opacity 0.6s ease; cursor: pointer; }
.box .item { transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.box .item:hover { transform: scale(1.05); transition: opacity 0.6s ease, transform 1s; cursor: pointer; }
.solution-box3 { transition: opacity 0.6s ease, transform 1s; }
.solution-box3:hover { transform: scale(1.05); transition: opacity 0.6s ease, transform 1s; cursor: pointer; }
.solution-box4 { transition: opacity 0.6s ease, transform 1s; }
.solution-box4:hover { transform: scale(1.05); transition: opacity 0.6s ease, transform 1s; cursor: pointer; }
.box1 img { border-radius: 10px; }
.box2 { border-radius: 10px; }
@keyframes scaleUpExpand { from { transform: scaleY(0.8) translateY(-40%); transform-origin: bottom; } to { transform: scaleY(1) translateY(0); transform-origin: bottom; } }
.slide-up { animation: scaleUpExpand 0.3s ease forwards; }
.element { animation: slideIn 1s ease-in-out 0s 1 normal forwards; }
.ii3 { animation: scaleUpExpand 0.5s ease-in-out; }
@keyframes scaleDownExpand { from { transform: scaleY(1) translateY(-10%); transform-origin: top; } to { transform: scaleY(1) translateY(0); transform-origin: top; } }
.ii4 { animation: scaleDownExpand 0.6s ease-in-out; }
.play-initc3 { animation: gradientAnimation 1s ease-in-out; }
@keyframes gradientAnimation { 0% { transform: scale(0.95) translateY(0%); } 100% { transform: scale(1) translateY(0%); } }
.tt3 { background: 50% 100%/50% 50% no-repeat radial-gradient(ellipse at bottom, #fff, transparent, transparent); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: "Source Sans Pro", sans-serif; -webkit-animation: reveal 3000ms ease-in-out forwards 200ms, glow 2500ms linear infinite 2000ms; animation: reveal 3000ms ease-in-out forwards 200ms, glow 2500ms linear infinite 2000ms; }
@-webkit-keyframes reveal { 80% { letter-spacing: 8px; } 100% { background-size: 300% 300%; } }
@keyframes reveal { 80% { letter-spacing: 8px; } 100% { background-size: 300% 300%; } }
@-webkit-keyframes glow { 40% { text-shadow: 0 0 8px #fff; } }
@keyframes glow { 40% { text-shadow: 0 0 8px #fff; } }