.container{
    max-width: 1440px;
}
.process{
    border: 2px solid #F26722;
    border-radius: 15px;
    width: 315px;
    height: 125px;
    position: absolute;
    top: 66%;
    left: 40%;
    z-index: 4;
    background-color: white;
}
.process .control-building{
    border: 1px solid #F26722;
    padding: 5px;
    font-size: 8px;
    display: flex;
    flex-direction: column;
    width: 100px;
    text-align: center;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 0px 1px 1px rgb(203, 0, 0);
}
.process-left{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.process-left .title{
    font-size: 8px;
    color: #F26722;
    font-weight: 500;
}   
.process-left .title-gray{
    font-size: 8px;
    color: gray;
    font-weight: 500;
}  
.process-right{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.process-right .title{
    font-size: 8px;
    color: #F26722;
    font-weight: 500;
}   
.process-right .title-gray{
    font-size: 8px;
    color: gray;
    font-weight: 500;
}  
.process-bottom{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 35%;
    top: 53%;
}
.process-bottom img{
    width: 40px;
}
.process-bottom .title{
    font-size: 9px;
    color: #F26722;
    font-weight: 500;
}   
.process-bottom .title-gray{
    font-size: 9px;
    color: gray;
    font-weight: 500;
}  
.process::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
      135deg, 
      rgba(0, 0, 0, 0.1), 
      rgba(0, 0, 0, 0.1) 1px, 
      transparent 0px,
      transparent 16px
    );
    z-index: -1;
}
.hydrogen{
    width: 180px;
    height: 125px;
    border: 2px solid #F26722;
    position: absolute;
    border-radius: 15px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0px 15px;
    justify-content: center;
    top: 66%;
    left: 67%;
    z-index: 9;
}
.hydrogen img{
   width: 40px;
}
.hydrogen .title{
   font-size: 11px;
   color: #F26722;
   text-align: center;
   font-weight: 600;
}
.hydrogen .title-gray{
    font-size: 11px;
    color: gray;
    text-align: center;
}
.hydrogen::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
      135deg, 
      rgba(0, 0, 0, 0.1), 
      rgba(0, 0, 0, 0.1) 1px, 
      transparent 0px,
      transparent 16px
    );
    z-index: -1;
}
.emergency-chimney{
    border: 2px solid #F26722;
    width: 70px;
    height: 70px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 25px;
    position: absolute;
    left: 88%;
    top: 73%;
}
.emergency-chimney .title{
    font-size: 7px;
    color: #F26722;
    text-align: center;
}
.emergency-chimney .title-gray{
    font-size: 7px;
    color: gray;
    text-align: center;
    margin-top: 2px;
}
.emergency-generator{
    width: 200px;
    height: 55px;
    padding: 2px 8px;
    background-color: #F26722;
}
.emergency-generator .detail{
    border: 3px solid rgb(203, 0, 0);
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 5px;
}
.emergency-generator .detail .title{
    font-size: 12px;
    text-align: center;
    color: #F26722;
    font-size: 600;
}
.emergency-generator .detail .title-gray{
    font-size: 12px;
    text-align: center;
    color: gray;
    font-size: 600;
}
.waste-oil{
    width: 140px;
    height: 75px;
    border: 3px solid #F26722;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.waste-oil .title{
    font-size: 11px;
    color: #F26722;
    text-align: center;
    font-weight: 500;
}
.waste-oil .title-gray{
    font-size: 11px;
    color: gray;
    text-align: center;
    font-weight: 500;
}
.waste-oil-big{
    width: 200px;
    height: 55px;
    border: 3px solid #F26722;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.waste-oil-big .title{
    font-size: 11px;
    color: #F26722;
    text-align: center;
    font-weight: 500;
}
.waste-oil-big .title-gray{
    font-size: 11px;
    color: gray;
    text-align: center;
    font-weight: 500;
}
/* yeni başlangıç css */
.plan{
    width: 100%;
    height: 700px;
    display: flex;
    position: relative;
}
.plan .vay {
    display: inline-block;
    position: absolute;
    z-index: 2;
    left: -8px;
	width:20%;
}
.plan .vay .vay-ground{
    width: 100%;
    z-index: 1;
    height: 700px;
}
.plan .vay .vay-line{
    z-index: 2;
    width: 100%;
    position: absolute;
    left: 7.5%;
}
.plan .vay .vay-line2{
    z-index: 2;
    width: 100%;
    position: absolute;
    left: 13%;
}
.frame{
    display: inline-block;
    width: 94%;
    position: relative;
}
.frame .frame-img{
    width: 101%;
    position: relative;
    left: 5%;
    height: 700px;
    z-index: 4;
}
.frame .top-frame{
    position: absolute;
    left: 5%;
    width: 100%;
    z-index: 1;
    top: 0;
}
.frame .car-park{
    position: absolute;
    z-index: 3;
    top: 2.5%;
    left: 5.5%;
    width: 22%;
}
.car-park .trash{
    position: absolute;
    left: 4%;
    top: 8%;
    width: 24%;
}
.car-park .zeroWaste{
    position: absolute;
    left: 6.5%;
    top: 46%;
    width: 24%;
}
.car-park .security-build{
    border: 2px solid #F26722;
    background-color: white;
    width: 75%;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    right: 1%;
    top: 1%;
    z-index: 9;
}
.car-park .security-build .title{
    font-size: 8px;
    color: #F26722;
    text-align: center;
    font-weight: 600;
}
.car-park .security-build .title-gray{
    font-size: 8px;
    color: gray;
    text-align: center;
    font-weight: 600;
}
.car-park .entrance{
    border: 2px solid #F26722;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform: rotate(90deg);
    position: absolute;
    left: -8px;
    z-index: 5;
    width: 74%;
    height: 40px;
}
.car-park .entrance .title{
    font-size: 9px;
    font-weight: 600;
    color: #F26722;
    text-align: center;
}
.car-park .entrance .title-gray{
    font-size: 9px;
    font-weight: 600;
    color: gray;
    text-align: center;
}
.car-style{
    position: absolute;
    top: 5%;
    width: 60%;
    right: 5px;
}
.car-down{
    width: 10%;
}
.car-style2{
    position: absolute;
    bottom: 5%;
    width: 60%;
    right: 9px;
}
.car-up{
    width: 10%;
}
.left-mid{
    position: absolute;
    top: 21.9%;
    width: 19.4%;
    left: 8.3%;
}
.mid-bottom{
    position: absolute;
    bottom: 6px;
    left: 24%;
}
.mid-bottom-garden{
    width: 86%;
}
.car-park .car-park-door{
    position: absolute;
    bottom: -10px;
    left: 20px;
}
.car-park .car-park-door .door-img{
    width: 40%;
}
.car-park .car-park-door .car-park-way{
    position: absolute; 
    top: 40%;
    left: 5%;
}
.car-park .car-park-door .car-park-way img{
    width: 10%;
}
.way-one{
    position: absolute;
    width: 22.7%;
    left: 16%;
    top: 17%;
    height: 71%;
}
.mini-junction{
    position: absolute;
    left: 32%;
    width: 5%;
    top: 19%;
}
.left-mid-road{
    position: absolute;
    left: 31.5%;
    top: 30%;
    width: 6%;
    z-index: 6;
}
.left-mid-road .way{
    width: 100%;
}
.left-mid-road .bottom-bg{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.left-mid-road .fire-tank{
    position: absolute;
    left: 10%;
    bottom: 1.2%;
    width: 80%;

}
.left-mid-road .fire-tank .fire-bg{
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 8;
}
.left-mid-road .fire-tank .text-div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    bottom: 2px;
    z-index: 9;
    padding: 3px;
}
.left-mid-road .fire-tank .title{
    font-size: 8px;
    font-weight: 600;
    color: #F26722;
    text-align: center;
}
.left-mid-road .fire-tank .title-gray{
    font-size: 8px;
    font-weight: 500;
    text-align: center;
    color: gray;
}
.trafo{
    position: absolute;
    left: 31.5%;
    top: 65%;
    width: 6%;
    z-index: 9;
}
.trafo .trafo-bg{ 
    width: 100%;
}
.trafo-way{
    position: absolute;
    left: 30.2%;
    top: 58.5%;
    width: 8.5%;
}
.out-way{
    position: absolute;
    left: 27%;
    top: 17.2%;
    width: 43%;
}
.out-way-one{
    position: absolute;
    left: 27%;
    top: 17.2%;
    width: 42%;
}
.out-way-three{
    position: absolute;
    left: 56%;
    top: 17.2%;
    width: 15%;
}
.out-way-four{
    position: absolute;
    left: 58%;
    top: 17.2%;
    width: 14%;
}
.out-way-five{
    position: absolute;
    left: 52.5%;
    top: 17.2%;
    width: 21%;
    z-index: 5;
}
.tanker{
    position: absolute;
    top: 32%;
    width: 41%;
    left: 40%;
    z-index: 6;
}
.tanker .tanker-bg{
    width: 100%;
    z-index: 2;
    height: 199px;
}
.tanker-garden{
    position: absolute;
    z-index: 2;
    width: 18%;
    left: 0;
}
.way-control{
    position: absolute;
    top: 50.5%;
    width: 45.5%;
    left: 38.6%;
}
.control-bottom-way{
    position: absolute;
    top: 26%;
    left: 38.7%;
    width: 49%;
    height: 435px;
}
.exit-way{
    position: absolute;
    width: 20%;
    left: 68%;
    top: 17.5%;
}
.right-junction{
    position: absolute;
    left: 79%;
    top: 38%;
    width: 4%;
}
.wastewater{
    border: 2px solid #F26722;
    border-radius: 25px;
    height: 115px;
    width: 80px;
    font-size: 8px;
    text-align: center;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 68%;
    left: 80.7%;
} 
.exit-box{
    position: absolute;
    top: 59%;
    left: 88%;
    width: 7%;
}
.wastewater .title{
    color: #F26722;
    font-weight: 600;
}
.area{
    position: absolute;
    top: 73.5%;
    left: 19%;
    width: 8%;
    z-index: 5;
}
.area .area-bg{
    width: 100%;
}
.area .area-detail{
    border: 2px solid #F26722;
    background-color: white;
    width: 98%;
    position: absolute;
    left: 1%;
    top: 9%;
    height: 90%;
}
.area .area-detail .first-aid{
    position: absolute;
    left: 2%;
    width: 35%;
    top: 2%;
}
.area .area-detail .mosque{
    position: absolute;
    left: 43%;
    width: 34%;
    bottom: 2%;
}
.area .area-detail .personel-room{
    position: absolute;
    left: 2%;
    width: 40%;
    bottom: 2%;
}
.area .area-detail .fire{
    position: absolute;
    right: 2%;
    width: 33%;
    top: 2%;
}
.warehouse{
    position: absolute;
    top: 58%;
    left: 16.5%;
    width: 8%;
    z-index: 5;
}
.warehouse .warehouse-bg{
    width: 100%;
}
.administrative{
    position: absolute;
    top: 25%;
    left: 14.5%;
    width: 13%;
    z-index: 5;
}
.administrative .administrative-bg{
    width: 100%;
}
.administrative .administrative-way{
    position: absolute;
    top: 41.2%;
    left: 39.5%;
    z-index: 5;
    width: 66%;
}
.administrative .administration{
    border: 2px solid #F26722;
    padding: 10px;
    background-color: white;
    position: absolute;
    top: 5px;
    height: 163px;
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.administrative .administration .title{
    font-size: 9px;
    color: #F26722;
    font-weight: 700;
}
.administrative .administration .title-gray{
    font-size: 9px;
    color: gray;
    font-weight: 600;
    text-align: center;
}
.administrative .administration .way-white{
    background-color: white;
    width: 8px;
    height: 12px;
    display: inline-block;
    position: absolute;
    right: -7px;
    z-index: 6;
    top: 53%;
}
.warehouse-content{
    border: 2px solid #F26722;
    width: 100px;
    height: 85px;
    position: absolute;
    background-color: white;
    top: 10%;
    left: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.warehouse-content .title{
    font-size: 10px;
    color: #F26722;
    font-weight: 700;
}
.warehouse-content .title-gray{
    font-size: 10px;
    color: gray;
    font-weight: 600;
    text-align: center;
}
.warehouse .way-white{
    background-color: white;
    width: 12px;
    height: 12px;
    display: inline-block;
    position: absolute;
    z-index: 6;
    top: -5px;
}
.trafo-content{
    border: 2px solid #F26722;
    width: 77px;
    height: 90px;
    position: absolute;
    background-color: white;
    top: 12%;
    left: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.trafo-content .title{
    font-size: 7.5px;
    color: #F26722;
    font-weight: 700;
    text-align: center;
}
.trafo-content .title-gray{
    font-size: 7.5px;
    color: gray;
    font-weight: 600;
    text-align: center;
}
.trafo .detail img{
    width: 100%;
    height: 25px;
}
.trafo .detail .text-div{
    background-color: white;
    border: 1px solid #F26722;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 10%;
    width: 100%;
    height: 90%;
}
.trafo .detail .text-div .title{
    color: #F26722;
    font-size: 5px;
    text-align: center;
    font-weight: 600;
}
.trafo .detail .text-div .title-gray{
    color: gray;
    font-size: 5px;
    text-align: center;
}
.smoke{
    position: absolute;
    top: 50.2%;
    width: 3.5%;
    left: 15%;
    z-index: 6;
}
.smoke .smoke-bg{
    width: 100%;
}
.smoke .smoke-content{
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #F26722;
    position: absolute;
    top: 1%;
    left: 5%;
    width: 90%;
    height: 96%;
}
.smoke .smoke-img{
    width: 90%;
}
.smoke-way{
    background-color: white;
    width: 10px;
    height: 5px;
    position: absolute;
    top: -1px;
    left: 30%;
    z-index: 7;
}
.smoke2{
    position: absolute;
    top: 90.2%;
    width: 3.5%;
    left: 27%;
    z-index: 6;
}
.smoke2 .smoke-bg{
    width: 100%;
}
.smoke2 .smoke-content{
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #F26722;
    position: absolute;
    top: 1%;
    left: 5%;
    width: 90%;
    height: 96%;
}
.smoke2 .smoke-img{
    width: 90%;
}
.hazardous-waste{
    position: absolute;
    top: 90.4%;
    width: 12%;
    left: 31%;
    z-index: 6;
}
.hazardous-waste .hazardous-waste-bg{
    width: 100%;
}
.hazardous-waste .hazardous-waste-content{
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #F26722;
    position: absolute;
    top: 1%;
    left: 3%;
    width: 94%;
    height: 96%;
}
.frame-attention{
    width: 42%;
}
.attention{
    width: 6%;
    position: absolute;
    left: 18%;
    top: 18%;
}
.hazardous-waste .title{
    font-size:7px ;
    color: #F26722;
    text-align: center;
    font-weight: 600;
}
.hazardous-waste .title-gray{
    font-size:7px ;
    color: gray;
    text-align: center;
    font-weight: 500;
}
.hazardous-waste .text-div{
    position: absolute;
    right: 5px;
    width: 74%;
}
.hazardous-waste .waste-div{
    position: absolute;
    left: 2%;
}
.oil-filling{
    width: 125px;
    height: 90px;
    position: absolute;
    top: 27%;
    left: 61%;
    border: 2px solid #F26722;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 10px;
    z-index: 9;
    background-color: white;
}
.oil-filling .oil-filling-text{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-top: 2px solid #F26722;
    border-bottom: 2px solid #F26722;
    width: 100%;
}
.oil-filling .title{
    font-size: 7.5px;
    font-weight: 600;
    color: #F26722;
    text-align: center;
}
.oil-filling .title-gray{
    font-size: 7.5px;
    font-weight: 500;
    color: gray;
    text-align: center;
}
.oil-filling img{
    width: 30px;
    margin-bottom: 5px;
}
.oil-filling::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
      135deg, 
      rgba(0, 0, 0, 0.1), 
      rgba(0, 0, 0, 0.1) 1px, 
      transparent 0px,
      transparent 16px
    );
    z-index: 1;
    pointer-events: none;
}
.lab {
    position: absolute;
    top: 1%;
    z-index: 9;
    left: 2.5%;
    width: 15%;
}
.lab img{
    width: 100%;
}
.lab .detail{
    border: 2px solid #F26722;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: white;
    position: absolute;
    top: 2px;
    padding: 2px;
    width: 96%;
    left: 1px;
    height: 100%;
}
.lab .detail .title{
    font-size: 7px;
    font-weight: 600;
    color: #F26722;
    text-align: center;
}
.lab .detail .title-gray{
    font-size: 7px;
    font-weight: 500;
    color: gray;
    text-align: center;
}
.right-junction2{
    width: 27%;
    height: 17px;
    position: absolute;
    top: 19%;
    left: 40%;
}
.wasteOil{
    border: 2px solid #F26722;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 24%;
    left: 43%;
    width: 115px;
    height: 55px;
    z-index: 6;
    background-color: white;
}
.wasteOil .title{
    font-size: 8px;
    font-weight: 600;
    text-align: center;
    color: #F26722;
}
.wasteOil .title-gray{
    font-size: 8px;
    font-weight: 500;
    text-align: center;
    color: gray;
}
.asphalt{
    color: #F26722;
    position: absolute;
    top: 60.5%;
    left: 63%;
    font-size: 8px;
    width: 83px;
    z-index: 7;
    font-weight: 600;
    text-align: center;
}
.asphalt2{
    color: gray;
    position: absolute;
    top: 60.5%;
    left: 49%;
    font-size: 8px;
    width: 83px;
    z-index: 7;
    font-weight: 600;
    text-align: center;
}
.bridge{
    position: absolute;
    z-index: 6;
    top: 18%;
    left: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.bridge .bridge-box{
    width: 85px;
    height: 23px;
    border: 2px solid #F26722;
}
.bridge .title{
    font-size: 9px;
    color: #F26722;
    font-weight: 600;
    text-align: center;
}
.bridge .title-gray{
    font-size: 9px;
    color: gray;
    font-weight: 600;
    text-align: center;
    position: relative;
    top: -4px;
}
.car-security{
    position: absolute;
    left: 20%;
    z-index: 7;
    top: -6px;
    width: 95%;
}
.car-security img{
    width: 100%;
}
.peoples-img{
    width: 4.5%;
    position: absolute;
    top: 9%;
    left: 21%;
    z-index: 9;
}
.peoples-img2{
    width: 4%;
    position: absolute;
    top: 52%;
    left: 93%;
    z-index: 9;
}
.workshop{
    width: 4.5%;
    left: 22.3%;
    top: 89%;
    position: absolute;
    z-index: 9;
}
.workshop-bg{
    width: 100%;
}
.workshop .detail {
    width: 96%;
    left: 2%;
    height: 98%;
    border: 2px solid #F26722;
    position: absolute;
    top: 1%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.workshop .detail .title{
    font-size: 7px;
    color: #F26722;
    font-weight: 600;
    text-align: center;
}
.workshop .detail .title-gray{
    font-size: 7px;
    color: gray;
    font-weight: 600;
    text-align: center;
}
.up-div{
    position: absolute;
    left: 40%;
    top: 0;
    height: 700px;
    transform: rotate(-17deg);
}
.up-div .up{
    width: 10%;
    transform: rotate(15deg);
    position: relative;
    left: 23%;
    top: 9%;
}
.up-div .up2{
    width: 10%;
    transform: rotate(15deg);
    position: relative;
    left: 13%;
    top: 40%;
}
.up-div .up3{
    width: 10%;
    transform: rotate(15deg);
    position: relative;
    left: 1%;
    top: 65%;
}
.up-div .up4{
    width: 10%;
    transform: rotate(15deg);
    position: relative;
    left: -12%;
    top: 91%;
}
.down-div{
    position: absolute;
    left: 30%;
    top: 0;
    height: 700px;
    transform: rotate(-17deg);
}
.down-div .down{
    width: 8%;
    transform: rotate(15deg);
    position: relative;
    left: 28%;
    top: 3%;
}
.down-div .down2{
    width: 8%;
    transform: rotate(15deg);
    position: relative;
    left: 19%;
    top: 26%;
}
.down-div .down3{
    width: 8%;
    transform: rotate(15deg);
    position: relative;
    left: 9.5%;
    top: 56%;
}
.down-div .down4{
    width: 8%;
    transform: rotate(15deg);
    position: relative;
    left: 0%;
    top: 77%;
}
.tanker-park{
    background-color: transparent;
    border: 1px solid black;
    border-left: none;
    transform: rotate(-17deg);
    position: absolute;
    top: 40%;
    width: 13px;
    height: 102px;
    left: 37%;
}
.tanker-park span{
    transform: rotate(91deg);
    position: absolute;
    top: 40%;
    right: -34px;
    font-weight: 700;
    font-size: 7px;
    width: 80px;
    color: white;
}
.tanker-park2{
    background-color: transparent;
    border: 1px solid black;
    border-left: none;
    transform: rotate(-17deg);
    position: absolute;
    top: 75%;
    width: 13px;
    height: 102px;
    left: 63.5%;
}
.tanker-park2 span{
    transform: rotate(91deg);
    position: absolute;
    top: 40%;
    right: -34px;
    font-weight: 700;
    font-size: 7px;
    width: 80px;
    color: white;
}
.tanker-park3{
    background-color: transparent;
    border: 1px solid black;
    border-left: none;
    transform: rotate(-17deg);
    position: absolute;
    top: 10%;
    width: 13px;
    height: 102px;
    left: 14%;
}
.tanker-park3 span{
    transform: rotate(91deg);
    position: absolute;
    top: 40%;
    right: -34px;
    font-weight: 700;
    font-size: 7px;
    width: 80px;
    color: white;
}
.left-ent{
    width: 2%;
    position: absolute;
    top: 17%;
    left: 8%;
    z-index: 9;
}
.right-ent{
    width: 2%;
    position: absolute;
    top: 18.5%;
    left: 8%;
    z-index: 9;
}
.right1{
    position: absolute;
    width: 3%;
    left: 16.5%;
    top: 19%;
    z-index: 9;
}
.left1{
    position: absolute;
    width: 3%;
    left: 17%;
    top: 16.3%;
    z-index: 9;
}
.left2{
    position: absolute;
    width: 3%;
    left: 33%;
    top: 16.3%;
    z-index: 9; 
}
.left3{
    position: absolute;
    width: 3%;
    left: 47%;
    top: 16.3%;
    z-index: 9; 
}
.left4{
    position: absolute;
    width: 3%;
    left: 60%;
    top: 16.3%;
    z-index: 9; 
}
.right2{
    position: absolute;
    width: 3%;
    left: 40%;
    top: 23.3%;
    z-index: 9;
}
.right3{
    position: absolute;
    width: 3%;
    left: 57%;
    top: 23.3%;
    z-index: 9;
}
.tank-frame{
    width: 100%
}
.tank-area{
    width: 88%;
    position: absolute;
    top: 1%;
    left: 5%;
    z-index: 9;
}
.tank-area .ex{
    position: absolute;
    text-align: center;
    top: 38%;
    left: 45%; 
    width: 10%;
}
.tank-area .title{
    font-size: 11px;
    color: #F26722;
    font-weight: 600;
    position: absolute;
    text-align: center;
    top: 55%;
    left: 40%;
}
.tank-area .title-gray{
    font-size: 11px;
    color: gray;
    font-weight: 600;
    text-align: center;
    position: absolute;
    top: 65%;
    left: 41.5%;
}
.exit{
    position: absolute;
    top: 71%;
    width: 7%;
    left: 93.3%;
    z-index: 9;
}
.exit .exit-icon{
    position: absolute;
    top: 63%;
    width: 20%;
    left: 63%;
}
.exit .text-div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    position: absolute;
    top: 27%;
    left: 25%;
    transform: rotate(48deg);
}
.exit .small{
    font-size: 6px;
    font-weight: 600;
}
.exit .big{
    font-size: 8px;
    font-weight: 600;
}
.exit img{
    width: 100%;
}
.exitway{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    position: absolute;
    top: 77.6%;
    left: 95%;
    transform: rotate(-41deg);
    background-color: white;
    z-index: 8;
    width: 65px;
    height: 20px;
}
.sample{
    position: absolute;
    top: 25%;
    left: 34%;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.sample .title{
    font-size: 7px;
    color: #F26722;
    font-weight: 600;
    text-align: center;
}
.sample .title-gray{
    font-size: 7px;
    color: gray;
    font-weight: 600;
    text-align: center;
}
.down-black1{
    position: absolute;
    top: 30%;
    width: 0.8%;
    left: 29.9%;
    z-index: 9;
}
.down-black2{
    position: absolute;
    top: 65%;
    width: 0.8%;
    left: 29.9%;
    z-index: 9;
}
.up-black1{
    position: absolute;
    top: 30%;
    width: 0.8%;
    left: 38.3%;
    z-index: 9;
}
.up-black2{
    position: absolute;
    top: 65%;
    width: 0.8%;
    left: 38.3%;
    z-index: 9;
}
.rd-1{
    position: absolute;
    left: 55%;
    width: 2.4%;
    z-index: 9;
    top: 28%;
}
.rd-2{
    position: absolute;
    left: 74.8%;
    width: 2.4%;
    z-index: 9;
    top: 34%;
    transform: rotate(3deg);
}
.rd-3{
    position: absolute;
    left: 81.6%;
    width: 2.4%;
    z-index: 9;
    top: 48%;
    transform: rotate(2deg);
}
.lu-1{
    position: absolute;
    left: 79.8%;
    width: 2.4%;
    z-index: 9;
    top: 37%;
    transform: rotate(2deg);
}
.left5{
    position: absolute;
    width: 3%;
    left: 45%;
    top: 61.5%;
    z-index: 9;
}
.left6{
    position: absolute;
    width: 3%;
    left: 70%;
    top: 61.3%;
    z-index: 9; 
}
.left7{
    position: absolute;
    width: 3%;
    left: 64%;
    top: 87.3%;
    z-index: 9;
}
.tanker1{
    position: absolute;
    top: 1%;
    width: 7%;
    left: 5%;
    transform: rotate(162deg);
    z-index: 30;
}
.tanker2{
    position: absolute;
    top: 34%;
    width: 7%;
    left: 37.5%;
    transform: rotate(162deg);
    z-index: 30;
}
.tanker3{
    position: absolute;
    top: 50%;
    width: 7%;
    left: 56.9%;
    transform: rotate(-18deg);
    z-index: 30;
}
.tanker4{
    position: absolute;
    top: 14.5%;
    left: 22.5%;
    z-index: 30;
    width: 1.5%;
    transform: rotate(90deg);
}
.tanker5{
    position: absolute;
    top: 11.5%;
    left: 28%;
    z-index: 30;
    width: 1.6%;
    transform: rotate(-90deg);
}
.tanker6{
    position: absolute;
    top: 11.5%;
    left: 55%;
    z-index: 30;
    width: 1.6%;
    transform: rotate(-90deg);
}
.tanker7{
    position: absolute;
    top: 16.2%;
    left: 30%;
    z-index: 30;
    width: 1.1%;
    transform: rotate(-130deg);
}
.tanker8{
    position: absolute;
    top: 19.2%;
    left: 37%;
    z-index: 30;
    width: 1.1%;
    transform: rotate(104deg);
}
.tanker9{
    position: absolute;
    top: 39.2%;
    left: 29.4%;
    z-index: 30;
    width: 1.6%;
    transform: rotate(180deg);
}
.tanker10{
    position: absolute;
    top: 73%;
    left: 29.4%;
    z-index: 30;
    width: 1.6%;
    transform: rotate(180deg);
}
.tanker11{
    position: absolute;
    top: 73%;
    left: 37.8%;
    z-index: 30;
    width: 1.6%;
}
.tanker12{
    position: absolute;
    top: 43%;
    left: 37.8%;
    z-index: 30;
    width: 1.6%;
}
.tanker13{
    position: absolute;
    top: 82.5%;
    left: 34.1%;
    z-index: 30;
    width: 1.6%;
    transform: rotate(90deg);
}
.tanker14{
    position: absolute;
    top: 82.5%;
    left: 54.1%;
    z-index: 30;
    width: 1.6%;
    transform: rotate(-90deg);
}
.tanker15{
    position: absolute;
    top: 82.5%;
    left: 74.1%;
    z-index: 30;
    width: 1.6%;
    transform: rotate(-90deg);
}
.tanker16{
    position: absolute;
    top: 56.5%;
    left: 76.1%;
    z-index: 30;
    width: 1.6%;
    transform: rotate(-90deg);
}
.tanker17{
    position: absolute;
    top: 56.5%;
    left: 58.1%;
    z-index: 30;
    width: 1.6%;
    transform: rotate(-90deg);
}
.tanker18{
    position: absolute;
    top: 56.5%;
    left: 41%;
    z-index: 30;
    width: 1.6%;
    transform: rotate(-90deg);
}
.tanker20{
    position: absolute;
    top: 37.5%;
    left: 78.5%;
    z-index: 30;
    width: 1.6%;
    transform: rotate(135deg);
}
.tanker21{
    position: absolute;
    top: 24.5%;
    left: 75.4%;
    z-index: 30;
    width: 1.6%;
    transform: rotate(-44deg);
}
.tanker22{
    position: absolute;
    top: 18.8%;
    left: 62%;
    z-index: 30;
    width: 1.5%;
    transform: rotate(90deg);
}
.tanker23{
    position: absolute;
    top: 24.8%;
    left: 59%;
    z-index: 6;
    width: 1.6%;
    transform: rotate(90deg);
}

.btn-top{
    width: 180px;
    margin-top: 15px;
    padding: 5px 10px;
    border: none;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.btn-top span{
    width: 120px;
    background-color: white;
    border-radius: 20px;
    font-size: 14px;
    padding: 3px;
}
.btn-green{
    background-color: green;
}
.btn-orange{
    background-color: orange;
}
.btn-blue{
    background-color: blue;
}
.btn-violet{
    background-color: blueviolet;
}
.btn-purple{
    background-color: purple;
}
.btn-peru{
    background-color: peru;
}
.btn-pink{
    background-color: pink;
}
.btn-green span{
    box-shadow: 5px 0px 0px 1px #005a00;
}
.btn-orange span{
    box-shadow: 5px 0px 0px 1px rgb(173, 113, 1)
}
.btn-blue span{
    box-shadow: 5px 0px 0px 1px rgb(0, 0, 161)
}
.btn-violet span{
    box-shadow: 5px 0px 0px 1px rgb(182, 0, 182)
}
.btn-purple span{
    box-shadow: 5px 0px 0px 1px rgb(92, 0, 92)
}
.btn-peru span{
    box-shadow: 5px 0px 0px 1px rgb(180, 91, 3)
}
.btn-pink span{
    box-shadow: 5px 0px 0px 1px rgb(240, 121, 141)
}
.waste-right{
    width: 34.5%;
    position: absolute;
    top: -4.5px;
    right: -5.9%;
    z-index: 0;
}
.waste-right .img-bg{
    width: 100%
}
.waste-right .waste-right-content{
    position: absolute;
    top: 29%;
    right: 14%;
}
.waste-right .waste-right-content img{
    width: 23%;
    position: relative;
    top: -10px;
    right: 36%;
}
.waste-right .waste-right-content .content-div{
    border: 2px solid #F26722;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100px;
    right: 40%;
    background-color: white;
    position: relative;
}
.waste-right .waste-right-content .content-div .title{
    color: #F26722;
    font-weight: 600;
    text-align: center;
    font-size: 8px;
}
.waste-right .waste-right-content .content-div .title-gray{
    color: rgb(26, 26, 26);
    font-weight: 600;
    text-align: center;
    font-size: 8px;
}
.grass{
    width: 93px;
    height: 27px;
    background-color: #69BE56;
    display: inline-block;
    position: absolute;
    left: 98.8%;
    top: 66%;
    transform: rotate(-42deg);
}
@media (max-width:1440px){
    .container.mt-5{
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .plan{
        width: 1420px;
    }
}