@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'web-font-reg';
    src: url('../fonts/kanitregular/kanit-regular.woff2') format('woff2'),
         url('../fonts/kanitregular/kanit-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'web-font-lgt';
    src: url('../fonts/kanitlight/kanit-light.woff2') format('woff2'),
         url('../fonts/kanitlight/kanit-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ---- Text style ----- */
.txtsty-r {font-family: 'web-font-reg';}
.txtsty-l {font-family: 'web-font-lgt';}

/* ---- Text size ----- */
.txt18 { font-size: 18px; line-height: 22px;}
.txt20 { font-size: 20px; line-height: 30px;}
.txt30 { font-size: 30px; line-height: 45px;}

/* ---- Background ----- */
.bg-black { background:#000000; }
.bg-gray { background:#f3f3f3; }
.bg-green { background:#52ba62; }

/* ---- Text color ----- */
.txt-white { color:#ffffff;}


/*---------- Border ------------ */
.bd-tb {
	border-top:1px solid #85c9a1;
	border-bottom:1px solid #85c9a1;
}
.bd-1x-green {
	border:2px solid #85c9a1;
}
.bd-btm {
	border-bottom:1px solid #d2d2d2;
}
.bd-right {
	border-right:1px solid #d2d2d2;
}
.bd-r-d {
	border-right:1px solid #1a1a1a;
}
/*--------- other ------------ */
header a:hover {
	color:#fff;
}

/*--------- owl Carousal ------- */
.owl-item a {
	display:inline-block;
	width: 100%;
	margin: 0 auto;
	padding: 14px 0;
	text-decoration: none;
}
.owl-item a:hover {
	background:#0b9444;
	color:#ffffff;
}
.owl-item .item a.active {
	background:#0b9444;
	color:#ffffff;
}
.owl-prev {
	position:absolute;
	top:0;
	left:0;
	width:40px;
	height:50px;
	color:#ffffff;
	text-align: center;
	padding-top:7px;
	border-right:1px solid #ffffff;
	background:#0b9444;
}
.owl-next {
	position:absolute;
	top:0;
	right:0;
	width:40px;
	height:50px;
	color:#ffffff;
	text-align: center;
	padding-top:7px;
	border-left:1px solid #ffffff;
	background:#0b9444;
}
.owl-prev.disabled,
.owl-next.disabled {
	opacity: 0.5;
}
.owl-carousel .owl-stage-outer {
	width:100%;
}
.owl-carousel.owl-drag .owl-item {
	text-align: center;
	height:50%;
}
/* ----------- Switch --------- */
.stored-card span {
	display:inline-block;
	width:auto;
	color:#1a1a1a;
	font-size:18px;
	font-family: 'web-font-lgt';
	margin:10px 0 0 0;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  float: right;
  margin-top: -5px;
}
.switch input {display:none;}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #0b9444;
}

input:focus + .slider {
  box-shadow: 0 0 1px #0b9444;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/* ----------- Radio ---------- */
.installment-choice {
	width:100%;
	margin:10px 0;
	float:left;
}
.installment-choice input[type="radio"] + label {
	font-family: 'web-font-lgt';
	font-size:16px;
	line-height: 20px;
	margin:10px 0;
	color:#636363;
}
/* ----------- Source --------- */
.btn-pay,
.btn-back {
	width:100%;
	display:block;
	float:left;
	/*margin:30px auto 20px;*/
	padding:15px 0 !important;
	font-family: 'web-font-reg';
	font-size:20px;
	color:#ffffff;
	border:none;
	background: #119b51; 
    background: -webkit-linear-gradient(#52ba62 , #119b51 );
    background: -o-linear-gradient(#52ba62 , #119b51 );
    background: -moz-linear-gradient(#52ba62 , #119b51 );
    background: linear-gradient(#52ba62 , #119b51 );
}
.btn-pay {
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.btn-pay:hover {
	background:#0a7f40;
}
.btn-back {
	background: #dddddd; 
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.btn-back:hover {
	background: #cccccc; 
}
.w-2x {
	width:50%;
}
.card input[type="text"],
.card input[type="number"]{
	font-family: 'web-font-lgt';
	font-size:18px;
}
.customer-detail input[type="text"],
.customer-detail input[type="number"]{
	font-family: 'web-font-lgt';
	font-size:18px;
}
.masterpass input[type="text"],
.masterpass input[type="number"]{
	font-family: 'web-font-lgt';
	font-size:18px;
}
.installment span.title {
	font-family: 'web-font-lgt';
	font-size:18px;
}
.card .caret {
	border-top: 7px solid;     
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
	float:right;
	margin-top:23px;
	color:#0b9444;
}
.option-123 a {
	border:1px solid #0b9343;
}
.option-123 a:hover {
	border:1px solid #0b9343;
}
.option-123 a.counter {
	background:url(../images/icon-counter.svg) #ffffff;
	background-size:70% auto;
	background-repeat: no-repeat;
	background-position: 12px 9px;
}
.option-123 a.counter:hover {
	background:url(../images/icon-counter-hover.svg) #0b9142;
	background-size:70% auto;
	background-repeat: no-repeat;
	background-position: 12px 9px;
}
.option-123 a.atm {
	background:url(../images/icon-atm.svg) #ffffff;
	background-size:60% auto;
	background-repeat: no-repeat;
	background-position: 17px 14px;
}
.option-123 a.atm:hover {
	background:url(../images/icon-atm-hover.svg) #0b9142;
	background-size:60% auto;
	background-repeat: no-repeat;
	background-position: 17px 14px;
}
.option-123 a.i-banking {
	background:url(../images/Icon-bank.svg) #ffffff;
	background-size:63% auto;
	background-repeat: no-repeat;
	background-position: 14px 12px;
}
.option-123 a.i-banking:hover {
	background:url(../images/icon-bank-hover.svg) #0b9142;
	background-size:63% auto;
	background-repeat: no-repeat;
	background-position: 14px 12px;
}
.option-123 a.web-pay {
	background:url(../images/Icon-webpay.svg) #ffffff;
	background-size:70% auto;
	background-repeat: no-repeat;
	background-position: 13px 10px;
}
.option-123 a.web-pay:hover {
	background:url(../images/icon-webpay-hover.svg) #0b9142;
	background-size:70% auto;
	background-repeat: no-repeat;
	background-position: 13px 10px;
}
.option-123 span.channel-name {
	width:100%;
	display:block;
	text-align: center;
	color:#555555;
	font-family: 'web-font-lgt';
	font-size:15px;
}
.counter-wrap .mobile-no {
	border:1px solid #85c9a1;
	color:#000000;
}
.counter-wrap .back {
	background:#dddddd;
	color:#ffffff;
	font-size:20px;
	font-family: 'web-font-reg';
	text-decoration: none;
	
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.counter-wrap .back:hover {
	background:#cccccc;
}
.counter-wrap .btn-pay {
	color:#ffffff;
	font-size:20px;
	font-family: 'web-font-reg';
	
	background: #119b51; 
    background: -webkit-linear-gradient(#52ba62 , #119b51 );
    background: -o-linear-gradient(#52ba62 , #119b51 );
    background: -moz-linear-gradient(#52ba62 , #119b51 );
    background: linear-gradient(#52ba62 , #119b51 );
	
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.counter-wrap .btn-pay:hover {
	background: #0a7f40; 
}
.bank-wrap .back {
	background:#dddddd;
	color:#ffffff;
	font-size:20px;
	font-family: 'web-font-reg';
	text-decoration: none;
	
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.bank-wrap .back:hover {
	background:#cccccc;
}
.bank-wrap .btn-pay {
	color:#ffffff;
	font-size:20px;
	font-family: 'web-font-reg';
	
	background: #119b51; 
    background: -webkit-linear-gradient(#52ba62 , #119b51 );
    background: -o-linear-gradient(#52ba62 , #119b51 );
    background: -moz-linear-gradient(#52ba62 , #119b51 );
    background: linear-gradient(#52ba62 , #119b51 );
	
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.bank-wrap .btn-pay:hover {
	background: #0a7f40; 
}
.qr-code-wrap .detail span {
	font-family: 'web-font-lgt';
	font-size:15px;
	line-height:25px;
	color:#1a1a1a;
}
.qr-code-wrap .detail span.number,
.qr-code-wrap .detail span.amount {
	font-family: 'web-font-reg';
	font-size:20px;
	line-height:25px;
	color:#000000;
}
.qr-code-wrap .detail span.txt-mark {
	font-family: 'web-font-lgt';
	font-size:13px;
	line-height:25px;
	color:#1a1a1a;
}
.confirm-section .detail .lbl-title {
	font-family: 'web-font-reg';
	font-size:18px;
	line-height: 30px;
	color:#000000;
}
.confirm-section .detail .lbl-detail {
	font-family: 'web-font-lgt';
	font-size:18px;
	line-height: 30px;
	color:#000000;
}
.confirm-section .term-con input[type="checkbox"] {
	margin:5px 0 0 0;
}
.confirm-section .term-con input[type="checkbox"] + label {
	font-family: 'web-font-lgt';
	font-size:16px;
	line-height: 25px;
	color:#1a1a1a;
}
.completebox {
	width:100%;
	text-align: center;
}
.completebox img{
	width:20%;
	display:inline-block;
	margin:20px auto 0;
}
.completebox span {
	width:100%;
	display:block;
	margin:20px 0;
	text-align: center;
	font-family: 'web-font-lgt';
	font-size:18px;
	line-height: 30px;
	color:#1a1a1a;
}
.completebox span.title {
	width:100%;
	display:block;
	margin:20px 0;
	text-align: center;
	font-family: 'web-font-reg';
	font-size:30px;
	line-height: 30px;
	color:#bda765;
}
.modal-dialog {
	margin-top: 10%;
}

.exchange a {
	display:inline-block;
	font-family: 'web-font-reg';
	font-size:16px;
	line-height: 16px;
	color:#157fc3;
	float:left;
	text-decoration: none;
	padding-bottom:5px;
	border-bottom:1px solid #157fc3;
}
.exchange a:hover {
	color:#014b7a;
	border-bottom:1px solid #014b7a;
}
.exchange .select-country {
	width:100%;
	padding-bottom:5px;
	border-bottom:1px solid #119b51;
	float:left;
}
.exchange .select-country .caret{
	width: 5%;
    float: right;
    margin-top: 5px;
}
.exchange select {
	width:85%;
	border:none;
	font-family: 'web-font-reg';
	font-size:16px;
	line-height: 16px;
	color:#119b51;
	float:left;

	-webkit-appearance: none;
    -moz-appearance: none;
    appearance:none;
}
.term-con {
	width:100%;
	float:left;
	margin:15px 0;
	padding:15px 10px;
	background:#f3f3f3;
}
.term-con label {
	font-weight: normal;
}