/*
  const 
*/
/*
  normalize
*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  background-color: #fff;
  scroll-behavior: smooth;
}

ul, li {
  list-style: none;
}

a,
a:active,
a:visited,
a:focus {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

input {
  border: none;
  appearance: none;
  background-color: transparent;
  outline: none;
  border-radius: 0;
  width: 100%;
}

input::placeholder {
  color: #bbb;
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
}

select {
  border: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 20px;
}

/*
  Common
*/
main {
  padding-top: 100px;
}

.constrain {
  width: 1400px;
  margin: 0 auto;
}

@media screen and (max-width: 1400px) {
  .constrain {
    width: 100%;
  }
}

.clearfix:after {
	clear: both;
	content: "";
	display: block;
	visibility: hidden;
	height: 0;
	overflow: hidden;
}

.flex {
  display: flex;
}

.f-center {
  align-items: center;
}

.f-end {
  align-items: flex-end;
}

.all-center {
  align-items: center;
  justify-content: center;
}

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

.img-contain {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.flex-1 {
  flex: 1;
}

/*
  Header
*/
header {
  position: fixed;
	top: 0;
  height: 100px;
  width: 100%;
  z-index: 999;
}

header .logo {
  height: 52px;
  padding: 0 2rem;
  object-fit: contain;
}

header .menu {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 1;
  background-color: #fff;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

header .menu > ul {
  display: flex;
  justify-content: center;
  flex: 1;
  text-align: center;
  min-width: 630px;
}

header .menu > ul li {
  display: inline-block;
  transition: color 200ms ease-in-out;
  padding: 0 1rem;
}

header .menu > ul li a {
  display: flex;
  align-items: center;
}

header .menu > ul li svg {
  margin-left: 5px;
  fill: #000;
  transform: rotate(180DEG);
  transition: all 200ms ease-in-out;
}

header .menu > ul li:hover, header .menu > ul li.active {
  color: #2374e7;
}

header .menu > ul li:hover svg, header .menu > ul li.active svg {
  fill: #2374e7;
  transform: rotate(0DEG);
}

header .right {
  position: relative;
}

header .right p {
  padding: 0 1rem;
  color: #999;
  font-size: 0.8rem;
}

header .right .search-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 100px;
  background-color: #ccc;
  cursor: pointer;
  z-index: 0;
}

header .right .search-icon img {
  width: 24px;
}

header .right form {
  position: absolute;
  height: 100%;
  width: 400px;
  background-color: #182335;
  right: 0;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  transform: translateX(400px);
  transition: transform 100ms ease-in-out;
}

header .right form.open {
  transform: translateX(0);
}

header .right form .close {
  margin: 0 1.2rem;
  width: 30px;
  cursor: pointer;
  transition: transform 200ms ease-in-out;
}

header .right form .close:hover {
  transform: rotate(90DEG);
}

header .right form input {
  height: 100%;
  flex: 1;
  color: #fff;
  font-size: 1rem;
}

header .right form button {
  background-color: transparent;
  width: 70px;
  height: 100px;
}

header .right form button img {
  width: 24px;
}

header .dropdown {
  position: absolute;
  display: flex;
  width: 100vw;
  height: 520px;
  bottom: -420px;
  padding-top: 100px;
  left: 0;
  background-color: #f5f5f5;
  z-index: 0;
  transform: translateY(-520px);
  transition: all 300ms ease-in-out;
}

header .dropdown.show {
  transform: translateY(0);
}

header .dropdown .content {
  flex: 1;
}

header .dropdown .content .multi {
  display: none;
  justify-content: center;
  padding-top: 2rem;
  flex-wrap: wrap;
}

header .dropdown .content .multi.single h4 {
  padding: 0;
  justify-content: center;
}

header .dropdown .content .multi > div h4 {
  position: relative;
  width: 210px;
  height: 44px;
  padding: 0 0 0 3rem;
  display: flex;
  align-items: center;
  font-weight: normal;
  color: #000;
  cursor: pointer;
}

header .dropdown .content .multi > div h4:hover {
  color: #fff;
  background-color: #2374e7;
}

header .dropdown .content .multi > div h4:hover svg {
  stroke: #fff;
  fill: #fff;
}

header .dropdown .content .multi > div h4 svg {
  position: absolute;
  width: 20px;
  height: 20px;
  object-fit: contain;
  left: 20px;
  fill: #000;
}

header .dropdown .content .multi > div h4 svg.saas {
  width: auto;
  height: 15px;
  left: 12px;
}

header .dropdown .content .multi > div h4 img:last-child {
  position: absolute;
  width: 20px;
  height: 20px;
  object-fit: contain;
  right: 20px;
}

header .dropdown .content .multi > div ul {
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  padding-left: 3rem;
  text-align: left;
  font-size: 0.9rem;
}

header .dropdown .content .multi > div ul li {
  color: #666;
  padding: 0.5rem 0;
}

header .dropdown .content .multi > div ul li:hover {
  color: #2374e7;
}

header .dropdown .content .multi.show {
  display: flex;
}

header .dropdown .display {
  width: 35%;
  min-width: 460px;
  height: 100%;
  background-color: #fff;
  padding: 65px;
}

header .dropdown .display img {
  width: 340px;
  height: 200px;
  object-fit: cover;
}

header .dropdown .display p {
  font-size: 0.9rem;
  padding: 0.5rem 0;
}

header .dropdown .display a {
  display: inline-block;
  margin-top: 1rem;
  background-color: #2374e7;
  padding: 0.6rem 2rem;
  color: #fff;
  font-size: 0.8rem;
}

header .dropdown .display a span {
  display: inline-block;
  height: 18px;
}

header .dropdown .display a > img {
  display: inline-block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  margin-left: 5px;
}

@media screen and (max-width: 1240px) {
  header .logo {
    height: 30px;
    padding: 0 0.2rem;
  }
  header .menu {
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 1100px) {
  header .menu ul {
    display: none;
  }
  header .right {
    flex: 1;
    justify-content: flex-end;
  }
}

/*
  Aside
*/
aside {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 1000;
}

aside > a {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #333333;
  margin: 2px 0;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 100ms ease-in-out;
  cursor: pointer;
}

aside > a:hover {
  width: 120px;
  background-color: #2374e7;
}

aside > a:hover .desc {
  display: initial;
}

aside > a .desc {
  display: none;
  padding-left: 5px;
  color: #fff;
  font-size: 0.9rem;
  word-break: keep-all;
}

aside > a .icon {
  width: 22px;
  height: 22px;
}

aside > a .i-1 {
  background-image: url("/assets/icons/aside-service.png");
}

aside > a .i-2 {
  background-image: url("/assets/icons/aside-phone.png");
}

aside > a .i-3 {
  width: 18px;
  height: 18px;
  background-image: url("/assets/icons/aside-top.png");
}

/*
  Footer
*/
footer {
  padding: 60px 0;
  background-color: #182335;
  color: #fff;
}

footer .constrain {
  height: 300px;
}

footer .constrain > div {
  padding: 10px 0;
}

footer .constrain > div > img {
	height: 52px;
}

footer .left {
  flex: 3;
}
footer .left p {
  font-size: 0.8rem;
  color: #78808d;
  padding: 5px 0;
}

footer .left p img {
  position: relative;
  top: 3px;
  margin-right: 5px;
}

footer .left .contact {
  padding: 30px 0;
}

footer .left .qr p {
  font-size: 0.9rem;
  color: #78808d;
	text-align: center;
}

footer .left .qq {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: 15px 0 0 50px;
}

footer .left .qq img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

footer .mid {
  flex: 6;
  display: flex;
  justify-content: space-around;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: none;
  border-bottom: none;
}

footer .mid h3 {
  padding-bottom: 10px;
}

footer .mid a {
  display: block;
  color: #78808d;
  margin: 20px 0;
	transition: all .3s;
}

footer .mid a:hover{
	color: #fff;
	text-shadow: 0 0 5px #2374E7;
}

footer .right {
  flex: 3;
  text-align: right;
}

footer .right .phone {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

footer .right .phone img {
  display: inline;
  margin-right: 10px;
}

footer .right .phone h3 {
  font-size: 1.1rem;
}

footer .right .phone h3 b {
  font-size: 1.4rem;
}

footer .right .time {
  padding: 10px 0 50px;
}

footer .right p {
  color: #78808d;
  padding: 5px 0;
  position:relative;
}
footer .right p span{
	color: red;
	position:absolute;
	top:10px;
	left:55px;
	z-index:3;
	display:inline-block;
	line-height:30px;
}
footer .right p img {
  position: relative;
  top: 3px;
  margin-right: 5px;
}
footer .right p input{
	border:1px #CCC solid;
	width: 300px;
    height: 30px;
	font-size: 16px;
    color: #fff;
	padding: 0 15px;
	background-color: #182335;
}
footer .right p textarea{
	border:1px #CCC solid;
	width: 300px;
    height: 76px;
	padding: 8px 15px;
	background-color: #182335;
	font-size: 16px;
	color:#fff;
}
footer .right p .submit{
	border: 1px #00F solid;
    width: 90px;
    height: 30px;
    background: #00F;
    color: #fff;
    font-size: 14px;
    border-radius: 3px;
}

footer .link{color: #78808d; margin:0 5%; line-height:30px;}
footer .link a{color: #78808d;}
footer .link a:hover{color: #fff;}
/*
  index.html
*/
.home {
  position: relative;
}

.home .title {
  padding: 20px 0;
}

.home .title h2 {
  padding: 0;
}

.home .title span {
  padding: 0 5px;
	transition: all .3s;
}

.home .title span:hover{
	color: #2374E7;
}

.home h2 {
  padding: 20px 0;
}

.home .sec-1 {
  width: 100%;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aboutus .sec-1 .swiper-slide img{
	display: block;
	width: 100%;
}

.home .sec-2 {
  background-color: #f5f5f5;
  padding: 20px 0;
}

.home .sec-2 .swiper-container {
  position: relative;
  width: 100%;
  height: 300px;
  color: #fff;
}

.home .sec-2 .swiper-container .cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.home .sec-2 .swiper-container .content {
  position: relative;
  text-align: left;
  width: 100%;
  padding: 0 40px;
  z-index: 1;
  transform: translateY(210px);
  transition: transform 200ms ease-in-out;
}

.home .sec-2 .swiper-container .content h3 {
  margin-bottom: 30px;
}

.home .sec-2 .swiper-container .content p {
  margin: 10px 0;
  width: 100%;
  height: 120px;
  font-size: 0.9rem;
}

.home .sec-2 .swiper-container .content a {
  display: flex;
  margin: 10px 0;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 36px;
  border: 1px solid #fff;
  border-radius: 30px;
}

.home .sec-2 .swiper-container .content a img {
  width: 20px;
}

.home .sec-2 .swiper-container .content a:hover{
	background-color: #2374E7;
	border: 1px solid #2374E7;
}

.home .sec-2 .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 450px;
  background-color: #eee;
  transition: all 200ms ease-in-out;
}

.home .sec-2 .swiper-slide:hover {
  width: 550px;
}

.home .sec-2 .swiper-slide:hover .cover {
  opacity: 1;
}

.home .sec-2 .swiper-slide:hover .content {
  transform: translateY(0);
}

.home .sec-2 .swiper-button-next, .home .sec-2 .swiper-button-prev {
  color: #000;
  transform: translateY(-50%);
	background-color: #ddd;
	padding: 28px 0;
	box-shadow: 0 0 5px #333;
	border-radius: 5px;
}
.home .sec-2 .swiper-button-prev:after, .home .sec-2 .swiper-button-next:after{
	font-size: 30px;
	color: #2374E7;
	transition: all .3s;
}
.home .sec-2 .swiper-button-next:hover, .home .sec-2 .swiper-button-prev:hover{
	background-color: #2374E7;
	color: #fff;
}
.home .sec-2 .swiper-button-next:hover::after, .home .sec-2 .swiper-button-prev:hover::after{
	color: #fff;
}
.home .sec-3 {
  background-color: #fff;
  padding: 50px 0;
}

.home .sec-3 .products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.home .sec-3 .products > a {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  transition: all 300ms ease-in-out;
}

.home .sec-3 .products > a .pic {
  width: 100%;
  padding-bottom: 60%;
	position: relative;
}

.home .sec-3 .products > a .pic::after{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	content: '';
	display: block;
	width: 0%;
	height: 0%;
	background-image: url(../img/bg6.png);
	background-color: rgba(0,0,0,.4);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15%;
	transition: all .5s;
}

.home .sec-3 .products > a .pic:hover::after{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.home .sec-3 .products > a p {
  padding: 20px 0;
  font-size: 1.1rem;
	transition: all .3s;
}

.home .sec-3 .products > a p:hover{
	color: #2374E7;
}

.home .sec-4 {
  position: relative;
  z-index: 2;
  padding: 50px 0;
	background-color: #f5f5f5;
}

.home .sec-4 .headline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.home .sec-4 .headline > a {
  background-color: #f5f5f5;
	transition: all .3s;
}

.home .sec-4 .headline > a:hover{
	box-shadow: 0 0 8px #999;
}

.home .sec-4 .headline > a .pic {
  width: 100%;
  padding-bottom: 60%;
	transition: all .3s;
}

.home .sec-4 .headline > a .content {
  padding: 20px;
}

.home .sec-4 .headline > a .content h5 {
  font-weight: normal;
  padding: 20px 0;
  color: #969699;
}

.home .sec-4 ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  gap: 20px;
  padding: 50px 0;
}

.home .sec-4 ul li {
  display: flex;
	position: relative;
}

.home .sec-4 ul li::after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 0%;
	height: 100%;
	background-color: #fff;
	transition: all .5s;
}

.home .sec-4 ul li:hover::after{
	width: 100%;
}

.home .sec-4 ul li .date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 95px;
  background-color: #e6e6e6;
  color: #fff;
	transition: all .4s;
	position: relative;
	z-index: 3;
}

.home .sec-4 ul li:hover .date{
	background-color: #2374E7;
}

.home .sec-4 ul li .date h4 {
  font-weight: normal;
  font-size: 1.6rem;
  padding-bottom: 5px;
}

.home .sec-4 ul li .date h5 {
  font-weight: normal;
}

.home .sec-4 ul li a {
  flex: 1;
  padding: 5px 10px;
	position: relative;
	z-index: 3;
}

.home .sec-4 ul li a h3 {
  font-weight: normal;
  padding-bottom: 5px;
}

.home .sec-4 ul li:hover h3{
	color: #2374E7;
}

.home .sec-4 ul li a p {
  font-size: 0.9rem;
  color: #969699;
}

.home .sec-5 {
  position: relative;
  padding: 30px 0;
}

.home .sec-5 .constrain {
  position: relative;
  z-index: 2;
}

.home .sec-5 .board {
  display: inline-block;
  color: #fff;
  padding: 70px 50px;
  background-color: #2374e7;
}

.home .sec-5 .board h1 {
  font-size: 2rem;
  padding-bottom: 20px;
}

.home .sec-5 .board h2 {
  font-weight: normal;
  padding: 0;
}

.home .sec-5 .board span {
  font-size: 0.8rem;
}

.home .sec-5 .board .box:nth-child(1) {
  padding-right: 30px;
}

.home .sec-5 .board .box:nth-child(2) {
  position: relative;
  padding: 0 30px;
}

.home .sec-5 .board .box:nth-child(2):before, .home .sec-5 .board .box:nth-child(2):after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 50%;
  background-color: #fff;
}

.home .sec-5 .board .box:nth-child(2)::before {
  left: 0;
}

.home .sec-5 .board .box:nth-child(2)::after {
  right: 0;
}

.home .sec-5 .board .box:nth-child(3) {
  padding-left: 30px;
}

.home .sec-5 ul {
  padding: 50px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.home .sec-5 ul li {
 
  background-color: #fff;
}

.home .sec-5 ul li div {
  height: 100px;
  min-height: 40px;
}

.home canvas {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
}

@media screen and (max-width: 1400px) {
  .home h3 {
    width: 100%;
  }
}

@media screen and (max-width: 800px) {
  .home .sec-1 img, .aboutus .sec-1 img {
    width: 90%;
  }
}

/*
  aboutus.html
*/
.aboutus .sec-1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.aboutus .sec-1 p {
  color: #fff;
  font-size: 1.3rem;
  padding-top: 30px;
}

.aboutus .sec-2 {
  display: flex;
}

.aboutus .sec-2 > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.aboutus .sec-2 > div h2 {
  font-size: 3rem;
  font-weight: normal;
  color: #2374e7;
}

.aboutus .sec-2 > div p {
  color: #666;
}

.aboutus .sec-3 {
  padding: 130px 0;
  box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.1);
}

.aboutus .sec-3 > div {
  display: flex;
}

.aboutus .sec-3 > div img {
  width: 50%;
  object-fit: contain;
}

.aboutus .sec-3 > div .text {
  padding-left: 30px;
}

.aboutus .sec-3 > div .text h1 {
  font-size: 2rem;
  font-weight: normal;
  padding-bottom: 20px;
}

.aboutus .sec-3 > div .text p {
  padding: 15px 0;
}

.aboutus .sec-4 {
  background-color: #f5f5f5;
  padding: 80px 0;
}

.aboutus .sec-4 .swiper-container {
  padding: 50px 0;
}

.aboutus .sec-4 .swiper-slide img {
  object-fit: contain;
  width: 100%;
}

.aboutus .sec-4 .swiper-1 .swiper-slide {
  background-color: #fff;
  padding: 30px;
}

.aboutus .sec-4 .swiper-button-prev, .aboutus .sec-4 .swiper-button-next {
  transform: translateY(-50%);
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  width: 50px;
  height: 100px;
}

.aboutus .sec-5 {
  background-color: #fff;
  padding: 100px 0;
}

.aboutus .sec-5 .title {
  text-align: center;
  font-size: 2rem;
  padding-bottom: 40px;
}

.aboutus .sec-5 ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.aboutus .sec-5 ul li .img-cover {
  padding-bottom: 60%;
  position: relative;
}

.aboutus .sec-5 ul li .img-cover img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.aboutus .sec-5 ul li .slogan {
  padding: 30px 0 0 0;
}

.aboutus .sec-5 ul li .slogan b {
  font-weight: normal;
  font-size: 1.5rem;
  padding-right: 20px;
}

.aboutus .sec-5 ul li .slogan span {
  color: #999;
}

.aboutus .sec-5 ul li p {
  padding: 20px 0 40px 0;
  color: #666;
}

/*
  service.html
*/
.service .sec-1 {
  width: 100%;
  height: 340px;
  color: #fff;
}

.service .sec-1 h1 {
  padding-top: 100px;
}

.service .sec-1 p {
  padding: 10px 0;
  color: #eee;
}

.service .sec-2 {
  background-color: #f5f5f5;
  padding: 100px 0;
}

.service .sec-2 .menu {
  width: 280px;
  align-self: flex-start;
  background-color: #fff;
  padding: 60px 50px;
}

.service .sec-2 .menu h3 {
  font-weight: normal;
  font-size: 1.1rem;
  padding: 10px 0;
  cursor: pointer;
}

.service .sec-2 .menu h3.selected + ul {
  height: auto;
}

.service .sec-2 .menu h3.selected svg {
  transform: rotate(0DEG);
}

.service .sec-2 .menu h3 svg {
  width: 10px;
  fill: #666;
  transform: rotate(180DEG);
}

.service .sec-2 .menu ul {
  height: 0;
  overflow: hidden;
}

.service .sec-2 .menu ul li {
  padding: 10px 20px;
  margin: 10px 0;
  font-size: 0.9rem;
  color: #666;
  cursor: pointer;
}

.service .sec-2 .menu ul li:hover, .service .sec-2 .menu ul li.active {
  color: #2374e7;
}

.service .sec-2 .main {
  flex: 1;
}

.service .sec-2 .main ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0 20px;
}

.service .sec-2 .main ul a .img-cover {
  width: 100%;
  padding-bottom: 60%;
}

.service .sec-2 .main ul a p {
  padding: 20px 0;
}

.service .sec-2 .main .pages {
  padding-top: 50px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.service .sec-2 .main .pages a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
  background-color: #fff;
  color: #999;
  border: 1px solid #999;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  font-size: 0.9rem;
}

.service .sec-2 .main .pages a.active {
  color: #fff;
  background-color: #2374e7;
}

.service .sec-2 .main .pages a.prev, .service .sec-2 .main .pages a.next {
  width: 80px;
  border-radius: 20px;
}

/*
  dev-website.html
*/
.dev-website h1 {
  font-size: 2rem;
  text-align: center;
  padding-bottom: 50px;
  font-weight: normal;
}

.dev-website section {
  overflow: hidden;
}

.dev-website .sec-1 {
  position: relative;
  height: 500px;
}

.dev-website .sec-1 > div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
}

.dev-website .sec-1 > div h1 {
  font-weight: normal;
  text-align: left;
  font-size: 2rem;
}

.dev-website .sec-1 > div p {
  font-size: 0.9rem;
  font-weight: 300;
  padding-top: 10px;
}

.dev-website .sec-1 > div img {
  width: 150px;
  object-fit: contain;
}

.dev-website .sec-2 {
  padding: 50px 0;
}

.dev-website .sec-2 ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.dev-website .sec-2 ul li {
  position: relative;
  border: 2px solid #eee;
  margin: -2px -2px 0 0;
}

.dev-website .sec-2 ul li .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #5a23e7, #2374e7);
  transition: opacity 200ms ease-in-out;
  opacity: 0;
}

.dev-website .sec-2 ul li:hover .bg {
  opacity: 1;
  border: 2px solid transparent;
  border-image: linear-gradient(#a297ff, #2042ca) 30 30;
}

.dev-website .sec-2 ul li:hover .bg + div {
  position: relative;
}

.dev-website .sec-2 ul li:hover .img {
  position: relative;
  border-bottom: none;
}

.dev-website .sec-2 ul li:hover .img:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  width: 80%;
  background-color: rgba(238, 238, 238, 0.2);
}

.dev-website .sec-2 ul li:hover .img svg {
  fill: #fff;
}

.dev-website .sec-2 ul li:hover .tags h3 {
  color: #fff;
}

.dev-website .sec-2 ul li:hover .tags p {
  color: #fff;
}

.dev-website .sec-2 ul li .img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  border-bottom: 2px solid #eee;
}

.dev-website .sec-2 ul li .img svg {
  fill: #2374e7;
}

.dev-website .sec-2 ul li .tags {
  text-align: center;
  padding: 20px 0 30px 0;
}

.dev-website .sec-2 ul li .tags p {
  color: #666;
  margin: 10px 0;
  font-size: 0.9rem;
}

.dev-website .sec-3 {
  padding: 50px 0;
}

.dev-website .sec-3 ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
}

.dev-website .sec-3 ul li {
  display: flex;
  height: 180px;
  padding: 20px;
  transition: all 200ms ease-in-out;
}

.dev-website .sec-3 ul li:hover {
  box-shadow: 2px 0 30px rgba(0, 0, 0, 0.1);
}

.dev-website .sec-3 ul li .icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff5f0;
  border-radius: 50%;
}

.dev-website .sec-3 ul li .icon img {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

.dev-website .sec-3 ul li .text {
  padding: 0 20px;
  flex: 1;
}

.dev-website .sec-3 ul li .text h3 {
  font-weight: normal;
  color: #f48624;
  padding-bottom: 10px;
}

.dev-website .sec-3 ul li .text p {
  color: #666666;
  font-size: 0.9rem;
}

.dev-website .sec-4 {
  padding: 100px 0;
  background-image: url("/assets/images/bg7.jpg");
  color: #fff;
}

.dev-website .sec-4 ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.dev-website .sec-4 ul li {
  position: relative;
  height: 500px;
}

.dev-website .sec-4 ul li::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 10px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  background-color: rgba(72, 61, 231, 0.22);
}

.dev-website .sec-4 ul li div.box {
  position: relative;
  width: 170px;
  height: 170px;
  border: 1px solid #eee;
  border-radius: 20px;
  background-image: linear-gradient(135DEG, rgba(90, 35, 231, 0.4), rgba(35, 116, 231, 0.4));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
}

.dev-website .sec-4 ul li div.box.up {
  top: 24px;
}

.dev-website .sec-4 ul li div.box.down {
  top: 320px;
}

.dev-website .sec-4 ul li div.box svg {
  fill: #fff;
}

.dev-website .sec-4 ul li div.box > div {
  margin-top: 20px;
  height: 40px;
  font-size: 1rem;
}

.dev-website .sec-4 ul li .point {
  position: absolute;
  top: 51%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
}

.dev-website .sec-4 ul li .point::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 50px;
  left: 6px;
  background-color: rgba(255, 255, 255, 0.4);
}

.dev-website .sec-4 ul li .point.up::before {
  top: -50px;
}

.dev-website .sec-4 ul li .point.down::before {
  top: 26px;
}

.dev-website .sec-5 {
  padding: 100px 0;
}

.dev-website .sec-5 ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.dev-website .sec-5 ul a > div {
  width: 100%;
  padding-bottom: 65%;
}

.dev-website .sec-5 ul a p {
  padding: 20px 0;
  font-size: 1.1rem;
}

/*
  dev-weixin.html
*/
.dev-weixin h1 {
  font-size: 2rem;
  text-align: center;
  padding-bottom: 50px;
  font-weight: normal;
}

.dev-weixin .sec-1 {
  height: 500px;
  color: #fff;
}
.dev-weixin .sec-1 a{
  display: inline-block;
  height: 100%;
  width: 100%;
}
.dev-weixin .sec-1 > div {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dev-weixin .sec-1 > div h2 {
  font-size: 2.4rem;
}

.dev-weixin .sec-1 > div p {
  padding-top: 20px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
}

.dev-weixin .sec-2 {
  padding: 50px 0;
}

.dev-weixin .sec-2 ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.dev-weixin .sec-2 ul li {
  padding: 30px 0;
  text-align: center;
  transition: all 200ms ease-in-out;
}

.dev-weixin .sec-2 ul li:hover {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
}

.dev-weixin .sec-2 ul li p {
  font-weight: bold;
}

.dev-weixin .sec-3 {
  padding: 50px 0 100px 0;
}

.dev-weixin .sec-3 ul {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;

}
.dev-weixin .sec-3 ul a{
  transition: all 300ms ease-in-out;
  width: 100%;
  display: inline-block;
}
.dev-weixin .sec-3 ul a > div {
  position: relative;
  width: 100%;
  padding-bottom: 65%;
}
.dev-weixin .sec-3 ul a > div::after{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  content: '';
  display: block;
  width: 0%;
  height: 0%;
  background-image: url(../public/images/BG_5.png);
  background-color: rgba(0,0,0,.4);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15%;
  transition: all .5s;
}
.dev-weixin .sec-3 ul a > div:hover::after{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.dev-weixin .sec-3 ul a p {
  padding: 20px 0;
  font-size: 1.1rem;
}
.dev-weixin .sec-3 ul a p:hover{
  color: #2374E7;
}
/*
  news.html
*/
.news-page .sec-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 340px;
  color: #fff;
}

.news-page .sec-1 h1 {
  font-size: 1.8rem;
}

.news-page .sec-1 p {
  padding: 10px 0;
  color: #eee;
}

.news-page .sec-2 {
  display: flex;
  padding: 50px 0;
}

.news-page .sec-2 > a {
  width: 150px;
  margin-right: 20px;
  background-color: #eee;
  border: 1px solid #eee;
  padding: 10px 0;
  text-align: center;
  border-radius: 30px;
  cursor: pointer;
}

.news-page .sec-2 > a.active {
  background-color: #2374e7;
  color: #fff;
}

.news-page .sec-2 > a:hover {
  border: 1px solid #2374e7;
}

.news-page .sec-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-bottom: 50px;
}

.news-page .sec-3 > a {
  background-color: #fafafa;
  border: 1px solid #eee;
}

.news-page .sec-3 > a .img {
  padding-bottom: 65%;
}

.news-page .sec-3 > a .text {
  padding: 20px;
}

.news-page .sec-3 > a .text p {
  font-size: 1.1rem;
  line-height: 2rem;
}

.news-page .sec-3 > a .text h5 {
  padding-top: 10px;
  font-weight: normal;
  font-size: 0.8rem;
  color: #aaa;
}

.news-page .sec-4 {
  padding-bottom: 100px;
}

.news-page .sec-4 ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(530px, 1fr));
  gap: 20px;
}

.news-page .sec-4 ul a {
  display: flex;
}

.news-page .sec-4 ul a:hover div:first-child {
  background-color: #2374e7;
  color: #fff;
}

.news-page .sec-4 ul a:hover div:last-child h3 {
  color: #2374e7;
}

.news-page .sec-4 ul a div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 110px;
  background-color: #eee;
  color: #aaa;
  font-family: Arial;
}

.news-page .sec-4 ul a div:first-child h2 {
  font-size: 2.7rem;
  font-weight: normal;
}

.news-page .sec-4 ul a div:last-child {
  flex: 1;
  padding: 0 20px;
  min-height: 150px;
}

.news-page .sec-4 ul a div:last-child h3 {
  font-weight: normal;
  padding-bottom: 20px;
}

.news-page .sec-4 ul a div:last-child p {
  font-size: 0.9rem;
  color: #666;
}

.news-page .sec-4 .pages {
  padding-top: 50px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.news-page .sec-4 .pages a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
  background-color: #fff;
  color: #999;
  border: 1px solid #999;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  font-size: 0.9rem;
}

.news-page .sec-4 .pages a.active {
  color: #fff;
  background-color: #2374e7;
}

.news-page .sec-4 .pages a.prev, .news-page .sec-4 .pages a.next {
  width: 80px;
  border-radius: 20px;
}

/*
  dev-app.html
*/
.dev-app section {
  padding: 50px 0;
}

.dev-app section h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: normal;
}

.dev-app section h2 + p {
  text-align: center;
  font-size: 1rem;
  color: #999;
  padding: 10px 0;
}

.dev-app .sec-1 {
  height: 500px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dev-app .sec-1 h1 {
  font-weight: normal;
  font-size: 2.4rem;
}

.dev-app .sec-1 p {
  padding-top: 20px;
  font-size: 1rem;
  color: #aaa;
}

.dev-app .sec-2 ul {
  display: flex;
  justify-content: space-around;
  padding-top: 50px;
}

.dev-app .sec-2 ul li, .dev-app .sec-2 ul a {
  flex: 1;
  height: 180px;
  margin: 0 20px;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms ease-in-out;
}

.dev-app .sec-2 ul li img, .dev-app .sec-2 ul a img {
  height: 50px;
  width: 50px;
  object-fit: contain;
  margin-bottom: 30px;
}

.dev-app .sec-2 ul li:hover, .dev-app .sec-2 ul a:hover {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}

.dev-app .sec-3 ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding-top: 50px;
}

.dev-app .sec-3 ul li, .dev-app .sec-3 ul a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  background-color: #f5f5f5;
  transition: all 200ms ease-in-out;
}

.dev-app .sec-3 ul li:hover, .dev-app .sec-3 ul a:hover {
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}

.dev-app .sec-3 ul li:hover svg, .dev-app .sec-3 ul a:hover svg {
  fill: #2374e7;
}

.dev-app .sec-3 ul li > div, .dev-app .sec-3 ul a > div {
  text-align: center;
  height: 150px;
}

.dev-app .sec-3 ul li svg, .dev-app .sec-3 ul a svg {
  transition: all 200ms ease-in-out;
}

.dev-app .sec-3 ul li h5, .dev-app .sec-3 ul a h5 {
  font-size: 1.2rem;
  padding: 20px 0 10px 0;
  color: #333;
}

.dev-app .sec-3 ul li p, .dev-app .sec-3 ul a p {
  padding: 0 20px;
  font-size: 0.9rem;
  color: #666;
}

.dev-app .sec-4 ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  padding-top: 50px;
}

.dev-app .sec-4 ul li div, .dev-app .sec-4 ul a div {
  padding-bottom: 65%;
}

.dev-app .sec-4 ul li p, .dev-app .sec-4 ul a p {
  padding: 20px 0;
}

.dev-app .sec-5 {
  position: relative;
  background-color: #f5f5f5;
  height: 600px;
}

.dev-app .sec-5 ul {
  position: relative;
  display: flex;
  justify-content: center;
  z-index: 2;
}

.dev-app .sec-5 ul.bot {
  position: relative;
  top: -140px;
}

.dev-app .sec-5 ul.bot li:first-child .box span {
  left: 126px;
  bottom: -30px;
}

.dev-app .sec-5 ul li {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dev-app .sec-5 ul li:first-child .box span {
  left: 130px;
  bottom: -38px;
}

.dev-app .sec-5 ul li .content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #333;
}

.dev-app .sec-5 ul li .content img {
  margin-bottom: 15px;
}

.dev-app .sec-5 ul li .box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%) rotate(45DEG);
  background-color: #fff;
  z-index: 0;
  border-radius: 30px;
  overflow: hidden;
}

.dev-app .sec-5 ul li .box span {
  position: absolute;
  left: 126px;
  bottom: -30px;
  font-size: 5.5rem;
  font-family: roboto;
  font-weight: bold;
  color: #f5f5f5;
  z-index: 12;
  transform: rotate(-45DEG);
}

.dev-app .sec-5 .bg {
  position: absolute;
  background: url("/assets/images/waves.png") no-repeat;
  background-position: center 10%;
  background-size: cover;
  bottom: 0;
  height: 200px;
  width: 100%;
  z-index: 0;
}

.pages{
	text-align: center;
}
.pages a{
	display: inline-block;
	vertical-align: top;
	margin: 0 3px 15px;
	width: 40px;
	line-height: 38px;
	text-align: center;
	border: 1px solid #ddd;
	box-sizing: border-box;
	color: #666;
	transition: all .3s;
}
.pages a:hover{
	border: 1px solid #2042CA;
	color: #2042CA;
}
.pages a.next, .pages a.prev{
	width: 80px;
}
.pages a.active{
	border: 1px solid #2042CA;
	background-color: #2042CA;
	color: #fff;
}
.pages a.active:hover{
	color: #fff;
}
.pages a.next.active, .pages a.prev.active{
	border: 1px solid #ddd;
	background-color: #fff;
	color: #666;
}

.sec-6{
	padding-bottom: 80px;
}
.serverBox{
	border: 1px solid #e6e6e6;
	box-sizing: border-box;
}
.serverBox img{
	float: left;
}
.serverBox .sb_box{
	padding-left: 340px;
}
.serverBox .sb_box ul li{
	float: left;
	width: 50%;
	height: 260px;
	box-sizing: border-box;
	padding: 38px;
}
.serverBox .sb_box ul li .sbb_name{
	color: #1a1a1a;
	font-size: 22px;
	line-height: 1;
	margin-bottom: 14px;
}
.serverBox .sb_box ul li .sbb_text{
	line-height: 24px;
	color: #999999;
	font-size: 14px;
	margin-bottom: 15px;
}
.serverBox .sb_box ul li .sbb_label{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.serverBox .sb_box ul li .sbb_label a{
	display: inline-block;
	vertical-align: top;
	width: 31%;
	line-height: 38px;
	text-align: center;
	margin-bottom: 10px;
	background-color: #f5f5f5;
	color: #666666;
	font-size: 14px;
	transition: all .3s;
}
.serverBox .sb_box ul li .sbb_label a:hover{
	background-color: #2374e7;
	color: #fff;
}
.serverBox .sb_box ul li .sbb_label.sbb_label_big label{
	width: 49%;
}


.paging{padding:50px 10px 30px;margin:3px;text-align:center;font-size:14px;}
.paging a{display:inline-block!important; *display:inline; zoom:1; margin:0; padding:3px 8px; border:1px solid #d9d9d9; background:#fff; line-height: 20px; vertical-align: top;}
.paging a:hover{border:#41414e 1px solid;color:#fff;background-color:#41414e}
.paging a:hover span{color:#fff;}
.paging span.current{padding:3px 8px;font-weight:bold;color:#fff;margin-right:3px;;background-color:#41414e;font-size:16px;display:inline-block!important;}


.sec-7 {position: relative; z-index: 2; padding: 50px 0; background-color: #f5f5f5;}
.new_form{width: 100%;}
.new_form p.nf_input{float: left; width: 49%; margin-right: 2%; margin-bottom: 20px; position: relative;}
.new_form p.nf_input:nth-of-type(2){margin-right: 0;}
.new_form p.nf_input input{width: 100%; background-color: #fff; font-size: 16px; height: 50px; border-radius: 5px; padding: 0 25px; box-sizing: border-box; }
.new_form p.nf_input span{position: absolute; top: 0; left: 10px; color: red; display: inline-block; line-height: 55px;}
.new_form p.nf_text{float: left; width: 100%; margin-bottom: 20px; position: relative;}
.new_form p.nf_text textarea{width: 100%; background-color: #fff; font-size: 16px; height: 100px; border-radius: 5px; border: 0; padding: 10px 25px; box-sizing: border-box; }
.new_form p.nf_btn{text-align: center;}
.new_form p.nf_btn input{
	border: 1px #00F solid;
	width: 30%;
	height: 50px;
	background: #00F;
	color: #fff;
	font-size: 18px;
	border-radius: 5px;
}


/* 新增模块样式 */
.box1{
  padding-top: 80px;
  box-sizing: border-box;
  padding-bottom: 170px;
}
.box1 .title {
  margin-bottom: 75px;
}
.box1 .title h1:nth-child(1){
  font-size: 40px;
  font-weight: bold;
  color: #dae8fb;
  padding: 0;
}
.box1 .title h1:nth-child(2){
  position: relative;
  font-size: 40px;
  font-weight: bold;
  color: #282f38;
  z-index: 99;
  margin-top: -35px;
  padding: 0;
}
.box1 .title .line{
  height: 5px;
  width: 53px;
  background-color: #2374e7;
  margin: 10px auto 0;
}
.con_1{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}
.con_1>li{
  padding: 55px 30px 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
  border-bottom: 3px solid #fff;
  transition: all .5s ease-in;
}
.con_1>li img{
  height: 125px;
  width: 125px;
  margin-bottom: 20px;
}
.con_1>li .tit{
  font-size: 18px;
  font-weight: bold;
  color: #282828;
  margin-bottom: 20px;
}
.con_1 .child_ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.con_1 .child_ul li{
  position: relative;
  width: 50%;
  margin-bottom: 20px;
  white-space: nowrap;
  /* overflow: hidden;
  text-overflow: ellipsis; */
  font-size: 16px;
  color: #707070;
  padding-left: 10px;
  cursor: pointer;
  transition: all .5s ease;
}
li:nth-last-child(2) .child_ul li:nth-child(2n){
width: 30%;
}
.con_1 .child_ul li::before{
  content: '';
  height: 5px;
  width: 5px;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 8px;
  border-radius: 50%;
  transition: all .3s ease;
}
.con_1>li:hover{
  box-shadow:0 6px 6px 5px #d3d7e4;
  border-bottom: 3px solid #2374e7;
}
.con_1 .child_ul li:hover{
  color: #2374e7;
}
.con_1 .child_ul li:hover::before{
  background-color: #2374e7;
}


/* 第二块内��? */
.box2 {
 padding-bottom: 125px;
  padding-top: 88px;
  background-color: #ebedf1;
}
.box2 .title {
  margin-bottom: 75px;
}
.box2 .title h1:nth-child(1){
  font-size: 40px;
  font-weight: bold;
  color: #dae8fb;
  padding: 0;
}
.box2 .title h1:nth-child(2){
  position: relative;
  font-size: 40px;
  font-weight: bold;
  color: #282f38;
  z-index: 99;
  margin-top: -35px;
  padding: 0;
}
.box2 .title .line{
  height: 5px;
  width: 53px;
  background-color: #2374e7;
  margin: 10px auto 0;
}
.box2 .constrain{
  width: 1165px;
  max-width: 100%;
}
.con_2{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(213px, 1fr));
  gap: 24px
}
.con_2 li{
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 46px 0 27px;
  border: 1px solid #dadada;
  transform-style: preserve-3d;
  transition: all .3s ease-in;
  cursor: pointer;
}
.con_2 li img{
  width: 77px;
  height: 71px;
  margin-bottom: 15px;
}
.con_2 li span{
  font-size: 16px;
  font-weight: bold;
  color: #6a6a6e;
  transition: all .3s ease;
}
.con_2 li:hover{
  background-color: rgba(0,0,0,.1);
}
.con_2 li:hover span{
  color: #333;
}
/* 第三块内��? */
.box3{
  position: relative;
  height: 829px;
  padding-top: 166px;
}
.box3 .title {
  position: absolute;
  top: 64px;
  z-index: 99;
  width: 100%;
}
.box3 .title h1:nth-child(1){
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  opacity: .1;
  padding: 0;
}
.box3 .title h1:nth-child(2){
  position: relative;
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  z-index: 99;
  margin-top: -35px;
  padding: 0;
}
.box3 .title .line{
  height: 5px;
  width: 53px;
  background-color: #fff;
  margin: 10px auto 0;
}
.box3s{
  display: none;
  position: relative;
 padding-bottom: 50px;
  padding-top: 160px;
}
.box3s .title {
  position: absolute;
  top: 64px;
  z-index: 99;
  width: 100%;
}
.box3s .title h1:nth-child(1){
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  opacity: .1;
  padding: 0;
}
.box3s .title h1:nth-child(2){
  position: relative;
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  z-index: 99;
  margin-top: -35px;
  padding: 0;
}
.box3s .title .line{
  height: 5px;
  width: 53px;
  background-color: #fff;
  margin: 10px auto 0;
}
.box3s .con_3_l{
  width: 100%;
  padding: 0 3%;
  align-items: center;
}
.box3s .con_3_l>img{
  margin-left: 0;
}
.box3s .con_3_l .row{
  background: url(../public/images/index_5.png) no-repeat center/cover;
}
.box3s .con_3_l .row_l img{
  height: 50px;
  width: 50px;
}

.con_3{
  width: 1260px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.con_3_l{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  width: 576px;
}
.con_3_l>img{
  height: 60px;
  margin-bottom: 27px;
  margin-left: 200px;
}
.con_3_l .row{
  background: url(../public/images/index_5.png) no-repeat center/contain;
  width: 100%!important;
  display: flex;
  align-items: center;
  padding: 40px 30px 27px;
  margin-bottom: 10px;
}
.con_3_l .row:nth-child(3){
  width: 93%;
}
.con_3_l .row:nth-child(4){
  width: 86%;
}
.con_3_l .row:nth-child(5){
  width: 79%;
}
.con_3_l .row_l{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #ffe400;
  margin-right: 35px;
}
.con_3_l .row_l img{
  height: 30px;
  width: 30px;
}
.row_r{
  width: calc(100% - 100px);
  font-size: 16px;
  color: #fff;
  line-height: 28px;
}
.con_3_c{
  width: 240px;
  margin-left: -100px;
}
.con_3_c img{
  width: 100%;
}
.con_3_r{
  width: 350px;
}
.con_3_r .tit{
  height: 75px;
  width: 170px;
  border-radius: 50px;
  background-color: #dee7f2;
  text-align: center;
  line-height: 75px;
  font-size: 39px;
  font-weight: bold;
  color: #99a5b4;
  margin: 60px auto 35px;
}
.con_3_r .row{
  margin-bottom: 10px;
}
.con_3_r .row h2{
  font-size: 16px;
  font-weight: bold;
  color: #68707c;
  margin-bottom: 10px;
}
.con_3_r .row .txt{
  font-size: 14px;
  line-height: 25px;
  color: #949fac;
}
/* 第四块内��? */
.box4{
  padding-top: 80px;
  box-sizing: border-box;
  padding-bottom: 50px;
}
.box4 .title {
  margin-bottom: 75px;
}
.box4 .title h1:nth-child(1){
  font-size: 40px;
  font-weight: bold;
  color: #dae8fb;
  padding: 0;
}
.box4 .title h1:nth-child(2){
  position: relative;
  font-size: 40px;
  font-weight: bold;
  color: #282f38;
  z-index: 99;
  margin-top: -35px;
  padding: 0;
}
.box4 .title .line{
  height: 5px;
  width: 53px;
  background-color: #2374e7;
  margin: 10px auto 0;
}
.con_4 .constrain{
  width: 1350px;
  max-width: 100%;
}
.con_4{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.con_4_l{
  width:35%;
}
.con_4_l li{
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #fff;
  padding: 26px 40px 0 75px;
  margin-bottom: 30px;
  box-shadow: 0px 8px 5px -2px #e9f0f9;
  transition: all .4s ease-in;
}
.con_4_l li img{
  position: absolute;
  left: 0;
  top: -20px;
  width: 60px;
}
.con_4_l li .tit{
  font-size: 18px;
  color: #282828;
  font-weight: bold;
  margin-bottom: 15px;
}
.con_4_l li .txt{
  font-size: 14px;
  color: #8591a2;
}
.con_4_r{
  width: 35%;
}
.con_4_r li{
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #fff;
  padding: 26px 40px 0 60px;
  margin-bottom: 30px;
  box-shadow: 0px 8px 5px -2px #e9f0f9;
  transition: all .5s ease;
}
.con_4_r li img{
  position: absolute;
  left: 0;
  top: -20px;
  width: 60px;
}
.con_4_r li .tit{
  font-size: 18px;
  color: #282828;
  font-weight: bold;
  margin-bottom: 15px;
}
.con_4_r li .txt{
  font-size: 14px;
  color: #8591a2;
}
.con_4_c{
  width:30%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.con_4_c img{
  width: 230px;
  max-width: 90%;
}
.con_4_r li:hover,.con_4_l li:hover{
  background-color: #dae7f7;
}
.box5Out{
  position: relative;
  height: 110px;
  width: 100%;
}
.box5{
  /* �����̶���λ */
  width: 100%;
  height: 110px;
  position: sticky;
 z-index: 999;
 bottom: 0;
}
.sec-1s{
  position: relative;
  display: none;
}
.sec-1s a{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
}
.sec-1s img{
  width: 100%;
}
@media screen and (max-width:1400px){
  footer .constrain{
    padding: 0 30px;
  }
  .con_3{
    padding: 0 30px;
  }
  .con_3_c{
    width: 150px;
  }
}
@media screen and (max-width:1170px){
  footer .constrain{
    height: auto;
  }
  footer .constrain>div{
    flex: auto!important;
  }
}
@media screen and (max-width:1080px){
  .con_4{
    flex-direction: column;
  }
  .con_4_l,.con_4_c,.con_4_r{
    width: 100%;
  }
  footer .mid{
    display: none;
  }
  .con_3_c{
    display: none;
   
  }
}
@media screen and (max-width:750px) {
  .box3{
    display: none;
  }
  .box3s {
    display: block;
  }
  .dev-weixin .sec-1{
    display: none;
  }
  .dev-weixin .sec-1s{
    display: block;
  }
  .box5{
    height: 75px;
  }
  .con_1>li{
    margin: 0 30px;
  }
	.con_1>li:nth-child(1),.con_1>li:nth-child(4),.con_1>li:nth-child(5){
		display: none;
	}
  footer .constrain{
    flex-direction: column;
  }
  footer .constrain .right,footer .constrain .left{
    text-align: center;
    align-items: center;
  }
  footer .right .phone{
    justify-content: center;
  }
  footer .left .contact{
    justify-content: center;
  }
  .dev-weixin .sec-3 ul {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  }
  .con_2{
    padding: 0 3%;
  }
  .con_4{
    padding: 0 3%;
  }
  .con_4_l li{
    height: 165px;
  }
  .dev-weixin .sec-3{
   padding: 30px 3%;
  }
  .sec-7 .constrain{
    padding: 0 3%;
  }
}
@media screen and (max-width:500px){
  .box5{
    height: 44px;
  }
  .con_2{
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - 24px)/2), 1fr));
  }
  .dev-weixin .sec-3 ul {
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - 20px)/2), 1fr));
  }
  .dev-weixin .sec-3 ul a p{
    font-size: 12px;
  }
}