* {
  margin: 0px;
  padding: 0px;
  font-size: 0.3rem;
  box-sizing: border-box;
}

body {
  width: 100%;
  overflow-x: hidden;
}

a:hover {
  text-decoration: none;
}

.head {
  position: relative;
}

.head .top {
  width: 100%;
  height: 9.5rem;
  background: url(../img/5aa10a0a1c711.png) no-repeat center;
  background-size: 100% 100%;
  /* background-position: 0 -2.3rem; */
}

.head .top .nav {
  background-color: rgba(255, 255, 255, 0.3);
  width: 100%;
  height: 1.125rem;
}

.head .top .nav .box {
  width: 75%;
  height: 100%;
  color: #fff;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.head .top .nav .box img {
  width: 2.75rem;
  height: 0.75rem;
}

.head .top .nav .box p {
  display: inline-block;
  padding-left: 0.375rem;
  margin-left: 0.375rem;
  background: url(../img/tell.png) no-repeat left center;
  background-size: 0.2375rem 0.2375rem;
}

.head .footer {
  width: 100%;
  height: 5rem;
  color: #fff;
  overflow-y: auto;
  text-align: center;
  padding:  0.5rem;
  background: #004098;
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.head .footer h1 {
  font-weight: 500;
  font-size: 0.8rem;
  margin-bottom: 0.625rem;
}

.head .footer p {
	font-size: 0.4rem;
  line-height: 0.7rem;
}

.main {
  padding: 0.625rem 0;
}

.main .nav {
  width: 75%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}


.main .nav a {
  color: #000;
  font-weight: 550;
  font-size: 0.5rem;
  text-decoration: none
}

.main .nav a:hover {
  /* text-decoration: underline; */
  padding-bottom: 0.0625rem;
  border-bottom: 0.06rem solid #004098;
  color: #004098;
}

.title {
  margin: 1.5rem auto;
  text-align: center;
}

.title h2 {
  font-size: 0.45rem;
}

.title h2:after {
  margin: 0 auto;
  display: block;
  content: '';
  width: 1.8rem;
  height: 0.0625rem;
  margin-top: 0.15rem;
  background: #004098;
}

.title2 {
  text-align: center;
}

.title2 h1 {
  font-size: 0.6rem;
  margin-top: 1.5rem;
}

.title2 p {
  margin-top: 0.6rem;
  margin-bottom: 1.2rem;
  font-size: 0.34rem;
  line-height: 0.625rem;
}


.scene .footer {
  width: 75%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.scene .footer .box {
  width: 20.5%;
  height: 6.5rem;
  border-radius: 0.25rem;
  background: url(../img/changjing\ \(1\).png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.scene .footer .box:nth-child(2) {
  background-image: url(../img/changjing\ \(2\).png);
}

.scene .footer .box:nth-child(3) {
  background-image: url(../img/changjing\ \(3\).png);
}

.scene .footer .box:nth-child(4) {
  background-image: url(../img/changjing\ \(4\).png);
}

.scene .footer .box h1 {
  font-size: 0.6rem;
  color: #fff;
}

.case .footer {
  width: 75%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.case .footer .box {
  width:22%;
  line-height: 0.4375rem;
  text-align: center;
}

.case .footer .box img {
  width: 100%;
  height: 5rem;
}

.case .footer .box p {
  font-size: 0.4rem;
  line-height: 0.8rem;
}

.case .footer .box .top {
  position: relative;
}

.bgt {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.875rem;
  height: 2.875rem;
  background: url(../img/ewm\ \(1\).png) no-repeat;
  background-size: 100% 100%;
}

.case .footer .box:nth-child(2) .top .bgt {
  background-image: url(../img/ewm\ \(2\).png);
}

.case .footer .box:nth-child(3) .top .bgt {
  background-image: url(../img/ewm\ \(3\).png);
}

.case .footer .box:nth-child(4) .top .bgt {
  background-image: url(../img/ewm\ \(4\).png);
}

.cooperation .footer {
  width: 75%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.625rem;
}

.cooperation .footer .box {
  width: 16.6%;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  background: #f4f4f4;
}

.cooperation .footer .box img {
  width: 80%;
}

.cooperation .box img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

.cooperation .box:hover img {
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
  animation: imgfilter 1.45s;
}

@keyframes imgfilter {
  from {
      filter: grayscale(100%);
  }
  to {
      filter: grayscale(0%);
  }
}

.foot {
  width: 100%;
  /* height: 8rem; */
  background: #031f46;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.foot .top {
  width: 75%;
  flex: 1;
  margin: 0 auto;
  margin-top: 0.75rem;
  display: flex;
  justify-content: space-around;
}

.foot .top .box {
  display: flex;
  flex-direction: column;
}

.foot .top .box:nth-child(1) {
  align-items: center;
}

.foot .top .box h4 {
  font-size: 0.3rem;
  line-height: 0.625rem;
  margin-bottom: 0.25rem;
}

.foot .top .box p {
  font-size: 0.15rem;
}

.foot .top .box:nth-child(5) p {
  margin-bottom: 0.45rem;
  padding-left: 0.5rem;
  background: url(../img/phone2.png) no-repeat left center;
  background-size: 0.375rem 0.375rem;
}

.foot .top .box:nth-child(5) p:nth-child(3) {
  background-image: url(../img/qq.png);
}

.foot .top .box:nth-child(5) p:nth-child(4) {
  background-image: url(../img/email.png);
}

.foot .top .box:nth-child(5) p:nth-child(5) {
  background-image: url(../img/location.png);
}

.foot .top .box a {
  text-decoration: none;
  color: #fff;
  margin-bottom: 0.45rem;
}

.foot .top .box span {
  line-height: 1rem;
}

.foot .top .box img:nth-child(1) {
  width: 2.875rem;
  height: 0.75rem;
}

.foot .top .box img:nth-child(2) {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0.7rem 0 0.375rem 0;
}

.foot .btm {
  width: 100%;
  /* height: 1.5rem; */
  /* line-height: 1.5rem; */
  text-align: center;
  border-top: 1px solid #ccc;
  padding: 0.375rem 0;
}

.foot .btm a {
  color: #fff;
  text-decoration: none;
}

.box2 .phone {
	width: 100px;
	height: 70px;
	position: fixed;
	right: 0;
	top: 440px;
	background: rgba(229, 229, 229, 0.68);
	border-bottom-left-radius: 12px;
	border-top-left-radius: 12px;
	align-items: center;
	justify-content: center;
	z-index: 1;
	display: flex;
	transition: all 2s ease;
}

.box2 .phone2 {
	transition: all 2s ease;
	position: fixed;
	right: 0;
	top: 440px;
	text-align: center;
	color: #fff;
	background-color: #46b5f3;
	border-bottom-left-radius: 12px;
	border-top-left-radius: 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: 15px 15px;
	display: none;
	z-index: 10;
}

.box2 .phone:hover {
	display: none;
}

.box2 .phone img {
	width: 25px;
	height: 25px;
}

.jiantou {
	position: fixed;
	right: 3%;
	top: 70%;
	z-index: 20;
	cursor: pointer;
}

@media only screen and (max-width: 1280px) and (min-width: 768px) {
  .head .footer {
    padding: 0;
    padding-top: 0.15rem;
  }

  .main .nav {
    flex-wrap: wrap;
  }

  .main .nav a {
    margin-right: 0.375rem;
    margin-bottom: 0.4rem;
  }

  .scene .footer {
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .scene .footer .box {
    width: 5rem;
    margin-bottom: 0.7rem;
  }

  .case .footer {
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .case .footer .box {
    width: 5rem;
    margin-bottom: 0.7rem;
  }

  .case .footer .box img {
    width: 100%;
    height: 4rem;
  }

  .cooperation .footer {
    width: 100%;
    justify-content: space-around;
  }

  .cooperation .footer .box {
    width: 21%;
    margin-bottom: 0.375rem;
  }

  /* .cooperation .footer .box img {
    width: 60%;
  } */

  .foot .top {
    flex-wrap: wrap;
  }
}


@media only screen and (max-width: 768px) and (min-width: 480px){
  .head .footer {
    padding: 0;
    padding-top: 0.15rem;
  }

  .main .nav {
    flex-wrap: wrap;
  }

  .main .nav a {
    margin-right: 0.375rem;
    margin-bottom: 0.4rem;
  }

  .scene .footer {
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .scene .footer .box {
    width: 45%;
    margin-bottom: 0.375rem;
  }

  .case .footer {
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .case .footer .box {
    width: 45%;
    margin-bottom: 0.375rem;
  }

  .case .footer .box img {
    width: 100%;
    height: 4rem;
  }

  .cooperation .footer {
    width: 100%;
    justify-content: space-around;
  }

  .cooperation .footer .box {
    width: 45%;
    margin-bottom: 0.375rem;
  }

  .foot .top {
    flex-wrap: wrap;
  }
}

/* 用于更小屏幕 */
@media screen and (max-width: 480px) {
  .head .footer {
    padding: 0;
    padding-top: 0.15rem;
  }

  .main .nav {
    flex-wrap: wrap;
  }

  .main .nav a {
    margin-right: 0.375rem;
    margin-bottom: 0.25rem;
  }

  .scene .footer {
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .scene .footer .box {
    width: 45%;
    margin-bottom: 0.375rem;
  }

  .case .footer {
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .case .footer .box {
    width: 45%;
    margin-bottom: 0.375rem;
  }

  .case .footer .box img {
    width: 100%;
    height: 4rem;
  }

  .cooperation .footer {
    width: 100%;
    justify-content: space-around;
  }

  .cooperation .footer .box {
    width: 45%;
    margin-bottom: 0.375rem;
  }

  .foot .top {
    flex-wrap: wrap;
  }
}