@media screen and (max-width:630px) and (min-width:425px)
{
    .slogan{
        font-size: 3.2rem;
        margin-top: 45px;
      }
      
      /* branches */
    
    .branches-bg{
        height: 570px;
     }
     .box{
        display:block;
        width:50%;
        height: 290px;
        margin: 20px 25% 0 25%;
      }
    .bsc{
        margin-top: 200px;
    }
    .branchbtn,.materialbtn {
        width:100%;
        height: 80px;
        font-size:2.2rem ;
    }
    .branch-content {
        width: 80%;
    } 
    .branch-content a {
        font-size: 1.6rem;       
    }

    /* review */
    .container-fluid{
        width: 70%;
    }
    .home-testimonial{
        height: 1100px;
    }
        
        
    /* years */
    .fesubbtn, .sesubbtn, .besubbtn, .tesubbtn{
        font-size: 2rem;
     }    
    .fesub_ul a,.sesub_ul a,.tesub_ul a,.besub_ul a {
        width: 30%;
        height: 60px;
        display: inline-block;
        margin: 2.5% 0.6% ;
        font-size: 1.5rem;
     }
    
    .fesub_li,.sesub_li,.tesub_li,.besub_li{
        margin-top: 10px;
    }
    
    .fesub_ul a:hover,.sesub_ul a:hover,.sesub_ul a:hover,.tesub_ul a:hover,.besub_ul a:hover {background-color: #ddd;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
    .fesub:hover .fesub_ul,.sesub:hover .sesub_ul,.tesub:hover .tesub_ul,.besub:hover .besub_ul {display: inline-block;}
    .fesub:hover .fesubbtn,.sesub:hover .sesubbtn,.tesub:hover .tesubbtn,.besub:hover .besubbtn{background-color: #8ee0ff;color:#000; box-shadow: 0px 8px 16px 0px rgba(0,0,0,.4);}
    


    /* materials */
    .spec-box{
        margin-top: 90px;
    }
    .box-1{
        margin-top: 180px;
    }
    .material-content {
        width: 70%;
        margin: 0 15%;
    }   
    
}


/*460-0  */
@media screen and (max-width:460px) and (min-width:0px)
{
    .slogan{
        font-size: 2.5rem;
        margin-top: 30px;
      }

    /* branches */
    .branches-bg{
        height: 580px;
     }
    .box{
        display:block;
        width:60%;
        height: 250px;
        margin: 20px 20% 0 20%;
   }
    .bsc{
        margin-top: 150px;
    }
    .branchbtn {
        width:100%;
        height: 70px;
        font-size:1.6rem;
    }
    .branch-content {
        width: 70%;
        margin: 0 15%;
    } 
    .branch-content a {
        font-size: 1.4rem;
        height: 50px;       
    }
    .home-testimonial{
        height: 1050px;
    }

    /* years */
    .fesubbtn, .sesubbtn, .besubbtn, .tesubbtn{
        width: 100%;
        height: 70px;
        font-size: 1.6rem;
    }      
    .fesub,.sesub,.tesub,.besub {
        background-color: yellow;
        width: 30%;
        margin: 50px 0 0 13%;
    }

    .fesub_ul,.sesub_ul,.tesub_ul,.besub_ul {
        min-width: 200%;
     }
    .fesub_ul,.tesub_ul{
        margin:70px -78% ;
    }
    .sesub_ul,.besub_ul{
        margin: 70px -215% ;
    }  
    .fesub_ul a,.sesub_ul a,.tesub_ul a,.besub_ul a {
        width: 47%;
        margin: 2.5% 0.6% 2.5% -3%;
        font-size: 1.5rem;
    }  
    
    /* materials */
    .spec-box{
        margin-top: 160px;
    }
    .material-content {
        width: 70%;
        margin: 0 15%;
    } 

      
}