/* banner-start */
.banner {
    display: block;
    height: 85vh;   
}
#bannerPhone {
    display: none;
}
.banner .container-fluid {
    width: 100%;
    height: 100%;
    background: url(../resources/images/whole-imgs/banner-bg.png) no-repeat;
    background-size: 100% 100%;
}

.banner .container-fluid .row,
.banner .container-fluid .bncol {
    width: 100%;
    height: 100%;
}
.banner p {
    margin: 0;
}
.banner .bnleft {
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner .bnleft .bigTit {
    font-family: '金山云技术体';
    font-size: 46px;
    /* font-weight: 600; */
    margin-bottom: 5%;
    color: #E7E7E8;
}
.banner .bnleft .smTit {
    font-size: 26px;
    color: #FFC300;
    margin-bottom: 2%;
}
.banner .bnright img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* banner-end */
/* wholeMain-start */
.whole {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 45px 0;
}
.whole #wholeNav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 0 5% 0;
}
.navs {
    display: table;
    width: 50%;
    height: 65px;
    margin-bottom: 0;
}
.navs li {
    display: table-cell;
    height: 100%;
    font-size: 36px;
    font-weight: 600;
    font-family: 'source';
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
}
.choose {
    font-weight: 600;
    color: #FFFFFF;
    background: rgba(25, 50, 163, 1);
    border-radius: 10px;
}

.box .content {
    display: none;
}
#wholeMain .box,
.box .content,
.box .content .container-fluid {
    width: 100%;
}
.box .content .container-fluid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0;
}
.box .content .container-fluid .row {
    width: 80%;
    margin-bottom: 1%;
    /* background: pink; */
}

/* wholeMain-end */
/* whole-design-start */
.desTit,
.contBox {
    margin-left: 20%;
}
.desTit::before {
    content: "";
    position: absolute;
    width: 0.8%;
    height: 20%;
    background: linear-gradient(to bottom, rgba(114, 134, 214, 1) 0%, rgba(25, 50, 163, 0.02) 100%);
    bottom: -25%;
    left: 25%;
    z-index: -1;
}
.desTit::after {
    content: "";
    position: absolute;
    width: 60%;
    height: 1.5%;
    background: linear-gradient(90deg, rgba(114, 134, 214, 1) 0%, rgba(25, 50, 163, 0.02) 100%);
    bottom: -13%;
    left: 22%;
    z-index: -1;
}
.desTit .bigTit {
    font-size: 36px;
    font-weight: 600;
}
.desTit .smCont {
    margin-bottom: 0.5rem;
    font-size: 26px;
}
.desCont {
    margin-bottom:1.5rem;
}
.desCont .smTit {
    margin-bottom: 0.5rem;
    font-size: 26px;
    font-weight: 500;
    color: rgba(48, 56, 137, 1);
}
.desCont .smCont {
    font-size: 16px;
    margin: 0;
}
.desbt {
    position: relative;
}
.bgImg {
    position: absolute;
    top: -35%;
    left: 55%;
    z-index: -1;
}
.bgImg img {
    width: 150%;
}
/* app-start */
.box .content .container-fluid .desApp {
    display: flex;
    justify-content: flex-end; 
    width: 100%;
    height: 20%;
    background: rgba(25, 50, 163, 1);
    margin-top: 5%;
}
.desApp .appTit {
    display: flex;
    align-items: center;
    font-size: 32px;
    font-weight: 600;
    color: #FFFFFF;
}
.desApp img {
    width: 75%;
}
.box .content .container-fluid .appDet {
    margin: 5% 0;
}
.appDet .col-md-7 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-right: 5%;
}
.appDet .col-md-7 .detTit,
.starTit .col-md-7 .starWei {
    font-size: 32px;
    font-weight: 600;
    color:rgba(25, 50, 163, 1);
}
.appDet .col-md-7 .detCont,
.appDet .col-md-7 .detLi {
    font-size: 20px;
}
.appDet .col-md-5 img {
    width: 100%;
    object-fit: cover;
}
.detLi {
    list-style: square;
}
.detLi li::marker {
    font-size: 32px;
    color: rgba(25, 50, 163, 1);
}
/* app-end */
/* starWei-start */
.box .content .container-fluid .starTit {
    margin: 5% 0 2% 0;
}

.box .content .container-fluid .starAll {
    position: relative;
    width: 100%;
}
.box .content .container-fluid .line {
    border: 2px solid rgba(25, 50, 163, 1);
}

.square {
    position: absolute;
    top: -7.5px; /* 设置小方块的位置，使其与横线对齐 */
    width: 15px; /* 设置小方块的宽度 */
    height: 15px; /* 设置小方块的高度 */
    background-color: rgba(25, 50, 163, 1); /* 设置小方块的颜色 */
}
.weiText,
.lineImg,
.starText {
    position: absolute;
}
.square:nth-child(1) {
    left: 20%; /* 第一个小方块的位置 */
}
.square:nth-child(2)  {
    left: 40%; /* 第二个小方块的位置 */
}
.square:nth-child(3)  {
    left: 60%; /* 第三个小方块的位置 */
}
.square:nth-child(4)  {
    left: 80%; /* 第四个小方块的位置 */
}
.weiText {
    font-size: 26px;
    font-weight: 600;
    color: rgba(25, 50, 163, 1);
}
.weiText:nth-child(1) {
    left: 19%;
}
.weiText:nth-child(2) {
    left: 38%;
}
.weiText:nth-child(3) {
    left: 58%;
}
.weiText:nth-child(4) {
    left: 78%;
}
.box .content .container-fluid .lineCont {
    height: 350px;
    margin-top: 2%;
}
.lineCont .bg {
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    background: linear-gradient(90deg, rgba(227, 227, 227, 1) 0%, rgba(196, 196, 196, 1) 100%);;
    z-index: -1;
}

.lineImg:nth-child(1) {
    left: 16%;
}
.lineImg:nth-child(2) {
    left: 32%;
}
.lineImg:nth-child(2) img {
    width: 25%;
}
.lineImg:nth-child(3) {
    top: 5%;
    left: 55%;
}
.lineImg:nth-child(3) img {
    width: 80%;
}
.lineImg:nth-child(4) {
    top: 5%;
    left: 72%;
}
.lineImg:nth-child(4) img {
    width: 80%;
}

.starText {
    bottom: 15%;
    font-size: 26px;
}
.starText:nth-child(1) {
    left: 18%;
}
.starText:nth-child(2) {
    left: 36%;
}
.starText:nth-child(3) {
    left: 58%;
}
.starText:nth-child(4) {
    left: 78%;
}
/* starWei-end */
/* whole-design-end */

/* whole-pro-start */
/* content2 */
.proTit,
.proImg {
    margin-left: 15%;
}
.box .content .container-fluid .topBox {
    /* position: relative; */
    width: 100%;
    height: 90vh;
    display: flex;
    align-items: center;
    background: url(../resources/images/whole-imgs/pro-bg.png) no-repeat;
    background-size: cover;
    z-index: -999;
    margin-bottom: 0;
}
.proTit::before {
    content: "";
    position: absolute;
    width: 0.8%;
    height: 20%;
    background: linear-gradient(to bottom, rgba(114, 134, 214, 1) 0%, rgba(25, 50, 163, 0.02) 100%);
    bottom: -36%;
    left: 14%;
    z-index: -1;
}
.proTit::after {
    content: "";
    position: absolute;
    width: 60%;
    height: 1.5%;
    background: linear-gradient(90deg, rgba(114, 134, 214, 1) 0%, rgba(25, 50, 163, 0.02) 100%);
    bottom: -23%;
    left: 12%;
    z-index: -1;
}
/* proImg-start */
.proImg img {
    width: 30%;
}
/* proImg-end */
/* proApp-start */
.box .content .container-fluid .proApp {
    margin-top: 0;
}
/* proApp-end */
/* proDet-start */
.proDet {
    padding: 0 5%;
}
/* proDet-end */
/* proCont-start */
.appPro {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 均匀分布图片 */
    align-items: center; /* 垂直居中图片 */
    width: 100%; /* 设置容器的宽度 */
}

.appPro img {
    max-width: calc(100% / 6 - 10px); /* 图片最大宽度，减去一定的间距 */
    height: auto; /* 保持宽高比 */
    margin-right: 10px; /* 图片之间的间距 */
}

.image-container img:last-child {
    margin-right: 0; /* 最后一个图片不添加右边距 */
}
/* proCont-end */
/* proLine-start */
.box .content .container-fluid .proLine {
    position: relative;
    margin-top: 2%;
    border: 2px solid rgba(25, 50, 163, 1);
}
.proSqu {
    position: absolute;
    top: -7.5px; /* 设置小方块的位置，使其与横线对齐 */
    width: 15px; /* 设置小方块的宽度 */
    height: 15px; /* 设置小方块的高度 */
    background-color: rgba(25, 50, 163, 1); /* 设置小方块的颜色 */
}
.proSqu:nth-child(1) {
    left: 7%; /* 第一个小方块的位置 */
}
.proSqu:nth-child(2)  {
    left: 24%; /* 第二个小方块的位置 */
}
.proSqu:nth-child(3)  {
    left: 41%; /* 第三个小方块的位置 */
}
.proSqu:nth-child(4)  {
    left: 58%; /* 第四个小方块的位置 */
}
.proSqu:nth-child(5)  {
    left: 74%; /* 第四个小方块的位置 */
}
.proSqu:nth-child(6)  {
    left: 91%; /* 第四个小方块的位置 */
}
/* proLine-end */
/* lineText-start */
.box .content .container-fluid .lineText {
    position: relative;
    margin-bottom: 3%;
}
.date {
    position: absolute;
    font-size: 20px;
}
.date:nth-child(1) {
    left: 5%; /* 第一个小方块的位置 */
}
.date:nth-child(2)  {
    left: 22%; /* 第二个小方块的位置 */
}
.date:nth-child(3)  {
    left: 38%; /* 第三个小方块的位置 */
}
.date:nth-child(4)  {
    left: 55%; /* 第四个小方块的位置 */
}
.date:nth-child(5)  {
    left: 71%; /* 第四个小方块的位置 */
}
.date:nth-child(6)  {
    left: 89%; /* 第四个小方块的位置 */
}
/* lineText-end */
/* whole-pro-end */