/* ================
 * TV Screen col-12
   ================ */

#banner {
	background: #1b222a;
	position: relative;
}
/* ================
 * TV Screen col-12
   ================ */
/* .tv-image-bg.QRCODEMB-col-12 {
	background: #1b222a url('_1440x500-Template-bg.jpg') top center no-repeat;
} */

.body{
	font-family: Noto Sans Thai, Lato;
	font-weight:bold;
}
.QRCODEMB-col-12 .copy-title {
	  	font-family: Noto Sans Thai;
	color: white;
	font-size: 3em;
	text-align: center;
	line-height: 1.2em;
	background: #ff9200;
	padding: 5px;
	padding-right: 25px;
	padding-left: 25px;
	border-radius: 0.3em;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.44);
}



.QRCODEMB1-col-12 .copy-title {
	font-family: Noto Sans Thai;
  color: white;
  font-size: 1.5em;
  text-align: center;
  line-height: 1.8em;
  background: #767171;
  padding: 5px;
  padding-right: 25px;
  padding-left: 25px;
  border-radius: 0.3em;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.44);
}




/* .tv-image-bg.QRCODEMB-col-12 .copy-title {
	color: white;
	font-size: 4em;
	text-align: center;
	line-height: 1.2em;
} */

.tv-image-bg.QRCODEMB-col-12 .copy-sub-title {
	color: white;
	font-weight: 600;
	line-height: 1;
	font-size: 5em;
	text-align: center;
}
.tv-image-bg.QRCODEMB-col-12 .copy-desc {
	color: white;
	font-size: 2.5em;
	text-align: center;
	line-height: 1;
}

.button1 {
	font-family: Noto Sans Thai;
	background-color: #ff9200;
	font-size: 25px;
	text-decoration: none;
	border-radius: 30px;
	font-weight: 700;
	margin-right: 10px;

}

.button2 {
	font-family: Noto Sans Thai;
	background-color: #262626;
	font-size: 25px;
	text-decoration: none;
	border-radius: 30px;
	font-weight: 700;

}

.button1:hover{
  	font-family: Noto Sans Thai;
	background-color: #262626;
	color: #fff!important;
    border: 1px solid #262626;
}

.button2:hover{
  	font-family: Noto Sans Thai;
	background-color: #ff9200!important;
	color: #fff!important;
    border: 1px solid #ff9200;

}

.under-shadow{
	box-shadow: 6px 4px 8px -3px rgba(0,0,0,0.41);
	-webkit-box-shadow: 6px 4px 8px -3px rgba(0,0,0,0.41);
	-moz-box-shadow: 6px 4px 8px -3px rgba(0,0,0,0.41);
}

.dashing {
    animation: dashing 2s ease-out;
    animation-iteration-count: 1;
    position: relative;
}

.dashing-1{
    animation: dashing 2s ease-out .2s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;  
    position: relative;
}

.dashing-2{
    animation: dashing 2s ease-out .5s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;  
    position: relative;
}
.dashing-3{
    animation: dashing 2s ease-out .8s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;  
    position: relative;
}
.dashing-4{
    animation: dashing 2s ease-out 1s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;  
    position: relative;
}

.dashing-5{
    animation: dashing 2s ease-out 1.3s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;  
    position: relative;
}

.dashing-6{
    animation: dashing 2s ease-out 1.7s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;  
    position: relative;
}

.dashing-7{
    animation: dashing 2s ease-out 2s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;  
    position: relative;
}

.dashing-8{
    animation: dashing 2s ease-out 2.2s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;  
    position: relative;
}

.dashing-9{
    animation: dashing 2s ease-out 2.5s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;  
    position: relative;
}

.dashing-10{
    animation: dashing 2s ease-out 2.8s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;  
    position: relative;
}

.dashing-11{
    animation: dashing 2s ease-out 3s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;  
    position: relative;
}

.dashing-12{
    animation: dashing 2s ease-out 3.3s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;  
    position: relative;
}

.dashing-13{
    animation: dashing 2s ease-out 3.6s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;  
    position: relative;
}

.dashing-14{
    animation: dashing 2s ease-out 4s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;  
    position: relative;
}

.dashing-15{
    animation: dashing 2s ease-out 4.3s;
    animation-iteration-count: 1;
    opacity: 0;
    animation-fill-mode: forwards;  
    position: relative;
}



.microsite-footer{
	font-family: Noto Sans Thai, Lato;
}

.footer-address-bg{
	font-family: Noto Sans Thai, Lato;
}



@keyframes dashing {
    0%   {transform: translateX(-100px); opacity: 0}
    30%   {transform: translateX(-100px); opacity: 0}
    100%   {transform: translateX(0px); opacity: 1}
}

.mobile-screen{

	display: none;
}

/* ================
 * /TV Screen col-12
   ================ */
   
@media (max-width: 1440px) {

.QRCODEMB-col-12 .copy-title {
		font-size: 2.8em;
	}


.tv-image-bg.QRCODEMB-col-12 .copy-sub-title {
	font-size: 4.3em;
}
}

@media (max-width: 1350px) {
.QRCODEMB-col-12 .copy-title {
	font-size: 2.4em;
}

/* .tv-image-bg.QRCODEMB-col-12 .copy-title {
	font-size: 3.5em;
} */
.tv-image-bg.QRCODEMB-col-12 .copy-sub-title {
	font-size: 4.0em;
}
.tv-image-bg.QRCODEMB-col-12 .copy-desc {
	font-size: 2.2em;
}

}

@media (max-width: 1300px) {
.QRCODEMB-col-12 .copy-title {
	font-size: 2em;
	/* background: rgba(0, 0, 0, 0.68); */
	/* padding: 5px; */
}

/* .tv-image-bg.QRCODEMB-col-12 .copy-title {
	font-size: 3em;
	/* background: rgba(0, 0, 0, 0.68); */
	/* padding: 5px; */
 */
.tv-image-bg.QRCODEMB-col-12 .copy-sub-title {
	/* background: rgba(0, 0, 0, 0.68); */
	font-size: 3.5em;
	padding: 5px;
}
.tv-image-bg.QRCODEMB-col-12 .copy-desc {
	/* background: rgba(0, 0, 0, 0.68); */
	/* padding: 5px; */
	font-size: 2.2em;
}
.tv-image-bg.QRCODEMB-col-12 {
	background-position-x: -208px;
}
}

@media (max-width: 1200px) {
.QRCODEMB-col-12 .copy-title {
		font-size: 2.3em;
	}
/* .tv-image-bg.QRCODEMB-col-12 .copy-title {
	font-size: 2.5em;
} */
.tv-image-bg.QRCODEMB-col-12 .copy-sub-title {
	font-size: 3.2em;
}
.tv-image-bg.QRCODEMB-col-12 .copy-desc {
	font-size: 1.5em;
}
}

@media (max-width: 700px) {

	.QRCODEMB-col-12 .copy-title {
		font-size: 2em;
	}
	
	.copy-mobile {
		margin-top:120px;
		
	}

	.desktop-screen {

		display: none;
	}

	.mobile-screen .button1{

		margin-bottom: 10px;
	}

	.mobile-screen{

		display: block;
	}
	
	
}

@media (max-width: 560px) {

	.QRCODEMB-col-12 .copy-title {
		font-size: 1.8em;
	}
	
	.copy-mobile {
		margin-top:120px;
		
	}

	.desktop-screen {

		display: none;
	}

	.mobile-screen .button1{

		margin-bottom: 10px;
	}

	.mobile-screen{

		display: block;
	}

	
}

@media (max-width: 465px) {

	.QRCODEMB-col-12 .copy-title {
		font-size: 1.8em;
	}
	
	.copy-mobile {
		margin-top:120px;
		
	}
	
	.desktop-screen {

		display: none;
	}

	.mobile-screen .button1{

		margin-bottom: 10px;
	}

	.mobile-screen{

		display: block;
	}
	
}

@media (max-width: 415px) {

	.QRCODEMB-col-12 .copy-title {
		font-size: 1.5em;
	}
	
	.copy-mobile {
		margin-top:120px;
		
	}
	
	.desktop-screen {

		display: none;
	}

	.mobile-screen .button1{

		margin-bottom: 10px;
	}

	.mobile-screen{

		display: block;
	}
	
}

@media (max-width: 340px) {

	.QRCODEMB-col-12 .copy-title {
		font-size: 1.3em;
	}
	
	.copy-mobile {
		margin-top:120px;
		
	}
	
	.desktop-screen {

		display: none;
	}

	.mobile-screen .button1{

		margin-bottom: 10px;
	}

	.mobile-screen{

		display: block;
	}
	
}