*{ margin:0; padding:0;box-sizing: border-box;}
body{background-color: #f0f0f0;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}
a,h4{ text-decoration:none!important;color:#000;}

ul,li{ list-style:none; margin:0; padding:0;}

.bgfff{ background-color:#fff;}
.bg0{ background-color:#000;}
.bg21{ background-color:#212121;}
.bgf0{ background-color:#f0f0f0;}
.bgfs{ background-color:#ff9f00;}
.bg48{ background-color:#484848;}
.bg23{ background-color:#232323;}

.color0{ color:#000!important}

.w100{ width:100%;}

.btn-custom{background-color: #ff9f00;color: #fff;border-radius: 25px;padding: 8px 22px;font-size: 18px;font-weight: 500;transition: background-color 0.3s ease;}
.btn-custom:hover{background-color: #e68a00;color: #fff;}
.tit2{position: absolute;top: 30px;left: 50%;transform: translateX(-50%); z-index:2;}
.tit3{position: absolute;top: 50px;left: 50%;transform: translateX(-50%); z-index:2;}

/* OPPO Sans - Light (细体) */
@font-face {
  font-family: 'OPPOSans';
  font-weight: 300; /* 通常用 300 表示 Light 字重 */
  font-display: swap;
  src: url('fonts/OPPOSans-L.ttf') format('woff2');
}

/* OPPO Sans - Regular (常规体) */
@font-face {
  font-family: 'OPPOSans';
  font-weight: 400; /* 常规字重 */
  font-display: swap;
  src: url('fonts/OPPOSans-R.ttf') format('woff2');
}

/* OPPO Sans - Medium (中等) */
@font-face {
  font-family: 'OPPOSans';
  font-weight: 500; /* 中等字重 */
  font-display: swap;
  src: url('fonts/OPPOSans-B.ttf') format('woff2');
}

.font27{ font-size:27px!important;}

.flexStart{display: -webkit-flex;display: flex;justify-content: flex-start;flex-wrap: wrap;}
.flexCenter{display: -webkit-flex;/* Safari*/display: flex;justify-content: center;flex-wrap: wrap;}

.header_nav_box{height: 80px;transition: 0.4s;z-index: 3;position: fixed;top: 0px;width: 100%;z-index: 3;}
.header_nav_box .navbar-etie{background-color: transparent;border:none;color:#fff;}
.header_nav_box .navbar-etie .nav-link{color:#fff;}
.header_nav_box.on,.products .header_nav_box,.header_nav_box:hover{position: fixed;top: 0px;left: 0;width: 100%;background: #fff;}
.header_nav_box.on a,.header_nav_box:hover a,.header_nav_box:hover .nav-link,.products .header_nav_box a,.products .header_nav_box .nav-link,.header_nav_box.on .nav-link{color: #000;}

.isearch{width:30px; height:30px;font-size:19px;cursor:pointer;color:#fff;border-radius: 30px;text-align:center}
/* 语言按钮 */
.lang-btn {
      color: #fff;
      border: none;
      padding: 0.4rem 1rem;
      border-radius: 30px;
      font-size: 14px;
  font-family: 'OPPOSans';
  font-weight: 400;
    }
    
.header_nav_box.on .lang-btn,.products .header_nav_box .lang-btn,.header_nav_box:hover .lang-btn,.header_nav_box.on .isearch,.products .header_nav_box .isearch,.header_nav_box:hover .isearch{background-color: #ff9f00;color:#fff!important}  
/*
.navbar-nav .container-custom{ display:flex;}
*/
.banner{position: relative;/*z-index: -1;*/}
.banner .img img{width: 100%;height: 37.5rem;object-fit: cover;}
.banner .img video{width: 100%;height: 37.5rem;object-fit: cover;}
.banner .box{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;}
.banner .box div{width: 100%;text-align: center;}
.banner .box h5{font-size: 3.25rem;color: #fff;width: 100%;}
.banner .box p{font-size: 1.5rem;color: #fff;margin-top: 1.375rem;}



.nav_bg{background: #000;opacity:0.5;height:60px;width:100%;position: absolute;bottom:0px;}

.rn_title{position: absolute;bottom:0px;z-index:2;width:100%;}
.rn_title ul li{margin-right: 2.75rem;}
.rn_title ul li a{font-size: 1.125rem;color: #fff;display: block; padding:1rem;}
.rn_title ul .active,.rn_title ul li:hover{ background-color:#ff9f00;}

.xuanjie .section-title,.xuanjie .section-subtitle{ color:#000;}

/*小标题*/
.stit{text-align: center;font-size: 36px;font-weight: 600;color: #333;margin-bottom: 40px;}
.stit2{text-align: center;font-size: 27px;font-weight: 500;color: #333;margin-bottom: 40px;font-family: 'OPPOSans';}
.stit3{font-size:46px;font-weight: 500;color: #fff;margin-bottom: 30px;font-family: 'OPPOSans';}

.pc{ display:block!important}
.wap{ display:none!important}



.colorfff,.video-title { color:#fff;}

/*
.kaifalist{background:url(img/bg_kaifa.png) no-repeat center;}
*/

/*开发服务*/
.kaifalist{ height:750px;padding-top:250px;}
.kaifalist span{ font-size:48px;}
.kaifalist p{ font-size:36px;}
.kaifabg{position: absolute; top: 100px; left: 0;z-index: 1;}
.kaifabg img{ max-width:100%;}

.kaifa{padding-bottom:100px;}
.kaifa a{ color:#ff9f00; font-size:27px; font-weight:500; width:250px; height:66px; text-align:center; display:block; background-color:#fff; padding:10px 30px; margin:0 auto; border-radius:50px; z-index: 10;font-family: 'OPPOSans';}

.service-grid{position: relative;z-index: 2;display: grid;grid-template-columns: 1fr 1fr;gap: 40px;padding:100px 50px 50px;margin: 0;list-style: none;}
.service-item{text-align: left;width: 290px;color: white; margin-top:20px; margin-bottom:10px}
.service-item.left{justify-self: start;}
.service-item.right{justify-self: end;}
.service-item span{display: block;font-size: 36px;margin-bottom: 12px;font-family: 'OPPOSans'; font-weight:500;}
.service-item p{font-size: 18px;line-height: 1.6;opacity: 0.9;margin: 0;font-family: 'OPPOSans'; font-weight:300;}

.tedian-grid{position: relative;z-index: 2;display: grid;grid-template-columns: 1fr 1fr;gap: 40px;padding:150px 200px 50px;margin: 0;list-style: none;}
.tedian-item{text-align: left;width: 250px;color: white; margin-top:50px;}
.tedian-item.left{justify-self: start;}
.tedian-item.right{justify-self: end;}
.tedian-item span{display: block;font-size: 22px;font-weight: bold;margin-bottom: 12px;}
.tedian-item p{font-size: 15px;line-height: 1.6;opacity: 0.9;margin: 0;}



.tedianbg{position: absolute; top:0px; left: 0;z-index: 1;}
.tedianbg img{ max-width:100%; height:auto;}
/* 分页样式*/
.pagination{display: flex;justify-content: center;align-items: center;gap: 0.5rem;margin-top: 2rem;}
.page-num{width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;border-radius: 50%;font-size: 0.9rem;color: #666;cursor: pointer;transition: all 0.2s;}
.page-num:hover{background-color: #f5f5f5;}
.page-num-current{background-color: #f9a825;color: #fff;}
.page-arrow{width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;border-radius: 50%;border: 1px solid #f9a825;color: #f9a825;cursor: pointer;transition: all 0.2s;}
.page-arrow:hover{background-color: #f9a825;color: #fff;}
.page-arrow a{color:#f9a825;}
.page-arrow:hover a{color:#fff;}

.products{background: #fff!important}
.product{ margin-top:62px!important;}


.chuangxin .area-card{position: relative;overflow: hidden;border-radius: 4px;margin-bottom: 24px;transition: transform 0.3s ease;height:540px;}
.chuangxin .area-card:hover{transform: translateY(-5px);}
.chuangxin .area-img{width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.chuangxin .area-card:hover .area-img{transform: scale(1.05);}
.chuangxin .area-name{position: absolute;bottom: 0;left: 0;width: 100%;padding: 15px 20px;margin: 0;font-size: 16px;color: #fff;font-weight: 500;background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));z-index: 2;}

.chuangxin2 .area-card{position: relative;overflow: hidden;border-radius: 4px;margin-bottom: 24px;transition: transform 0.3s ease;height:540px;}
.chuangxin2 .area-card:hover{transform: translateY(-5px);}
.chuangxin2 .area-img{width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.chuangxin2 .area-card:hover .area-img{transform: scale(1.05);}
.chuangxin2 .area-name{position: absolute;bottom: 0;left: 0;width: 100%;padding: 15px 20px;margin: 0;font-size: 16px;color: #fff;font-weight: 500;background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));z-index: 2;}
        

.huoban{background-image: url('img/hezuo.jpg');
  background-size: cover;      /* 图片覆盖整个区域 */
  background-position: center; /* 图片居中显示 */
  background-repeat: no-repeat; /* 不重复 */
  margin: 0;                   /* 移除默认边距 */
  height:60vh;    }


@media (max-width: 768px) {
  .subscribe-bar { display:none;}
  /*.footer-contact-wrap{flex-direction: column;}*/
  .footer-contact-qr {
    margin-right: 0px!important; 
}
  .wap{ display:block!important}
  .pc{ display:none!important}
  .banner .box h5{font-size: 1.25rem;}
.rn_title ul li{margin-right: 0;}
.rn_title ul li a{font-size: 1.125rem; padding:1rem 0.5rem;}
.tedian-grid{padding:15px 20px 5px;}
.tedian-item{width: 250px;margin-top:50px;}
.container-custom{ padding-left:15px; padding-right:15px;}
}