3714 lines
62 KiB
CSS
3714 lines
62 KiB
CSS
a {
|
|
color: #333
|
|
}
|
|
|
|
@keyframes scale-in-bottom {
|
|
0% {
|
|
transform: scale(0.5);
|
|
transform-origin: 50% 100%;
|
|
opacity: 0
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
transform-origin: 50% 100%;
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
@keyframes slide-out-bottom {
|
|
0% {
|
|
transform: translateY(0);
|
|
opacity: 1
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(40px);
|
|
opacity: 0
|
|
}
|
|
}
|
|
|
|
@keyframes fade-event-in-bottom {
|
|
0% {
|
|
transform: translateY(40px);
|
|
opacity: 0
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0px);
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
@keyframes menu-left {
|
|
0% {
|
|
left: 0;
|
|
opacity: 0
|
|
}
|
|
|
|
100% {
|
|
left: 170px;
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
@keyframes menu-left-out {
|
|
0% {
|
|
left: 170px;
|
|
opacity: 1
|
|
}
|
|
|
|
100% {
|
|
left: 0;
|
|
opacity: 0
|
|
}
|
|
}
|
|
|
|
@keyframes video-border {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(255,255,255,.6);
|
|
opacity: .4
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0 0 0 20px rgba(255,255,255,.6);
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
@keyframes width-animate {
|
|
0% {
|
|
width: 0
|
|
}
|
|
|
|
100% {
|
|
width: 100%
|
|
}
|
|
}
|
|
|
|
@keyframes zoomIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale3d(0.3, 0.3, 0.3)
|
|
}
|
|
|
|
50% {
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
.banner-wrap {
|
|
background: url("../image/callcenter_bg.png") no-repeat center top/cover;
|
|
height: 400px;
|
|
}
|
|
.banner-wrap2 {
|
|
background: url("../image/video_banner_bg4.png") no-repeat center bottom/cover;
|
|
height: 400px;
|
|
}
|
|
.banner-wrap3 {
|
|
background: url("../image/video_banner_bg2.png") no-repeat center bottom/cover;
|
|
height: 400px;
|
|
}
|
|
.banner-wrap4 {
|
|
background: url("../image/video_banner_bg3.png") no-repeat center bottom/cover;
|
|
height: 400px;
|
|
}
|
|
.call-box {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 400px;
|
|
color: #333;
|
|
}
|
|
|
|
.call-box h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.call-box p {
|
|
font-size: 1.4rem;
|
|
line-height: 1.7;
|
|
color: #666;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.call-box .banner-apply-box {
|
|
display: flex;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.call-box .banner-apply-box a {
|
|
display: block;
|
|
width: 140px;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
color: #fff;
|
|
transition: all .3s ease-in-out;
|
|
background: linear-gradient(90deg, #2f91d4 0%, #1881c9 100%)
|
|
}
|
|
|
|
.call-box .banner-apply-box a:hover {
|
|
box-shadow: 0 10px 25px 0 rgba(24,129,201,.5)
|
|
}
|
|
|
|
.call-box .banner-apply-box a:nth-child(2) {
|
|
margin-left: 20px;
|
|
color: #333;
|
|
background: #fff;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.call-box .banner-apply-box a:nth-child(2):hover {
|
|
box-shadow: 3px 15px 15px rgba(255,255,255,.1)
|
|
}
|
|
|
|
.banner-video-box {
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
position: relative;
|
|
margin-right: 25%
|
|
}
|
|
|
|
.banner-video-box .video-button {
|
|
width: 55px;
|
|
height: 55px;
|
|
line-height: 55px;
|
|
text-align: center;
|
|
background-color: #a1a4b0;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,.15);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
z-index: 10;
|
|
top: 50%;
|
|
left: 50%;
|
|
cursor: pointer;
|
|
transform: translate(-50%, -60%);
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.banner-video-box .video-button i {
|
|
font-size: 30px;
|
|
margin-left: 4px;
|
|
font-weight: bold;
|
|
color: #fff
|
|
}
|
|
|
|
.banner-video-box .video-button:hover {
|
|
background-color: #f55b5e
|
|
}
|
|
|
|
.banner-video-box .video-button:hover i {
|
|
color: #fff
|
|
}
|
|
|
|
.banner-video-box .video-button::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
content: "";
|
|
width: 55px;
|
|
height: 55px;
|
|
background: rgba(0,0,0,0);
|
|
z-index: 1;
|
|
animation: video-border 1s linear infinite
|
|
}
|
|
|
|
.advan-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
height: 265px
|
|
}
|
|
|
|
.advan-box .advan {
|
|
width: 25%;
|
|
padding: 30px 20px;
|
|
background-color: #f2f5fa;
|
|
transition: all .1s ease-in-out
|
|
}
|
|
|
|
.advan-box .advan:nth-child(even) {
|
|
background-color: #edf3fc
|
|
}
|
|
|
|
.advan-box .advan img {
|
|
width: 28px
|
|
}
|
|
|
|
.advan-box .advan .normal {
|
|
display: block
|
|
}
|
|
|
|
.advan-box .advan .hover {
|
|
display: none
|
|
}
|
|
|
|
.advan-box .advan h3 {
|
|
font-size: 18px;
|
|
line-height: 2;
|
|
margin-top: 10px
|
|
}
|
|
|
|
.advan-box .advan p {
|
|
color: #6e7080;
|
|
height: 71.4px;
|
|
line-height: 1.7
|
|
}
|
|
|
|
.advan-box .active {
|
|
padding: 60px 20px;
|
|
width: 25%;
|
|
color: #fff;
|
|
background: linear-gradient(90deg, #2f91d4 0%, #1881c9 100%);
|
|
}
|
|
|
|
.advan-box .active .normal {
|
|
display: none
|
|
}
|
|
|
|
.advan-box .active .hover {
|
|
display: block
|
|
}
|
|
|
|
.advan-box .active p {
|
|
font-size: 14px;
|
|
color: rgba(255,255,255,.8)
|
|
}
|
|
|
|
.mana-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
max-width: 1260px;
|
|
padding: 0 30px;
|
|
gap: 25px
|
|
}
|
|
|
|
.mana-box .mana-link {
|
|
flex: 1;
|
|
min-width: 40%
|
|
}
|
|
|
|
.mana-box .mana-link-top {
|
|
width: 100%
|
|
}
|
|
|
|
.mana-box .flex {
|
|
gap: 20px
|
|
}
|
|
|
|
.mana-top {
|
|
width: 100%;
|
|
padding: 60px 40px 30px 40px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid #f0f0f0;
|
|
background: url("../image/index_mana_top_bg.png") no-repeat right center/100% 100%;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.mana-top:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07)
|
|
}
|
|
|
|
.mana-top:hover .mana-text .mana-more {
|
|
opacity: 1;
|
|
margin-left: 0
|
|
}
|
|
|
|
.mana-top .mana-text .mana-link-link {
|
|
display: block;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
color: #000;
|
|
margin-bottom: 15px
|
|
}
|
|
|
|
.mana-top .mana-text .mana-link-link img {
|
|
height: 18px;
|
|
vertical-align: top
|
|
}
|
|
|
|
.mana-top .mana-text p {
|
|
font-size: 16px;
|
|
line-height: 1.7;
|
|
color: #282b42;
|
|
margin-bottom: 20px
|
|
}
|
|
|
|
.mana-top .mana-text ul {
|
|
padding-left: 20px;
|
|
margin-bottom: 10px
|
|
}
|
|
|
|
.mana-top .mana-text ul li {
|
|
font-size: 15px;
|
|
color: #282b42;
|
|
line-height: 1.7;
|
|
list-style: disc
|
|
}
|
|
|
|
.mana-top .mana-text strong {
|
|
color: #1881c9;
|
|
font-weight: normal
|
|
}
|
|
|
|
.mana-top .mana-text .mana-more {
|
|
display: block;
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
overflow: hidden;
|
|
padding: 4px 12px;
|
|
color: #fff;
|
|
background: linear-gradient(90deg, #2f91d4 0%, #1881c9 100%);
|
|
border-radius: 4px;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.mana-top .mana-text .mana-more i {
|
|
font-size: 12px;
|
|
margin-left: 4px
|
|
}
|
|
|
|
.mana-top .mana-text .mana-more-link {
|
|
margin-top: 30px;
|
|
display: flex;
|
|
align-items: center
|
|
}
|
|
|
|
.mana-top .mana-text .mana-more-link a {
|
|
display: block;
|
|
color: #1881c9;
|
|
font-size: 15px;
|
|
padding: 0 10px;
|
|
position: relative;
|
|
transition: all .2s ease-in-out
|
|
}
|
|
|
|
.mana-top .mana-text .mana-more-link a:not(:last-child):after {
|
|
content: "|";
|
|
font-weight: bold;
|
|
color: #ccc;
|
|
font-size: 12px;
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0
|
|
}
|
|
|
|
.mana-top .mana-text .mana-more-link a:first-child {
|
|
padding-left: 0
|
|
}
|
|
|
|
.mana-top .video-button {
|
|
width: 55px;
|
|
height: 55px;
|
|
line-height: 55px;
|
|
text-align: center;
|
|
background-color: #a1a4b0;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,.15);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
z-index: 10;
|
|
top: 50%;
|
|
right: 22%;
|
|
cursor: pointer;
|
|
transform: translate(-50%, -60%);
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.mana-top .video-button i {
|
|
font-size: 30px;
|
|
margin-left: 4px;
|
|
font-weight: bold;
|
|
color: #fff
|
|
}
|
|
|
|
.mana-top .video-button:hover {
|
|
background-color: #f55b5e
|
|
}
|
|
|
|
.mana-top .video-button:hover i {
|
|
color: #fff
|
|
}
|
|
|
|
.mana-top .video-button::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
content: "";
|
|
width: 55px;
|
|
height: 55px;
|
|
background: rgba(0,0,0,0);
|
|
z-index: 1;
|
|
animation: video-border 1s linear infinite
|
|
}
|
|
|
|
.mana-item-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
justify-content: space-between
|
|
}
|
|
|
|
.mana-item {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
padding: 60px 0 40px 40px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
justify-content: center;
|
|
border: 1px solid #f0f0f0;
|
|
background: url("../image/solu_sence_bg.png") no-repeat center center/100% 100%;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.mana-item .mana-text {
|
|
flex: 1
|
|
}
|
|
|
|
.mana-item .mana-text .mana-link-link {
|
|
display: block;
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
color: #000;
|
|
margin-bottom: 15px
|
|
}
|
|
|
|
.mana-item .mana-text p {
|
|
font-size: 16px;
|
|
line-height: 1.7;
|
|
color: #282b42;
|
|
margin-bottom: 20px;
|
|
min-height: 47.6px
|
|
}
|
|
|
|
.mana-item .mana-text ul {
|
|
padding-left: 20px;
|
|
margin-bottom: 10px;
|
|
min-height: 105.2px
|
|
}
|
|
|
|
.mana-item .mana-text ul li {
|
|
font-size: 15px;
|
|
color: #282b42;
|
|
line-height: 1.7;
|
|
list-style: disc;
|
|
margin-top: 8px;
|
|
margin-bottom: 8px
|
|
}
|
|
|
|
.mana-item .mana-text strong {
|
|
color: #1881c9;
|
|
font-weight: normal
|
|
}
|
|
|
|
.mana-item .mana-text .mana-more {
|
|
display: block;
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
overflow: hidden;
|
|
padding: 4px 12px;
|
|
color: #fff;
|
|
background: linear-gradient(90deg, #2f91d4 0%, #1881c9 100%);
|
|
border-radius: 4px;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.mana-item .mana-text .mana-more i {
|
|
font-size: 12px;
|
|
margin-left: 4px
|
|
}
|
|
|
|
.mana-item .mana-img {
|
|
width: 48%;
|
|
margin-left: 2%;
|
|
margin-bottom: 5%;
|
|
align-self: center
|
|
}
|
|
|
|
.mana-item .mana-img img {
|
|
max-width: 100%;
|
|
opacity: 1;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.mana-item:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07)
|
|
}
|
|
|
|
.mana-item:hover .mana-text .mana-more {
|
|
margin-left: 0;
|
|
opacity: 1
|
|
}
|
|
|
|
.mana-link:nth-child(n+4) .mana-text ul li:last-child {
|
|
height: auto !important
|
|
}
|
|
|
|
.mana-link:nth-child(4) .mana-text ul li:first-child {
|
|
height: auto !important
|
|
}
|
|
|
|
.mana-link:nth-child(4) .mana-text ul li:last-child {
|
|
height: 48px !important
|
|
}
|
|
|
|
|
|
.call-video-wrap {
|
|
padding-top: 130px;
|
|
background: url("../image/call_video_bg.png") no-repeat center top/cover
|
|
}
|
|
|
|
.call-video-wrap .call-video-box {
|
|
justify-content: space-between;
|
|
align-items: center
|
|
}
|
|
|
|
.call-video-wrap .call-video-text {
|
|
flex: 1;
|
|
margin-right: 5%
|
|
}
|
|
|
|
.call-video-wrap .call-video-text h3 {
|
|
margin-bottom: 30px;
|
|
font-weight: bold
|
|
}
|
|
|
|
.call-video-wrap .call-video-text p {
|
|
font-size: 16px;
|
|
line-height: 1.7
|
|
}
|
|
|
|
.call-video-wrap .shadow-active {
|
|
box-shadow: 0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)
|
|
}
|
|
|
|
.call-video-wrap .call-video {
|
|
width: 45%;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
position: relative
|
|
}
|
|
|
|
.call-video-wrap .call-video video {
|
|
max-width: 100%
|
|
}
|
|
|
|
.call-video-wrap .video-button {
|
|
width: 55px;
|
|
height: 55px;
|
|
line-height: 55px;
|
|
text-align: center;
|
|
background-color: #a1a4b0;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,.15);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
z-index: 10;
|
|
top: 50%;
|
|
left: 50%;
|
|
cursor: pointer;
|
|
transform: translate(-50%, -60%);
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.call-video-wrap .video-button i {
|
|
font-size: 30px;
|
|
margin-left: 4px;
|
|
font-weight: bold;
|
|
color: #fff
|
|
}
|
|
|
|
.call-video-wrap .video-button:hover {
|
|
background-color: #f55b5e
|
|
}
|
|
|
|
.call-video-wrap .video-button:hover i {
|
|
color: #fff
|
|
}
|
|
|
|
.call-video-wrap .video-button::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
content: "";
|
|
width: 55px;
|
|
height: 55px;
|
|
background: rgba(0,0,0,0);
|
|
z-index: 1;
|
|
animation: video-border 1s linear infinite
|
|
}
|
|
|
|
.call-feature-wrap .call-feature-box {
|
|
align-items: stretch
|
|
}
|
|
|
|
.call-feature-wrap .call-feature-box .call-feature {
|
|
flex: 1;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background-color: #f9fbfe;
|
|
border: 1px solid #e2e7ed;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.call-feature-wrap .call-feature-box .call-feature:nth-child(2) {
|
|
margin: 0 30px
|
|
}
|
|
|
|
.call-feature-wrap .apply-btn-box {
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
margin: 40px auto 0
|
|
}
|
|
|
|
.call-feature .call-feature-header {
|
|
padding-left: 30px;
|
|
align-items: center;
|
|
height: 70px;
|
|
background: linear-gradient(90deg, #7b9efc 0%, #527ae3 100%)
|
|
}
|
|
|
|
.call-feature .call-feature-header img {
|
|
max-height: 26px;
|
|
margin-right: 15px
|
|
}
|
|
|
|
.call-feature:nth-child(2) .call-feature-header {
|
|
background: linear-gradient(90deg, #9d94e6 0%, #6874d0 100%)
|
|
}
|
|
|
|
.call-feature:nth-child(3) .call-feature-header {
|
|
background: linear-gradient(96deg, #7684c3 0%, #2e418e 100%)
|
|
}
|
|
|
|
.call-feature .call-feature-content {
|
|
height: 100%;
|
|
padding: 30px 10px 30px 25px;
|
|
background: url("../image/call_feature_bg.png") no-repeat center center/cover
|
|
}
|
|
|
|
.call-feature .call-feature-phone {
|
|
height: 201.2px
|
|
}
|
|
|
|
.call-feature .call-feature-phone p {
|
|
display: flex;
|
|
line-height: 1.7
|
|
}
|
|
|
|
.call-feature .call-feature-phone p:nth-child(2) {
|
|
margin-bottom: 8px
|
|
}
|
|
|
|
.call-feature .call-feature-phone p span {
|
|
font-size: var(--font-size);
|
|
margin-right: 10px;
|
|
color: #282b42
|
|
}
|
|
|
|
.call-feature h3 {
|
|
font-size: 20px;
|
|
line-height: 3;
|
|
font-weight: bold;
|
|
color: #fff
|
|
}
|
|
|
|
.call-feature h3 i {
|
|
font-size: 24px;
|
|
vertical-align: -1px;
|
|
margin-right: 8px;
|
|
color: #b9bcc5
|
|
}
|
|
|
|
.call-feature h4 {
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
margin-bottom: 20px
|
|
}
|
|
|
|
.call-feature p {
|
|
font-size: 15px;
|
|
line-height: 2;
|
|
color: #282b42
|
|
}
|
|
|
|
.call-feature:hover {
|
|
cursor: defalut;
|
|
transform: translateY(-8px);
|
|
box-shadow: -1px 29px 42px 4px rgba(190,213,255,.34);
|
|
border: solid 1px #9dbcf7
|
|
}
|
|
|
|
.compare-wrap {
|
|
padding-top: 50px;
|
|
background: url("../image/gover_solu_bg.png") no-repeat center bottom/cover
|
|
}
|
|
|
|
.compare-wrap .title span {
|
|
font-size: 40px;
|
|
font-weight: bold
|
|
}
|
|
|
|
.compare-wrap .compare-box {
|
|
max-width: 1080px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between
|
|
}
|
|
|
|
.compare-left {
|
|
width: 45%;
|
|
position: relative;
|
|
top: 20px;
|
|
border-radius: 30px 0px 0px 0px;
|
|
padding-bottom: 20px;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
box-shadow: 0px 12px 12px 1px #eff0f4
|
|
}
|
|
|
|
.compare-left h3 {
|
|
position: relative;
|
|
font-size: 24px;
|
|
line-height: 90px;
|
|
text-align: center;
|
|
color: #fff;
|
|
border-radius: 30px 0px 0px 0px;
|
|
background: linear-gradient(217deg, #9d92e3 0%, #735cd0 100%)
|
|
}
|
|
|
|
.compare-left h3::after {
|
|
content: "TRADIITIONAL";
|
|
position: absolute;
|
|
opacity: .2;
|
|
top: 0;
|
|
right: 10%;
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent 0%, #fff 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: rgba(0,0,0,0)
|
|
}
|
|
|
|
.compare-left .compare-item {
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
min-width: 55%;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 20%;
|
|
border-bottom: 1px solid #e7edf5
|
|
}
|
|
|
|
.compare-left .compare-item:last-child {
|
|
border-bottom: none
|
|
}
|
|
|
|
.compare-left .compare-item i {
|
|
font-size: 18px;
|
|
color: #c3c9d5
|
|
}
|
|
|
|
.compare-left .compare-item p {
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
color: #282b42;
|
|
margin-left: 15px
|
|
}
|
|
|
|
.compare-right {
|
|
width: 55%;
|
|
padding-bottom: 40px;
|
|
background-color: #f5f9ff;
|
|
box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07)
|
|
}
|
|
|
|
.compare-right h3 {
|
|
position: relative;
|
|
font-size: 24px;
|
|
line-height: 110px;
|
|
text-align: center;
|
|
border-radius: 0px 30px 0px 0px;
|
|
background: linear-gradient(40deg, #74a1f5 0%, #456bef 100%);
|
|
color: #fff
|
|
}
|
|
|
|
.compare-right h3::after {
|
|
content: "INTELLIGENT";
|
|
position: absolute;
|
|
opacity: .2;
|
|
top: 0;
|
|
right: 10%;
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent 0%, #fff 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: rgba(0,0,0,0)
|
|
}
|
|
|
|
.compare-right .compare-item {
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
min-width: 50%;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 20%;
|
|
border-bottom: 1px solid #e7edf5
|
|
}
|
|
|
|
.compare-right .compare-item:last-child {
|
|
border-bottom: none
|
|
}
|
|
|
|
.compare-right .compare-item i {
|
|
font-size: 18px;
|
|
color: #4383fa
|
|
}
|
|
|
|
.compare-right .compare-item p {
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
color: #000;
|
|
margin-left: 15px
|
|
}
|
|
|
|
.call-sence-box {
|
|
background-color: #f4f7fa;
|
|
padding: 20px 0
|
|
}
|
|
|
|
.call-sence-box .call-sence-tab h3 {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
line-height: 2.5;
|
|
text-indent: 30px;
|
|
padding-right: 20px;
|
|
cursor: default;
|
|
border-left: 4px solid rgba(0,0,0,0)
|
|
}
|
|
|
|
.call-sence-box .call-sence-tab h3.active {
|
|
background-color: #fff;
|
|
color: #f23c3c;
|
|
border-left: 4px solid #f23c3c
|
|
}
|
|
|
|
.call-sence-box .call-sence-content {
|
|
flex: 1;
|
|
margin-left: 8%;
|
|
padding-right: 2%
|
|
}
|
|
|
|
.call-sence-box .call-sence-content .call-sence {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: default
|
|
}
|
|
|
|
.call-sence-box .call-sence-content .call-sence .call-sence-text {
|
|
flex: 1
|
|
}
|
|
|
|
.call-sence-box .call-sence-content .call-sence .call-sence-img {
|
|
width: 40%;
|
|
margin-left: 4%
|
|
}
|
|
|
|
.call-sence-box .call-sence-content h4 {
|
|
font-size: 24px;
|
|
line-height: 4
|
|
}
|
|
|
|
.call-sence-box .call-sence-content p {
|
|
font-size: 16px;
|
|
line-height: 1.7
|
|
}
|
|
|
|
.call-item-wrap .gray {
|
|
padding-top: 80px;
|
|
padding-bottom: 80px;
|
|
margin-top: 80px;
|
|
margin-bottom: 80px
|
|
}
|
|
|
|
.call-item-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2%
|
|
}
|
|
|
|
.call-item-box .call-item-text {
|
|
flex: 1
|
|
}
|
|
|
|
.call-item-box .call-item-img {
|
|
width: 52%
|
|
}
|
|
|
|
.call-item-text h3 {
|
|
margin-bottom: 30px
|
|
}
|
|
|
|
.call-item-text h4 {
|
|
font-size: 26px;
|
|
margin-top: 20px;
|
|
margin-bottom: 30px
|
|
}
|
|
|
|
.call-item-text h5 {
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
margin-bottom: 10px;
|
|
transition: all .2s ease-in-out
|
|
}
|
|
|
|
.call-item-text h6 {
|
|
font-size: 15px;
|
|
line-height: 2;
|
|
color: #282b42
|
|
}
|
|
.call-item-text .has{
|
|
font-size: 1.06em;
|
|
margin-bottom: 0;
|
|
}
|
|
.call-item-text .has::before{
|
|
content: "";
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 4px;
|
|
margin-right: 10px;
|
|
border-radius: 50%;
|
|
background-color: #1881c9;
|
|
}
|
|
.call-item-text p {
|
|
font-size: 15px;
|
|
color: #6e7080;
|
|
margin-top: 8px;
|
|
}
|
|
.call-item-text p::before{
|
|
content: "";
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 4px;
|
|
margin-right: 10px;
|
|
border-radius: 50%;
|
|
background-color: #1881c9;
|
|
}
|
|
.call-item-text .flex-phone2 p{
|
|
margin-top: 5px;
|
|
}
|
|
.call-item-text .flex-phone2 p::before{
|
|
display: none;
|
|
}
|
|
.call-item-text .call-item-text-img {
|
|
min-width: 37px
|
|
}
|
|
|
|
.call-item-text .call-item-text-img img {
|
|
width: 22px;
|
|
margin-right: 15px
|
|
}
|
|
|
|
.call-item-text .call-item-text-img .hover {
|
|
display: none
|
|
}
|
|
|
|
.call-item-text .flex {
|
|
margin-bottom: 25px
|
|
}
|
|
|
|
.call-item-text .flex:hover .hover {
|
|
display: block
|
|
}
|
|
|
|
.call-item-text .flex:hover .normal {
|
|
display: none
|
|
}
|
|
|
|
.call-item-text .flex:hover h5 {
|
|
color: #eb485b
|
|
}
|
|
|
|
.call-item-text .flex-phone {
|
|
display: block
|
|
}
|
|
|
|
.call-item-text .apply-btn-box {
|
|
margin-top: 0;
|
|
margin-left: 0
|
|
}
|
|
|
|
.call-item-text .call-item-kefu {
|
|
display: block;
|
|
width: 200px;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
text-align: center;
|
|
color: #fff;
|
|
background: linear-gradient(90deg, #2f91d4 0%, #1881c9 100%);
|
|
border-radius: 4px 4px 4px 4px
|
|
}
|
|
|
|
.call-sys-wrap {
|
|
background: #f2f5f9 url("../image/call_sys_bg.png") no-repeat left top/cover;
|
|
text-align: center
|
|
}
|
|
|
|
.call-sys-wrap .title-p {
|
|
color: #6e7080
|
|
}
|
|
|
|
.call-sys-wrap img {
|
|
max-width: 960px
|
|
}
|
|
|
|
.edition-wrap {
|
|
background: url("../image/call_edition_wrap.png") no-repeat left top/cover
|
|
}
|
|
|
|
.edition-wrap .edition-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center
|
|
}
|
|
|
|
.edition-wrap .price-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 40px
|
|
}
|
|
|
|
.edition-wrap .price-box a {
|
|
display: block;
|
|
width: 160px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
font-size: var(--font-size);
|
|
border-radius: 4px;
|
|
color: #636363;
|
|
background-color: #f0f0f0;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.edition-wrap .price-box a:hover {
|
|
box-shadow: 3px 15px 15px rgba(0,0,0,.1)
|
|
}
|
|
|
|
.edition-wrap .price-box a:first-child {
|
|
color: #fff;
|
|
background-color: #1881c9;
|
|
background: linear-gradient(to right, #2f91d4, #1881c9)
|
|
}
|
|
|
|
.edition-wrap .price-box a:first-child:hover {
|
|
box-shadow: 0 10px 25px 0 rgba(24,129,201,.5)
|
|
}
|
|
|
|
.edition {
|
|
width: 30%;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.edition:hover {
|
|
cursor: defalut;
|
|
transform: translateY(-10px);
|
|
box-shadow: -1px 10px 20px 4px rgba(190,213,255,.34)
|
|
}
|
|
|
|
.edition:hover .edition-buy {
|
|
color: #fff;
|
|
border: 1px solid #6d74cc;
|
|
background: #6d74cc
|
|
}
|
|
|
|
.edition .edition-header {
|
|
padding: 20px 0;
|
|
text-align: center;
|
|
color: #fff;
|
|
background: url("../image/call_edition1.png") no-repeat top left/100%
|
|
}
|
|
|
|
.edition .edition-header h3 {
|
|
font-size: 24px
|
|
}
|
|
|
|
.edition .edition-header p {
|
|
font-size: 15px;
|
|
width: 70%;
|
|
opacity: .8;
|
|
margin: 5px auto 0;
|
|
line-height: 1.7
|
|
}
|
|
|
|
.edition .edition-center-header {
|
|
background: url("../image/call_edition2.png") no-repeat top left/100%
|
|
}
|
|
|
|
.edition .edition-right-header {
|
|
background: url("../image/call_edition3.png") no-repeat top left/100%
|
|
}
|
|
|
|
.edition h4 {
|
|
font-size: 16px;
|
|
margin-top: 15px;
|
|
color: #282b42;
|
|
text-align: center
|
|
}
|
|
|
|
.edition h4 span {
|
|
color: #333
|
|
}
|
|
|
|
.edition h4 i {
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
color: #333;
|
|
margin: 0 3px
|
|
}
|
|
|
|
.edition .edition-buy {
|
|
display: block;
|
|
margin: 15px auto;
|
|
width: 220px;
|
|
height: 38px;
|
|
line-height: 38px;
|
|
border-radius: 3px;
|
|
color: #6d74cc;
|
|
background: #f2efff;
|
|
border: 1px solid #6d74cc;
|
|
text-align: center;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.edition .edition-con {
|
|
padding-left: 35%;
|
|
margin-bottom: 30px
|
|
}
|
|
|
|
.edition .edition-con h4 {
|
|
font-size: var(--font-size);
|
|
line-height: 1.7;
|
|
color: #6e7080;
|
|
text-align: left;
|
|
margin-bottom: 5px
|
|
}
|
|
|
|
.edition .edition-con p {
|
|
font-size: 15px;
|
|
line-height: 2.2;
|
|
color: #333
|
|
}
|
|
|
|
.edition .edition-con p:last-child {
|
|
padding-left: 20px;
|
|
line-height: 1.5
|
|
}
|
|
|
|
.edition .edition-con p i {
|
|
font-size: 13px;
|
|
color: #9b95eb;
|
|
margin-right: 5px
|
|
}
|
|
|
|
.edition:nth-child(2) {
|
|
width: 32%;
|
|
z-index: 9;
|
|
overflow: visible;
|
|
position: relative;
|
|
box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07)
|
|
}
|
|
|
|
.edition:nth-child(2):hover {
|
|
box-shadow: -1px 10px 20px 4px rgba(190,213,255,.34)
|
|
}
|
|
|
|
.edition:nth-child(2):hover .edition-buy {
|
|
color: #fff;
|
|
border: 1px solid #f46b6b;
|
|
background: #f46b6b
|
|
}
|
|
|
|
.edition:nth-child(2) .price-most-hot {
|
|
position: absolute;
|
|
top: -7px;
|
|
right: -8px
|
|
}
|
|
|
|
.edition:nth-child(2) .edition-buy {
|
|
color: #ec3a3a;
|
|
background: #ffe7e7;
|
|
border: 1px solid #ec3a3a
|
|
}
|
|
|
|
.edition:nth-child(2) .edition-con {
|
|
margin-bottom: 40px
|
|
}
|
|
|
|
.edition:nth-child(2) .edition-con i {
|
|
color: #f15b5b
|
|
}
|
|
|
|
.edition:nth-child(3) {
|
|
width: 30%;
|
|
z-index: 9;
|
|
box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07)
|
|
}
|
|
|
|
.edition:nth-child(3):hover {
|
|
box-shadow: -1px 10px 20px 4px rgba(190,213,255,.34)
|
|
}
|
|
|
|
.edition:nth-child(3):hover .edition-buy {
|
|
color: #fff;
|
|
border: 1px solid #6ba3f7;
|
|
background: #6ba3f7
|
|
}
|
|
|
|
.edition:nth-child(3) .edition-tips {
|
|
font-size: 13px;
|
|
color: #6e7080;
|
|
text-align: center;
|
|
font-weight: bold
|
|
}
|
|
|
|
.edition:nth-child(3) .edition-buy {
|
|
margin-bottom: 35px;
|
|
color: #6ba3f7;
|
|
border: 1px solid #6ba3f7;
|
|
background: rgba(107,163,247,.1)
|
|
}
|
|
|
|
.edition:nth-child(3) .edition-con {
|
|
padding-left: 30px;
|
|
padding-right: 30px
|
|
}
|
|
|
|
.edition:nth-child(3) .edition-con p {
|
|
line-height: 1.7
|
|
}
|
|
|
|
.edition:nth-child(3) .edition-con p:last-child {
|
|
color: #6e7080;
|
|
margin-top: 20px;
|
|
margin-bottom: 85px;
|
|
padding-left: 0
|
|
}
|
|
|
|
.edition:nth-child(3) .edition-con i {
|
|
color: #5b93f1
|
|
}
|
|
|
|
.apply-btn-box {
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
margin: 40px auto 0
|
|
}
|
|
|
|
.call-more-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
transition: all .4s ease-in-out;
|
|
background-color: #e9ecf1;
|
|
border: 1px solid #e9ecf1;
|
|
gap: 1px
|
|
}
|
|
|
|
.call-more-box .call-more {
|
|
display: block;
|
|
flex: 1;
|
|
min-width: 24%;
|
|
overflow: visible;
|
|
padding: 30px 0;
|
|
background-color: #fff;
|
|
position: relative;
|
|
text-align: center
|
|
}
|
|
|
|
.call-more-box .call-more img {
|
|
height: 32px
|
|
}
|
|
|
|
.call-more-box .call-more h3 {
|
|
font-size: 17px;
|
|
margin: 20px 0 5px
|
|
}
|
|
|
|
.call-more-box .call-more p {
|
|
color: #6e7080;
|
|
font-size: var(--font-size)
|
|
}
|
|
|
|
.call-more-box .call-more .order-hover {
|
|
cursor: default;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
background-color: #fff;
|
|
font-size: 16px;
|
|
padding: 0 26px;
|
|
color: #282b42;
|
|
z-index: 5;
|
|
opacity: 0;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.call-more-box .call-more:hover {
|
|
cursor: defalut;
|
|
background-color: #f9fbfd;
|
|
z-index: 5;
|
|
transition: all .3s ease-in-out;
|
|
box-shadow: 1px 13px 29px 3px rgba(217,226,237,.74)
|
|
}
|
|
|
|
.call-more-box .call-more:hover h3 {
|
|
color: #f52c3b
|
|
}
|
|
|
|
.use-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between
|
|
}
|
|
|
|
.use-left {
|
|
width: 25%;
|
|
position: relative;
|
|
z-index: 10
|
|
}
|
|
|
|
.use-left .use-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
padding: 5% 10% 5% 12%;
|
|
min-height: 84px;
|
|
}
|
|
|
|
.use-left .use-tab i {
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
margin-right: 8%;
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
color: #e0e1e6
|
|
}
|
|
|
|
.use-left .use-tab h4 {
|
|
font-size: 18px
|
|
}
|
|
|
|
.use-left .use-tab h5 {
|
|
font-size: 16px
|
|
}
|
|
|
|
.use-left .use-tab .show {
|
|
display: none
|
|
}
|
|
|
|
.use-left .use-tab p {
|
|
display: none;
|
|
overflow: hidden;
|
|
height: 0;
|
|
font-size: 15px;
|
|
margin-top: 0
|
|
}
|
|
|
|
.use-left .use-tab img {
|
|
height: 8px;
|
|
margin-left: 18%
|
|
}
|
|
|
|
.use-left .use-tab.active {
|
|
color: #fff;
|
|
transition: box-shadow .1s ease-in-out;
|
|
background: linear-gradient(90deg, #2f91d4 0%, #1881c9 100%);
|
|
box-shadow: 0px 12px 27px 0px rgba(24,129,201,.5);
|
|
}
|
|
|
|
.use-left .use-tab.active .hide {
|
|
display: none
|
|
}
|
|
|
|
.use-left .use-tab.active .show {
|
|
display: block
|
|
}
|
|
|
|
.use-left .use-tab.active i {
|
|
font-size: 28px;
|
|
color: #fff
|
|
}
|
|
|
|
.use-left .use-tab.active p {
|
|
display: block;
|
|
height: 20px;
|
|
margin-top: 6px;
|
|
color: #fff;
|
|
}
|
|
|
|
.use-left .use-tab.active img {
|
|
display: none
|
|
}
|
|
|
|
.use-right {
|
|
flex: 1;
|
|
margin-left: -3%;
|
|
padding: 5% 8%;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
background: url("../image/call_use_bg.png") no-repeat left top/cover
|
|
}
|
|
|
|
.use-right .use-line {
|
|
width: 80px;
|
|
height: 3px;
|
|
margin: 20px 0;
|
|
border-radius: 1.5px;
|
|
background-color: #ff4545
|
|
}
|
|
|
|
.use-right h4 {
|
|
font-size: 24px
|
|
}
|
|
|
|
.use-right h5 {
|
|
font-size: 16px;
|
|
max-width: 70%;
|
|
line-height: 1.7;
|
|
margin-bottom: 20px
|
|
}
|
|
|
|
.use-right p {
|
|
color: #6e7080;
|
|
font-size: var(--font-size);
|
|
line-height: 2
|
|
}
|
|
|
|
.use-right p i {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #ff4545;
|
|
margin-right: 10px
|
|
}
|
|
|
|
.use-right .use-active {
|
|
z-index: 9;
|
|
animation: fade-event-in-bottom .5s ease-out .2s both
|
|
}
|
|
|
|
.use-right .out {
|
|
animation: slide-out-bottom .2s ease-out both;
|
|
position: absolute
|
|
}
|
|
|
|
.call-honor-wrap {
|
|
padding-bottom: 60px;
|
|
background: url("../image/call_honor_bg.png") no-repeat left top/cover
|
|
}
|
|
|
|
.call-honor-wrap .title-p span {
|
|
color: #f23c3c;
|
|
font-weight: bold
|
|
}
|
|
|
|
.call-honor-wrap .call-honor-video {
|
|
width: 40%;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
position: relative
|
|
}
|
|
|
|
.call-honor-wrap .call-honor-video video {
|
|
width: 100%
|
|
}
|
|
|
|
.call-honor-wrap .call-honor-video .video-button {
|
|
width: 55px;
|
|
height: 55px;
|
|
line-height: 55px;
|
|
text-align: center;
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,.15);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
z-index: 10;
|
|
top: 50%;
|
|
left: 50%;
|
|
cursor: pointer;
|
|
transform: translate(-50%, -60%);
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.call-honor-wrap .call-honor-video .video-button i {
|
|
font-size: 30px;
|
|
margin-left: 4px;
|
|
font-weight: bold;
|
|
color: #f83838
|
|
}
|
|
|
|
.call-honor-wrap .call-honor-video .video-button:hover {
|
|
background-color: #f55b5e
|
|
}
|
|
|
|
.call-honor-wrap .call-honor-video .video-button:hover i {
|
|
color: #fff
|
|
}
|
|
|
|
.call-honor-wrap .call-honor-video .video-button::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
content: "";
|
|
width: 55px;
|
|
height: 55px;
|
|
background: rgba(0,0,0,0);
|
|
z-index: 1;
|
|
animation: video-border 1s linear infinite
|
|
}
|
|
|
|
.call-honor-wrap .call-honor-box .call-honor-right {
|
|
flex: 1;
|
|
margin-left: 20px
|
|
}
|
|
|
|
.call-honor-wrap .call-honor-box .call-honor-right img {
|
|
width: 100%
|
|
}
|
|
|
|
.call-fuwu-wrap .call-fuwu-box {
|
|
background-color: #fff
|
|
}
|
|
|
|
.call-fuwu-wrap .fuwu-wrap {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 60px;
|
|
padding: 70px 50px;
|
|
background-color: #eff3f7
|
|
}
|
|
|
|
.call-fuwu-wrap .price-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 40px
|
|
}
|
|
|
|
.call-fuwu-wrap .price-box a {
|
|
display: block;
|
|
width: 110px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
font-size: var(--font-size);
|
|
border-radius: 4px;
|
|
color: #636363;
|
|
background-color: #f0f0f0;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.call-fuwu-wrap .price-box a:hover {
|
|
box-shadow: 3px 15px 15px rgba(0,0,0,.1)
|
|
}
|
|
|
|
.call-fuwu-wrap .price-box a:first-child {
|
|
margin-right: 25px;
|
|
color: #fff;
|
|
background-color: #1881c9;
|
|
background: linear-gradient(to right, #2f91d4, #1881c9)
|
|
}
|
|
|
|
.call-fuwu-wrap .price-box a:first-child:hover {
|
|
box-shadow: 0 10px 25px 0 rgba(24,129,201,.5)
|
|
}
|
|
|
|
.call-fuwu-tab {
|
|
display: flex;
|
|
max-width: 700px;
|
|
margin: 0 auto 20px;
|
|
justify-content: space-between;
|
|
cursor: pointer
|
|
}
|
|
|
|
.call-fuwu-tab li {
|
|
position: relative;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
padding-bottom: 11px;
|
|
color: #282b42;
|
|
margin-right: 120px;
|
|
border-bottom: 2px solid #1881c9
|
|
}
|
|
|
|
.call-fuwu-tab li span {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -2px;
|
|
display: block;
|
|
height: 8px;
|
|
width: 100%;
|
|
z-index: 20;
|
|
background-color: #fff;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.call-fuwu-tab li.active,.call-fuwu-tab li:hover {
|
|
color: #1881c9
|
|
}
|
|
|
|
.call-fuwu-tab li.active:after,.call-fuwu-tab li:hover:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -4px;
|
|
bottom: -5px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-top: 2px solid #1881c9;
|
|
border-left: 2px solid #1881c9;
|
|
background-color: #fff;
|
|
z-index: 10;
|
|
transform: rotate(45deg)
|
|
}
|
|
|
|
.call-fuwu-tab li.active span,.call-fuwu-tab li:hover span {
|
|
transform: translateX(100%)
|
|
}
|
|
|
|
.call-fuwu-tab li:last-child {
|
|
margin-right: 0
|
|
}
|
|
|
|
.call-fuwu {
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
transition: all .4s ease-in-out
|
|
}
|
|
|
|
.call-fuwu .call-fuwu-item {
|
|
flex: 1
|
|
}
|
|
|
|
.call-fuwu .call-fuwu-item-center {
|
|
margin: 0 65px
|
|
}
|
|
|
|
.call-fuwu h4 {
|
|
width: 100%;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
text-align: center;
|
|
margin-bottom: 40px
|
|
}
|
|
|
|
.call-fuwu h5 {
|
|
font-size: 16px;
|
|
margin: 25px 0 15px
|
|
}
|
|
|
|
.call-fuwu h5 i {
|
|
color: #eb2929;
|
|
font-style: normal;
|
|
margin-right: 8px
|
|
}
|
|
|
|
.call-fuwu p {
|
|
font-size: var(--font-size);
|
|
line-height: 1.7;
|
|
color: #6e7080
|
|
}
|
|
|
|
.call-fuwu-bottom {
|
|
display: flex;
|
|
justify-content: space-evenly
|
|
}
|
|
|
|
.call-fuwu-bottom .call-fuwu-bottom-item {
|
|
width: 30%
|
|
}
|
|
|
|
.call-fuwu-bottom .call-fuwu-bottom-item img {
|
|
width: auto;
|
|
height: 160px
|
|
}
|
|
|
|
.call-fuwu-bottom .call-fuwu-bottom-item h4 {
|
|
font-size: 18px;
|
|
line-height: 4;
|
|
color: #000
|
|
}
|
|
|
|
.call-fuwu-bottom .call-fuwu-bottom-item p {
|
|
width: 94%;
|
|
margin: 0 auto;
|
|
font-size: var(--font-size);
|
|
line-height: 1.7;
|
|
color: #6e7080
|
|
}
|
|
|
|
.call-state-wrap {
|
|
padding-bottom: 40px
|
|
}
|
|
|
|
.call-state-wrap .call-state-box {
|
|
position: relative;
|
|
padding: 0 80px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: space-between
|
|
}
|
|
|
|
.call-state-wrap .call-state-box::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 55px;
|
|
left: 80px;
|
|
right: 80px;
|
|
display: block;
|
|
width: calc(100% - 160px);
|
|
height: 1px;
|
|
background-color: #b2c2e5
|
|
}
|
|
|
|
.call-state-wrap .call-state-box .swiper-slide {
|
|
width: 25%;
|
|
flex-shrink: 0;
|
|
margin-bottom: 40px
|
|
}
|
|
|
|
.call-state-wrap .call-state-box .swiper-slide:hover {
|
|
cursor: pointer
|
|
}
|
|
|
|
.call-state-wrap .call-state-box .swiper-slide:hover .tooltip {
|
|
color: #fff;
|
|
background-color: #f83838
|
|
}
|
|
|
|
.call-state-wrap .call-state-box .swiper-slide:hover .tooltip::after {
|
|
background-color: #f83838
|
|
}
|
|
|
|
.call-state-wrap .call-state-box .swiper-slide:hover .call-state-line {
|
|
background-color: #f83838
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-prev {
|
|
position: absolute;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 60px;
|
|
height: 100%;
|
|
background-color: #f4f7fa
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-prev div {
|
|
position: absolute;
|
|
top: 45px;
|
|
left: 0;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 30px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 10;
|
|
color: #a9c0f2;
|
|
transition: all .3s ease-in-out;
|
|
background-color: #dae3f7;
|
|
display: flex;
|
|
box-shadow: 0px 5px 5px 0px rgba(217,218,228,.2)
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-prev div i {
|
|
color: #a9c0f2;
|
|
font-size: 36px;
|
|
margin-left: -8px
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-prev::after {
|
|
display: none;
|
|
font-size: 24px;
|
|
font-weight: bolder
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-prev:hover {
|
|
color: #333
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-prev .swiper-button-disabled {
|
|
cursor: not-allowed;
|
|
pointer-events: auto
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-next {
|
|
position: absolute;
|
|
top: 0 !important;
|
|
right: 0 !important;
|
|
width: 80px;
|
|
height: 100%;
|
|
background-color: #f4f7fa
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-next div {
|
|
position: absolute;
|
|
top: 45px;
|
|
right: 0;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 30px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 10;
|
|
color: #a9c0f2;
|
|
transition: all .3s ease-in-out;
|
|
background-color: #dae3f7;
|
|
display: flex;
|
|
font-size: 36px;
|
|
box-shadow: 0px 5px 5px 0px rgba(217,218,228,.2)
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-next div i {
|
|
margin-left: 8px;
|
|
color: #a9c0f2;
|
|
font-size: 36px
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-next::after {
|
|
display: none;
|
|
font-size: 24px;
|
|
font-weight: bolder;
|
|
margin-left: 5px
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-next:hover {
|
|
color: #333
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-next .swiper-button-disabled {
|
|
cursor: not-allowed;
|
|
pointer-events: auto
|
|
}
|
|
|
|
.call-state-top .tooltip {
|
|
position: relative;
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
font-size: 13px;
|
|
margin: 0 auto 25px;
|
|
padding: 3px 15px;
|
|
border-radius: 4px;
|
|
transition: all .15s ease-in-out;
|
|
box-shadow: 0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5),0 8px 16px 0 rgba(0,0,0,.05),0 6px 10px 0 rgba(0,0,0,.05)
|
|
}
|
|
|
|
.call-state-top .tooltip::after {
|
|
display: inline-block;
|
|
position: absolute;
|
|
z-index: 9;
|
|
content: "";
|
|
width: 10px;
|
|
height: 10px;
|
|
bottom: -5px;
|
|
left: calc(50% - 5px);
|
|
transform: rotate(45deg);
|
|
background-color: #f4f7fa;
|
|
transition: all .15s ease-in-out
|
|
}
|
|
|
|
.call-state-top .call-state-line {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin: 0 auto;
|
|
border-radius: 5px;
|
|
background-color: #b2c2e5;
|
|
animation: line 2s linear infinite
|
|
}
|
|
|
|
.call-state {
|
|
display: block;
|
|
margin-top: 25px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
transition: all .3s ease-in-out;
|
|
box-shadow: 0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)
|
|
}
|
|
|
|
.call-state img {
|
|
width: 100%;
|
|
aspect-ratio: 16/9;
|
|
-o-object-fit: cover;
|
|
object-fit: cover
|
|
}
|
|
|
|
.call-state p {
|
|
padding: 30px 15px;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
background-color: #fff
|
|
}
|
|
|
|
.call-state:hover {
|
|
box-shadow: 0px 13px 24px 0px rgba(198,210,219,.23)
|
|
}
|
|
|
|
.call-help {
|
|
width: 30%;
|
|
padding: 30px;
|
|
background: linear-gradient(180deg, #f7fcff 0%, #edf3fc 100%);
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.call-help:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07)
|
|
}
|
|
|
|
.call-help h3 {
|
|
line-height: 36px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.call-help h3 img {
|
|
height: 28px;
|
|
margin-right: 5px
|
|
}
|
|
|
|
.call-help p{
|
|
font-size: 14px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.call-help p::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 4px;
|
|
margin-right: 10px;
|
|
border-radius: 50%;
|
|
background-color: #282b42
|
|
}
|
|
|
|
|
|
|
|
|
|
.question-box {
|
|
align-items: stretch;
|
|
border: 1px solid #dfdeea
|
|
}
|
|
|
|
.question-box .question-left {
|
|
width: 40%;
|
|
background-color: #eff3f8
|
|
}
|
|
|
|
.question-box .question-left a {
|
|
display: block;
|
|
height: 66px;
|
|
line-height: 66px;
|
|
padding-left: 60px;
|
|
font-size: 16px
|
|
}
|
|
|
|
.question-box .question-left a:hover {
|
|
background-color: #fff
|
|
}
|
|
|
|
.question-box .question-left .active {
|
|
background-color: #fff
|
|
}
|
|
|
|
.question-box .question-left .active span {
|
|
font-weight: bold;
|
|
color: #f72424
|
|
}
|
|
|
|
.question-box .question-left span {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #b0b6c3;
|
|
margin-right: 10px
|
|
}
|
|
|
|
.question-box .question {
|
|
width: 60%;
|
|
padding: 50px 35px;
|
|
transition: all .3s ease-in-out;
|
|
box-shadow: 0 15px 30px rgba(0,0,0,.1),translate3d(0, -2px, 0)
|
|
}
|
|
|
|
.question-box .question:hover {
|
|
box-shadow: 0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)
|
|
}
|
|
|
|
.question-box .question .question-question {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
font-weight: bold
|
|
}
|
|
|
|
.question-box .question .question-question span {
|
|
display: block;
|
|
width: 27px;
|
|
height: 27px;
|
|
margin-right: 15px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
color: #f53f4d;
|
|
background-color: #ffdede;
|
|
border-radius: 5px 5px 5px 5px
|
|
}
|
|
|
|
.question-box .question .question-answer {
|
|
display: flex;
|
|
margin-top: 20px;
|
|
color: #282b42;
|
|
line-height: 1.7
|
|
}
|
|
|
|
.question-box .question .question-answer span {
|
|
display: block;
|
|
width: 27px;
|
|
height: 27px;
|
|
margin-right: 15px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
color: #fff;
|
|
background-color: #f53f4d;
|
|
border-radius: 5px 5px 5px 5px
|
|
}
|
|
|
|
.question-box .question .question-answer p {
|
|
flex: 1;
|
|
height: 72px
|
|
}
|
|
|
|
.question-box .question .question-more {
|
|
display: block;
|
|
margin-top: 25px;
|
|
color: #f51c1c
|
|
}
|
|
|
|
.question-box .question .question-more span {
|
|
margin-left: 4px;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.question-box .question .question-more:hover span {
|
|
margin-left: 8px
|
|
}
|
|
|
|
.fix-video-box {
|
|
width: 900px;
|
|
height: auto;
|
|
position: fixed;
|
|
z-index: 10000;
|
|
top: 100px;
|
|
left: calc(50% - 450px);
|
|
border-radius: 10px;
|
|
animation: zoomIn .5s ease-in-out
|
|
}
|
|
|
|
.fix-video-box i {
|
|
font-size: 20px;
|
|
color: #6e7080;
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 15px;
|
|
z-index: 2;
|
|
cursor: pointer
|
|
}
|
|
|
|
.fix-video-box i:hover {
|
|
color: #282b42
|
|
}
|
|
|
|
.fix-video-box video {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,.15)
|
|
}
|
|
|
|
.menu-left-wrap {
|
|
position: fixed;
|
|
left: -160px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 285px;
|
|
height: 470px
|
|
}
|
|
|
|
.menu-left-wrap .menu-left-box {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0px;
|
|
padding: 15px 20px 15px 0;
|
|
font-size: var(--font-size);
|
|
cursor: pointer;
|
|
transform: translateY(-50%);
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
box-shadow: 4px 4px 20px rgba(55,99,170,.05),-4px -4px 20px rgba(55,99,170,.05);
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.menu-left-wrap .menu-left-box p {
|
|
line-height: 2.7;
|
|
text-indent: 15px;
|
|
border-left: 4px solid rgba(0,0,0,0)
|
|
}
|
|
|
|
.menu-left-wrap .menu-left-box p.active {
|
|
color: #f83838;
|
|
border-left: 4px solid #f83838
|
|
}
|
|
|
|
.menu-left-wrap .menu-left-box p:hover {
|
|
color: #f83838
|
|
}
|
|
|
|
.menu-left-wrap .menu-button-box {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 170px;
|
|
padding: 12px 6px;
|
|
border-radius: 20px;
|
|
letter-spacing: 4px;
|
|
border: 3px solid #fff;
|
|
color: #fff;
|
|
background-color: #ff4141;
|
|
font-size: var(--font-size);
|
|
cursor: pointer;
|
|
transform: translateY(-50%);
|
|
box-shadow: 4px 4px 20px rgba(55,99,170,.05),-4px -4px 20px rgba(55,99,170,.05);
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.menu-left-wrap .menu-button-box p {
|
|
writing-mode: vertical-lr
|
|
}
|
|
|
|
.menu-left-wrap .menu-button-box p i {
|
|
font-size: 12px;
|
|
margin-top: 5px
|
|
}
|
|
|
|
.menu-left-wrap .menu-left-active {
|
|
animation: menu-left .3s ease-in-out;
|
|
left: 170px
|
|
}
|
|
|
|
.menu-left-wrap .menu-left-out {
|
|
animation: menu-left-out .3s ease-in-out;
|
|
left: 0
|
|
}
|
|
|
|
.res-img-wrap .res-img-box {
|
|
max-width: 1030px
|
|
}
|
|
@media screen and (min-width: 992px)and (max-width: 1199px) {
|
|
|
|
}
|
|
@media screen and (min-width: 768px)and (max-width: 991px) {
|
|
.call-wrap {
|
|
height: 350px
|
|
}
|
|
|
|
.call-box {
|
|
height: 100%
|
|
}
|
|
|
|
.call-box h1 {
|
|
font-size: 24px
|
|
}
|
|
|
|
.call-box p {
|
|
font-size: 16px
|
|
}
|
|
|
|
.call-box p br {
|
|
display: none
|
|
}
|
|
|
|
.call-box .nav-apply-box {
|
|
display: flex
|
|
}
|
|
|
|
.call-box .nav-apply-box a {
|
|
margin-top: 20px;
|
|
width: 102px;
|
|
height: 34px;
|
|
line-height: 34px;
|
|
border-radius: 4px;
|
|
font-size: var(--font-size)
|
|
}
|
|
|
|
.banner-video-box {
|
|
height: 240px
|
|
}
|
|
|
|
|
|
.call-menu-box a {
|
|
margin-right: 10%
|
|
}
|
|
|
|
.call-hard-box .call-hard {
|
|
padding: 3%
|
|
}
|
|
|
|
.call-hard-box .call-hard h3 {
|
|
font-size: 18px;
|
|
line-height: 1.5
|
|
}
|
|
|
|
.call-hard-box .call-hard h4 {
|
|
font-size: var(--font-size)
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.apply-btn-box {
|
|
margin-top: 0
|
|
}
|
|
|
|
.banner-wrap {
|
|
width: 100%;
|
|
height: 30rem;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.banner-wrap .call-box {
|
|
max-width: 100%;
|
|
height: 100%;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
background-size: 65%;
|
|
background-position: center bottom;
|
|
}
|
|
|
|
.banner-wrap .call-box h1 {
|
|
color: #333;
|
|
font-size: 2.4rem;
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
margin-top: 25%;
|
|
margin-bottom: 3%
|
|
}
|
|
|
|
.banner-wrap .call-box p {
|
|
max-width: 90%;
|
|
margin: 0 auto;
|
|
font-size: 1.4rem;
|
|
text-align: center;
|
|
color: #666;
|
|
opacity: .8;
|
|
line-height: 1.7
|
|
}
|
|
|
|
.banner-wrap .call-box .banner-apply-box {
|
|
display: flex;
|
|
justify-content: center
|
|
}
|
|
|
|
.banner-wrap .call-box .banner-apply-box a {
|
|
width: 10.2rem;
|
|
height: 3.4rem;
|
|
line-height: 3.4rem;
|
|
border-radius: .4rem;
|
|
font-size: 1.4rem
|
|
}
|
|
|
|
.banner-video-box {
|
|
background: url(../image/callcenter_banner_video_top.png) no-repeat left top/100% 2rem;
|
|
margin-top: 3rem;
|
|
padding-top: 2rem;
|
|
width: 100%;
|
|
height: auto;
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
position: relative;
|
|
margin: 0 3%
|
|
}
|
|
|
|
.banner-video-box .video-box {
|
|
position: absolute;
|
|
top: 2rem;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 20rem;
|
|
background: #f1f3f9 url(../image/callcenter_banner_video_bg.png) no-repeat left top/100% 100%
|
|
}
|
|
|
|
.banner-video-box .video-button {
|
|
width: 5.5rem;
|
|
height: 5.5rem;
|
|
line-height: 5.5rem;
|
|
box-shadow: 0 .2rem .8rem rgba(0,0,0,.15)
|
|
}
|
|
|
|
.banner-video-box .video-button i {
|
|
font-size: 3rem;
|
|
margin-left: .4rem
|
|
}
|
|
|
|
.banner-video-box .video-button::after {
|
|
width: 5.5rem;
|
|
height: 5.5rem
|
|
}
|
|
|
|
.banner-video-box video {
|
|
width: 100%
|
|
}
|
|
.mana-box{
|
|
gap: 15px;
|
|
}
|
|
.advan-box {
|
|
height: auto
|
|
}
|
|
|
|
.advan-box .advan {
|
|
width: 49%;
|
|
padding: 2rem 1rem;
|
|
margin-bottom: 2%
|
|
}
|
|
|
|
.advan-box .advan img {
|
|
width: 2rem
|
|
}
|
|
|
|
.advan-box .advan h3 {
|
|
font-size: 1.5rem;
|
|
line-height: 2;
|
|
margin-top: 1rem
|
|
}
|
|
|
|
.advan-box .advan p {
|
|
color: #6e7080;
|
|
height: 7.14rem;
|
|
line-height: 1.7
|
|
}
|
|
|
|
.advan-box .active {
|
|
padding: 2rem 1rem;
|
|
width: 49%
|
|
}
|
|
|
|
.advan-box .active p {
|
|
color: #fff;
|
|
opacity: .8
|
|
}
|
|
|
|
.mana-box {
|
|
max-width: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.mana-top {
|
|
width: 100%;
|
|
padding: 3rem 1.5rem;
|
|
margin-bottom: 1rem;
|
|
border-radius: .8rem;
|
|
background: url("../image/index_mana_top_bg.png") no-repeat center center/auto 100%;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.mana-top:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0px 5px 20px 0px rgba(47,72,88,.07);
|
|
background: url("../image/index_mana_top_bg.png") no-repeat center center/auto 105%
|
|
}
|
|
|
|
.mana-top .mana-text .mana-link-link {
|
|
display: block;
|
|
font-size: 1.4rem;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
color: #444;
|
|
margin-bottom: 1.5rem
|
|
}
|
|
|
|
.mana-top .mana-text p {
|
|
font-size: 1.2rem;
|
|
line-height: 1.7;
|
|
color: #6e7080;
|
|
margin-bottom: 1rem
|
|
}
|
|
|
|
.mana-top .mana-text ul {
|
|
padding-left: 1.5rem;
|
|
margin-bottom: 0
|
|
}
|
|
|
|
.mana-top .mana-text ul li {
|
|
color: #282b42;
|
|
font-size: 1.1rem;
|
|
line-height: 2;
|
|
list-style: disc
|
|
}
|
|
|
|
.mana-top .mana-text .mana-more {
|
|
display: none
|
|
}
|
|
|
|
.mana-item {
|
|
width: 100%;
|
|
padding: 2rem 1rem 2rem 1rem;
|
|
flex-wrap: wrap;
|
|
background: url("../image/solu_sence_bg.png") no-repeat center center/100% 100%
|
|
}
|
|
|
|
.mana-item .mana-text {
|
|
width: 100%;
|
|
min-width: 100%
|
|
}
|
|
|
|
.mana-item .mana-text .mana-link-link {
|
|
display: block;
|
|
font-size: 1.4rem;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
color: #444;
|
|
margin-bottom: 1.5rem;
|
|
min-height: 0
|
|
}
|
|
|
|
.mana-item .mana-text p {
|
|
font-size: 1.2rem;
|
|
line-height: 1.7;
|
|
min-height: 6.7rem;
|
|
color: #6e7080;
|
|
margin-bottom: 0
|
|
}
|
|
|
|
.mana-item .mana-text ul {
|
|
display: none;
|
|
padding-left: 0rem;
|
|
margin-bottom: 1rem
|
|
}
|
|
|
|
.mana-item .mana-text ul li {
|
|
color: #282b42;
|
|
font-size: 1.2rem;
|
|
line-height: 1.7;
|
|
list-style: none
|
|
}
|
|
|
|
.mana-item .mana-text .mana-more {
|
|
display: none
|
|
}
|
|
|
|
.mana-item .mana-img {
|
|
width: 90%;
|
|
margin-left: 2%
|
|
}
|
|
|
|
.mana-item .mana-img img {
|
|
max-width: 100%;
|
|
opacity: 1;
|
|
transform: scale(0.95);
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.mana-item:hover {
|
|
transform: translateY(-0.5rem);
|
|
background: url("../image/solu_sence_bg.png") no-repeat center center/110% 110%;
|
|
box-shadow: 0rem .5rem 2rem 0rem rgba(47,72,88,.07)
|
|
}
|
|
|
|
.mana-item:hover .mana-img img {
|
|
transform: scale(1);
|
|
opacity: .9
|
|
}
|
|
|
|
.mana-item:hover .mana-text .mana-more {
|
|
text-indent: 1rem
|
|
}
|
|
|
|
|
|
.call-page-wrap {
|
|
margin-top: 0;
|
|
margin-bottom: 0
|
|
}
|
|
|
|
.call-page-box {
|
|
max-width: 80%;
|
|
height: 5rem;
|
|
margin: -2.5rem auto 2rem;
|
|
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
|
|
box-shadow: 0rem .8rem 1.6rem .1rem #e7edf7;
|
|
border-radius: 2.5rem
|
|
}
|
|
|
|
.call-page-box a {
|
|
line-height: 5rem
|
|
}
|
|
|
|
.call-page-box a img {
|
|
max-width: 2rem;
|
|
margin-right: .8rem
|
|
}
|
|
|
|
.call-page-box a h4 {
|
|
font-size: 1.4rem;
|
|
font-weight: bold
|
|
}
|
|
|
|
.call-page-box a .call-page-underline {
|
|
bottom: -0.2rem;
|
|
height: .2rem
|
|
}
|
|
|
|
.call-page-box .call-page-line {
|
|
width: .1rem;
|
|
height: 3rem
|
|
}
|
|
|
|
.call-video-wrap {
|
|
padding-top: 2rem
|
|
}
|
|
|
|
.call-video-wrap .call-video-box {
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
.call-video-wrap .call-video-text {
|
|
width: 100%;
|
|
flex: none;
|
|
margin-right: 0
|
|
}
|
|
|
|
.call-video-wrap .call-video-text h3 {
|
|
text-align: center;
|
|
margin-bottom: 2rem
|
|
}
|
|
|
|
.call-video-wrap .shadow-active {
|
|
box-shadow: 0 0 .8rem 0 rgba(232,237,250,.6),0 .2rem .4rem 0 rgba(232,237,250,.5)
|
|
}
|
|
|
|
.call-video-wrap .call-video {
|
|
width: 100%;
|
|
border-radius: .8rem;
|
|
position: relative;
|
|
margin-top: 2rem
|
|
}
|
|
|
|
.call-video-wrap .call-video video {
|
|
max-width: 100%
|
|
}
|
|
|
|
.call-video-wrap .video-button {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
line-height: 5rem;
|
|
text-align: center;
|
|
background-color: #a1a4b0;
|
|
box-shadow: 0 .2rem .8rem rgba(0,0,0,.15);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
z-index: 10;
|
|
top: 50%;
|
|
left: 50%;
|
|
cursor: pointer;
|
|
transform: translate(-50%, -60%);
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.call-video-wrap .video-button i {
|
|
font-size: 3rem;
|
|
margin-left: .4rem;
|
|
font-weight: bold;
|
|
color: #fff
|
|
}
|
|
|
|
.call-video-wrap .video-button:hover {
|
|
background-color: #f55b5e
|
|
}
|
|
|
|
.call-video-wrap .video-button:hover i {
|
|
color: #fff
|
|
}
|
|
|
|
.call-video-wrap .video-button::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
content: "";
|
|
width: 5.5rem;
|
|
height: 5.5rem;
|
|
background: rgba(0,0,0,0);
|
|
z-index: 1;
|
|
animation: video-border 1s linear infinite
|
|
}
|
|
|
|
.call-feature-wrap {
|
|
padding-top: 1rem
|
|
}
|
|
|
|
.call-feature-wrap .call-feature-box {
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
.call-feature-wrap .call-feature-box .call-feature {
|
|
flex: auto;
|
|
width: 100%;
|
|
border-radius: .8rem
|
|
}
|
|
|
|
.call-feature-wrap .call-feature-box .call-feature:nth-child(2) {
|
|
margin: 2rem 0
|
|
}
|
|
|
|
.call-feature .call-feature-header {
|
|
padding-left: 2rem;
|
|
height: 4rem
|
|
}
|
|
|
|
.call-feature .call-feature-header img {
|
|
max-height: 2rem;
|
|
margin-right: 1.5rem
|
|
}
|
|
|
|
.call-feature .call-feature-content {
|
|
padding: 2rem 1rem 2rem 2rem;
|
|
background: url("../image/call_feature_bg.png") no-repeat center center/cover
|
|
}
|
|
|
|
.call-feature .call-feature-phone {
|
|
height: auto
|
|
}
|
|
|
|
.call-feature .call-feature-phone p {
|
|
display: flex;
|
|
line-height: 1.7
|
|
}
|
|
|
|
.call-feature .call-feature-phone p:nth-child(2) {
|
|
margin-bottom: .8rem
|
|
}
|
|
|
|
.call-feature .call-feature-phone p span {
|
|
font-size: 1.4rem;
|
|
margin-right: 1rem;
|
|
color: #282b42
|
|
}
|
|
|
|
.call-feature h3 {
|
|
font-size: 1.6rem;
|
|
line-height: 3;
|
|
font-weight: bold;
|
|
color: #fff
|
|
}
|
|
|
|
.call-feature h3 i {
|
|
font-size: 2.4rem;
|
|
vertical-align: -0.1rem;
|
|
margin-right: .8rem;
|
|
color: #b9bcc5
|
|
}
|
|
|
|
.call-feature h4 {
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
margin-bottom: 1rem
|
|
}
|
|
|
|
.call-feature p {
|
|
font-size: 1.3rem;
|
|
line-height: 2;
|
|
color: #6e7080
|
|
}
|
|
|
|
.call-feature:hover {
|
|
cursor: defalut;
|
|
transform: translateY(-0.8rem);
|
|
box-shadow: -0.1rem 2.9rem 4.2rem .4rem rgba(190,213,255,.34);
|
|
border: solid .1rem #9dbcf7
|
|
}
|
|
|
|
.call-sence-wrap {
|
|
background-color: #f4f7fa
|
|
}
|
|
|
|
.call-sence-box {
|
|
background-color: #f4f7fa;
|
|
padding: 0 0 3rem 0;
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
.call-sence-box .call-sence-tab {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
.call-sence-box .call-sence-tab h3 {
|
|
width: 33%;
|
|
font-size: 1.4rem;
|
|
line-height: 2.5;
|
|
text-indent: 1rem;
|
|
padding-right: 1rem;
|
|
border-left: .4rem solid rgba(0,0,0,0)
|
|
}
|
|
|
|
.call-sence-box .call-sence-tab h3.active {
|
|
border-left: .4rem solid #f23c3c
|
|
}
|
|
|
|
.call-sence-box .call-sence-tab h3:nth-child(n+4) {
|
|
margin-top: 1rem
|
|
}
|
|
|
|
.call-sence-box .call-sence-content {
|
|
flex: 1;
|
|
margin-top: 3rem;
|
|
margin-left: 1.5rem;
|
|
padding-right: 1.5rem
|
|
}
|
|
|
|
.call-sence-box .call-sence-content .call-sence {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: default
|
|
}
|
|
|
|
.call-sence-box .call-sence-content .call-sence .call-sence-text {
|
|
flex: 1
|
|
}
|
|
|
|
.call-sence-box .call-sence-content .call-sence .call-sence-img {
|
|
width: 60%;
|
|
margin-left: 0;
|
|
margin-top: 1rem
|
|
}
|
|
|
|
.call-sence-box .call-sence-content h4 {
|
|
text-align: center;
|
|
font-size: 1.6rem;
|
|
font-weight: bold;
|
|
line-height: 1.5;
|
|
margin-bottom: 1.5rem
|
|
}
|
|
|
|
.call-sence-box .call-sence-content p {
|
|
font-size: 1.2rem;
|
|
line-height: 1.7
|
|
}
|
|
|
|
.call-item-wrap .gray {
|
|
padding-top: 3rem;
|
|
padding-bottom: 3rem;
|
|
margin-top: 3rem;
|
|
margin-bottom: 3rem
|
|
}
|
|
|
|
.call-item-box {
|
|
gap: 0;
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
.call-item-box .call-item-text {
|
|
flex: auto
|
|
}
|
|
|
|
.call-item-box .pl-40 {
|
|
padding-left: 0
|
|
}
|
|
|
|
.call-item-box .call-item-img {
|
|
margin-top: 2rem;
|
|
width: 100%
|
|
}
|
|
|
|
.call-item-text h3 {
|
|
font-size: 1.6rem;
|
|
text-align: center;
|
|
margin-bottom: 1.5rem
|
|
}
|
|
|
|
.call-item-text h4 {
|
|
font-size: 1.8rem;
|
|
margin-top: 1rem;
|
|
margin-bottom: 2rem;
|
|
text-align: center
|
|
}
|
|
|
|
.call-item-text h5 {
|
|
font-size: 1.6rem;
|
|
line-height: 1;
|
|
margin-bottom: 1rem;
|
|
transition: all .2s ease-in-out
|
|
}
|
|
|
|
.call-item-text h6 {
|
|
font-size: 1.3rem;
|
|
line-height: 2;
|
|
color: #282b42
|
|
}
|
|
|
|
.call-item-text p {
|
|
color: #6e7080;
|
|
white-space: normal
|
|
}
|
|
|
|
.call-item-text .call-item-text-img img {
|
|
width: 2.2rem;
|
|
margin-right: 2.5rem
|
|
}
|
|
|
|
.call-item-text .flex {
|
|
margin-bottom: 2.5rem
|
|
}
|
|
|
|
.call-item-text .flex:nth-last-child(2) {
|
|
margin-bottom: 0
|
|
}
|
|
|
|
.call-item-text .flex-phone {
|
|
display: block;
|
|
margin-bottom: 1.5rem
|
|
}
|
|
|
|
.call-item-text .apply-btn-box {
|
|
margin-top: 2rem;
|
|
margin-left: auto
|
|
}
|
|
|
|
.call-item-text .call-item-kefu {
|
|
display: none
|
|
}
|
|
|
|
.call-sys-wrap img {
|
|
max-width: 96%
|
|
}
|
|
|
|
.edition-wrap {
|
|
background: url("../image/call_edition_wrap.png") no-repeat left top/cover
|
|
}
|
|
|
|
.edition-wrap .title-p {
|
|
max-width: 90%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 1rem
|
|
}
|
|
|
|
.edition-wrap .edition-box {
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around
|
|
}
|
|
|
|
.edition-wrap .price-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 2rem
|
|
}
|
|
|
|
.edition-wrap .price-box a {
|
|
display: block;
|
|
width: 10.2rem;
|
|
height: 3.4rem;
|
|
line-height: 3.4rem;
|
|
text-align: center;
|
|
font-size: 1.4rem;
|
|
border-radius: .4rem;
|
|
color: #636363;
|
|
background-color: #f0f0f0;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.edition-wrap .price-box a:hover {
|
|
box-shadow: .3rem 1.5rem 1.5rem rgba(0,0,0,.1)
|
|
}
|
|
|
|
.edition-wrap .price-box a:first-child {
|
|
margin-right: 0;
|
|
color: #fff;
|
|
background-color: #1881c9;
|
|
background: linear-gradient(to right, #2f91d4, #1881c9)
|
|
}
|
|
|
|
.edition-wrap .price-box a:first-child:hover {
|
|
box-shadow: 0 1rem 2.5rem 0 rgba(24,129,201,.5)
|
|
}
|
|
|
|
.edition {
|
|
width: 94% !important;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 2rem
|
|
}
|
|
|
|
.edition .edition-header {
|
|
padding: 1rem 0;
|
|
border-radius: .8rem .8rem 0 0;
|
|
background-size: cover
|
|
}
|
|
|
|
.edition .edition-header h3 {
|
|
font-size: 1.6rem
|
|
}
|
|
|
|
.edition .edition-header p {
|
|
font-size: 1.2rem;
|
|
width: 94%;
|
|
height: auto
|
|
}
|
|
|
|
.edition:nth-child(2) .price-most-hot {
|
|
width: 50px;
|
|
position: absolute;
|
|
top: -6px;
|
|
right: -6px
|
|
}
|
|
|
|
.edition:nth-child(3) .edition-buy {
|
|
margin-bottom: 15px;
|
|
color: #6ba3f7;
|
|
border: 1px solid #6ba3f7;
|
|
background: rgba(107,163,247,.1)
|
|
}
|
|
|
|
.edition:nth-child(3) .edition-tips {
|
|
display: none
|
|
}
|
|
|
|
.edition .edition-buy {
|
|
display: block;
|
|
width: 102px;
|
|
height: 34px;
|
|
line-height: 34px
|
|
}
|
|
|
|
.edition .edition-con {
|
|
display: none
|
|
}
|
|
|
|
.edition h4 {
|
|
font-size: 1.3rem;
|
|
margin-top: 1.5rem
|
|
}
|
|
|
|
.edition h4 span {
|
|
color: #333
|
|
}
|
|
|
|
.edition h4 i {
|
|
font-size: 2rem
|
|
}
|
|
|
|
.edition .edition-tips {
|
|
font-size: 1.1rem;
|
|
color: #f14036;
|
|
text-align: center;
|
|
font-weight: bold
|
|
}
|
|
|
|
.edition ul {
|
|
width: auto;
|
|
margin-left: 20%;
|
|
font-size: 1.1rem;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
line-height: 2;
|
|
transform: translateX(0%);
|
|
word-break: keep-all
|
|
}
|
|
|
|
.edition:nth-child(3) .edition-con p:last-child {
|
|
color: #6e7080;
|
|
margin-top: 20px;
|
|
margin-bottom: 4rem;
|
|
padding-left: 0
|
|
}
|
|
|
|
.call-more-box {
|
|
max-width: 92%;
|
|
border-radius: .4rem;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
transition: all .4s ease-in-out
|
|
}
|
|
|
|
.call-more-box div.call-more {
|
|
flex: 1;
|
|
min-width: 33%;
|
|
padding: 2rem 0 2rem 1rem
|
|
}
|
|
|
|
.call-more-box div.call-more img {
|
|
max-height: 2rem
|
|
}
|
|
|
|
.call-more-box div.call-more h3 {
|
|
font-size: 1.3rem;
|
|
margin: 1rem 0 0
|
|
}
|
|
|
|
.call-more-box div.call-more p {
|
|
display: none;
|
|
color: #6e7080;
|
|
font-size: 1.1rem
|
|
}
|
|
|
|
.call-more-box div.call-more:nth-child(3n+3) {
|
|
border-right: 1px solid #e8ecf1
|
|
}
|
|
|
|
.call-more-box div.call-more:nth-child(4) {
|
|
border-right: none
|
|
}
|
|
|
|
.call-more-box div.call-more:nth-child(8) {
|
|
border-right: none
|
|
}
|
|
|
|
.call-more-box .call-more:hover {
|
|
cursor: defalut;
|
|
background-color: #f9fbfd;
|
|
z-index: 5;
|
|
transition: all .3s ease-in-out;
|
|
box-shadow: .1rem 1.3rem 2.9rem .3rem rgba(217,226,237,.74)
|
|
}
|
|
|
|
.call-honor-wrap {
|
|
padding-bottom: 4rem;
|
|
background: url("../image/call_honor_bg.png") no-repeat left top/cover
|
|
}
|
|
|
|
.call-honor-wrap .title-p {
|
|
max-width: 94%;
|
|
margin-left: auto;
|
|
margin-right: auto
|
|
}
|
|
|
|
.call-honor-wrap .title-p span {
|
|
color: #f23c3c;
|
|
font-weight: bold
|
|
}
|
|
|
|
.call-honor-wrap .call-honor-video {
|
|
width: 100%;
|
|
border-radius: 1.2rem;
|
|
margin-bottom: 2rem;
|
|
position: relative
|
|
}
|
|
|
|
.call-honor-wrap .call-honor-video video {
|
|
width: 100%
|
|
}
|
|
|
|
.call-honor-wrap .call-honor-video .video-button {
|
|
width: 5.5rem;
|
|
height: 5.5rem;
|
|
line-height: 5.5rem;
|
|
box-shadow: 0 .2rem .8rem rgba(0,0,0,.15)
|
|
}
|
|
|
|
.call-honor-wrap .call-honor-video .video-button i {
|
|
font-size: 3rem;
|
|
margin-left: .4rem
|
|
}
|
|
|
|
.call-honor-wrap .call-honor-video .video-button::after {
|
|
width: 5.5rem;
|
|
height: 5.5rem
|
|
}
|
|
|
|
.call-honor-wrap .call-honor-box .call-honor-right {
|
|
width: 100%;
|
|
flex: auto;
|
|
margin-left: 0
|
|
}
|
|
|
|
.call-honor-wrap .call-honor-box .call-honor-right img {
|
|
width: 100%
|
|
}
|
|
|
|
.use-box {
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
.use-left {
|
|
width: 100%;
|
|
margin-bottom: 2rem
|
|
}
|
|
|
|
.use-left .use-tab {
|
|
padding: 3% 10% 3% 12%;
|
|
min-height: 0
|
|
}
|
|
|
|
.use-left .use-tab i {
|
|
font-size: 1.6rem
|
|
}
|
|
|
|
.use-left .use-tab h4 {
|
|
font-size: 1.4rem
|
|
}
|
|
|
|
.use-left .use-tab h5 {
|
|
font-size: 1.4rem
|
|
}
|
|
|
|
.use-left .use-tab img {
|
|
height: .7rem;
|
|
margin-left: 18%
|
|
}
|
|
|
|
.use-left .use-tab.active {
|
|
box-shadow: 0rem 1.1rem 1.8rem .1rem rgba(95,124,180,.3216)
|
|
}
|
|
|
|
.use-left .use-tab.active i {
|
|
font-size: 2.4rem
|
|
}
|
|
|
|
.use-left .use-tab.active p {
|
|
height: 1.8rem;
|
|
margin-top: .6rem
|
|
}
|
|
|
|
.use-right {
|
|
flex: 1;
|
|
margin-left: 0;
|
|
padding: 5%
|
|
}
|
|
|
|
.use-right .use-line {
|
|
width: 8rem;
|
|
height: .3rem;
|
|
margin: 1rem 0;
|
|
border-radius: .15rem
|
|
}
|
|
|
|
.use-right h4 {
|
|
font-size: 1.6rem
|
|
}
|
|
|
|
.use-right h5 {
|
|
font-size: 1.3rem;
|
|
max-width: 100%;
|
|
margin-bottom: 2rem
|
|
}
|
|
|
|
.use-right p {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
color: #6e7080;
|
|
font-size: 1.2rem;
|
|
line-height: 2
|
|
}
|
|
|
|
.use-right p i {
|
|
font-size: 1.2rem;
|
|
margin-right: 1rem
|
|
}
|
|
|
|
.use-right .use-active {
|
|
z-index: 9;
|
|
animation: fade-event-in-bottom .5s ease-out .2s both
|
|
}
|
|
|
|
.use-right .out {
|
|
animation: slide-out-bottom .2s ease-out both;
|
|
position: absolute
|
|
}
|
|
|
|
.call-fuwu-wrap .fuwu-wrap {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 2rem 1.5rem;
|
|
background-color: #eff3f7
|
|
}
|
|
|
|
.call-fuwu-wrap .price-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 2rem
|
|
}
|
|
|
|
.call-fuwu-wrap .price-box a {
|
|
display: block;
|
|
width: 11rem;
|
|
height: 4rem;
|
|
line-height: 4rem;
|
|
text-align: center;
|
|
font-size: 1.4rem;
|
|
border-radius: .4rem;
|
|
color: #636363;
|
|
background-color: #f0f0f0;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.call-fuwu-wrap .price-box a:hover {
|
|
box-shadow: .3rem 1.5rem 1.5rem rgba(0,0,0,.1)
|
|
}
|
|
|
|
.call-fuwu-wrap .price-box a:first-child {
|
|
margin-right: 2.5rem;
|
|
color: #fff;
|
|
background-color: #1881c9;
|
|
background: linear-gradient(to right, #2f91d4, #1881c9)
|
|
}
|
|
|
|
.call-fuwu-wrap .price-box a:first-child:hover {
|
|
box-shadow: 0 1rem 2.5rem 0 rgba(24,129,201,.5)
|
|
}
|
|
|
|
.call-fuwu-tab {
|
|
max-width: 94%;
|
|
justify-content: space-between;
|
|
margin-bottom: 1rem
|
|
}
|
|
|
|
.call-fuwu-tab li {
|
|
position: relative;
|
|
font-size: 16px;
|
|
margin-top: 0;
|
|
line-height: 1.7;
|
|
color: #282b42;
|
|
margin-right: 0;
|
|
border-bottom: 2px solid #1881c9
|
|
}
|
|
|
|
.call-fuwu .call-fuwu-item {
|
|
flex: 100%;
|
|
flex: auto
|
|
}
|
|
|
|
.call-fuwu .call-fuwu-item-center {
|
|
margin: 0
|
|
}
|
|
|
|
.call-fuwu h4 {
|
|
width: 100%;
|
|
font-size: 1.4rem;
|
|
line-height: 1.7;
|
|
text-align: center;
|
|
margin-bottom: 2rem
|
|
}
|
|
|
|
.call-fuwu h5 {
|
|
font-size: 1.4rem;
|
|
margin: 1.5rem 0 1rem
|
|
}
|
|
|
|
.call-fuwu h5 i {
|
|
margin-right: .8rem
|
|
}
|
|
|
|
.call-fuwu p {
|
|
font-size: 1.4rem;
|
|
margin-bottom: 1rem
|
|
}
|
|
|
|
.call-state-wrap {
|
|
padding-bottom: 0
|
|
}
|
|
|
|
.call-state-wrap .call-state-box {
|
|
padding: 0 6rem
|
|
}
|
|
|
|
.call-state-wrap .call-state-box::after {
|
|
top: 4rem;
|
|
left: 6rem;
|
|
right: 6rem;
|
|
width: calc(100% - 12rem);
|
|
height: .1rem
|
|
}
|
|
|
|
.call-state-wrap .call-state-box .swiper-slide {
|
|
width: 100%;
|
|
margin-bottom: 4rem
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-prev {
|
|
position: absolute;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 6rem;
|
|
height: 100%;
|
|
background-color: #f4f7fa
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-prev div {
|
|
position: absolute;
|
|
top: 4.5rem;
|
|
left: 0;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
border-radius: 3rem;
|
|
box-shadow: 0rem .5rem .5rem 0rem rgba(217,218,228,.2)
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-prev div i {
|
|
color: #a9c0f2;
|
|
font-size: 3rem;
|
|
margin-left: -0.8rem
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-next {
|
|
position: absolute;
|
|
top: 0 !important;
|
|
right: 0 !important;
|
|
width: 6rem;
|
|
height: 100%;
|
|
background-color: #f4f7fa
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-next div {
|
|
position: absolute;
|
|
top: 4.5rem;
|
|
right: 0;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
border-radius: 3rem;
|
|
font-size: 3rem;
|
|
box-shadow: 0rem .5rem .5rem 0rem rgba(217,218,228,.2)
|
|
}
|
|
|
|
.call-state-wrap .swiper-button-next div i {
|
|
margin-left: .8rem;
|
|
color: #a9c0f2;
|
|
font-size: 3rem
|
|
}
|
|
|
|
.call-state-top .tooltip {
|
|
position: relative;
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
font-size: 1.3rem;
|
|
margin: 0 auto 2.5rem;
|
|
padding: .3rem 1.5rem;
|
|
border-radius: .4rem;
|
|
transition: all .15s ease-in-out;
|
|
box-shadow: 0 0 .8rem 0 rgba(232,237,250,.6),0 .2rem .4rem 0 rgba(232,237,250,.5),0 .8rem 1.6rem 0 rgba(0,0,0,.05),0 .6rem 1rem 0 rgba(0,0,0,.05)
|
|
}
|
|
|
|
.call-state-top .tooltip::after {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
bottom: -0.5rem;
|
|
left: calc(50% - .5rem);
|
|
transform: rotate(45deg)
|
|
}
|
|
|
|
.call-state-top .call-state-line {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: .5rem
|
|
}
|
|
|
|
.call-state {
|
|
margin-top: 2.5rem;
|
|
border-radius: .8rem;
|
|
box-shadow: 0 0 .8rem 0 rgba(232,237,250,.6),0 .2rem .4rem 0 rgba(232,237,250,.5)
|
|
}
|
|
|
|
.call-state p {
|
|
padding: 3rem 1.5rem
|
|
}
|
|
|
|
.call-state:hover {
|
|
box-shadow: 0rem 1.3rem 2.4rem 0rem rgba(198,210,219,.23)
|
|
}
|
|
|
|
.call-help-wrap .box {
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
.call-help-wrap .call-help {
|
|
width: 100%;
|
|
padding: 2rem;
|
|
margin-bottom: 2rem
|
|
}
|
|
|
|
.call-help-wrap .call-help h3 {
|
|
line-height: 2.4rem;
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
.call-help-wrap .call-help h3 img {
|
|
height: 2.4rem;
|
|
margin-right: .5rem
|
|
}
|
|
|
|
.call-help-wrap .call-help p {
|
|
line-height: 2.2;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.call-help-wrap .call-help p::before {
|
|
width: .4rem;
|
|
height: .4rem;
|
|
margin-right: 1rem
|
|
}
|
|
|
|
|
|
|
|
.question-box {
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
border: .1rem solid #dfdeea
|
|
}
|
|
|
|
.question-box .question-left {
|
|
width: 100%;
|
|
background-color: #eff3f8
|
|
}
|
|
|
|
.question-box .question-left a {
|
|
display: block;
|
|
height: 3.6rem;
|
|
line-height: 3.6rem;
|
|
padding-left: 1rem;
|
|
font-size: 1.3rem;
|
|
overflow: hidden;
|
|
white-space: nowrap
|
|
}
|
|
|
|
.question-box .question-left span {
|
|
font-size: 1.4rem;
|
|
margin-right: 1rem
|
|
}
|
|
|
|
.question-box .question {
|
|
width: 100%;
|
|
padding: 2rem 1rem;
|
|
transition: all .3s ease-in-out;
|
|
box-shadow: 0 1.5rem 3rem rgba(0,0,0,.1),translate3d(0, -0.2rem, 0)
|
|
}
|
|
|
|
.question-box .question .question-question {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 1.4rem;
|
|
font-weight: bold
|
|
}
|
|
|
|
.question-box .question .question-question span {
|
|
display: block;
|
|
width: 2.4rem;
|
|
height: 2.4rem;
|
|
margin-right: 1.5rem;
|
|
font-size: 1.4rem;
|
|
border-radius: .5rem .5rem .5rem .5rem
|
|
}
|
|
|
|
.question-box .question .question-answer {
|
|
display: flex;
|
|
margin-top: 1rem;
|
|
color: #282b42;
|
|
line-height: 1.7
|
|
}
|
|
|
|
.question-box .question .question-answer span {
|
|
display: block;
|
|
width: 2.4rem;
|
|
height: 2.4rem;
|
|
margin-right: 1.5rem;
|
|
font-size: 1.4rem;
|
|
border-radius: .5rem .5rem .5rem .5rem
|
|
}
|
|
|
|
.question-box .question .question-answer p {
|
|
flex: 1;
|
|
height: auto
|
|
}
|
|
|
|
.question-box .question .question-more {
|
|
display: block;
|
|
margin-top: 1rem
|
|
}
|
|
|
|
.question-box .question .question-more span {
|
|
margin-left: .4rem;
|
|
transition: all .3s ease-in-out
|
|
}
|
|
|
|
.question-box .question .question-more:hover span {
|
|
margin-left: .8rem
|
|
}
|
|
|
|
.fix-video-box {
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
padding-top: 30vh;
|
|
background-color: rgba(0,0,0,.6);
|
|
animation: none
|
|
}
|
|
|
|
.fix-video-box video {
|
|
width: 96%;
|
|
height: auto;
|
|
margin: 0 2%;
|
|
animation: zoomIn .5s ease-in-out
|
|
}
|
|
|
|
.fix-video-box i {
|
|
position: static;
|
|
display: block;
|
|
width: 2.8rem;
|
|
height: 2.8rem;
|
|
margin: .5rem auto 0;
|
|
line-height: 2.8rem;
|
|
text-align: center;
|
|
border-radius: 1.4rem;
|
|
font-size: 1.4rem;
|
|
color: #6e7080;
|
|
background-color: #fff;
|
|
z-index: 2;
|
|
cursor: pointer
|
|
}
|
|
|
|
.fix-video-box i:hover {
|
|
color: #282b42
|
|
}
|
|
|
|
.compare-wrap {
|
|
padding-top: 3rem;
|
|
margin-top: -5rem
|
|
}
|
|
|
|
.compare-wrap .compare-box {
|
|
max-width: 94%;
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
.compare-left {
|
|
width: 100%;
|
|
z-index: 1;
|
|
top: 2rem;
|
|
border-radius: 1rem 0rem 0rem 0rem;
|
|
padding-bottom: 2rem;
|
|
box-shadow: 0rem 1.2rem 1.2rem .1rem #eff0f4
|
|
}
|
|
|
|
.compare-left h3 {
|
|
font-size: 1.8rem;
|
|
line-height: 3;
|
|
border-radius: 1rem 1rem 0rem 0rem
|
|
}
|
|
|
|
.compare-left h3::after {
|
|
font-size: 2.4rem
|
|
}
|
|
|
|
.compare-left .compare-item {
|
|
height: 5rem;
|
|
line-height: 5rem;
|
|
margin-left: 8%;
|
|
border-bottom: .1rem solid #e7edf5
|
|
}
|
|
|
|
.compare-left .compare-item i {
|
|
font-size: 1.8rem
|
|
}
|
|
|
|
.compare-left .compare-item p {
|
|
font-size: 1.5rem;
|
|
margin-left: 1.5rem
|
|
}
|
|
|
|
.compare-right {
|
|
width: 100%;
|
|
margin-top: 4rem;
|
|
padding-bottom: 2rem;
|
|
box-shadow: 0rem .5rem 2rem 0rem rgba(47,72,88,.07)
|
|
}
|
|
|
|
.compare-right h3 {
|
|
font-size: 1.8rem;
|
|
line-height: 3;
|
|
border-radius: 1rem 1rem 0rem 0rem
|
|
}
|
|
|
|
.compare-right h3::after {
|
|
font-size: 2.4rem
|
|
}
|
|
|
|
.compare-right .compare-item {
|
|
min-width: 50%;
|
|
height: 5rem;
|
|
line-height: 5rem;
|
|
margin-left: 8%
|
|
}
|
|
|
|
.compare-right .compare-item i {
|
|
font-size: 1.8rem
|
|
}
|
|
|
|
.compare-right .compare-item p {
|
|
font-size: 1.5rem;
|
|
margin-left: 1.5rem
|
|
}
|
|
}/*# sourceMappingURL=callcenter.css.map */ |