* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 1rem;
}
@media screen and (max-width: 100rem) {
html {
font-size: 14px;
}
}
@media screen and (max-width: 75rem) {
html {
font-size: 12px;
}
}
@media screen and (max-width: 48rem) {
html {
font-size: 10px;
}
}
em,
i {
font-style: normal;
}
li {
list-style: none;
}
img {
border: 0;
vertical-align: middle;
}
button {
cursor: pointer;
}
a {
color: #161c2d;
text-decoration: none;
}
button,
input {
font-family: PingFangSC-Regular, PingFang SC, Microsoft YaHei, Heiti SC,
tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
border: 0;
outline: 0;
}
body {
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 16px/1.5 HarmonyOS Sans, -apple-system, blinkmacsystemfont, Segoe UI,
roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji,
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, "\5B8B\4F53", sans-serif;
color: #161c2d;
}
.hide,
.none {
display: none;
}
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0;
}
.clearfix {
zoom: 1;
}
.line-clamp-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
}
.w {
width: 75rem;
height: 100%;
margin: 0 auto;
}
.base-title {
width: 100%;
text-align: center;
font-size: 48px;
font-weight: 700;
}
.base-sub-title {
margin-top: 2.25rem;
width: 100%;
text-align: center;
font-size: 18px;
}
.bg-title {
border-radius: 0.5625rem;
padding: 0 0.625rem;
display: inline-block;
background-color: #cefb62;
}  .fixed-sidebar {
position: fixed;
right: 2.5rem;
bottom: 2rem;
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 1rem;
z-index: 999;
} .back-to-top {
width: 2.25rem;
height: 2.25rem;
background: #333333;
border-radius: 0.375rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.2);
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-0.1875rem);
box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.3);
}
.back-to-top img {
width: 1rem;
height: 1.125rem;
} .telegram-btn,
.wechat-btn,
.whatsapp-btn,
.line-btn {
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.2);
font-weight: bold;
font-size: 1rem;
color: #ffffff;
}
.wechat-btn {
position: relative; }
.wechat-img {
position: absolute;
right: calc(100% + 1rem); top: 50%;
transform: translateY(-50%); width: 10rem;
height: 10rem;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
pointer-events: none;
}
.wechat-btn .wechat-img img {
width: 100%;
height: 100%;
}
.wechat-btn:hover .wechat-img {
opacity: 1;
visibility: visible;
}
.telegram-btn img,
.wechat-btn img,
.whatsapp-btn img,
.line-btn img {
width: 100%;
}
.telegram-btn:hover,
.wechat-btn:hover,
.whatsapp-btn:hover,
.line-btn:hover {
transform: translateY(-0.1875rem);
box-shadow: 1px 1px rgba(0, 0, 0, 0.3);
} .telegram-powered {
display: flex;
align-items: center;
font-size: 12px;
color: #0e0e0e;
text-align: center;
width: 7.5rem;
white-space: nowrap;
}
.telegram-powered img {
margin-right: 0.625rem;
width: 0.625rem;
height: 0.875rem;
}
.powered-by {
font-weight: bold;
font-size: 13px;
margin-right: 0.1rem;
}
.powered-by-a2c {
font-weight: bold;
font-size: 13px;
color: #0e0e0e;
background: linear-gradient(
90deg,
#2f40e9 10.693359375%,
#7028d0 39.892578125%,
#dd02a5 78.1494140625%,
#f99d1e 100%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
header.header {
position: fixed;
top: 0;
left: 0;
z-index: 999;
background: #fff;
width: 100%;
height: 5rem;
color: #161c2d;
text-align: center;
}
header.header nav {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width: 10.75rem;
height: 2.5rem;
}
.logo img {
width: 100%;
height: 100%;
}
.nav-list {
display: flex;
align-items: center;
height: 100%;
}
.nav-list li {
display: flex;
align-items: center;
justify-content: center;
margin-right: 2.375rem;
height: 100%;
border-radius: 0.375rem;
}
.arrow {
width: 1.125rem;
height: 0.6875rem;
margin-left: 0.625rem;
}
.nav-list li a {
display: flex;
align-items: center;
font-weight: 700;
color: #161c2d;
}
.features {
font-weight: 700;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.login {
width: 5.5rem;
height: 2.75rem !important;
background: #10b981;
cursor: pointer;
margin-right: 1rem !important;
}
.on-trial {
width: 7.5rem;
height: 2.75rem !important;
border: 1px solid #10b981;
cursor: pointer;
margin-right: 0 !important;
}
.login a {
color: #fff !important;
}
.on-trial a {
color: #10b981 !important;
}
.sub-header {
display: none;
background: #fff;
width: 100%;
height: 8.375rem;
border-top: 1px solid #e5e5e5;
box-shadow: 0 4px 23px -8px rgba(0, 49, 43, 0.17);
}
.nav-list li.features:hover ~ .sub-header,
.sub-header:hover {
display: block;
}
.sub-header .w,
.sub-header-list {
height: 100%;
}
.sub-header-list {
display: flex;
justify-content: center;
align-items: center;
}
.sub-header-list li {
cursor: pointer;
margin-right: 1.875rem;
padding: 1.125rem 2.25rem;
}
.sub-item .item-top {
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.sub-item div:nth-child(2) {
margin-top: 0.625rem;
font-size: 14px;
color: #4d4d4d;
}
.sub-item .item-top img {
margin-right: 0.375rem;
}
.sub-item:nth-child(1) .item-top img {
width: 1rem;
height: 1rem;
}
.sub-item:nth-child(2) .item-top img {
width: 1.125rem;
height: 1.25rem;
}
.sub-item:nth-child(3) .item-top img {
width: 1.125rem;
height: 1.25rem;
}
.sub-item:nth-child(4) .item-top img {
width: 1rem;
height: 1rem;
}
.sub-item:nth-child(5) .item-top img {
width: 1.125rem;
height: 1.125rem;
}
.sub-item:nth-child(6) .item-top img {
width: 1.0625rem;
height: 1rem;
}
.sub-item:nth-child(7) .item-top img {
width: 1.1875rem;
height: 1.125rem;
}
.sub-item:hover {
background: #edf5f2;
border-radius: 0.375rem;
}
.sub-header-list .sub-item:hover .item-top img[src*="whatsapp.svg"] {
content: url(https://gwfile.a2c.chat/static/images/common/whatsapp-hover.png);
}
.sub-header-list .sub-item:hover .item-top img[src*="customer.png"] {
content: url(https://gwfile.a2c.chat/static/images/common/customer-hover.png);
}
.sub-header-list .sub-item:hover .item-top img[src*="drainage.png"] {
content: url(https://gwfile.a2c.chat/static/images/common/drainage-hover.png);
}
.sub-header-list .sub-item:hover .item-top img[src*="manage.png"] {
content: url(https://gwfile.a2c.chat/static/images/common/manage-hover.png);
}
.sub-header-list .sub-item:hover .item-top img[src*="staff.png"] {
content: url(https://gwfile.a2c.chat/static/images/common/staff-hover.png);
}
.sub-header-list .sub-item:hover .item-top img[src*="mass-send.png"] {
content: url(https://gwfile.a2c.chat/static/images/common/mass-send-hover.png);
}
.sub-header-list .sub-item:hover .item-top img[src*="maintenance.png"] {
content: url(https://gwfile.a2c.chat/static/images/common/maintenance-hover.png);
}
.footer-main {
display: flex;
justify-content: space-between;
width: 100%;
border-top: 1px solid #e5e5e5;
margin-top: 7.5rem;
padding: 7.5rem 0;
}
.footer-logo {
width: 10.75rem;
height: 2.5rem;
}
.footer-desc {
margin-top: 1.375rem;
font-size: 14px;
color: #666;
height: 100%;
}
.footer-copyright {
font-size: 14px;
}
.footer-main .main-left {
width: 35%;
padding-right: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
@media screen and (max-width: 750px) {
.footer-main .main-left {
width: 100%;
padding: 0;
}
}
.main-right {
display: flex;
color: #161c2d;
}
.main-right dl:nth-child(-n + 3) {
margin-right: 6rem;
}
.main-right dt {
font-weight: 700;
}
.main-right dd {
margin-top: 1.5rem;
}
.question-answer {
margin-top: 6.875rem;
}
.answer-content {
margin-top: 4.5rem;
width: 100%;
height: auto;
background: #f8f9fd;
}
.answer-item {
font-weight: 700;
font-size: 24px;
}
.answer-item .answer-item-top {
border-bottom: 1px solid #e0e0e0;
}
.answer-item:last-child .answer-item-top {
border-bottom: none;
}
.answer-item:last-child .answer-item-top.active {
border-bottom: 1px solid #e0e0e0;
}
.answer-item-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5rem 0;
margin: 0 4rem;
cursor: pointer;
transition: all 0.3s ease;
}
.answer-item-icon {
cursor: pointer;
font-size: 28px;
font-weight: 700;
transition: all 0.3s ease;
}
.answer-item-content {
padding: 2.5rem 4rem 2.5rem;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
color: #666;
background-color: #f8f9fd;
border-bottom: 1px solid #e0e0e0;
}
.answer-item:last-child .answer-item-content {
border-bottom: none;
}
.answer-item-top:hover {
background-color: transparent;
}
.answer-item-title {
color: #000;
transition: none;
}
.answer-item-top:hover .answer-item-title {
color: #000;
}
.management-scheme {
padding: 6.875rem 0;
background: #f8f9fd;
overflow: hidden;
}
.scheme-content {
width: 100%;
}
.scheme-content .content-item {
padding: 2.625rem 4rem;
margin-top: 6.25rem;
display: flex;
align-items: center;
justify-content: space-around;
background: #fff;
border-radius: 1.5rem;
gap: 2rem;
}
.scheme-content .content-item .content-item-icon {
display: flex;
align-items: center;
justify-content: center;
width: 25.875rem;
height: 25.875rem;
border-radius: 1.25rem;
}
.bg-color-1 {
background: linear-gradient(90deg, #e8fde3 0, #e1e4fe 100%);
}
.bg-color-2 {
background: linear-gradient(90deg, #e5efff 0, #f1e6ff 100%);
}
.bg-color-3 {
background: #c6f5e5;
}
.bg-color-4 {
background: #edddff;
}
.bg-color-5 {
background: #e1efff;
}
.bg-color-6 {
background: #f4e5ec;
}
.scheme-2 {
width: 100%;
height: 100%;
}
.scheme-1 {
width: 19.5625rem;
height: 20.5rem;
}
.scheme-3 {
width: 23.125rem;
height: 22.5rem;
}
.scheme-4 {
width: 22.5rem;
height: 19.0625rem;
}
.scheme-6 {
width: 22.5rem;
height: 15.875rem;
}
.scheme-7 {
width: 23.375rem;
height: 12.0625rem;
}
.scheme-8 {
width: 27.1875rem;
height: 24.5rem;
}
.scheme-9 {
width: 28.5rem;
height: 21.25rem;
}
.scheme-10 {
width: 27.875rem;
height: 17.75rem;
}
.scheme-11 {
width: 26.625rem;
height: 25rem;
}
.item-text-title {
margin-bottom: 1.875rem;
font-weight: 700;
font-size: 34px;
}
.item-text-desc {
display: flex;
align-items: center;
margin-top: 1.25rem;
font-weight: 700;
}
.item-text-desc img {
margin-right: 0.625rem;
width: 1.125rem;
height: 1.125rem;
}
.major-function {
margin-top: 10rem;
}
.major-function-content {
display: flex;
width: 100%;
height: 30.625rem;
background: #f5f6f7;
border-radius: 1.5rem;
}
.major-function-content-left {
display: flex;
align-items: flex-end;
width: 33.1875rem;
height: 100%;
}
.major-function-content-left img {
width: 33.1875rem;
height: 31.8125rem;
}
.major-function-content-right {
flex: 1;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
padding-left: 4.625rem;
height: 100%;
}
.major-function-content-right-item {
margin-top: 3.75rem;
display: flex;
align-items: center;
}
.detail-server-icon {
display: flex;
align-items: center;
justify-content: center;
margin-right: 1.875rem;
width: 4rem;
height: 4rem;
background: #d7f4e9;
border-radius: 1.125rem;
}
.detail-server-icon-img {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
background: #a8f1d3;
border-radius: 0.875rem;
}
.detail-server-icon-img img {
width: 1.875rem;
height: 1.875rem;
}
.detail-server-title {
font-size: 20px;
font-weight: 700;
}
.major-function-content-right-item .detail-server {
width: 70%;
}