.banner-01 {
font-family: 'Kanit', sans-serif;
max-width:100%; 
height:auto; 
overflow:hidden;
margin:20px 0;
padding:38px 0px 36px 0px;
background-color:#ffffff;
color:#174378;
font-size:45px;
font-weight:bold;
text-align:center;
text-decoration:none;
text-transform:uppercase;
letter-spacing:0.05em;
line-height:1.0;
position:relative;
cursor:pointer;
opacity:1.00;
transition:450ms;
display:block;
}       

.banner-01:hover {
background-color:#ffffff;
color:#1f69c0;
padding:38px 0px 36px 80px;
text-decoration:none;
opacity:1.00;
transition:650ms;
}       



.banner-02 {
font-family: 'Kanit', sans-serif;
max-width:100%; 
height:auto; 
overflow:hidden;
margin:0 0;
padding:50px 0px 50px 0px;
background-color:#5087c7;
color:#ffffff;
font-size:55px;
font-weight:bold;
text-align:center;
text-decoration:none;
text-transform:uppercase;
letter-spacing:0.05em;
line-height:1.0;
position:relative;
cursor:pointer;
opacity:1.00;
transition:450ms;
display:none;
}       

.banner-02:hover {
background-color:#0f1a26;
color:#ffffff;
padding:50px 0px 50px 80px;
text-decoration:none;
opacity:1.00;
transition:650ms;
}     







@media only screen and (max-width: 1800px) {



}



/* 1680 x 1050 */
@media only screen and (max-width: 1700px) {
	
.banner-01 {
margin:20px 0;
padding:37px 0px 36px 0px;
font-size:43px;
}  

.banner-01:hover {
padding:37px 0px 36px 75px;
}         



}



/* 1600 x 900 */
@media only screen and (max-width: 1600px) {



}



/* 1536 x 864 */
@media only screen and (max-width: 1550px) {

.banner-01 {
margin:20px 0;
padding:34px 0px 33px 0px;
font-size:40px;
}      

.banner-01:hover {
padding:34px 0px 33px 70px;
}    


}




/* 1440 x 900 */
@media only screen and (max-width: 1460px) {

.banner-01 {
margin:20px 0;
padding:34px 0px 33px 0px;
font-size:38px;
}  

.banner-01:hover {
padding:34px 0px 33px 70px;
}    





}




/* 1366 x 768 & 1366 x 760 */
@media only screen and (max-width: 1390px) {



}




/* 1280 x 800 */
@media only screen and (max-width: 1300px) {

.banner-01 {
margin:20px 0;
padding:32px 0px 31px 0px;
font-size:37px;
}  

.banner-01:hover {
padding:32px 0px 31px 70px;
}    


}





@media only screen and (max-width: 1200px) {



}




@media only screen and (max-width: 1100px) {



}






/* 1024 x 768 */
@media only screen and (max-width: 1050px) {

.banner-02 {
padding:25px 0px 25px 0px;
font-size:28px;
display:block;
}  

.banner-02:hover {
padding:25px 0px 25px 65px;
} 

}




/* 960 x 600 */
@media only screen and (max-width: 980px) {

.banner-02 {
padding:24px 0px 24px 0px;
font-size:28px;
}  

.banner-02:hover {
padding:24px 0px 24px 65px;
} 

}




@media only screen and (max-width: 900px) {

.banner-02 {
padding:23px 0px 23px 0px;
font-size:27px;
}  

.banner-02:hover {
padding:23px 0px 23px 63px;
} 

}




/* 800 x 1280 & 768 x 1024 */
@media only screen and (max-width: 810px) {

.banner-02 {
padding:21px 0px 21px 0px;
font-size:26px;
}  

.banner-02:hover {
padding:21px 0px 21px 62px;
} 

}





@media only screen and (max-width: 700px) {

.banner-02 {
padding:19px 0px 19px 0px;
font-size:25px;
}  

.banner-02:hover {
padding:19px 0px 19px 60px;
}  


}





/* 600 x 960 */
@media only screen and (max-width: 620px) {

.banner-02 {
padding:17px 0px 17px 0px;
font-size:23px;
}  

.banner-02:hover {
padding:17px 0px 17px 57px;
}  





@media only screen and (max-width: 550px) {
	
.banner-02 {
padding:17px 0px 17px 0px;
font-size:23px;
}   

.banner-02:hover {
padding:17px 0px 17px 55px;
}  
	
	
}




/* 480 x 853 */
@media only screen and (max-width: 500px) {

.banner-02 {
padding:16px 0px 16px 0px;
font-size:21px;
}      

.banner-02:hover {
padding:16px 0px 16px 52px;
}  

 

}




/* 412 x 732 & 414 x 736 (iPhone) */
@media only screen and (max-width: 430px) {

.banner-02 {
padding:16px 0px 16px 0px;
font-size:20px;
}    

.banner-02:hover {
padding:16px 0px 16px 45px;
}  
  

}




/* 360 x 740 & 375 x 812 */
@media only screen and (max-width: 380px) {

.banner-02 {
padding:15px 0px 15px 0px;
font-size:20px;
}  

.banner-02:hover {
padding:15px 0px 15px 40px;
}    

.banner-hide {
display:none;
}        

}




/* 320 x 568 */
@media only screen and (max-width: 330px) {

.banner-02 {
padding:15px 0px 15px 0px;
font-size:19px;
}  

.banner-02:hover {
padding:15px 0px 15px 32px;
}       

}




@media only screen and (max-width: 300px) {

.banner-02 {
padding:14px 0px 14px 0px;
font-size:18px;
}  

.banner-02:hover {
padding:14px 0px 14px 28px;
}     

}




@media only screen and (max-width: 280px) {

.banner-02 {
padding:14px 0px 14px 0px;
font-size:17px;
}  

.banner-02:hover {
padding:14px 0px 14px 20px;
}   

}