﻿

.sparkpos {
    background: #ffffff;
    width: 100%;
    overflow: hidden;
}

.section {
    position: relative;
}

.section .wrapper {
    width: 96%;
    margin: auto;
}

.section h1 {
    color: #fff;
    text-align: center;
    font-size: 0.22rem;
    padding: 0.3rem 0 0 0;
    font-weight: normal;
}

.section p.desc {
    color: #000;
    text-align: center;
    font-size: 0.14rem;
    line-height: 0.2rem;
}

.section p.white {
    color: white;
}

.btn {
    padding: 0.1rem 0.2rem;
    text-align: center;
    border-radius: 0.4rem;
    font-size: 0.18rem;
    background: #fff;
    color: #289BF9;
    box-sizing: border-box;
}

.btn2 {
    background: #289BF9;
    color: #fff;
}


.banner-btn {
    width: 1.2rem;
    height: 0.35rem;
    border-radius: 0.2rem;
    text-align: center;
    line-height: 0.35rem;
    background: #1B81FF;
    color: #ffffff;
}

.banner-top {
    width: 100%;
    position: absolute;
    color: #ffffff;
    /* top: 10%; */
    top: 13%;
    text-align: center;
}

.banner-top .txt1 {
    font-size: 0.3rem;
    font-weight: bold;
    letter-spacing: 0.03rem;
}

.banner-top .txt2 {
    font-size: 0.18rem;
    margin: 0.02rem 0 0.07rem 0;
}

.banner-top .txt2 span {
    color: #FBB91B;
}

.banner-top .txt3 {
    font-size: 0.12rem;
    color: #ffffff;
    margin-bottom: 0.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner-top .txt3 img {
    width: 0.12rem;
    height: 0.12rem;
    margin-right: 0.04rem;
}

.banner-center {
    position: absolute;
    top: 52%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.banner-bottom {
    font-size: 0.12rem;
    color: #272727;
    position: absolute;
    bottom: 0;
    width: 100%;
    transform: translateY(14%);
}

.banner-bottom img {
    height: 2.57rem;
    width: 3.75rem;
    margin: auto;
}

.head-content .white {
    color: #ffffff;
}

.title {
    font-size: 0.2rem;
    text-align: center;
    color: #3E3A39;
    margin: 0.3rem 0 0.1rem 0;
    font-weight: bold;
}

.title-desc {
    color: #706D6D;
    font-size: 0.14rem;
    text-align: center;
    margin: 0.05rem 0.15rem 0.1rem;
}

.head-content {
    position: absolute;
    top: 0;
    width: 100%;
}

.section_branchTypeList {
    height: 2.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section_branchTypeList .wrapper {
    padding: 0.2rem 0;
}

.section_branchTypeList .list {
    width: 80%;
    position: relative;
    padding-bottom: 0.25rem;
    margin: 0.1rem auto;
}

.section_branchTypeList .list ul {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    top: 0;
}

.section_branchTypeList .list ul li {
    text-align: center;
    width: 17%;
    font-size: 0.14rem;
    color: #3497F3;
    height: 100%;
    position: relative;
}

.section_branchTypeList .list ul li a {
    width: 100%;
    height: 100%;
    color: #3497F3;
    position: absolute;
    left: 0;
    top: 0;
}

.section_branchTypeList .list ul li a span {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
}

.section_branchType {
    background-image: url(/Images/product/sparkpos/branchType_bg.jpg);
    height: 2.91rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section_branchType .desc h1 {
    padding: 0 0 0.04rem 0;
}

.section_branchType .desc p {
    font-size: 0.14rem;
    color: #fff;
    text-align: center;
}

.section_branchType .watch {
    padding-top: 0.30rem;
    text-align: center;
}

.section_cloud {
    position: relative;
    width: 100%;
    padding-bottom: 0.45rem;
}

.section_cloud .wrapper {
    width: 95%;
    margin: auto;
    transform: translateX(-0.01rem);
}

.section_cloud h1 {
    padding: 0.45rem 0 0.25rem;
    color: #3E3A39;
}

.section_client {
    background-image: url(/Images/product/sparkpos/client-bg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.section_client h1 {
    padding-top: 0.35rem;
    color: #fff;
    padding-bottom: 0.06rem;
}


.section_client p {
    margin-bottom: 0.2rem;
    color: #fff;
    font-size: 0.14rem;
    text-align: center;
}

.section_client .content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    min-height: unset;
}

.section_client .client-box {
    width: 32%;
    /* box-shadow: -3px 2px 7px 1px rgb(195 195 195 / 43%); */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 1.55rem;
    margin-bottom: 0.1rem;
    background: #fff;
    border-radius: 0.03rem;
    margin-right: 0.07rem;
}

.section_client .content .client-box:last-child{
    margin-right: 0;
}

.section_client .img-box {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section_client .img-box img {
    width: 90%;
    height: 92%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section_client .bottom {
    width: 100%;
    height: 0.55rem;
    text-align: center;
    color: #3297F1;
    font-size: 0.12rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    align-items: center;
}

.section_client .bottom .title1 {
    line-height: 0.4rem;
    font-size: 0.14rem;
}

.section_client .bottom .desc {
    font-size: 0.12rem;
    color: #AEAEAE;
    transform: scale(0.8);
    /*width: 200%;*/
    line-height: 0.15rem;
}

.section_function {
    width: 100%;
    height: 4.5rem;
}

.section_function .wrapper {
    width: 100%;
    margin: auto;
    z-index: 0;
}

.section_function .desc-wrapper {
    padding-top: 0.45rem;
    padding-bottom: 0.25rem;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
}

.section_function .desc {
    height: 1.5rem;
    width: 95%;
    margin: auto;
}

.section_function h1 {
    color: #3E3A39;
}

.section_function .desc p {
    font-size: 0.12rem;
}

.section_function .desc p.p {
    margin: 0 auto;
    width: 1rem;
    background-color: #E7E7E7;
    color: #727272;
    line-height: 0.3rem;
    text-align: center;
    font-size: 0.15rem;
}

.section_function .img {
    width: 86%;
    margin: auto;
    display: block;
    margin-top: 0.3rem;
}

.section_function .desc ul {
    display: flex;
    justify-content: space-between;
    margin: 0.3rem 0;
    width: 90%;
    margin: 0 auto;
}

.section_function .desc ul li {
    margin: 0.1rem 0;
    color: #000;
}

.section_ai {
    width: 100%;
    height: 5rem;
    background-image: url(/Images/product/sparkpos/ai_bg.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}
.section_ai .desc{
    position: relative;
}

.section_ai .desc .text {
    position: absolute;
    top: 13%;
    text-align: center;
    width: 100%;
    color: #fff;
    font-size: 0.15rem;
}

.section_pay {
    background: url(/Images/product/sparkpos/pay_bg.jpg) no-repeat;
    background-size: 100% 100%;
    height: 2.8rem;
}

.section_pay .img {
    width: 80%;
    display: block;
    margin: 0.3rem auto 0;
}

.section_pay ul {
    width: 86%;
    display: block;
    display: flex;
    justify-content: space-between;
    margin: 0.1rem auto;
    color: #fff;
    font-size: 0.12rem;
}

.section_pay ul li {
    width: 20%;
    text-align: center;
}


.section_protect .wrapper img {
    width: 100%;
}

.section_protect h1 {
    color: #3E3A39;
    padding-bottom: 0.25rem;
}

.section_protect .protect-content {
    display: flex;
    justify-content: space-between;
}

.section_protect .content-l,
.section_protect .content-r {
    position: relative;
    width: 49%;
    display: flex;
    flex-direction: column;
}

.section_protect .desc {
    color: #fff;
    width: 100%;
    /*height: 0.8rem;*/
    background: #3597F0;
    padding-bottom: 0.08rem;
}

.section_protect .desc h2 {
    text-align: center;
    font-size: 0.14rem;
    margin: 0.05rem 0;
}

.section_protect .desc p {
    font-size: 0.12rem;
    width: 90%;
    margin: auto;
}

.section_ex_equipment h1 {
    color: #3E3A39;
    padding-bottom: 0.25rem;
}

.section_ex_equipment .content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    min-height: unset;
    padding-bottom: 0.3rem;
}

.section_ex_equipment .client-box {
    width: 31%;
    box-shadow: -3px 2px 7px 1px rgb(195 195 195 / 43%);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0.04rem 0.1rem;
}

.section_ex_equipment .client-box .name {
    font-size: 0.14rem;
    color: #717171;
    width: 90%;
    text-align: center;
    border-bottom: 0.02rem solid #CECECE;
    height: 0.3rem;
    line-height: 0.3rem;
}

.section_ex_equipment .client-box .name {
    border-top: 0.02rem solid #CECECE;
    border-bottom: none;
    margin-top: 0.02rem;
    height: 0.28rem;
    line-height: 0.27rem;
}

.section_ex_equipment .img-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.8rem;
    padding-top: 0.1rem;
}

.section_ex_equipment .img-box img {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file .wrapper {
    width: 94%;
    margin: auto;
    padding: 0.5rem 0;
    display: flex;
}

.file .wrapper .left {
    width: 45%;
    margin-right: 0.1rem;
    height: 2.25rem;
}

.sparkpos .content-side,
.sparkpos .content-side {
    margin-top: 0.05rem;
    padding-right: 0.1rem;
}

.sparkpos .content-title {
    font-size: 0.21rem;
    color: #3E3A39;
    font-weight: bold;
}

.sparkpos .content-item {
    font-size: 0.13rem;
    color: #3E3A3A;
    display: flex;
    margin-top: 0.14rem;
    width: 1.6rem;
}

.sparkpos .content-item img {
    width: 0.15rem;
    height: 0.15rem;
    margin-top: 0.02rem;
    margin-right: 0.05rem;
}

.sparkpos .content-wrap .img-side {
    width: 1.73rem;
}

.mobile .swipe {
    background: url(/Images/product/sparkpos/mobile_bg.jpg) no-repeat;
    background-size: 100% 100%;
}

.mobile .content-wrap {
    display: flex;
    align-items: center;
    min-height: 3.2rem;
    padding-top: 0.13rem;
}

.mobile .content-side {
    margin-top: 0.05rem;
    padding-right: 0.1rem;
}

.mobile .content-title {
    font-size: 0.24rem;
    color: #fff;
    font-style: italic;
    font-weight: bold;
}

.mobile .content-item {
    font-size: 0.12rem;
    color: #fff;
    display: flex;
    margin-top: 0.1rem;
    width: 1.8rem;
}

.mobile .content-item img {
    width: 0.15rem;
    height: 0.15rem;
    margin-top: 0.02rem;
    margin-right: 0.05rem;
}

.mobile .content-side .moreBtn {
    color: #1B79D0;
    background: #fff;
    border-radius: 0.8rem;
    width: 1.3rem;
    height: 0.37rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.15rem 0 0 0.01rem;
}

.mobile .content-side .moreBtn a {
    color: #1B79D0;
}

.mobile .content-wrap .img-side {
    width: 1.73rem;
}

.title-desc-2 {
    text-align: left;
    width: 90%;
    margin-left: 5%;
}

.swipe-wrap {
    overflow: hidden;
    position: relative;
}

.swipe-wrap div {
    float: left;
    width: 100%;
    position: relative;
}

.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
    margin: 0 auto;
}

#mySwipe div b {
    display: block;
    font-weight: bold;
    color: #14ADE5;
    font-size: 20px;
    text-align: center;
    margin: 10px;
    padding: 100px 10px;
    box-shadow: 0 1px #ebebeb;
    background: #fff;
    border-radius: 3px;
    border: 1px solid;
    border-color: #E5E5E5 #D3D3D3 #B9C1C6;
}

.pager {
    padding: 0.1rem 0 0.1rem 0;
}

.pager em {
    display: inline-block;
    vertical-align: middle;
    margin: 0 6px;
    font-style: normal;
    border: 3px solid #9F9F9F;
    border-radius: 50%;
}

.pager em.on {
    border: 3px solid #1A81FF;
}
