/*
    对于绝大部分的vw值，计算时都是用px值除以750再乘以100
    对于上面所说的px值，有些是用的移动端的px值，有些是用的PC端的px值，有些是用的图片宽高的px值，取px值时一般取与该px值相邻的且是3的倍数的px值这样要好计算一些
    对于前面提及的px值或vw值，修改时可以自行计算一下 ；有些是通过多次目测调整到合适位置（极少部分，例如：顶部轮播图）；有些是需要加上其他元素的px值或vw值；
*/
/* 公共部分 开始 */
.lato-index-mobile {
    min-width: 0;
}

.lato-index-mobile .index-inner {
    width: 100%;
}

.lato-index-mobile .index-title {
    margin-bottom: 6vw;
    font-size: 4.4vw;
}

.lato-index-mobile .index-title span {
    padding: 0 9vw;
}

.lato-index-mobile .index-title span::before,
.lato-index-mobile .index-title span::after {
    width: 8vw;
    background-size: 8vw 6.67vw;
}

.lato-index-mobile .index-title span .change-line {
    display: block;
}

.lato-index-mobile .index-title span b {
    font-size: 4.8vw;
}

/* 公共部分 结束 */

/* 顶部轮播图 开始 */
.lato-index-mobile .index-banner {
    padding-bottom: calc(8vw + 3.2vw + 5.6vw + 1.2vw + 9.2vw + 3.2vw + 8vw);
    background-image: url("../image/banner-bg-1-mobile.png");
}

.lato-index-mobile .index-banner .banner-top {
    padding: 18vw 0 65.33vw;
    background-image: url("../image/banner-bg-0-mobile.png");
    background-position: center bottom;
    background-size: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lato-index-mobile .index-banner .banner-top>:not(:first-child) {
    margin: 5vw 0 0 0;
}

.lato-index-mobile .index-banner .banner-top .banner-top-0 {
    background-image: url("../image/banner-top-0.png");
    width: 70.8vw;
    height: 22vw;
    background-size: 100% auto;
}

.lato-index-mobile .index-banner .banner-top .banner-top-tips{
    background-image: url("../image/banner-top-tips-mobile.png");
    width: 50vw;
    background-size: 100% auto;
    margin-top: 1vw;
}

.lato-index-mobile .index-banner .banner-top .banner-top-1{
    padding: 8px 0 8px 21px;
    font-size: 32px;
}


.lato-index-mobile .index-banner .banner-top .banner-top-2 {
    font-size: 3.8vw;
}

.lato-index-mobile .index-banner .banner-top .banner-top-2 span {
    font-size: 5.6vw;
}

.lato-index-mobile .index-banner .banner-top .banner-top-3 {
    width: 35.2vw;
    height: 9.2vw;
    background-size: 35.2vw 9.2vw;
    background-image: url("../image/free-use-mobile.png");
}

.lato-index-mobile .index-banner .banner-bottom-swiper {
    padding: 8vw 3.2vw;
    background-color: #fff;
    height: calc(8vw + 3.2vw + 5.6vw + 1.2vw + 9.2vw + 3.2vw + 8vw);
    max-height: calc(8vw + 3.2vw + 40px + 1.2vw + 9.2vw + 3.2vw + 8vw);
}

.lato-index-mobile .index-banner .banner-bottom-swiper .swiper-slide {
    align-items: flex-start;
    flex-direction: column;
    background: linear-gradient(to right, rgba(35, 197, 94, 0.2), rgba(15, 196, 250, 0.2));
    position: relative;
    opacity: 0;
    padding: 1.4vw 7vw 3vw 9vw;
    border-radius: 2vw;
    -webkit-border-radius: 2vw;
    -moz-border-radius: 2vw;
    -ms-border-radius: 2vw;
    -o-border-radius: 2vw;
}

.lato-index-mobile .index-banner .banner-bottom-swiper .swiper-slide * {
    zoom: 1;
    opacity: 1;
}

.lato-index-mobile .index-banner .banner-bottom-swiper .swiper-slide img {
    max-height: 5.6vw;
}

.lato-index-mobile .index-banner .banner-bottom-swiper .swiper-slide .msg-box {
    margin-top: 1.2vw;
    margin-left: 0;
    padding: 1.2vw 3.6vw;
    font-size: 2.2vw;
    border-radius: 1.2vw;
    -webkit-border-radius: 1.2vw;
    -moz-border-radius: 1.2vw;
    -ms-border-radius: 1.2vw;
    -o-border-radius: 1.2vw;
}

.lato-index-mobile .index-banner .banner-bottom-swiper .swiper-slide-active {
    opacity: 1;
}

.lato-index-mobile .index-banner .banner-bottom-swiper .swiper-slide::before,
.lato-index-mobile .index-banner .banner-bottom-swiper .swiper-slide::after {
    content: "";
    width: 4.8vw;
    height: 4.8vw;
    background-size: 4.8vw;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../image/banner-bottom-bg-mobile.png");
    position: absolute;
    left: 3.2vw;
    top: -2.4vw;
}

.lato-index-mobile .index-banner .banner-bottom-swiper .swiper-slide::after {
    left: auto;
    top: auto;
    right: 3.2vw;
    bottom: -2.4vw;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

/* 顶部轮播图 结束 */

/* 解决方案 开始 */
.lato-index-mobile .index-solution {
    padding: 0 0 6vw;
}

/* 解决方案 结束 */

/* 了解解决方案详情 开始 */
.index-intro-btn-mobile {
    border: 1px solid transparent;
    font-size: 2vw;
    padding: 1.4vw 3vw;
    margin: -5vw auto 4vw;
}
.index-intro-btn-mobile::before {
    margin: -1px;
}
/* 了解解决方案详情 结束 */

/* 增加入口 开始 */
.index-enter-mobile {
    background-image: url("../image/index-inner-bg-mobile.png");
    padding: 4vw;
    margin-bottom: 4vw;
}
.index-enter-mobile .enter-item {
    width: 30vw;
    font-size: 2vw;
    padding: 2vw;
    border-radius: 2vw;
    -webkit-border-radius: 2vw;
    -moz-border-radius: 2vw;
    -ms-border-radius: 2vw;
    -o-border-radius: 2vw;
}
.index-enter-mobile .enter-item + .enter-item {
    margin-left: 2vw;
}
.index-enter-mobile .enter-item .enter-item-img {
    height: 5vw;
    margin-bottom: 1.6vw;
}
.index-enter-mobile .enter-item .enter-item-btn {
    padding: 1vw 2vw;
    font-size: 1.5vw;
    margin: 1.2vw auto 0;

}
/* 增加入口 结束 */

/* 简单 开始 */
.lato-index-mobile .index-simple {
    padding: 8vw 3.2vw;
    background-color: #E8F5EE;
}

.lato-index-mobile .index-simple .simple-swiper .swiper-slide {
    height: auto;
    padding: 8vw 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 3.2vw;
    -webkit-border-radius: 3.2vw;
    -moz-border-radius: 3.2vw;
    -ms-border-radius: 3.2vw;
    -o-border-radius: 3.2vw;
}

.lato-index-mobile .index-simple .simple-swiper .swiper-slide .index-title {
    display: flex;
    margin-bottom: 6vw;
    font-size: 4vw;
}

.lato-index-mobile .index-simple .simple-swiper .swiper-slide .index-title span::before,
.lato-index-mobile .index-simple .simple-swiper .swiper-slide .index-title span::after {
    width: 9.2vw;
    background-size: 9.2vw 4.4vw;
    background-image: url("../image/ellipsis-mobile.png");
}

.lato-index-mobile .index-simple .simple-swiper .swiper-slide .index-title span i {
    font-style: normal;
    padding: 1.5vw 3vw;
    background-color: rgba(35, 197, 94, 0.15);
    border-radius: 9.6vw;
    -webkit-border-radius: 9.6vw;
    -moz-border-radius: 9.6vw;
    -ms-border-radius: 9.6vw;
    -o-border-radius: 9.6vw;
}

.lato-index-mobile .index-simple .simple-swiper .swiper-slide .simple-tip {
    display: block;
    margin: 0 2vw 5.6vw;
    font-size: 3.6vw;
    color: #000;
    font-family: OPPOSans-M;
    line-height: 250%;
    background-color: rgba(255, 193, 108, 0.1);
    border-radius: 1.2vw;
    -webkit-border-radius: 1.2vw;
    -moz-border-radius: 1.2vw;
    -ms-border-radius: 1.2vw;
    -o-border-radius: 1.2vw;
}

.lato-index-mobile .index-simple .simple-swiper .swiper-slide .simple-benefit {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.lato-index-mobile .index-simple .simple-swiper .swiper-slide .simple-benefit .benefit-item {
    margin-bottom: 2.8vw;
    padding-left: 7.2vw;
    width: 42%;
    font-size: 3.2vw;
    color: #000;
    line-height: 150%;
    text-align: left;
    font-family: OPPOSans-M;
    background-image: url("../image/simple-benefit-mobile.png");
    background-size: 5.2vw;
    background-repeat: no-repeat;
    background-position: left top;
}

.lato-index-mobile .index-simple .simple-swiper .swiper-slide:nth-of-type(2n) .simple-benefit .benefit-item {
    padding-left: 6vw;
    width: auto;
}

.lato-index-mobile .index-simple .simple-swiper .swiper-slide .simple-benefit .benefit-item span {
    color: #999;
}

.lato-index-mobile .index-simple .simple-swiper .swiper-slide .simple-btn {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    padding-left: 10vw;
    padding-right: 10vw;
}

.lato-index-mobile .index-simple .simple-swiper .swiper-slide .simple-btn .simple-btn-item-free.simple-btn-item-top::after{
    background-image: url(../image/banner-top-tips-2-mobile.png);
    top: -38px;
    width: 165px;
    height: 36px;
    background-size: 100% auto;
    left: 50%;
    transform: translate(-50%, 0);
}

.lato-index-mobile .index-simple .simple-swiper .swiper-slide .simple-btn img {
    max-height: 9.2vw;
}

.lato-index-mobile .index-simple .simple-swiper .swiper-pagination .swiper-pagination-bullet {
    width: 3.6vw;
    height: 1.2vw;
    border-radius: 1.2vw !important;
    -webkit-border-radius: 1.2vw !important;
    -moz-border-radius: 1.2vw !important;
    -ms-border-radius: 1.2vw !important;
    -o-border-radius: 1.2vw !important;
}

/* 简单 结束 */

/* 复杂 开始 */
.lato-index-mobile .index-complex {
    padding: 8vw 0 6vw;
}

.lato-index-mobile .index-complex .complex-swiper {
    padding-bottom: 32vw;
}

.lato-index-mobile .index-complex .complex-swiper .swiper-slide {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.lato-index-mobile .index-complex .complex-swiper .swiper-slide .complex-describe {
    padding: 0 3.2vw;
    font-size: 3.2vw;
}

.lato-index-mobile .index-complex .complex-swiper .swiper-slide .complex-describe span {
    font-size: 4vw;
}

.lato-index-mobile .index-complex .complex-swiper .swiper-pagination {
    bottom: 0;
}

.lato-index-mobile .index-complex .complex-swiper .swiper-pagination .swiper-pagination-bullet {
    width: 3.6vw;
    height: 1.2vw;
    border-radius: 1.2vw !important;
    -webkit-border-radius: 1.2vw !important;
    -moz-border-radius: 1.2vw !important;
    -ms-border-radius: 1.2vw !important;
    -o-border-radius: 1.2vw !important;
}



.lato-index-mobile .index-complex .complex-swiper .simple-btn-item{
    display: block;
    max-width: 67%;
    position: absolute;
    left: 50%;
    top: calc(100% - 32vw);
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
}
.lato-index-mobile .index-complex .complex-swiper .free-trial-mobile {
    height: auto;
    width: 50vw;
    height: 12.2vw;
}

.lato-index-mobile .index-complex .complex-swiper .simple-btn-item.simple-btn-item-free::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 12vw;
    transform: translate(-50%, 0);
    display: block;
    background-image: url("../image/banner-top-tips-mobile.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 60vw;
    height: 13.4vw;
    background-size: 100%;
}

/* 复杂 结束 */

/* 工厂 开始 */
.lato-index-mobile .index-factory {
    padding: 8vw 3.2vw;
    background-color: #E8F5EE;
}

.lato-index-mobile .index-factory .index-title::after {
    content: "";
    width: 13em;
    height: 4em;
    border: 0.4vw dashed #23C55E;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.lato-index-mobile .index-factory .index-title span {
    background-color: #fff;
    padding: 0.5em 2.7em;
    line-height: 150%;
}

.lato-index-mobile .index-factory .index-title span::before,
.lato-index-mobile .index-factory .index-title span::after {
    background-color: #E8F5EE;
}

.lato-index-mobile .index-factory .factory-content {
    padding: 8vw 3.2vw;
    background-image: none;
    background-color: #fff;
    border-radius: 3.2vw;
    -webkit-border-radius: 3.2vw;
    -moz-border-radius: 3.2vw;
    -ms-border-radius: 3.2vw;
    -o-border-radius: 3.2vw;
}

.lato-index-mobile .index-factory .factory-content .factory-left {
    height: 48vw;
    width: 100%;
}

.lato-index-mobile .index-factory .factory-content .factory-right {
    margin-top: 4vw;
    width: 100%;
}

.lato-index-mobile .index-factory .factory-content .factory-right .factory-desc {
    font-size: 2.8vw;
}

.lato-index-mobile .index-factory .factory-content .factory-right .img-box {
    margin-top: 4vw;
}

/* 工厂 结束 */

/* 案例 开始 */
.lato-index-mobile .index-case {
    padding: 8vw 3.2vw 0;
}

.lato-index-mobile .index-case .case-swiper1 .swiper-pagination1 {
    padding: 0 0 3.6vw;
}

.lato-index-mobile .index-case .case-swiper1 .swiper-pagination1 .swiper-pagination-bullet {
    padding: 0 3.6vw 3.6vw;
    font-size: 3.6vw;
}

.lato-index-mobile .index-case .case-swiper1 .swiper-pagination1 .swiper-pagination-bullet-active::after {
    height: 0.4vw;
}

.lato-index-mobile .index-case .case-swiper2 .swiper-pagination2 {
    bottom: 7vw;
    left: auto;
    right: 4vw;
}

.lato-index-mobile .index-case .case-swiper2 .swiper-pagination2 .swiper-pagination-bullet {
    width: 10vw;
}

.lato-index-mobile .index-case .swiper-slide {
    background-size: 100% 40vw;
    background-position: center top;
    background-color: #E9ECF5;
    border-radius: 2vw;
    -webkit-border-radius: 2vw;
    -moz-border-radius: 2vw;
    -ms-border-radius: 2vw;
    -o-border-radius: 2vw;
}

.lato-index-mobile .index-case .swiper-slide .index-inner {
    height: auto;
    padding: 44vw 4vw 4vw;
    font-size: 3.2vw;
}

.lato-index-mobile .index-case .swiper-slide .index-inner>* {
    max-width: none;
}

.lato-index-mobile .index-case .swiper-slide .index-inner .case-logo {
    margin-bottom: 4vw;
}

.lato-index-mobile .index-case .swiper-slide .index-inner .case-logo img {
    max-height: 8.8vw;
}

.lato-index-mobile .index-case .swiper-slide .index-inner .case-title {
    font-size: 3.6vw;
    padding-right: 5.2vw;
    background-size: 4.4vw;
}

.lato-index-mobile .index-case .swiper-slide .index-inner .case-describe {
    margin-top: 2vw;
}

.lato-index-mobile .index-case .swiper-slide .index-inner .case-describe:nth-of-type(3) {
    display: none;
}

.lato-index-mobile .index-case .swiper-slide .index-inner .case-btn {
    background-color: #23C55E;
    margin-top: 2.4vw;
    color: #fff;
    padding: 2vw 0;
    width: 28vw;
    border: none;
    border-radius: 0.8vw;
    -webkit-border-radius: 0.8vw;
    -moz-border-radius: 0.8vw;
    -ms-border-radius: 0.8vw;
    -o-border-radius: 0.8vw;
}

/* 案例 结束 */

/* 合作企业 开始 */
.lato-index-mobile .index-company {
    padding: 8vw 0;
}

.lato-index-mobile .index-company .company-content .img-box {
    width: 200vw;
}

.lato-index-mobile .index-company .company-content .company-number {
    width: 90%;
    padding: 6vw 0;
    border-radius: 2.4vw;
    -webkit-border-radius: 2.4vw;
    -moz-border-radius: 2.4vw;
    -ms-border-radius: 2.4vw;
    -o-border-radius: 2.4vw;
}

.lato-index-mobile .index-company .company-content .company-number .number-box .number {
    height: 6.8vw;
}

.lato-index-mobile .index-company .company-content .company-number .number-box .number div h1 {
    font-size: 6.4vw;
    line-height: 6.8vw;
}

.lato-index-mobile .index-company .company-content .company-number .number-box .number span {
    margin-top: 3vw;
    margin-left: 1.2vw;
    font-size: 2.8vw;
}

.lato-index-mobile .index-company .company-content .company-number .number-box p {
    font-size: 2.4vw;
}

/* 合作企业 结束 */

/* 证书 开始 */
.lato-index-mobile .index-diploma {
    padding: 8vw 0;
    background-image: url("../image/diploma-bg-mobile.png");
    background-position: center bottom;
}

.lato-index-mobile .index-diploma .diploma-swiper {
    padding: 0 0 3.2vw;
    width: 100%;
}

.lato-index-mobile .index-diploma .diploma-swiper .swiper-button-prev,
.lato-index-mobile .index-diploma .diploma-swiper .swiper-button-next {
    width: 12vw;
    height: 12vw;
    background-size: 12vw;
}

.lato-index-mobile .index-diploma .diploma-swiper .swiper-slide {
    box-shadow: 0 2vw 2vw rgba(215, 219, 215, 0.70);
    border-radius: 1.6vw;
    -webkit-border-radius: 1.6vw;
    -moz-border-radius: 1.6vw;
    -ms-border-radius: 1.6vw;
    -o-border-radius: 1.6vw;
}

.lato-index-mobile .index-diploma .diploma-swiper .swiper-slide-prev {
    z-index: -1;
    opacity: 0.4;
    transform: scale(0.9) translate(10%, 5%);
    -webkit-transform: scale(0.9) translate(10%, 5%);
    -moz-transform: scale(0.9) translate(10%, 5%);
    -ms-transform: scale(0.9) translate(10%, 5%);
    -o-transform: scale(0.9) translate(10%, 5%);
}

.lato-index-mobile .index-diploma .diploma-swiper .swiper-slide-next+.swiper-slide+.swiper-slide {
    z-index: -1;
    opacity: 0.4;
    transform: scale(0.9) translate(-10%, 5%);
    -webkit-transform: scale(0.9) translate(-10%, 5%);
    -moz-transform: scale(0.9) translate(-10%, 5%);
    -ms-transform: scale(0.9) translate(-10%, 5%);
    -o-transform: scale(0.9) translate(-10%, 5%);
}

.lato-index-mobile .index-diploma .diploma-swiper .swiper-slide-active {
    transform: translateX(-5%);
    -webkit-transform: translateX(-5%);
    -moz-transform: translateX(-5%);
    -ms-transform: translateX(-5%);
    -o-transform: translateX(-5%);
}

.lato-index-mobile .index-diploma .diploma-swiper .swiper-slide-next+.swiper-slide {
    transform: translateX(5%);
    -webkit-transform: translateX(5%);
    -moz-transform: translateX(5%);
    -ms-transform: translateX(5%);
    -o-transform: translateX(5%);
}

/* 证书 结束 */

/* 业界资讯 开始 */
.lato-index-mobile .index-news {
    padding: 8vw 3.2vw;
}

.lato-index-mobile .index-news .news-tags {
    margin-bottom: 3vw;
}

.lato-index-mobile .index-news .news-tags .tag-item {
    margin: 0 0.4vw 3vw;
    padding: 0.4vw 1.6vw;
    font-size: 2.8vw;
    border-radius: 0.4vw;
    -webkit-border-radius: 0.4vw;
    -moz-border-radius: 0.4vw;
    -ms-border-radius: 0.4vw;
    -o-border-radius: 0.4vw;
}

.lato-index-mobile .index-news .sort-title {
    display: flex;
    justify-content: space-around;
    padding: 2.4vw 0;
    font-size: 4vw;
    color: #373737;
    font-family: OPPOSans-M;
}

.lato-index-mobile .index-news .sort-title .sort-active {
    color: #23C55E;
    font-family: OPPOSans-B;
    position: relative;
}

.lato-index-mobile .index-news .sort-title .sort-active::after {
    content: "";
    width: 100%;
    height: 0.4vw;
    background-color: #23C55E;
    position: absolute;
    left: 0;
    bottom: -2.4vw;
}

.lato-index-mobile .index-news .news-box .swiper {
    padding: 0;
    width: 100%;
    border: none;
}

.lato-index-mobile .index-news .news-box .swiper .swiper-top {
    display: none;
}

.lato-index-mobile .index-news .news-box .swiper .swiper-slide {
    font-size: 3.2vw;
    color: #797979;
    border-top: 1px solid #eee;
    padding: 4.8vw 2vw 4.8vw 19.2vw;
}

.lato-index-mobile .index-news .news-box .swiper .swiper-slide .news-img-box {
    display: block !important;
    margin-bottom: 0;
    width: 13.2vw;
    height: 13.2vw;
    border: 0.4vw solid rgba(35, 197, 94, 0.3);
    position: absolute;
    left: 2vw;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    border-radius: 1.2vw;
    -webkit-border-radius: 1.2vw;
    -moz-border-radius: 1.2vw;
    -ms-border-radius: 1.2vw;
    -o-border-radius: 1.2vw;
}

.lato-index-mobile .index-news .news-box .swiper .swiper-slide .news-img-box p,
.lato-index-mobile .index-news .news-box .swiper .swiper-slide .news-date {
    display: none;
}

.lato-index-mobile .index-news .news-box .swiper .swiper-slide .news-title {
    margin-bottom: 2.4vw;
    font-size: 4vw;
}

/* 业界资讯 结束 */