html,
body,
header,
#intro {
  height: 100%;
}

#intro {
  background: url("../../static/images/topitem/topitem3.jpeg")no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.top-nav-collapse {
  background-color: #24355C;
}

@media (max-width: 768px) {
  .navbar:not(.top-nav-collapse) {
    background-color: #24355C;
  }
}

@media (min-width: 800px) and (max-width: 850px) {
  .navbar:not(.top-nav-collapse) {
    background-color: #24355C;
  }
}

#modal-container {
		  position: fixed;
		  display: table;
		  height: 100%;
		  width: 100%;
		  top: 0;
		  left: 0;
		  transform: scale(0);
		  z-index: 11111;
		}
		#modal-container.one {
		  transform: scaleY(0.01) scaleX(0);
		  animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
		}
		#modal-container.one .modal-background .modal {
		  transform: scale(0);
		  animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
		}
		#modal-container.one.out {
		  transform: scale(1);
		  animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
		}
		#modal-container.one.out .modal-background .modal {
		  animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
		}
		#modal-container .modal-background {
		  display: table-cell;
		  background: rgba(0, 0, 0, 0.8);
		  text-align: center;
		  vertical-align: middle;
		}
		#modal-container .modal-background .modal {
		  width: 100%;
		  box-sizing: border-box;
		  border-radius: 3px;
		  font-weight: 300;
		  position: relative;
		  display: flex;
		  align-items: center;
		  justify-content: space-around;
		  flex-wrap: wrap;
		  color: #fff;
		  font-size: 1.5rem;
		  line-height: 2rem;
		}
		@keyframes unfoldIn {
		  0% {
		    transform: scaleY(0.005) scaleX(0);
		  }
		  50% {
		    transform: scaleY(0.005) scaleX(1);
		  }
		  100% {
		    transform: scaleY(1) scaleX(1);
		  }
		}
		@keyframes unfoldOut {
		  0% {
		    transform: scaleY(1) scaleX(1);
		  }
		  50% {
		    transform: scaleY(0.005) scaleX(1);
		  }
		  100% {
		    transform: scaleY(0.005) scaleX(0);
		  }
		}
		@keyframes zoomIn {
		  0% {
		    transform: scale(0);
		  }
		  100% {
		    transform: scale(1);
		  }
		}
		@keyframes zoomOut {
		  0% {
		    transform: scale(1);
		  }
		  100% {
		    transform: scale(0);
		  }
		}
		.top-lang{
			display: flex;
			flex-direction:row-reverse;
		}
		.checkbtn{
			color: #fff !important;
			padding: 20px;
		}
		.text-item{
			display: flex;
			/* align-items: center; */
			margin-bottom: 4px;
			color: #303133 !important;
		}
		.grey_m{
			color:#303133;
		}
		.yuandian{
			display: block;
			padding:0 4px;
			height: 8px;
			background: #606266;
			border-radius:100%;
			margin-right: 4px;
			margin-top: 8px;
		}
		.phone-img{
			width: 80%;
			object-fit: contain;
		}
		.center-img-box{
			flex-direction: column;
		}
		.download-logo-box{
			width: 80%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-bottom: 15px;
		}
		.download-logo-box .ios{
			background: #000;
			width: 45px;
			height: 45px;
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
		}