.offSpacAllProdcBanner{
    width: 100%;
    height: calc(100vw / 2.67);  /* banner比例为1440*540   */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    justify-content: center;
}
.bannWrapper{
    width: 83%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.63vw;
    font-weight: 400;
    letter-spacing: 0px;
    color: rgba(255, 255, 255, 1);
}
.bannWrapper h2 {
    font-weight: 600;
    font-size: 2.1rem;
}
.bannWrapper h3{
  font-size: 1.1rem;
}

.weProvide{
    width: 100%;
    background: #fff;
    padding: 5.57vw 0;
}
.wpWrapper{
    width: 83%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
.wpWrapper h2{
    color: #333;
    font-weight: 600;
    font-size: 2.1rem;
}
.wpWrapper h5{
    margin: 0.7vw 0 3.48vw;
    font-size: 0.75rem;
    color: rgba(51, 51, 51, 0.28);
    font-weight: 400;
}
.wpBox{width: 100%;}
.cloud-office {
	position: relative;
	z-index: 9;
}
.cloud-office-ul {
	width: 100%
}
.cloud-office-ul li {
	height:33.37vw;
	position: relative;
	background:#f6f6f6;
	width: 16.6%;
	float: left;
	padding:5.57vw 1.81vw 3.48vw 1.81vw;
}
.cloud-office-ul li:nth-child(odd){background:#ededed;}
/* .cloud-office-ul li:first-child,.cloud-office-ul li:nth-child(2){
	border-right:none;
	} */
.cloud-office-ul li.active{
	padding:0;
	}

/* .cloud-office-ul li .textMore{
	width:100%;
	overflow:hidden;
	padding:0 35px;
	position:absolute;
	left:0;
	bottom:60px;
	} */
.cloud-office-ul li .textMore{
	width:2.78vw;
	height:2.78vw;
	display:block;
	border:solid 1px #c1c1c1;
	background:url(/images/topRightArrowGrey.svg) no-repeat center;
  background-size: 1.25vw 0.35vw !important;
	}
.cloud-office-ul li.active .textMore{
	border:solid 1px #fff;
    background:url(/images/topRightArrow.svg) no-repeat center;
    
	}
.normal-inner a{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.active-inner-item{
	width:100%;
	height:100%;
	overflow:hidden;
}
.active-inner-item a{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}
.active-inner-item .textBox{
	width:33.3%;
	padding:5.57vw 1.81vw 3.48vw 1.81vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.active-inner-item .newsimg{
	width:66.7%;
    overflow: hidden;
}
.active-inner-item .newsimg img{
	webkit-transition: -webkit-transform .75s cubic-bezier(.19, 1, .22, 1);
    transition: -webkit-transform .75s cubic-bezier(.19, 1, .22, 1);
    transition: transform .75s cubic-bezier(.19, 1, .22, 1);
    transition: transform .75s cubic-bezier(.19, 1, .22, 1), -webkit-transform .75s cubic-bezier(.19, 1, .22, 1);
}
.active-inner-item .newsimg div{
    width: 100%;
    height: 100%;
    background-size: cover; /* 保持图片比例，覆盖整个容器 */
    background-position: center; /* 图片居中 */
    background-repeat: no-repeat;
}

.textSub{
	width:100%;
	font-size:0.75rem;
  text-transform: uppercase;
	color:#fff;
	margin-top:0.42vw;
}
.normal-inner a .textSub{
    color:#8f8f8f;
}
.cloud-office-ul li h4{
	width:100%;
	overflow:hidden;
	font-size:1.25rem;
	color:#333;
	font-weight:600;
  text-transform: capitalize;
	}
.cloud-office-ul li .active-inner-item h4{
    color: #fff;
}

.normal-inner {
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
  height: 100%;
}
.active-inner {
	position: relative;
	display: none;
	height: 100%;
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s
}

.cloud-office-ul li.active .active-inner {
	display: block;
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1
}
.cloud-office-ul li.active .normal-inner {
	display: none;
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0
}
.cloud-office-ul li {
	-webkit-transition: width .15s linear;
	-o-transition: width .15s linear;
	-moz-transition: width .15s linear;
	transition: width .15s linear
}

.cloud-office-ul li.active {
	z-index: 9;
	width:50%;
}
.cloud-office-ul li.active{
	background:#0046d1;
}

.bgImg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bgImg {
    position: relative;
}

.bgImg img {
    display: block!important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0%;
    top: 0%;
	border: none;
    max-width: 100%;
}

/* 核心容器：1440x800固定尺寸，完全撑满无留白，自适应 */
.page-container {
  width: 100%;
  height: calc(100vw / 1.8);
  /* 替换为你的背景图链接 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: stretch; /* 强制上下完全撑满 */
  justify-content: center;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

    /* 深色遮罩：1:1还原设计图的暗调玻璃幕墙效果 */
    /* .page-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      z-index: 1;
    } */

    /* 主内容区：Flex左右布局，无任何留白 */
    .main-content {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: stretch; /* 左右区域上下完全撑满 */
      position: relative;
      z-index: 2;
    }

    /* ====================== 左侧文字区域：Flex上下布局 ====================== */
    .left-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center; /* 文字+按钮垂直居中 */
      padding: 0 8.3%;
      height: 100%; /* 强制撑满高度 */
    }

    /* 标题样式：还原设计图字体大小/间距 */
    .main-title {
      font-size: 2.1rem;
      line-height: 100%;
      font-weight: 600;
      margin-bottom: 1.05vw;
      letter-spacing: 0;
    }

    /* 英文副标题 */
    .sub-title {
      font-size: 1rem;
      line-height: 100%;
      color: rgba(255, 255, 255, 0.2);
      letter-spacing: 0;
      font-weight: 400;
      margin-bottom: 3.55vw;
      text-transform: uppercase;
    }

    /* 分割线：匹配设计图样式 */
    .line-divider {
      width: 4.17vw;
      height: 3px;
      background: #ffffff;
      margin-bottom: 2.79vw;
    }

    /* 描述文本 */
    .desc-text {
      font-size: 1rem;
      line-height: 1.5rem;
      letter-spacing: 0;
      color: rgba(255, 255, 255, 0.4);
      margin-bottom: 4.18vw;
      font-weight: 400;
    }

    /* 预定按钮：还原设计图边框样式，添加跳转功能 */
    .book-btn {
      width: 8.96vw;
      height: 3.07vw;
      border: 1px solid #ffffff;
      background: transparent;
      color: #ffffff;
      font-size: 1rem;
      line-height: 1.5rem;
      letter-spacing: -0.33px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
    }

    .book-btn .rightArrow{
      width:0.97vw;
      height:0.28vw;
      display:block;
      background:url(/images/topRightArrowBlack.svg) no-repeat center;
      margin-left: -1.67vw;
      filter: brightness(0) invert(1);
    }

    .book-btn:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    /* ====================== 右侧功能区域：Flex均分4块 ====================== */
    .right-area {
      flex: 1;
      display: flex;
      align-items: stretch; /* 上下完全撑满背景图 */
      justify-content: stretch; /* 4个版块均分宽度 */
      height: 100%; /* 强制撑满高度 */
      position: relative;
    }

    /* 单个功能版块：均分、居中、悬浮高亮 */
    .feature-card {
      flex: 1; /* 4个版块宽度均分 */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      /* 基础背景透明度，默认第一个高亮 */
      background: rgba(255, 255, 255, 0.02);
      transition: all 0.3s ease;
      /* 版块间白色分隔线 */
      border-left: 1px solid rgba(255, 255, 255, 0.15);
      cursor: pointer;
    }

    /* 默认第一个版块高亮：背景透明度提升 */
    .feature-card.active{
        background: rgba(255, 255, 255, 0.1);
    }

    /* 图标：还原设计图线性图标尺寸/位置 */
    .feature-icon {
      width: 4.17vw;
      height: 4.17vw;
      margin-bottom: 1.39vw;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .feature-icon img{max-width: 100%;}
    /* .feature-icon i{
      display: block;
      width: 60px;
      height: 60px;
      background-size: cover; 
      background-position: center; 
      background-repeat: no-repeat;
    } */

    /* 功能文字：匹配设计图字体大小/间距 */
    .feature-name {
      font-size: 1rem;
    line-height: 1.5rem;
    color: #fff;
    letter-spacing: 0;
    font-weight: 500;
    }

    /* ====================== 自适应处理：兼容不同屏幕 ====================== */
    @media (max-width: 1440px) {
      .page-container {
        min-width: auto;
        min-height: auto;
        height: auto;
      }
      .main-content {
        width: 100%;
        height: auto;
        flex-direction: column;
      }
      .left-area {
        padding: 5.5vh 20px;
        height: auto;
        min-height: 27.87vw;
        align-items: center;
        text-align: center;
      }
      .line-divider {
        margin-left: auto;
        margin-right: auto;
      }
      .right-area {
        flex-direction: column;
        height: auto;
      }
      .right-area::after {
        display: none; /* 移动端隐藏底部横线 */
      }
      .feature-card {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        min-height: 13.89vw;
      }
      .feature-card:first-child {
        border-top: none;
      }
    }

    .offSpacCompare{
      width: 100%;
      background: #fff;
    }
    /* 页面容器 - 基础自适应 */
    .compareContainer {
        width: 83%;
        margin: 0 auto;
        padding: 4.18vw 0 6.97vw;
    }

    /* 标题样式 - 匹配设计图 */
    .title {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: 0;
        color: #333;
        margin-bottom: 0.7vw;
        position: relative;
    }
    .title-en {
        font-size: 0.88rem;
        line-height: 100%;
        font-weight: 400;
        letter-spacing: 0;
        color: rgba(51, 51, 51, 0.28);
        text-transform: uppercase;
        display: block;
        text-align: center;
        margin-bottom: 4.18vw;
    }
    .title-en::after {
        content: "";
        display: block;
        width: 2.08vw;
        height: 3px;
        background-color: #086fff;
        margin: 1.39vw auto 0;
    }

    /* 图片样式 - 统一高度 */
    .space-img {
        width: 80%;
        height: auto;
        object-fit: cover; /* 图片比例不变形 */
        margin: 0 2.08vw 1.39vw;
    }

    /* 文本标题区 - 强制两行显示+高度统一 */
    .space-name {
      font-size: 1.1rem;
      color: #333;
      font-weight: 600;
      margin-bottom: 1.05vw;
      line-height: 100%;
      padding: 0 2.08vw;
    }
    .space-desc {
      font-size: 1rem;
      color: #333;
      margin-bottom: 1.39vw;
      line-height: 100%;
      overflow: hidden;
      padding: 0 2.08vw;
    }

    /* 文本内容区 - 每项分隔线+高度统一 */
    .space-info {
        font-size: 0.75rem;
        color: #666;
        line-height: 1.6;
        flex: 1; /* 自动填充剩余空间，保证所有列内容区高度一致 */
        display: flex;
        flex-direction: column;
        margin-bottom: 2.79vw;
    }
    
    .space-info-item:first-child{border-top: 1px solid #e3e3e3;}

    .info-label {
      color: #7c7d7d;
      font-weight: 400;
      font-size: 0.88rem;
      line-height: 100%;
      letter-spacing: 0;
    }

    /* 按钮样式 - 悬浮变蓝+固定在列底 */
    .book-btn-compare {
        display: block;
        width: 59%;
        height: 3.07vw;
        line-height: 3.07vw;
        text-align: center;
        background: #fff;
        border: 1px solid #333;
        border-radius: 2px;
        color: #333;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 400;
        transition: all 0.2s ease;
        position: relative;
        flex-shrink: 0; /* 按钮不压缩 */
        margin-left: 14%;
    }
    .book-btn-compare::after {
        content: "";
        margin-left: 0.69vw;
        background: url(/images/topRightArrowBlack.svg) no-repeat center;
        width: 1.25vw;
        height: 0.35vw;
        display: inline-block;
        vertical-align: middle;
        margin-top: -0.28vw;
    }
    /* 悬浮高亮变蓝 */
    .book-btn-compare:hover {
        background-color: #086fff;
        color: #fff;
        border-color: #086fff;
    }
    
    .book-btn-compare:hover::after{
      filter: brightness(0) invert(1);
    }

    /* 自适应适配 - 不同屏幕尺寸布局调整 */
    @media (max-width: 1199px) {
        /* .space-item {
            flex: 1 0 calc(25% - 15px); 
        } */
    }
    @media (max-width: 992px) {
        /* .space-item {
            flex: 1 0 calc(50% - 10px); 
            margin-bottom: 20px;
        } */
    }

    .space-comparison{
      display: flex;
      flex-direction: row;
      width: 100%;
      flex-wrap: wrap;
    }
    
    .space-item {
      padding: 2.09vw 0 2.79vw;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      background-color: #f7f7f9;
      width: 25%;
    }
    .space-item:last-child{background-color: transparent;}
    .space-item:first-child .space-name,.space-item:first-child .space-desc,.space-item:first-child .space-info{padding-left: 2.08vw;}
    /* .space-item:last-child .space-name,.space-item:last-child .space-desc,.space-item:last-child .space-info{padding-right: 30px;} */
    .space-info-item {
      padding: 1.39vw 2.08vw;
      border-bottom: 1px solid #e3e3e3;
      display: flex;
      flex-direction: column;
      gap: 1.11vw;
    }
    .space-item:first-child .space-info .space-info-item{padding-left: 0;}
    .rightContainer .space-item:first-child .space-info-item{padding-right: 0;}

    .info-text{
      width: 100%;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      height: 4.5rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5rem;
      letter-spacing: 0;
      color: #333;
    }
    .space-info-item:first-child .info-text,.space-info-item:nth-child(5) .info-text{
      height: 3rem;
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }
    .space-info-item:nth-child(2) .info-text,.space-info-item:nth-child(3) .info-text,.space-info-item:nth-child(4) .info-text{
      height: 1.5rem;
      -webkit-line-clamp: 1;
      line-clamp: 1;
    }
    

    @media screen and (max-width: 2270px) {
      .lng-ja-jp .space-desc{
        height: 36px;
      }
    }
    @media screen and (max-width: 1990px) {
      .space-info-item:nth-child(5) .info-text{
        -webkit-line-clamp: 3;
        line-clamp: 3;
        height: 4.5rem;
      }
    }
     @media screen and (max-width: 1685px) {
      .space-info-item:last-child .info-text{
        -webkit-line-clamp: 4;
        line-clamp: 4;
        height: 6rem;
      }
    }
    @media screen and (max-width: 1635px) {
      .space-info-item:nth-child(4) .info-text{
        -webkit-line-clamp: 2;
        line-clamp: 2;
        height: 3rem;
      }
      .space-item .space-desc{
        -webkit-line-clamp: 2;
        line-clamp: 2;
        height: 3rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        line-height: 1.5rem;
      }
      .space-info-item:first-child .info-text{
        -webkit-line-clamp: 3;
        line-clamp: 3;
        height: 4.5rem;
      }
      .space-info-item:nth-child(5) .info-text{
        -webkit-line-clamp: 4;
        line-clamp: 4;
        height: 6rem;
      }
    }
    @media screen and (max-width: 1380px) {
      .space-info-item:last-child .info-text{
        -webkit-line-clamp: 5;
        line-clamp: 5;
        height: 7.5rem;
      }
      .space-info-item:nth-child(2) .info-text{
        -webkit-line-clamp: 2;
        line-clamp: 2;
        height: 3rem;
      }
      .lng-ja-jp .space-name{height: 31px;}
    } 
    @media screen and (max-width: 1160px) {
      .space-info-item:last-child .info-text{
        -webkit-line-clamp: 6;
        line-clamp: 6;
        height: 9rem;
      }
      .space-info-item:nth-child(5) .info-text{
        -webkit-line-clamp: 5;
        line-clamp: 5;
        height: 7.5rem;
      }
      
    }
    @media screen and (max-width: 1070px) {
      .space-info-item:first-child .info-text{
        -webkit-line-clamp: 4;
        line-clamp: 4;
        height: 6rem;
      }
    } 
    @media screen and (max-width: 995px) {
      .space-info-item:nth-child(4) .info-text{
        -webkit-line-clamp: 3;
        line-clamp: 3;
        height: 4.5rem;
      }
      .space-info-item:nth-child(5) .info-text{
        -webkit-line-clamp: 6;
        line-clamp: 6;
        height: 9rem;
      }
      .space-info-item:last-child .info-text{
        -webkit-line-clamp: 7;
        line-clamp: 7;
        height: 10.5rem;
      }

      .left-area{
        align-items: flex-start;
        text-align: left;
        min-height: unset;
      }
      .main-content{
        width: 83%;
        margin: 12vh 0 0;
      }
      .main-title{
        margin-bottom: 2vh;
      }
      .sub-title{
        margin-bottom: 3vh;
      }
      .line-divider{
        width: 16vw;
        height: 1px;
        margin: 0;
        margin-bottom: 9vh;
      }
      .desc-text{
        margin-bottom: 9vh;
      }
      .book-btn{
        width: 28.28vw;
        height: 5.4vh;
      }
      .book-btn .rightArrow{
        width: 3.75vw;
        height: 0.97vw;
        margin-left: 0;
      }
      .right-area{
        flex-direction: row;
        margin-top: 13.5vh;
        flex-wrap: wrap;
        gap: 6vw;
      }
      .feature-card{
        width: calc(50% - 3vw);
        flex: unset;
        background: transparent !important;
        border-top: none;
        margin-bottom: 10.05vh;
      }
      .feature-icon{
        width: 16vw;
        height: 9vh;
      }
      .lng-en-us .space-name{
        height: 31px;
      }
    } 

    @media (max-width: 767px) {
      .offSpacAllProdcBanner{
        /* height: calc(100vw / 0.94); */
        height: 48vh;
        background-size: 340%;
        background-position: 20% 79%;
      }
      .bannWrapper{
        width: 89.3%;
        gap: 1.8vh;
      }
      .bannWrapper h2 {
        font-size: 2rem;
      }
      .weProvide{
        padding: 7.5vh 0;
      }
      .wpWrapper {
        width: 89.3%;
      }
      .wpWrapper h5 {
        margin: 3vh 0 4.5vh;
        font-size: 0.93rem;
      }
      .cloud-office-ul li{
        float: none;
        width: 100%;
        height: 21vh;
        padding: 0 7%;
      }
      .cloud-office-ul li.active {
        width: 100%;
      }
      .cloud-office-ul li h4{
        font-size: 1.55rem;
      }
      .textSub{
        font-size: 0.93rem;
        margin-top: 0.9vh;
      }
      .cloud-office-ul li .textMore{
        width: 10.7vw;
        height: 10.7vw;
        background-size: unset !important;
      }
      .active-inner-item .textBox{
        width: 100%;
        flex-direction: row;
        align-items: center;
        padding: 0 7%;
      }
      .active-inner-item .newsimg{
        display: none;
      }
      .normal-inner a{
        flex-direction: row;
        align-items: center;
      }
      .left-area{
        align-items: flex-start;
        text-align: left;
        min-height: unset;
      }
      .main-content{
        width: 89.3%;
        margin: 12vh 0 0;
      }
      .main-title{
        font-size: 1.85rem;
        margin-bottom: 2vh;
      }
      .sub-title{
        font-size: 1.1rem;
        margin-bottom: 3vh;
      }
      .line-divider{
        width: 16vw;
        height: 1px;
        margin: 0;
        margin-bottom: 9vh;
      }
      .desc-text{
        font-size: 1.1rem;
        line-height: 1.85rem;
        margin-bottom: 9vh;
      }
      .book-btn{
        width: 28.28vw;
        height: 5.4vh;
        font-size: 1.1rem;
        line-height: 1.7rem;
      }
      .book-btn .rightArrow{
        width: 3.75vw;
        height: 0.97vw;
        margin-left: 0;
      }
      .right-area{
        flex-direction: row;
        margin-top: 13.5vh;
        flex-wrap: wrap;
        gap: 6vw;
      }
      .feature-card{
        width: calc(50% - 3vw);
        flex: unset;
        background: transparent !important;
        border-top: none;
        margin-bottom: 10.05vh;
      }
      .feature-icon{
        width: 16vw;
        height: 9vh;
      }
      .feature-name{
        font-size: 1.1rem;
        line-height: 1.85rem;
      }
      .compareContainer{
        width: 100%;
        padding: 9vh 0 15vh;
      }
      .title{
        font-size: 1.54rem;
        margin-bottom: 1.5vh;
      }
      .title-en{
        font-size: 0.93rem;
      }
      .title-en::after{
        width: 8vw;
        height: 2px;
        margin: 2.3vh auto 0;
      }
      .space-comparison{
        flex-direction: column;
      }
      .space-item{
        width: 100%;
        padding: 6vh 0 7.5vh;
        margin-bottom: 3vh;
      }
      .space-img{
        width: 64%;
        margin: 0 auto 6vh;
      }
      .space-name{
        font-size: 1.39rem;
        margin-bottom: 2.1vh;
        padding: 0 5.35vw !important;
      }
      .space-item .space-desc{
        padding: 0 5.35vw !important;
        font-size: 1.24rem;
        display: block;
        margin-bottom: 3vh;
      }
      .space-info{
        padding: 0 5.35vw !important;
        margin-bottom: 4.5vh;
      }
      .space-info-item{
        padding: 3vh 0;
        gap: 2.4vh;
      }
      .space-info-item:last-child{
        border-bottom: none;
      }
      .info-label{font-size: 1.1rem;}
      .info-text{
        height: auto !important;
        display: block;
        font-size: 1.24rem;
        line-height: 1.85rem;
      }
      .book-btn-compare{
        width: 28.5%;
        height: 5.4vh;
        line-height: 5.4vh;
        margin: 0 auto;
        font-size: 1.1rem;
      }
      .book-btn-compare::after{
        width: 3.8vw;
        height: 0.54vh;
        margin-left: 2.9vw;
      }
    }