large_screen/src/assets/scss/index.css

#apppp .mainbox {
  position: relative;
  background: url(../img/gas/back1.png) no-repeat;
  background-size: contain;
  overflow: hidden;
  width: 1600px;
  height: 750px;
  color: white;
  /* border: 1px solid white; */
}
#apppp .mainbox button {
  position: absolute;
  color: black;
  width: 30px;
  height: 82px;
}
#apppp .mainbox button:nth-child(1) {
  left: 1235px;
  top: 353px;
}
#apppp .mainbox button:nth-child(2) {
  left: 1236px;
  top: 592px;
}
#apppp .mainbox .motor1 { 
  position: absolute;
  border-radius: 5%;
  right: 60px;
  top: 0px;
  width: 270px;
  height: 200px;
  display: flex;
}
#apppp .mainbox .motor1 h3 {
  position: absolute;
  left: 5px;
  color:#4ADEFE;
  font-size: 15px;
}
#apppp .mainbox .motor1 div{ 
  position: relative;
  color:#4ADEFE;
  left: 5px;
  margin-top: 5px;
  top: 10px;
  display: flex;
}
#apppp .mainbox .motor1 div section div {
  display: flex;
  font-size: 12px;
  margin-bottom: 5px;
}
#apppp .mainbox .motor1 div section div p {
  margin-right: 10px;
  margin-left: 5px;
  width: 40px;
  text-align: center;
  color: #F3DB5C;
}
#apppp .mainbox .motor2 {
  position: absolute;
  border-radius: 5%;
  overflow: hidden;
  /* left: 1300px; */
  right: 30px;
  top: 552px;
  width: 270px;
  height: 193px;
  display: flex;
}
#apppp .mainbox .motor2 h3 {
  position: absolute;
  left: 5px;
  font-size: 15px;
  color:#4ADEFE;
}
#apppp .mainbox .motor2 div {
  color:#4ADEFE;
  position: relative;
  margin-top: 5px;
  left: 3px;
  top: 10px;
  display: flex;
}
#apppp .mainbox .motor2 div section div {
  display: flex;
  font-size: 12px;
  margin-bottom: 5px;
}
#apppp .mainbox .motor2 div section div p {
  margin-right: 10px;
  margin-left: 5px;
  width: 40px;
  text-align: center;
  color: #F3DB5C;
}
#apppp .mainbox .pipeline {
  position: absolute;
  display: flex;
  left: 576px;
  top: 60px;
  width: 455px;
  height: 51px;
}
#apppp .mainbox .pipeline div {
  flex: 3;
  margin-left: 1px;
  margin-right: 1px;
  color: #4ADEFE;
  margin-top: 2px;
  
}
#apppp .mainbox .pipeline div div {
  text-align: center;
  font-size: 15px;
}
#apppp .mainbox .pipeline div p {
  text-align: center;
  font-size: 12px;
  color: #F3DB5C;
}
#apppp .mainbox .waterpump {
  border-radius: 5%;
  position: absolute;
  overflow: hidden;
  left: 327px;
  top: 163px;
  width: 163px;
}
#apppp .mainbox .waterpump h3 {
  color: #4ADEFE; 
  font-size: 17px;
}
#apppp .mainbox .waterpump div {
  display: flex;
  font-size: 14px;
  color: #4ADEFE;
}
#apppp .mainbox .waterpump div p {
  width: 80px;
  text-align: center;
  color: #F3DB5C;
}
#apppp .mainbox .tank1 {
  width: 75px;
  position: absolute;
  /* background-color: green; */
  left: 140px;
  top: 278px;
}
#apppp .mainbox .tank1 div {
  display: flex;
  font-size: 12px;
  color:#4ADEFE;
  
}
#apppp .mainbox .tank1 div p{
  display: flex;
  font-size: 12px;
  margin-left: 5px;
  color:#F3DB5C;
}
#apppp .mainbox .tank2 {
  width: 75px;
  position: absolute;
  /* background-color: green; */
  left: 142px;
  top: 530px;

}
#apppp .mainbox .tank2 div {
  display: flex;
  font-size: 12px;
  color:#4ADEFE;
}
#apppp .mainbox .tank2 div p{
  display: flex;
  font-size: 12px;
  margin-left: 5px;
  color:#F3DB5C;
}
#apppp .mainbox .tower {
  position: absolute;
  border-radius: 5%;
  overflow: hidden;
  left: 150px;
  top: 80px;
  height: 30px;
  width: 140px;
}
#apppp .mainbox .tower div {
  overflow: hidden;
  margin-top: 1px;
  display: flex;
  color: #4ADEFE;
  font-size: 15px;
  margin-bottom: 1px;
}
#apppp .mainbox .tower div p {
  margin-left: 10px;
  margin-right: 1px;
  width: 50px;
  text-align: center;
  color: #F3DB5C;
}
#apppp .mainbox .pumps {
  position: absolute;
  border-radius: 5%;
  left: 1090px;
  top: 163px;
  width: 163px;
}
#apppp .mainbox .pumps h3 {
  font-size: 17px;
  color: #4ADEFE;
}
#apppp .mainbox .pumps div {
  display: flex;
  font-size: 14px;
  color: #4ADEFE;
}
#apppp .mainbox .pumps div p {
  margin-left: 0px;
  width: 80px;
  text-align: center;
  color: #F3DB5C;
}
#apppp .mainbox img{
  position: relative;
  width: 69px;
}
#apppp .mainbox .valveitem1 img:nth-child(1) {
  position: absolute;
  left: 165px;
  top: 338px;
}
#apppp .mainbox .valveitem1 img:nth-child(2) {
  position: absolute;
  left: 151px;
  top: 610px;
}
#apppp .mainbox .valveitem2 img {
  position: absolute;
  width: 54px;
  left: 499px;
}
#apppp .mainbox .valveitem2 img:nth-child(1) {
  top: 367px;
}
#apppp .mainbox .valveitem2 img:nth-child(2) {
  top: 451px;
}
#apppp .mainbox .valveitem2 img:nth-child(3) {
  top: 546px;
}
#apppp .mainbox .valveitem2 img:nth-child(4) {
  top: 629px;
  left: 505px;
}
#apppp .mainbox .valveitem4 img {
  position: absolute;
  width: 79px;
}
#apppp .mainbox .valveitem4 img:nth-child(1) {
  left: 975px;
  top: 208px;
}
#apppp .mainbox .valveitem4 img:nth-child(2) {
  left: 751px;
  top: 251px;
}
#apppp .mainbox .valveitem5 img {
  position: absolute;
  width: 69px;
}
#apppp .mainbox .valveitem5 img:nth-child(1) {
  left: 1318px;
  top: 227px;
}
#apppp .mainbox .valveitem5 img:nth-child(2) {
  left: 1329px;
  top: 451px;
}
#apppp {
  color: white;
  width: 1600px;
  height: 850px;
  /* position: absolute; */
  background-image: linear-gradient(to right, #06133c 0%, #011669 50%, #06133c 100%);;
}

h1, h2, h3, h4, h5, h6 {
  color: white;
}