@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
body{font-family:'Lato', sans-serif;}

html, body{height:auto !important;}
.mainWrapper{padding:0px; margin:70px auto 70px auto !important;}
.mainWrapper .infoMsg{color: #f20000; text-align: center; font-size: 18px; line-height: 22px; font-weight: bold; padding: 30px;}
.takePaymentSearchBox_n{padding:30px 5%;}
.paymentType2 ul li:last-of-type{padding:0 0 0px 42px;}
.radioBtn_big span{top:6px;}
.takePaymentSearchBox_n h3{padding-bottom:16px;}

.onlineFlowchart{padding:47px 5%; overflow:hidden;}
.onlineFlowchart{}
.onlineFlowchart h3{margin-bottom:35px; font-size:18px; font-weight:600; color:#363636;}
.onlineFlowchart ul{display:flex; flex-wrap:wrap; margin:0 -42px;}
.onlineFlowchart ul:after{content:''; display:block; clear:both;}
.onlineFlowchart ul li{float:left; width:25%; padding:52px 42px 0; text-align:center; position:relative; color:#2e2e2e; font-size:13px;}
.onlineFlowchart ul li a{color:#2e2e2e;}
.onlineFlowchart ul li span:before{content:"\20B9";}
.onlineFlowchart ul li:before{content:''; width:7px; height:7px; background:url(/images/onlineFlowchart.png) no-repeat 50% 50%; position:absolute; top:58px; right:-10px; }
.onlineFlowchart ul li:last-of-type:before{display:none;}
.onlineFlowchart ul li:after{content:'';  position:absolute; left:0; right:0; top:0; margin:auto;}
.onlineFlowchart ul li.ofcIcon1:after{background:url(/images/onlineFlowchartIcon1.png) no-repeat 0 0; width:28px; height:33px;}
.onlineFlowchart ul li.ofcIcon2:after{background:url(/images/onlineFlowchartIcon2.png) no-repeat 0 0; width:78px; height:33px;}
.onlineFlowchart ul li.ofcIcon3:after{background:url(/images/onlineFlowchartIcon3.png) no-repeat 0 0; width:32px; height:33px;}
.onlineFlowchart ul li.ofcIcon4:after{background:url(/images/onlineFlowchartIcon4.png) no-repeat 0 0; width:23px; height:33px;}
.takePaymentText{text-align:center; background-color:#f5f5f5; padding:40px 0 40px;}

.takePaymentSearchBox_n ul{justify-content: center;}

@media screen and (max-width:1023px){
.mainWrapper{width:90%; max-width:950px;}	
}
@media screen and (max-width:830px){
.paymentType2 ul li > div h3{font-size:20px; line-height:26px;}
.radioBtn_big span{top:4px;}
.onlineFlowchart{text-align:center;}   
.onlineFlowchart aside{display:inline-block; width:300px;} 
.onlineFlowchart h3{text-align:center; padding:0}
.onlineFlowchart ul{display:flex; flex-wrap:wrap; margin:0 -30px;}
.onlineFlowchart ul li{float:none; width:100%; padding:55px 30px 65px;}
.onlineFlowchart ul li:before{content:''; width:7px; height:7px; background:url(/images/onlineFlowchart.png) no-repeat 50% 50%; position:absolute; top:auto; right:0; left:0; bottom:25px; margin:auto; transform:rotate(90deg)}   
.paymentType2 ul li>div{width:100%;}
.paymentType2 ul li>div:last-child {width:auto; margin-inline-start:initial; margin:10px 0 0;}
.paymentType2 ul{margin:0 0 0;}
.paymentType2{padding:45px 5% 25px;}
.takePaymentSearchBox_n{padding:25px 5%;}
.onlineFlowchart{padding:25px 5%;}
.onlineFlowchart ul li{padding:40px 30px 50px;}
.takePaymentText{text-align:center; background-color:#f5f5f5; padding:40px 30px 40px;}
}
@media screen and (max-width:600px){
.paymentType2 ul li > div section div{width:100%; padding:5px 0;}
}



.pdBox{background: #FFF; position: relative; width: 100%; padding: 45px 5% 25px; border-bottom: 1px solid #e7e7e7;}
.pdBox h3{color: #181818; font-size: 18px; line-height: 22px; padding-bottom: 16px;}
.pdRow{display: flex; flex-wrap: wrap; margin: 0 -10px;}
.pdRow li{width: 33.3333333333%; float: left; position: relative; padding: 0 10px 20px;}
.pdRow li strong {display: block; font-size: 12px; line-height: 16px; color: #474747; font-weight: 700;}
.pdRow li span {display: block; font-size: 12px; line-height: 16px; color: #474747; font-weight: 400;}

@media screen and (max-width:680px){
.pdRow li{width: 100%;}
	
	
}