* {
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei",
    sans-serif;
}
html,
body {
  position: relative;
  height: 100%;
  background: #000;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #fff;
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
}
ul li {
  list-style: none;
}
header .navbar-default {
  background-color: #000;
  border: none;
  border-radius: 0;
}
header .navbar {
  position: fixed;
  left: 0;
  right: 0;
  top:0;
  z-index: 100;
}
header .navbar .isNav {
  font-size: 1.3rem;
}
header .navbar-brand {
  padding: 0;
}
header .navbar-header{padding-top: 20px;}
header .navbar-default .navbar-nav > li > a {
  padding: 10px 0;
  margin: 15px;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 500;
}
header .navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > li > a:hover {
  color: #fff;
  background-color: #000;
  border-bottom: 3px solid #ed322e;
}
.navbar-default .navbar-nav > .active > a {
  color: #fff;
  background-color: #000;
  border-bottom: 3px solid #ed322e;
}

.section {
  position: relative;
  margin: 20px auto;
  background: #000;
}
.section .head-title {
  text-align: center;
  margin-bottom: 50px;
}
.section .head-title .cn-title {
  font-size: 3rem;
  font-weight: 550;
  color: #fff;
  letter-spacing: 5px;
}
.section .head-title .en-title {
  font-size: 3rem;
  color: #fff;
  font-weight: 550;
}
.section .head-title .line {
  background: #fff;
  width: 20px;
  height: 2px;
  display: inline-block;
}
.slogan {
  font-size: 2rem;
  line-height: 1.8;
}
.slogan .title {
  font-size: 3rem;
  font-weight: 550;
  padding:15px 0;
}
.slogan .content{margin: 0 15rem;}
.operate {
  text-align: center;
  margin: 20px 0;
}
.operate a {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 5px 20px;
  font-size: 18px;
}

.swiper-pagination-bullet {
  background: #fff;
  opacity: 1;
  height: 10px;
  width: 10px;
}
.swiper-pagination-bullet-active {
  background: #ed322e;
}
.swiper-container-vertical
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 35px 0;
}
.home .img-slogan{margin:100px 0 150px 0;}
.home .bigslogan{
  font-size: 10rem;
  font-weight: 600;
  letter-spacing: 10px;
  margin: 20px 0;
}
.home .slogan {
  text-align: center;
  font-size: 2rem;
}
.home .operate {
  text-align: center;
}
.home .swiper-container {
  height: 100%;
  width: 100%;
}
.home .swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.services {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-items: center;
  height: 100%;
}
.services .service-content {
  display: grid;
  grid-column-gap: 30px;
  grid-template-columns: 1fr 1fr 1fr;
}
.services .service-content .service-item {
  padding:60px 30px 10px 30px;
  text-align: center;
  border-radius: 3px;
  background-color: #333;
}
.services .service-content .service-item:hover {
  border: 1px solid #ed322e;
}
.services .service-content .service-item h4 {
  font-size: 22px;
  font-weight: 550;
  padding: 40px 0;
}
.services .service-content .service-item .content {
  text-align: left;
  color: #999;
}
.services .service-content .service-item .content .info {
  padding: 10px 0;
}
.services .service-content .service-item .content .op {
  border-top: 1px solid #ed322e;
  padding: 10px 0;
}
.services .service-content .service-item .content .op a {
  border: 1px solid #999;
  border-radius: 20px;
  padding: 2px 10px;
  color: #999;
}
.services .service-content .service-item .content .op span {
  float: right;
  color: #999;
  float: right;
  margin-bottom: 5px;
}

.projects {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
}
.projects .projects-item {
  position: relative;
  padding: 0;
  text-align: center;
  border-radius: 3px;
  background-color: #333;
  overflow: hidden; /* 让溢出的内容隐藏起来。意思是让下方的橙色方形先躲起来 */
  transition: all .5s; /* 从最初到鼠标悬停时的过渡 */
}
.projects .projects-item h4 {
  line-height: 1.5;
  font-size: 16px;
  font-weight: 550;
  position: absolute;
  bottom: 120px;
  left: 0;
  right: 0;
  padding: 10px 30px;
  background: #333;
  opacity: 0.8;
}
@keyframes topIn {
  from {
    transform: translateY(-250px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
.projects .projects-item:hover h4 {
  background: #ed322e;
  animation: topIn 2s ease;
}
.projects .projects-item .content {
  text-align: left;
  color: #fff;
  padding: 0 15px;
}
.projects .projects-item:hover .content {
  border: 1px solid #ed322e;
  animation: topIn 1s ease;
}
.projects .projects-item .content .info {
  padding: 15px 0;
}
.projects .projects-item .content .op {
  display: flex;
  border-top: 1px solid #ed322e;
  padding: 10px 0;
}
.projects .projects-item .content .op a {
  color: #999;
  flex-grow: 1;
}
.projects .projects-item .content .op span {
  float: right;
  color: #999;
}
#projects .operate {
  text-align: center;
}
#projects .operate a {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 5px 20px;
  font-size: 18px;
  margin-top: 10px;
  display: inline-block;
}

.zoology {
  text-align: center;
  background-image: url(https://scdn.xidong360.com/newhome/images/web/zoologybg.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.zoology .container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  padding: 0 100px;
}

.zoology .operate {
  text-align: center;
  margin: 20px 0;
}
.zoology .operate a {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 5px 20px;
  font-size: 18px;
}

#about {
  position: relative;
}
.about-content {
  display: flex;
  grid-gap: 0px 10px;
  margin: 60px 0 40px 0;
  padding: 40px 50px;
  border-radius: 3px;
  background: #333;
  color:#999;
}
.about-content .contact-info {
  flex: 1;
}
.about-content .contact-info h2 {
  color: #fff;
}
.about-content .contact-info .xd {
  text-indent: 28px;
  line-height: 1.8;
  margin-top: 30px;
  font-size: 15px;
}
.about-content .contact-info .title {
  color: #e6322e;
  margin-bottom: 5px;
}
.about-content .contact-info .info-1 {
  margin: 20px 0;
}
.about-content .contact-info .content {
  text-indent: 28px;
  line-height: 1.8;
  font-size: 15px;
}
.about-content .contact-map {
  flex: 2;
  padding: 85px 0 0 50px;
}
.about-content .contact-map .map {
  background-image: url("https://scdn.xidong360.com/ssy/home/footer-map.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 260px;
  margin-bottom: 20px;
}
.about-content .contact-map ul {
  padding-left: 0;
}
.about-content .contact-map ul li {
  list-style: none;
  padding: 10px 0;
  display: flex;
  align-items: flex-end;
}
.about-content .contact-map ul li img {
  margin-right: 10px;
  object-fit: cover;
  width: 20px;
}
.about-content .contact-map .link p{font-size: 18px;}
.copyright-info{font-size: 18px;}
.copyright-info span {
  padding: 0 20px;
}

.copyright-info  a{color: #fff;text-decoration:underline;font-size: 18px;}
.footer {
  background: #525659;
  padding: 7rem 10rem;
  color: #fff;
  left: 0;
  right: 0;
  bottom: 0px;
}
.footer .row {
  line-height: 40px;
}
.swal2-popup .swal2-close {
  outline: none;
}