/**
 * @Modified 2017-05-30 AN 147
 */

/*-------------------------------------------------- 1552px ------------------------------------------------------*/
@media only screen and (max-width: 1552px) {
	body.id #bx-pager {
		display: none;
	}
}

/*-------------------------------------------------- 1130px ------------------------------------------------------*/
@media only screen and (max-width: 1130px) {
	/*main.content {
	 min-height: 565px;
	 }*/
	.header > div .logo {
		padding-left: 15px;
	}

	#cta-steps .slider-steps {
		background: #012951;
	}

	#cta-steps .slider-steps .step {
		max-width: 348px;
		width: 100%;
	}

}

/*-------------------------------------------------- 1059px ------------------------------------------------------*/
@media only screen and (max-width: 1059px) {
	/*main.content {
	 min-height: 500px;
	 }*/

	#cta-steps {
		height: 153px;
	}

	#cta-steps .slider-steps .step {
		max-width: 260px;
		height: 93px;
	}

	#cta-steps .slider-steps .step > a {
		padding: 15px 0 0;
	}

	#cta-steps .slider-steps .step div.step-num {
		font-size: 63px !important;
	}

	#cta-steps .slider-steps .step div.step-desc {
		margin-left: 73px !important;
		margin-top: 8px;
	}

	#cta-steps .slider-steps .step div.step-desc h2 {
		font-size: 23px !important;
	}

	#cta-steps .slider-steps .step div.step-desc h3 {
		font-size: 12px !important;
	}

	/* Per Language */
	body.vi #cta-steps #steps-slider-1 #step1 div.step-desc, body.vi #cta-steps #steps-slider-1 #step2 div.step-desc {
		margin-top: 9px;
	}

	body.vi #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: 8px;
	}

	body.vi #cta-steps #steps-slider-2 #step3 div.step-desc {
		margin-top: 0;
	}
	
	body.vi #cta-steps #steps-slider-0 .step div.step-desc h2 {
		font-size: 18px !important;
	}

	body.ko #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: -9px;
	}

	body.id #cta-steps #steps-slider-0 #step2 div.step-desc, body.id #cta-steps #steps-slider-0 #step3 div.step-desc {
		margin-top: 2px;
	}

	body.id #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: -3px;
	}

	body.id .jn-btn-holder .slider-bottom-link {
		font-size: 18px;
	}

}

/*-------------------------------------------------- 800px ------------------------------------------------------*/
@media only screen and (max-width: 800px) {
	/*main.content {
	 min-height: 400px;
	 }*/

	#cta-steps {
		height: 135px;
	}
	#cta-steps .slider-steps .step {
		max-width: 200px;
		height: 75px;
	}
	#cta-steps .slider-steps .step > a {
		height: 73px;
	}
	#cta-steps .slider-steps .step div.step-num {
		font-size: 38px !important;
	}
	#cta-steps .slider-steps .step div.step-desc h2 {
		font-size: 20px !important;
	}
	#cta-steps .slider-steps .step div.step-desc {
		margin-left: 40px !important;
		margin-top: 0;
	}
	#cta-steps .slider-steps .step div.step-desc h3 {
		font-size: 9px !important;
	}

	/* Per Language */
	body.en #cta-steps #steps-slider-2 #step3 div.step-desc {
		margin-left: 103px;
		margin-top: -4px;
	}

	body.th #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: -8px;
	}

	body.th #cta-steps #steps-slider-2 #step3 div.step-desc {
		margin-top: -4px;
	}

	body.vi #cta-steps #steps-slider-1 #step1 div.step-desc, body.vi #cta-steps #steps-slider-1 #step2 div.step-desc {
		margin-top: 1px;
	}

	body.vi #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: 0;
	}

	body.vi #cta-steps #steps-slider-2 #step3 div.step-desc {
		margin-top: -5px;
	}
	
	body.vi #cta-steps #steps-slider-0 .step div.step-desc h2 {
		font-size: 15px !important;
	}

	body.zh #cta-steps .slider-steps .step div.step-desc {
		margin-top: 1px;
	}

	body.ko #cta-steps #steps-slider-0 #step1 div.step-desc, body.ko #cta-steps #steps-slider-0 #step2 div.step-desc {
		margin-top: 0;
	}

	body.ko #cta-steps #steps-slider-1 #step1 div.step-desc, body.ko #cta-steps #steps-slider-1 #step2 div.step-desc {
		margin-top: 0;
	}

	body.ko #cta-steps #steps-slider-2 #step1 div.step-desc, body.ko #cta-steps #steps-slider-2 #step2 div.step-desc {
		margin-top: 0;
	}

	body.ko #cta-steps #steps-slider-2 #step3 div.step-desc {
		margin-top: -8px;
	}

	body.ko #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: -12px;
	}

	body.ko #cta-steps #steps-slider-0 #step3 div.step-desc {
		margin-top: -7px;
	}

	body.id #cta-steps #steps-slider-0 #step1 div.step-desc {
		margin-top: 0;
	}

	body.id #cta-steps #steps-slider-0 #step2 div.step-desc, body.id #cta-steps #steps-slider-0 #step3 div.step-desc {
		margin-top: -5px;
	}

	body.id #cta-steps #steps-slider-1 #step1 div.step-desc, body.id #cta-steps #steps-slider-1 #step2 div.step-desc {
		margin-top: 0;
	}

	body.id #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: -5px;
	}

	body.id .jn-btn-holder .slider-bottom-link {
		font-size: 12px;
	}

	body.id .bx-wrapper .bx-controls-direction a {
		background-size: cover;
		height: 18px;
		width: 18px;
	}

	body.id .bx-wrapper .bx-controls-direction a {
		top: 80%;
	}

	body.id .jn-btn-holder .slider-bottom-link {
		font-size: 13px;
		padding: 5px 13px;
	}

}

/*-------------------------------------------------- 615px ------------------------------------------------------*/
@media only screen and (max-width: 615px) {
	main.content {
		min-height: 720px;
	}

	#cta-steps {
		height: 100%;
	}

	#cta-steps .slider-steps .step {
		max-width: 360px;
		height: 123px;
		margin: 20px auto;
		text-align: left;
		padding-left: 13px;
	}

	#cta-steps .slider-steps .step > a {
		height: 123px;
		padding: 15px 0 0;
	}

	#cta-steps .slider-steps .step div.step-num {
		font-size: 90px !important;
	}

	#cta-steps .slider-steps .step div.step-desc {
		margin-left: 103px !important;
		margin-top: 14px !important;
	}

	#cta-steps .slider-steps .step div.step-desc h2 {
		font-size: 37px !important;
	}

	#cta-steps .slider-steps .step div.step-desc h3 {
		font-size: 15px !important;
	}

	/* Per Language */
	body.en #cta-steps #steps-slider-2 #step3 div.step-desc {
		margin-left: 103px;
		margin-top: 2px !important;
	}

	body.th #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: 0 !important;
	}

	body.th #cta-steps #steps-slider-2 #step3 div.step-desc {
		margin-top: 0 !important;
	}

	body.vi #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: -5px !important;
	}

	body.vi #cta-steps #steps-slider-2 #step2 div.step-desc, body.vi #cta-steps #steps-slider-2 #step3 div.step-desc {
		margin-top: 3px !important;
	}
	
	body.vi #cta-steps #steps-slider-0 .step div.step-desc h2 {
		font-size: 25px !important;
	}
	
	body.vi #cta-steps #steps-slider-3 .step div.step-desc h2 {
		font-size: 23px !important;
	}
	
	body.vi #cta-steps #steps-slider-3 #step1 div.step-desc {
		margin-top: 9px !important;
	}
	
	body.vi #cta-steps #steps-slider-3 #step2 div.step-desc {
		margin-top: -2px !important;
	}
	
	body.vi #cta-steps #steps-slider-3 #step3 div.step-desc {
		margin-top: 8px !important;
	}

	body.zh #cta-steps #steps-slider-2 #step3 div.step-desc {
		margin-top: 3px !important;
	}

	body.ko #cta-steps #steps-slider-0 #step3 div.step-desc {
		margin-top: -1px !important;
	}

	body.ko #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: -12px !important;
	}

	body.ko #cta-steps #steps-slider-2 #step3 div.step-desc {
		margin-top: 0 !important;
	}

	body.id #cta-steps #steps-slider-0 #step2 div.step-desc, body.id #cta-steps #steps-slider-0 #step3 div.step-desc {
		margin-top: 1px !important;
	}

	body.id #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: 4px !important;
	}

	body.id #cta-steps #steps-slider-2 #step3 div.step-desc {
		margin-top: 1px !important;
	}

	body.id #cta-steps .slider-steps .step div.step-desc h2 {
		font-size: 33px !important;
	}

	.footer div.wrapper ul li {
		display: block;
		margin: 0 auto 20px !important;
	}

	.footer div.wrapper ul li:first-child {
		width: 136px;
	}

	.footer div.wrapper ul li:nth-child(2) {
		width: 183px;
	}

	.footer div.wrapper ul li:nth-child(3) {
		width: 134px;
	}

	body.id .jn-btn-holder .slider-bottom-link {
		font-size: 10px;
		padding: 4px 11px;
	}

	body.id .bx-wrapper .bx-controls-direction a {
		top: 82%;
	}

}

/*-------------------------------------------------- 360px and 320px ------------------------------------------------------*/
@media only screen and (max-width: 360px) {
	main.content {
		min-height: 555px;
	}

	#cta-steps {
		height: 100%;
	}

	#cta-steps .slider-steps .step {
		max-width: 280px;
		text-align: left !important;
		padding-left: 13px !important;
	}

	#cta-steps .slider-steps #step2 {
		margin: 0;
	}

	#cta-steps .slider-steps .step div.step-num {
		font-size: 60px !important;
	}

	#cta-steps .slider-steps .step div.step-desc h2 {
		font-size: 30px !important;
	}

	#cta-steps .slider-steps .step div.step-desc h3 {
		font-size: 13px !important;
	}

	#cta-steps .slider-steps .step div.step-desc {
		margin-left: 65px !important;
		margin-top: 5px !important;
	}

	#cta-steps .slider-steps .step {
		height: 94px;
	}

	#cta-steps .slider-steps .step > a {
		height: 92px;
	}

	/* Per Language */
	body.en #cta-steps #steps-slider-2 #step3 div.step-desc {
		margin-left: 103px;
		margin-top: -5px !important;
	}

	body.th #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: -8px !important;
	}

	body.vi #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: -2px !important;
	}

	body.vi #cta-steps #steps-slider-2 #step3 div.step-desc {
		margin-top: -5px !important;
	}
	
	body.vi #cta-steps #steps-slider-2 #step2 div.step-desc {
		margin-top: 0 !important;
	}
	
	body.vi #cta-steps #steps-slider-0 .step div.step-desc h2 {
		font-size: 20px !important;
	}

	body.zh #cta-steps #steps-slider-2 #step3 div.step-desc {
		margin-top: -5px !important;
	}
	body.zh #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: -5px !important;
	}

	body.ko #cta-steps #steps-slider-0 #step3 div.step-desc {
		margin-top: -8px !important;
	}

	body.ko #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: -15px !important;
	}

	body.ko #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: -16px !important;
	}

	body.ko #cta-steps #steps-slider-2 #step3 div.step-desc {
		margin-top: -7px !important;
	}

	body.id #cta-steps #steps-slider-0 #step2 div.step-desc, body.id #cta-steps #steps-slider-0 #step3 div.step-desc {
		margin-top: -4px !important;
	}

	body.id #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: -11px !important;
	}

	body.id #cta-steps #steps-slider-2 #step3 div.step-desc {
		margin-top: -4px !important;
	}

	.footer div.wrapper ul li {
		display: block;
		margin: 0 auto 20px !important;
	}

	.footer div.wrapper ul li:first-child {
		width: 136px;
	}

	.footer div.wrapper ul li:nth-child(2) {
		width: 183px;
	}

	.footer div.wrapper ul li:nth-child(3) {
		width: 134px;
	}

	body.id .jn-btn-holder .slider-bottom-link {
		font-size: 6px;
		padding: 3px 10px;
	}

	body.id .bx-wrapper .bx-controls-direction a {
		top: 88%;
	}

	body.id .jn-btn-holder {
		top: 82%;
	}

	body.id .bx-wrapper .bx-controls-direction a {
		background-size: cover;
		height: 11px;
		width: 11px;
	}

}

/*-------------------------------------------------- 320px ------------------------------------------------------*/
@media only screen and (max-width: 320px) {
	main.content {
		min-height: 600px;
	}

	#mobile-slider-box {
		display: block;
	}

	#desktop-slider-box {
		display: none;
	}

	body.id .jn-btn-holder {
		top: 87%;
	}

	body.id .jn-btn-holder .slider-bottom-link {
		font-size: 12px;
		padding: 3px 10px;
	}

	body.id .bx-wrapper .bx-prev {
		left: 10%;
	}

	body.id .bx-wrapper .bx-next {
		right: 10%;
	}

	body.id .bx-wrapper .bx-controls-direction a {
		top: 87%;
	}

	body.id .bx-wrapper .bx-controls-direction a {
		background-size: cover;
		height: 15px;
		width: 15px;
	}

	body.id #cta-steps .slider-steps .step div.step-desc h2 {
		font-size: 26px !important;
	}

	body.id #cta-steps #steps-slider-1 #step3 div.step-desc {
		margin-top: -3px !important;
	}
	
	/* Hide BX-PAGER in mobile (320 width)*/
	body.en #bx-pager,
	body.zh #bx-pager,
	body.th #bx-pager,
	body.ko #bx-pager,
	body.vi #bx-pager{
		display: none;
	}
}