/* 把我们所有标签的内外边距清零 */
* {
  margin: 0;
  padding: 0;
}

/* em 和 i 斜体的文字不倾斜 */
em,
i {
  font-style: normal;
}

/* 去掉li 的小圆点 */
/* li {
  list-style: none;
} */

img {
  /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
  border: 0;
  /* 取消图片底侧有空白缝隙的问题 */
  vertical-align: middle;
}

button {
  /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
  cursor: pointer;
}

a {
  color: #666;
  text-decoration: none;
}

a:hover {
  color: #c81623;
}

button,
input {
  /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
  font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
    "\5B8B\4F53", sans-serif;
}

body {
  /* CSS3 抗锯齿形 让文字显示的更加清晰 */
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
    "\5B8B\4F53", sans-serif;
  color: #666;
}

.hide,
.none {
  display: none;
}

/* 清除浮动 */
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0;
}

/* 会报错
.clearfix {
    *zoom: 1
} */

#header {
  height: 11rem;
  display: flex;
  align-items: center;
  background-color: white;
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}
#logo {
  width: 27.3rem;
  height: 6.6rem;
  margin-left: 27.73rem;
}

#navbox {
  display: inline-block;
  margin-left: 30.773rem;
}

.nav {
  font-size: 2rem;
  display: inline-block;
  padding-bottom: 1rem;
  cursor: pointer;
  font-weight: 600;
  box-sizing: border-box;
}
.focus {
  color: #014691 !important;
  border-bottom: 2px solid #014691;
  box-sizing: border-box;
}
.m-left-8 {
  margin-left: 8rem;
}

.m-bottom-10 {
  margin-bottom: 10rem;
}
#banner {
  width: 100%;
  height: 68.5rem;
  text-align: center;
  position: relative;
}

.banner_bg {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.banner_text {
  color: white;
  font-size: 3.2rem;
}

#content {
  padding: 10rem 27.73rem;
}

#about {
  display: flex;
  color: black;
}
.about_focus {
  color: #014691;
  font-weight: bold;
}
.about_l_text {
  font-size: 4rem;
  width: 8rem;
  font-weight: bold;
}
.about_r {
  padding-left: 72rem;
  font-size: 2rem;
}

.conent_title {
  font-size: 4rem;
  color: black;
  font-weight: bold;
  margin-bottom: 3rem;
}

#business {
  display: flex;
}
#business .box {
  width: 34.3rem;
  height: 51rem;
  position: relative;
}

.business_l {
  margin-left: 1.6rem;
}

.business_1 {
  background: url(./imgs/business1.png) 100% 100%;
  background-size: 100%;
}
.business_2 {
  background: url(./imgs/business2.png) 100% 100%;
  background-size: 100%;
}
.business_3 {
  background: url(./imgs/business3.png) 100% 100%;
  background-size: 100%;
}
.business_4 {
  background: url(./imgs/business4.png) 100% 100%;
  background-size: 100%;
}
.page_business_box {
  width: calc(100% - 4rem);
}
.business_box {
  padding: 2rem;
  position: absolute;
  bottom: 0px;
  background: linear-gradient(0deg, #2c4c6f 3.14%, rgba(1, 70, 145, 0) 100%);
}

.business_box .title {
  color: white;
  font-size: 2.4rem;
  font-weight: 500;
}
.business_box .description {
  color: white;
  font-size: 1.6rem;
  margin: 0.8rem 0;
}
.business_box .li {
  color: white;
  font-size: 1.6rem;
}

#demo {
  display: flex;
  width: 271.4rem;
}
.demo_box {
  width: 66.65rem;
  display: inline-block;
}
.demo_box img {
  width: 100%;
}
.demo_title {
  font-size: 2.4rem;
  font-weight: bold;
  color: black;
}
.demo_description {
  font-size: 1.6rem;
  color: var(--b-85, rgba(0, 0, 0, 0.85));
}
.demo_l {
  margin-left: 1.6rem;
}

#demo-content,
#company_qualification,
#software_copyright {
  scroll-behavior: smooth;
}

#demo-content::-webkit-scrollbar {
  display: none;
}

#company_qualification::-webkit-scrollbar {
  display: none;
}

#software_copyright::-webkit-scrollbar {
  display: none;
}

#footer {
  height: 32.5rem;
  background: #2a2a2a;
  padding: 7.5rem 30rem 0;
  position: relative;
}

.footer_title {
  font-size: 2.8rem;
  font-style: normal;
  font-weight: 500;
  color: white;
  margin-bottom: 9rem;
}

.footer_content {
  color: white;
  display: flex;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
}

.qrcode {
  position: absolute;
  top: 12rem;
  right: 30rem;
}
/* business */

#business_banner {
  width: 100%;
  height: 51.5rem;
  position: relative;
}
.business_banner_bg {
  width: 100%;
  height: 51.5rem;

  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
}
.dimmer_layer {
  width: 100%;
  height: 51.5rem;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  background: var(--b-65, rgba(0, 0, 0, 0.65));
}
.business_banner_box {
  position: absolute;
  left: 30rem;
  top: 23rem;
}

#business_page {
  display: flex;
}
#business_page .box {
  width: 67.2rem;
  height: 44.2rem;
  position: relative;
}

.page_business_1 {
  background: url(./imgs/page_business_1.png) 100% 100%;
  background-size: 100%;
}
.page_business_2 {
  background: url(./imgs/page_business_2.png) 100% 100%;
  background-size: 100%;
}
.page_business_3 {
  background: url(./imgs/page_business_3.png) 100% 100%;
  background-size: 100%;
}
.page_business_4 {
  background: url(./imgs/page_business_4.png) 100% 100%;
  background-size: 100%;
}

/* demo */
#demo_banner {
  width: 100%;
  height: 51.5rem;
  background: url(./imgs/demo_banner.png);
  background-size: 100%;
  background-position: 50% 32%;
  position: relative;
}

.demo_dimmer_layer {
  width: 100%;
  height: 51.5rem;
  z-index: -1;
  background: var(--b-65, rgba(0, 0, 0, 0.65));
}

#demo_page {
  display: flex;
}

#demo_page .box {
  width: 67.7rem;
  height: 37.2rem;
  background-color: #f2f2f3;
}

/* contact */
#contact_banner {
  width: 100%;
  height: 51.5rem;
  background: url(./imgs/contact.png);
  background-size: 100%;
  background-position: 50% 32%;
  position: relative;
}
#contact_content {
  background: #f2f2f2;
  display: flex;
}

#contact_content .left {
  width: 36.5rem;
  padding: 6.482rem;
  display: inline-block;
}
#contact_content .right {
  flex: 1;
}

#contact_content .left .title {
  color: var(--b-85, rgba(0, 0, 0, 0.85));
  font-size: 3.4rem;
  font-weight: 600;
  margin-bottom: 6.8rem;
}
#contact_content .left .s_title {
  color: var(--b-85, rgba(0, 0, 0, 0.85));
  font-size: 2.4rem;
  font-weight: 500;
}

#contact_content .left .text {
  color: #014691;
  font-size: 1.8rem;
  margin-bottom: 3.2rem;
  display: flex;
  align-items: center;
}

#contact_content svg {
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.8rem;
}

/* about */
#about_banner {
  width: 100%;
  height: 51.5rem;
  background: url(./imgs/about_banner.png);
  background-size: 100%;
  background-position: 50% 32%;
  position: relative;
}

#about_content {
  display: flex;
  height: 60rem;
}

#about_content .title {
  color: var(--b-85, rgba(0, 0, 0, 0.85));
  font-size: 4rem;
  font-style: normal;
  font-weight: 600;
  margin-bottom: 6.4rem;
}
#about_content .right {
  width: 65.3rem;
  position: relative;
}
#about_content .about1 {
  background: url(./imgs/about1.png);
  background-size: 100%;
  background-position: 50% 32%;
  width: 28.3rem;
  height: 32.7rem;
  position: absolute;
  top: 19rem;
  left: 15rem;
  z-index: 2;
}

#about_content .about2 {
  background: url(./imgs/about2.png);
  background-size: 100%;
  background-position: 50% 32%;
  width: 39rem;
  height: 46rem;
  position: absolute;
  top: 0;
  left: 31rem;
}

#company_qualification_btn {
  color: #014691;
}
#company_qualification {
  display: flex;
  margin-bottom: 1.2rem;
}
#software_copyright {
  display: none;
  margin-bottom: 1.2rem;
}

#carousel_box {
  width: 32.7rem;
  height: 40rem;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

#software_copyright_icon {
  display: none;
}

.mask_f {
  position: relative;
}
.mask_f:hover .index_business_slide {
  height: auto;
}
#mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
}

.index_business_slide {
  overflow: hidden;
  height: 2rem;
}
.information {
  font-size: 2.8rem;
}
.copyright{
  padding: 4px 0px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    background-color: #2a2a2a;
    color: white;
}
.linkBox{
border: 1px solid gray;
display: inline-block;
padding: 4px 12px;
margin: 0px 12px 12px 0px;
}
@media screen and (max-width: 750px) {
  .information {
    font-size: 2.8rem;
  }
}