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

	.offer {
		font-size: 45px;
	}

	.lightbox-bg {
		width: 1024px;
	}
}

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

	.lightbox-bg {
		width: 768px;
		height: 600px;
		flex-wrap: wrap;
	}

	.frame:nth-of-type(1), .frame:nth-of-type(2), .frame:nth-of-type(3) {
		height: 310px;
        width: 270px;
	}

	main {
		background-image: url(../image/bg-tablet.jpg);
		background-repeat: no-repeat;
		background-position: center -90px;
		background-size: 1024px;
		height: 1050px;
	}

	.frame {
    	margin: 15px 35px;
	}

	.js-close {
    	right: 70px;
		top: -20px;
	}

	.main-container-left {
		display: none;
	}

	.main-container-right {
    	width: 100%;
		margin-top: 600px;
	}

	.offer {
        font-size: 40px;
    }

	#cta-mobi {
		background-color: #ffe000;
		width: 290px;
		height: 77px;
		border-radius: 50px;
		color: black;
		font-weight: 900;
		text-decoration: none;
		padding: 21px 71px;
		font-size: 30px;
		font-family: 'MyriadPro-Bold';
		display: block;
		margin: 0 auto;
		position: relative;
		bottom: 160px;
	}

	body.sc #cta-mobi {
    	padding: 21px 85px;
	}

	body.th #cta-mobi {
    	bottom: 147px;
	}

	body.vn #cta-mobi {
    	padding: 25px 33px;
		bottom: 147px;
	}

	body.id #cta-mobi {
    	padding: 25px 85px;
	}

	body.kr #cta-mobi {
    	padding: 27px 48px;
	}

	body.bd #cta-mobi {
    	padding: 28px 40px;
	}

}

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

	.lightbox-bg {
		width: 600px;
	}

	main {
		background-image: url(../image/bg-tablet.jpg);
		background-repeat: no-repeat;
		background-position: center -60px;
		background-size: 768px;
		height: 845px;
	}

	.frame:nth-of-type(1), .frame:nth-of-type(2), .frame:nth-of-type(3) {
        height: 300px;
        width: 210px;
    }

	.js-close {
        right: 30px;
    }

	.main-container-right {
        margin-top: 400px;
    }

	#cta-mobi {
        width: 266px;
        height: 65px;
        padding: 21px 60px;
		bottom: 165px;
    }

	body.sc #cta-mobi {
        padding: 21px 72px;
    }

	body.th #cta-mobi {
    	bottom: 160px;
	}

	body.vn #cta-mobi {
    	padding: 18px 19px;
        bottom: 163px;
	}

	body.id #cta-mobi {
        padding: 21px 73px;
    }

	body.kr #cta-mobi {
        padding: 21px 38px;
    }

	body.bd #cta-mobi {
        padding: 21px 29px;
    }

	body.th .offer, body.vn .offer, body.id .offer, body.bd .offer {
    	font-size: 32px;
	}

	.slick-dots {
		bottom: 10px!important;
		width: 90px !important;
    	height: 40px !important;
	}	

	.slick-dots li button:before {
    	top: 10px !important;
	}

}

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

	.lightbox-bg {
		width: 480px;
		flex-direction: column;
		flex-wrap: nowrap;
	}

	main {
		background-image: url(../image/bg-mobile.jpg);
		background-repeat: no-repeat;
		background-position: center -250px;
		background-size: 600px;
		height: 1150px;
	}

	.main-container-right {
        margin-top: 650px;
    }

	body.in .offer {
        font-size: 36px;
    }

}

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

	.lightbox-bg {
		width: 320px;
	}

	main {
		background-image: url(../image/bg-mobile.jpg);
		background-repeat: no-repeat;
		background-position: center -300px;
		background-size: 480px;
		height: 800px;
	}

	.tpl-lang-wrap {
        width: 140px!important;
    }

	.tpl-contacts span.tpl-social-media {
        display: inline-block!important;
        margin-top: 0px!important;
    }

	.offer {
        font-size: 25px;
    }

	body.in .offer {
        font-size: 25px;
    }

	.main-container-right {
        margin-top: 350px;
    }

	#cta-mobi {
        width: 243px;
        height: 55px;
        padding: 15px 50px;
        bottom: 180px;
    }

	body.sc #cta-mobi {
        padding: 13px 60px;
    }

	body.th .offer, body.vn .offer, body.id .offer {
        font-size: 27px;
    }

	body.bd .offer {
        font-size: 23px;
    }

	body.id #cta-mobi {
        padding: 15px 60px;
    }

	body.vn #cta-mobi {
        padding: 13px 11px;
        bottom: 163px;
    }

	body.kr #cta-mobi {
        padding: 16px 25px;
    }

	body.bd #cta-mobi {
        padding: 16px 18px;
    }

	body.th .slick-dots, body.vn .slick-dots {
        bottom: 30px !important; 
    }

	.slick-dots {
        bottom: 40px !important;
		width: 80px !important;
        height: 30px !important;
    }

	.slick-dots li button:before {
        top: 5px !important;
    }

	.slick-dots li {
		margin: 0 3px!important;
	}

}

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

	.main-container-right {
        margin-top: 300px;
    }

	main {
		background-size: 400px;
		background-position: center -220px;
		height: 750px;
	}

	body.th #cta-mobi {
        bottom: 167px;
    }

	body.th .offer, body.vn .offer, body.id .offer, body.in .offer {
        font-size: 23px;
    }

	body.bd .offer {
        font-size: 20px;
    }

}