@charset "UTF-8";
.banner {
  width: 100%;
  height: 500px;
  background: url(../../images/dataresource/banner.png) no-repeat center center;
  background-size: cover;
  color: #ffffff;
}
.banner h1 {
  width: 100%;
  height: 240px;
  text-align: center;
  font-size: 56px;
  font-family: siyuanb;
  padding-top: 160px;
}
.banner h3 {
  width: 100%;
  height: 60px;
  text-align: center;
  font-size: 20px;
  line-height: 36px;
}
.banner h5 {
  width: 100%;
  height: 60px;
  text-align: center;
  font-size: 16px;
  line-height: 36px;
}
.banner p {
  width: 100%;
  height: 55px;
  line-height: 55px;
  text-align: center;
  padding-top: 30px;
}
.banner p button {
  width: 160px;
  text-align: center;
  height: 28px;
  line-height: 28px;
  background-color: #1b60d5;
  color: #ffffff;
  border-radius: 5px;
  font-size: 14px;
}
.banner p button a {
  color: #ffffff;
  display: block;
}

.data-container {
  width: 100%;
  height: 800px;
}
.data-container .middle-main {
  width: 1200px;
  margin: 0 auto;
  display: block;
}

.main1 {
  height: 800px;
  padding-top: 100px;
}
.main1 .title {
  text-align: center;
  font-size: 24px;
  font-family: siyuanb;
}
.main1 .satellite-list {
  width: 792px;
  height: 320px;
  margin: 0 auto;
  background: url("../../images/dataresource/main2-bg.png") no-repeat center center;
  background-size: cover;
  position: relative;
}
.main1 .satellite-list img {
  position: absolute;
}
.main1 .satellite-list .light1 {
  top: 146px;
  left: 95px;
  animation: opt1 10s linear infinite;
}
.main1 .satellite-list .light2 {
  top: 146px;
  left: 254px;
  animation: opt2 10s linear infinite;
}
.main1 .satellite-list .light3 {
  top: 124px;
  left: 254px;
  animation: opt3 10s linear infinite;
}
.main1 .satellite-list .light4 {
  top: 118px;
  left: 254px;
  animation: opt4 10s linear infinite;
}
.main1 .img-list {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.main1 .img-list li img {
  width: 282px;
  height: 195px;
}
.main1 .img-list li p {
  margin-top: 10px;
  text-align: center;
}

.gray-bg {
  width: 100%;
  background-color: #f5f5f5;
}
.gray-bg .middle-main {
  display: flex;
  align-items: center;
  height: 800px;
}
.gray-bg .middle-main .left {
  padding-right: 90px;
}
.gray-bg .middle-main .left .title .top-line {
  width: 72px;
  height: 6px;
  background-color: #1b60d5;
  margin-bottom: 20px;
}
.gray-bg .middle-main .left .title h2 {
  font-size: 36px;
  font-family: siyuanb;
  color: #333333;
  margin-bottom: 10px;
}
.gray-bg .middle-main .left .title h2 span {
  font-size: 18px;
  font-weight: 400;
  font-family: siyuanr;
  position: relative;
  top: -14px;
  left: 10px;
}
.gray-bg .middle-main .left .title p {
  font-size: 16px;
  line-height: 32px;
}
.gray-bg .middle-main .right img {
  width: 700px;
  height: 510px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.white-bg .middle-main {
  display: flex;
  align-items: center;
  height: 800px;
}
.white-bg .middle-main .left .left-top {
  height: 430px;
}
.white-bg .middle-main .left .left-bottom {
  margin-top: 30px;
}
.white-bg .middle-main .left .left-bottom ul {
  display: flex;
}
.white-bg .middle-main .left .left-bottom ul li {
  width: 25%;
  text-align: center;
}
.white-bg .middle-main .left .left-bottom ul li p {
  text-align: center;
  margin-top: 10px;
}
.white-bg .middle-main .right {
  width: 42%;
  margin-left: 50px;
}
.white-bg .middle-main .right .title .top-line {
  width: 72px;
  height: 6px;
  background-color: #1b60d5;
  margin-bottom: 20px;
}
.white-bg .middle-main .right .title h2 {
  font-size: 36px;
  font-family: siyuanb;
  color: #333333;
  margin-bottom: 10px;
}
.white-bg .middle-main .right .title h5 {
  font-family: siyuanb;
  margin-top: 60px;
  font-size: 20px;
}
.white-bg .middle-main .right .title p {
  font-size: 16px;
  line-height: 32px;
}
.white-bg .vegetation {
  /*植被覆盖度*/
}
.white-bg .vegetation > p {
  height: 40px;
  line-height: 40px;
  width: 100%;
  text-align: center;
}

.scroll-right {
  width: 720px;
  height: 510px;
  position: relative;
  flex: 0 1 auto;
}

.scroll-left {
  width: 720px;
  height: 510px;
  position: relative;
  flex: 0 1 auto;
}

.down-sample {
  height: auto;
  padding: 2px 0 20px;
  background-color: #f5f5f5;
}
.down-sample .middle-main .title {
  text-align: center;
  margin: 80px 0 60px 0;
}
.down-sample .middle-main .title .top-line {
  width: 72px;
  height: 6px;
  background-color: #1b60d5;
  margin: 0 auto 20px;
}
.down-sample .middle-main .title h2 {
  font-size: 36px;
  font-family: siyuanb;
}
.down-sample .middle-main .sample-list {
  justify-content: space-between;
  align-content: flex-start;
}
.down-sample .middle-main .sample-list li.sample-item {
  width: 24%;
  height: 200px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.down-sample .middle-main .sample-list li.sample-item .item-title {
  position: absolute;
  bottom: -60px;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  align-items: center;
}
.down-sample .middle-main .sample-list li.sample-item .item-title .item-title-left {
  flex: 1 1 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.down-sample .middle-main .sample-list li.sample-item .item-title .item-title-left h3 {
  line-height: 21px;
}
.down-sample .middle-main .sample-list li.sample-item .item-title .item-title-right {
  width: 40px;
  height: 40px;
  line-height: 16px;
  box-sizing: border-box;
  padding-top: 5px;
  text-align: center;
  border-radius: 5px;
  background-color: #1b60d5;
  font-size: 14px;
  margin-right: 10px;
}
.down-sample .middle-main .sample-list li.sample-item .item-title .item-title-right a {
  color: #ffffff;
  text-decoration: none;
}
.down-sample .middle-main .sample-list li.sample-item-1 {
  background: url("../../images/dataresource/sample1.png") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-2 {
  background: url("../../images/dataresource/sample/sample2.jpg") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-3 {
  background: url("../../images/dataresource/sample/sample3.jpg") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-4 {
  background: url("../../images/dataresource/sample3.png") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-5 {
  background: url("../../images/dataresource/sample4.png") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-6 {
  background: url("../../images/dataresource/sample5.png") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-7 {
  background: url("../../images/dataresource/sample/sample7.jpg") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-8 {
  background: url("../../images/dataresource/sample/sample8.jpg") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-9 {
  background: url("../../images/dataresource/sample/sample9.jpg") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-10 {
  background: url("../../images/dataresource/sample/sample10.jpg") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-11 {
  background: url("../../images/dataresource/sample/sample11.jpg") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-12 {
  background: url("../../images/dataresource/sample/sample12.jpg") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-13 {
  background: url("../../images/dataresource/sample/sample13.jpg") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-14 {
  background: url("../../images/dataresource/sample/sample14.jpg") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-15 {
  background: url("../../images/dataresource/sample/sample15.jpg") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-16 {
  background: url("../../images/dataresource/sample/sample16.jpg") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-17 {
  background: url("../../images/dataresource/sample/sample17.jpg") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-18 {
  background: url("../../images/dataresource/sample/sample18.jpg") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-19 {
  background: url("../../images/dataresource/sample/sample19.jpg") no-repeat center center;
  background-size: cover;
}
.down-sample .middle-main .sample-list li.sample-item-20 {
  background: url("../../images/dataresource/sample/sample20.jpg") no-repeat center center;
  background-size: cover;
}

.iframe-wrap {
  position: relative;
  overflow: hidden;
  background-color: #fafafa;
  background: url("../../images/dataresource/computer.png") no-repeat center center;
  background-size: contain;
}
.iframe-wrap h4 {
  width: 60px;
  color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: 75%;
  left: 50%;
  margin-left: -50px;
  margin-top: -80px;
  cursor: pointer;
  font-size: 10px;
}
.iframe-wrap h4 img.breathing-light {
  width: 45px;
  height: 45px;
  animation: breathing 1s infinite;
}
.iframe-wrap h4 p {
  font-size: 14px;
  font-weight: bold;
}
.iframe-wrap h4 span {
  width: 25px;
  font-weight: bold;
}

.iframe-model {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
}
.iframe-model img {
  position: absolute;
  right: 50%;
  bottom: 5%;
  z-index: 30;
  width: 40px;
  height: 40px;
  margin-right: -20px;
}

@keyframes opt1 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes opt2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes opt3 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes opt4 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes breathing {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}