.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: 'Bebas Neue', cursive;
max-width:100%; 
height:auto; 
overflow:hidden;
margin:0 0;
padding:36px 0px 30px 0px;
background-color:#1b3157;
color:#ffffff;
font-size:90px;
font-weight:bold;
text-align:center;
text-decoration:none;
text-transform:uppercase;
letter-spacing:0.02em;
line-height:1.0;
position:relative;
cursor:pointer;
opacity:1.00;
transition:450ms;
display:block;
}       

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



.banner-03 {
background-color:#ffffff;	
display:block;
width:100%;
height:auto;
opacity:1.00;
transition:650ms;
}

.banner-04 {
background-color:#ffffff;		
display:none;
width:100%;
height:auto;
}




.banner-spacer-01 {
width:5px;	
height:20px; 
display:block;
}       

.banner-spacer-02 {
width:5px;	
height:70px; 
display:block;
}       






@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;
}         


.banner-02 {
padding:35px 0px 30px 0px;
font-size:85px;
}  

.banner-02:hover {
padding:35px 0px 30px 75px;
}    


.banner-spacer-01 {
width:5px;	
height:20px; 
display:block;
}       

.banner-spacer-02 {
width:5px;	
height:70px; 
display:block;
}       

}



/* 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;
}    


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

.banner-02:hover {
padding:30px 0px 27px 70px;
}  


.banner-spacer-01 {
height:20px; 
}       

.banner-spacer-02 {
height:60px; 
} 
  

}




/* 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;
}    


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

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

.banner-spacer-01 {
height:19px; 
}       

.banner-spacer-02 {
height:55px; 
}   


}




/* 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;
}    


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

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

.banner-spacer-01 {
height:19px; 
}       

.banner-spacer-02 {
height:42px; 
}   

}





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



}




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

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

.banner-01:hover {
padding:31px 0px 30px 65px;
} 


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

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

.banner-spacer-01 {
height:19px; 
}       

.banner-spacer-02 {
height:37px; 
}   


}






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

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

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

.banner-spacer-01 {
height:17px; 
}       

.banner-spacer-02 {
height:33px; 
}   


}




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

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

.banner-01:hover {
padding:30px 0px 29px 65px;
} 


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

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

}




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

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

.banner-01:hover {
padding:30px 0px 29px 63px;
} 


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

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

.banner-spacer-01 {
height:16px; 
}       

.banner-spacer-02 {
height:30px; 
}   


}




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

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

.banner-01:hover {
padding:30px 0px 29px 62px;
}  


.banner-02 {
padding:30px 0px 29px 0px;
font-size:55px;
}  

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

.banner-spacer-01 {
height:15px; 
}       

.banner-spacer-02 {
height:35px; 
}   

}





@media only screen and (max-width: 700px) {
	
.banner-01 {
margin:20px 0;
padding:30px 0px 29px 0px;
font-size:30px;
}   

.banner-01:hover {
padding:30px 0px 29px 60px;
}  


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

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

.banner-spacer-01 {
height:16px; 
}       

.banner-spacer-02 {
height:32px; 
}   


}





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

.banner-01 {
margin:20px 0;
padding:29px 0px 28px 0px;
font-size:35px;
letter-spacing:0.02em;
}   

.banner-01:hover {
padding:29px 0px 28px 60px;
}  


.banner-02 {
padding:29px 0px 26px 0px;
font-size:70px;
letter-spacing:0.01em;
}   

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

.banner-hide {
display:none;
}  



@media only screen and (max-width: 550px) {
	
.banner-01 {
margin:20px 0;
padding:28px 0px 27px 0px;
font-size:33px;
letter-spacing:0.02em;
}   

.banner-01:hover {
padding:28px 0px 27px 55px;
}  
	
	
.banner-02 {
padding:28px 0px 27px 0px;
font-size:68px;
letter-spacing:0.02em;
}   

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

.banner-03 {
display:none;
}

.banner-04 {
display:block;
width:100%;
height:auto;
}

.banner-spacer-01 {
height:12px; 
}       

.banner-spacer-02 {
height:27px; 
}   
	
	
}




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

.banner-01 {
margin:19px 0;
padding:27px 0px 26px 0px;
font-size:32px;
letter-spacing:0.015em;
}      

.banner-01:hover {
padding:27px 0px 26px 52px;
}  


.banner-02 {
padding:27px 0px 26px 0px;
font-size:65px;
letter-spacing:0.015em;
}      

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

.banner-spacer-01 {
height:12px; 
}       

.banner-spacer-02 {
height:25px; 
}   

}




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

.banner-01 {
margin:18px 0;
padding:27px 0px 26px 0px;
font-size:29px;
letter-spacing:0.01em;
}    

.banner-01:hover {
padding:27px 0px 26px 50px;
}  


.banner-02 {
padding:27px 0px 26px 0px;
font-size:60px;
letter-spacing:0.01em;
}    

.banner-02:hover {
padding:27px 0px 26px 50px;
}  
  
  

}




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

.banner-01 {
margin:17px 0;
padding:26px 0px 25px 0px;
font-size:24px;
letter-spacing:0.0em;
}  

.banner-01:hover {
padding:26px 0px 25px 40px;
} 


.banner-02 {
padding:26px 0px 25px 0px;
font-size:55px;
letter-spacing:0.0em;
}  

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

.banner-spacer-01 {
height:12px; 
}       

.banner-spacer-02 {
height:30px; 
}            

}




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

.banner-01 {
margin:16px 0;
padding:25px 0px 24px 0px;
font-size:22px;
letter-spacing:0.005em;
}  

.banner-01:hover {
padding:25px 0px 24px 35px;
}     


.banner-02 {
padding:25px 0px 24px 0px;
font-size:48px;
letter-spacing:0.005em;
}  

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

}




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

.banner-01 {
margin:15px 0;
padding:24px 0px 23px 0px;
font-size:20px;
letter-spacing:0.000em;
}    

.banner-01:hover {
padding:24px 0px 23px 30px;
}   
  

.banner-02 {
padding:24px 0px 23px 0px;
font-size:45px;
letter-spacing:0.000em;
}    

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

}




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

.banner-01 {
margin:15px 0;
padding:22px 0px 21px 0px;
font-size:19px;
letter-spacing:0.000em;
}  

.banner-01:hover {
padding:22px 0px 21px 26px;
}   


.banner-02 {
padding:22px 0px 21px 0px;
font-size:42px;
letter-spacing:0.000em;
}  

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

}