* {
  margin: 0px;
  padding: 0px;
}
html {
  font-family: Microsoft YaHei;
}
h1,
h2,
h3,
p,
li,
a,
nav,
div {
  display: inline-block;
}
li {
  list-style: none;
}
body {
  position: relative;
}
.top {
  width: 100%;
  max-width: 1200px;
  background-image: url("./img/background-img.png");
}
.header {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 760px;
}

.company-name {
  position: absolute;
  top: 20px;
  left: 0px;
  width: 115px;
  height: 28px;
}
.logo-2 {
  position: absolute;
  top: 20px;
  left: 0px;
  width: 32px;
  height: 32px;
}
.logo-1 {
  display: none;
  width: 24px;
  height: 24px;
}
.header nav {
  position: absolute;
  display: flex;
  flex-direction: row;
  cursor: pointer;
  justify-content: space-between;
  top: 26px;
  right: 0;
  width: 43%;
  height: 21px;
}
nav > a {
  width: 65px;
  height: 21px;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 19px;
}
nav > a:hover {
  color: #467deb;
}
.header-middle {
  position: absolute;
  top: 175px;
  width: 100%;
  font-size: 0px;
}
.header-left {
  width: 52.5%;
  height: 490px;
  vertical-align: bottom;
}
.header-left h1 {
  margin-top: 157px;
  display: block;
  font-size: 44px;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 52px;
}
.header-left p {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 21px;
}
.header-right {
  width: 47.5%;
  height: 490px;
  background-image: url(./img/img-head2.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.body-middle {
  width: 100%;
  height: 946px;
  max-width: 1200px;
}
.product-service {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 906px;
}
.product-service-header {
  width: 100%;
  height: 238px;
  text-align: center;
}
.headline {
  display: block;
  margin-top: 80px;
  font-size: 38px;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 45px;
}
.second-headline {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 21px;
}
.subject {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.subject > div {
  position: relative;
  width: 32%;
  height: 282px;
  box-shadow: 2px 2px 8px 4px rgba(219, 219, 219, 0.25);
  border-radius: 0px 0px 0px 0px;
}
.mobile {
  background-image: url(./img/serve1.png);
}
.web {
  background-image: url(./img/serve2.png);
}
.pc {
  background-image: url(./img/serve3.png);
}
.system {
  background-image: url(./img/serve4.png);
}
.date {
  background-image: url(./img/serve5.png);
}
.solve {
  background-image: url(./img/serve6.png);
}
.subject .web {
  margin-bottom: 24px;
}
.subject h1 {
  position: absolute;
  top: 120px;
  left: 10%;
  font-size: 24px;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 28px;
}
.subject img {
  position: absolute;
  top: 60px;
  left: 10%;
}
.subject p {
  position: absolute;
  top: 166px;
  left: 10%;
  font-size: 16px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 28px;
}
.foot {
  width: 100%;
  height: 400px;
  max-width: 1200px;
  background-color: #467deb;
}
.foot-item {
  position: relative;
  margin: 0 auto;
  width: 100%;
}
.foot-img {
  width: 36%;
  height: 360px;
  background-image: url(./img/logo7.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.foot-title {
  position: absolute;
  right: 37px;
  width: 41%;
  height: 400px;
}
.foot-title h1 {
  margin-top: 121px;
  font-size: 38px;
  font-weight: bold;
  color: #ffffff;
  line-height: 45px;
}
.foot-title p {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  line-height: 28px;
}
.case {
  width: 100%;
  max-width: 1200px;
}
.case-box {
  width: 100%;
  margin: 0 auto;
}
.case-item {
  width: 100%;
  text-align: center;
  font-size: 0;
}
.case-item h1 {
  display: block;
  margin-top: 80px;
  font-size: 38px;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 45px;
}
.case-item p {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 21px;
}
.case-link {
  margin-top: 60px;
  width: 100%;
  height: 612px;
  font-size: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.case-link :nth-child(2) {
  margin-bottom: 24px;
}
.case-link > a {
  width: 49%;
  height: 294px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.case-link :nth-child(1) {
  background-image: url(./img/case1.jpg);
}
.case-link :nth-child(2) {
  background-image: url(./img/case2.jpg);
}
.case-link :nth-child(3) {
  background-image: url(./img/case3.jpg);
}
.case-link :nth-child(4) {
  background-image: url(./img/case4.jpg);
}
.conpany-profile {
  display: block;
  text-align: center;
}
.conpany-profile h1 {
  display: block;
  margin-top: 80px;
  font-size: 38px;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 45px;
}
.conpany-profile-box {
  margin-top: 60px;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.conpany-profile-item {
  width: 49%;
  height: 588px;
}
.conpany-profile-item h1 {
  margin-top: 215px;
  display: block;
  font-size: 38px;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 45px;
}
.conpany-profile-item p {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 28px;
}
.commany-profile-img {
  width: 49%;
  height: 588px;
  background-image: url(./img/case5.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.conpany-information {
  margin-top: 80px;
  width: 100%;
  height: 376px;
  max-width: 1200px;
  background-color: #2a2c34;
}
.conpany-information-box {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.conpany-information-title {
  position: relative;
  width: 49%;
  height: 370px;
}
/* .conpany-information-title img {
  position: absolute;
  top: 81px;
  left: 0px;
  width: 29.25px;
  height: 31.5px;
} */
.conpany-information-title h1 {
  position: absolute;
  top: 82px;
  left: 0px;
  width: 115px;
  height: 28px;
}
.conpany-information-title p {
  position: absolute;
  top: 144px;
  left: 0px;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 28px;
}
.conpany-information-list {
  position: relative;
  width: 49%;
  height: 370px;
}
.conpany-information-list1 {
  position: absolute;
  top: 80px;
  left: 11%;
  width: 99px;
  height: 210px;
}
.conpany-information-list1 h1 {
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  line-height: 21px;
}
.conpany-information-list1 li {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 16px;
}
.conpany-information-list2 {
  position: absolute;
  top: 80px;
  right: 0px;
  width: 45%;
  height: 210px;
}
.conpany-information-list2 h1 {
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  line-height: 21px;
}
.conpany-information-list2 li {
  display: block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 16px;
}
.website-foot {
  width: 100%;
  max-width: 1200px;
  height: 80px;
  background-color: #202227;
}
.website-foot-item {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: 80px;
}
.website-foot-item h1 {
  margin-top: 31px;
  width: 332px;
  height: 18px;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 16px;
}
.return {
  position: absolute;
  bottom: 40px;
  right: 40px;
  width: 60px;
  height: 60px;
  background-image: url(./img/return-img.png);
  background-position: center;
}
.return:hover {
  background-image: url(./img/return-img2.png);
}