byd.css

*{
     box-sizing: border-box;
     margin: 0;
}
 div{
     font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
     color: azure; 
    }
 h5{
     font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
 }
 h1{
     font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 }
 .col{
   color: #999999;
 }
 .header_one{
   width: 100%;
   height: 39px;
   background-color:#252728;
   font-family:  Arial, "Helvetica Neue", Helvetica, sans-serif;
   font-size: 14px;
   line-height: 38px;
   letter-spacing: normal;
   display: flex;
   justify-content: end;
   padding-right: 80px;
   opacity: 80%;
   z-index: 2;
 }
 .child_head_one{    
   display: flex;
   justify-content: space-around;
   align-items: center;
   color: azure;
   width: 123px;
   height: 39px;
 }
 .child_head_one:hover{
   background-color: #fff;
 }
 .child_head_one:hover div{
   color: #000!important;

 }

 .child_head_two{
     color: azure;
     display: flex;
     justify-content: space-around;
     align-items: center;
     width: 245px;
     height: 39px;
 }
  .child_head_two:hover{
      background-color: #fff;
  }
  .child_head_two:hover div{
      color: #000!important;

  }
 .header_two{
    width: 100%;
    height: 64px;
    background-color: #252728;
    opacity: 80%;
    display: flex;
    align-items: center;
    padding-left: 50px;
    position: sticky;
    top: 0;
    z-index: 1;   
 }
 #asd{
     width: 104px;
     height: 24px;    
 }

 .in_header{
     position: relative;
     left: 425px;
     width: 376px;
     height: 64px;
     display: flex;
     align-content: center;
     justify-content:space-around;
     align-items: center;    
 }
 .letter{
     color:white;
     font-size:50px;
     z-index: 1;
 }
 .pop_up_one{
     display: flex;
     width: 100%;
     height: 200px;
     justify-content: space-between;
     padding-left: 50px;
     padding-right: 200px;
     padding-top: 30px;
 }
 .sub_pop{
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     width: 150px;
     height: 150px;
     padding-top: 10px;    
 }
 .bg{margin-left: 40px;
     color: #000;
 }
 
 .pop_up_two{
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 200px;
     justify-content: space-between;
     padding-left: 50px;
     padding-right: 200px;
     padding-top: 30px;
 }
 .sub_pop_one{
     width: 100%;
     height: 50px;
     display: flex;
     padding-left: 10px;
     align-items: center;
 }
 .sub_pop_count{
     color: #000;
     padding: 100px;
     transition: 1s;
 }
 .sub_pop_count:hover{
     transform:translateX(1.6) ;
 }
 
 .sub_pop_count_one{
     padding: 40px;
     color: #999999;
 }
 .sub_pop_two{
     
     height: 50px;
     display: flex;
     
     padding-left: 10px;
     align-items: center;
 }
 
 .parent{
  width: 100%;
  height: 2657px;
  background-color: rgb(231, 223, 223);
  display: grid;
  grid-template-rows: repeat(20,1fr);
  grid-template-columns: repeat(20,1fr);
  row-gap: 2px;
  column-gap: 2px;
}
 .child_one{
    grid-area: 1/1/7/21;
    overflow: hidden;
    position: relative;
    
 }
#img_one{
     width: 100%;
     height: 100%;
     background-position:center;
     position: absolute;
     inset: 0;
     background-size: cover;
     background-image: url(homepage\ han.jpg);
     transition: 35s;
     background-repeat: no-repeat;
 }
 #img_one:hover{
     transform: scale(1.5);
 }

 .child_two{
     grid-area: 7/1/13/21;
     background-color: rgb(92, 27, 152);
     overflow: hidden;
     position: relative;
 }  
 #img_two{
     height: 100%;
     width: 100%;
     background-position:center;
     background-size: cover;
     position: absolute;
     inset: 0;
     background-image: url(BYD\ DISENO\ \(3\).jpg);
     transition: 35s;
     background-repeat: no-repeat;
 }
 #img_two:hover{
     transform: scale(1.5);
 }
 #two{
     margin-top: 450px;
     width: 200px;
     height: 48px;
     background:transparent;
     color:white;
     border-color: white;
     font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
     font-weight: lighter;
     z-index: 1;
 }
 #two:hover{
     background-color: white;
     color: #000;
 }

 .child_three{
     grid-area: 13/1/17/11;
     background-color: #000;
     overflow: hidden;
     position: relative;
 }
 #img_three{
     width: 100%;
     height: 100%;
     background-position:center;
     position: absolute;
     inset: 0;
     background-size: cover;
     background-image: url(news-pc.jpg);
     transition: .50s;
     background-repeat: no-repeat;
 }
 #img_three:hover{
     transform: scale(1.05);
 }

 .child_four{
     grid-area: 13/11/17/21;
     background-color: rgb(110, 216, 23);
     overflow: hidden;
     position: relative;
 }
 #img_four{
     width: 100%;
     height: 100%;
     position: absolute;
     inset: 0;
     background-position:center;
     background-size: cover;
     background-image: url(contact-pc.jpg);
     transition: .50s;
     background-repeat: no-repeat;
     z-index: 0;
 }
 #img_four:hover{
     transform: scale(1.05);
 }
 .news{
     font-size: xx-large;
     margin-top: 300px;
     z-index: 1;
 }
 .child_five{
     grid-area: 17/1/21/21;
     background-color: rgb(228, 162, 7);
     overflow: hidden;
 }
 #img_five{
     width: 100%;
     height: 100%;
     background-position:center;
     background-size: cover;
     background-image: url(bottom-bannerPC.jpg);
     transition: 35s;
     background-repeat: no-repeat;
 }
 .footer{background-color:#252728;
     
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     width: 100%;
     height: 194px;
 }
 .footer_one{
     width: 1370px;
     height: 200px;
     display: flex;
     justify-content: space-between;
     padding-left: 50px;
     margin-left:30px;
     
     border-color: aqua;
     
 }
 .f_one_one{
     display: flex;
     justify-content: space-between;
     align-items: center;
     
     
 
 }

 .footer_two{
     height: 94px;
     display: inline-block;
     margin: auto;
     margin-top: 20px;
     color: #999999;
    
 }

 .child_four {
     position: relative;
 }
 .test{
     position: absolute;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, .3);
     inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     padding-top: 10%;
     padding-bottom: 10%;     
 }
 button{
     
     width: 200px;
     height: 48px;
     background:transparent;
     color:white;
     border-color: white;
     font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
     font-weight: lighter;
     z-index: 1;
 }
 button:hover{
     background-color: white;
     color: #000;
 }
 .text_{
     padding: 10px;
     color: white;
     font-weight: lighter;
     font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
     
 }
 .text_:hover{
     color: #999999;
 }

 hr{margin-left:80px ;
     margin-right:80px;     
     border: none;
     border-top: 1px solid #999999 ;
 }
 .follow:hover{
     color: #999999;
 }
 .icons{
     display: flex;
     justify-content: space-between;
     width: 153px;
     padding-left: 20px;
 }
 .iconn:hover{
     color: #999999;
 }

 .f_one_two{
     display: flex;
     
     align-items: center;
     width: 268px;
 }
 .header_one {
     position: relative;
 }

 .dropdown {
     position: absolute;
     top: 39px;
     height: auto;
     left: 0;
     width: 100%;
     display: none;
     z-index: 3;
     background: #fff;
     opacity: 1;
 }

 .pop_up_two {
     background: #fff;
 }

 .has-child:hover .dropdown{
     display: flex;
 }
 .head_childs:hover{
     color: #999999;
 }