﻿div.content .infographic , div.content .infographic p, div.content .infographic h2, div.content .infographic span {
    font-family: 'Rubik', Verdana,Tahoma, Helvetica, Arial, sans-serif;
    font-size: 1em;
    line-height: normal;
}
.infographic a:link, .infographic a:visited, .infographic a:hover, .infographic a:active{
    text-decoration: none;
    color:#555b62;
}
/*:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}*/
.infographic .clearfix:after{
  content:"";
  display:table;
  clear:both;
}
.infographic.container{
	margin: 0 auto;
/* 	max-width: 849px;
	width: 100%; */
	width: 849px; 
	background-color: #1165ae;
	padding-bottom: 100px; 	
}
.infographic.container p{
    margin: 18px 0;
}

.infographic header{
	text-align: center;
	padding: 10px;
	height: auto;
}
	div.content .container.infographic header h2{
	  	font-size: 32.7px;
	  	font-weight: 500;
	  	color: #ffffff;
	    text-transform: uppercase;
	    margin: 51px 0 50px;
	}

.infographic main img{
    max-width: 100%;	
}
.infographic .service{
	position: relative;
	padding-bottom: 60px;

	background: #5a90cd;
	background: -moz-linear-gradient(top,  #5a90cd 78%, #1165ae 78%);
	background: -webkit-gradient(linear, top top, top top, color-stop(78%,#5a90cd), color-stop(78%,#1165ae));
	background: -webkit-linear-gradient(top,  #5a90cd 78%,#1165ae 78%);
	background: -o-linear-gradient(top,  #5a90cd 78%,#1165ae 78%);
	background: -ms-linear-gradient(top,  #5a90cd 78%,#1165ae 78%);
	background: linear-gradient(top,  #5a90cd 78%,#1165ae 78%);
}
.infographic .loanService{
	position: relative;
	padding-bottom: 60px;
	background-color: #5a90cd;	
}
.infographic .contract{
	position: relative;
	padding-bottom: 60px;	

	background: #5a90cd;
	background: -moz-linear-gradient(top, #5a90cd 66%, #1165ae 66%);
	background: -webkit-gradient(linear, top top, top top, color-stop(66%,#5a90cd), color-stop(66%,#1165ae));
	background: -webkit-linear-gradient(top,  #00a139 66%, #00923d 66%);
	background: -o-linear-gradient(top,  #5a90cd 66%,#1165ae 66%);
	background: -ms-linear-gradient(top,  #5a90cd 66%,#1165ae 66%);
	background: linear-gradient(top,  #5a90cd 66%,#1165ae 66%);
}
div.content .infographic .service p, 
div.content .infographic .service span, 
div.content .infographic .contract p, 
div.content .infographic .contract span{
	font-size: 11.5px;
  	color: #ffffff;
  	position: absolute;
  	text-align: center;
}
div.content .infographic .contract header h2{
	font-size: 22px;
}
.infographic .service-debt{
    top: 195px;
    left: 69px;
    width: 179px;
}
.infographic .operations-debt{
	top: 190px;    
    right: 68px;
    width: 180px;
}
.infographic .operations-debt span{
	display: block;
	margin-top: 12px;
	position: static !important;
}
div.content .infographic p.limit-debt{
	font-size: 16px;
  	font-weight: 500;
  	top: 124px;    
    right: 310px;
    width: 231px;
}
div.content .infographic p.trust-limit{
	font-size: 18px;
  	font-weight: 500;	
  	text-transform: uppercase;
  	left: 348px;
  	top: 782px;
}
.infographic p.trust-limit-value{
    top: 854px;
    left: 299px;
}
div.content .infographic p.partner-one,
div.content .infographic p.partner-two{
    top: 580px;    
	font-size: 14.5px;
  	font-weight: 500;
}
.infographic p.partner-one{
	left: 81px;	
	width: 154px;
}
.infographic p.partner-two{
	right: 90px;	
	width: 135px;
}
div.content .infographic p.limit-one,
div.content .infographic p.limit-two,
div.content .infographic p.limit-three{
	font-size: 14px;
  	color: #ffffff;
  	top: 800px;
}
div.content .infographic span.limit-one,
div.content .infographic span.limit-two, 
div.content .infographic span.limit-three{
	font-size: 14px;
	top: 1042px;
}
.infographic .limit-one{
    left: 153px;
    width: 90px;
}
.infographic .limit-two{
	left: 356px;
	width: 139px;
}
.infographic .limit-three{
	right: 64px;
	width: 159px;	
}



div.content .infographic p.contract-limit{
	top: 171px;
	left: 310px;
	font-size: 18px;
  	font-weight: 500;
  	text-transform: uppercase;
}
div.content .infographic p.contract-paymer{
	text-transform: uppercase;
	right: 112px;
    top: 357px;
	font-size: 14px;
  	font-weight: 500;
}
div.content .infographic p.paymer-text{
	right: 77px;
    top: 387px;
    font-size: 14px;
    width: 161px;
}
div.content .infographic p.install,
div.content p.text, p.release{
    top: 515px;
	font-size: 13px;
	text-align: left;
  	font-weight: 500;
}
.infographic p.install{
	left: 58px;
	width: 102px;
}
.infographic p.text{
	left: 324px;
	width: 53px;
}
.infographic p.release{
	right: 170px;
	width: 78px;
}
div.content p.text{
	width: 53px;
}
div.content .infographic p.borrower,
div.content .infographic p.creditor{
	top: 809px;
	font-size: 14.5px;
  	font-weight: 500;
}
.infographic p.borrower{
	left: 94px;
	width: 125px;	
}
.infographic p.creditor{
	right: 106px;
	width: 97px;
}
div.content .infographic p.check-system{
    top: 767px;
    font-size: 13px;
    left: 339px;
    width: 170px;
}
div.content .infographic p.lender_person, div.content .infographic p.borrower_person{
	bottom: 178px;
    left: 113px;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;	
}
div.content .infographic p.set_word,
div.content .infographic p.accept_word, 
div.content .infographic p.accept_word2{
    text-transform: uppercase;
    left: 112px;
    top: 639px;
    font-size: 14px;
    font-weight: 500;
}
div.content .infographic p.accept_word{
    left: 394px;	
}
div.content .infographic p.accept_word2{
	left: 663px;
}
div.content .infographic p.borrower_wmid{
    top: 327px;
    left: 90px;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    width: 132px;
}
div.content .infographic p.borrower_person{
	left: 651px;
}

.infographic .borrowing{
	background-color: #3476be;
	position: relative;

	background: #3476be;
	background: -moz-linear-gradient(top, #3476be 40%, #1165ae 40%);
	background: -webkit-gradient(linear, top top, top top, color-stop(40%,#3476be), color-stop(40%,#1165ae));
	background: -webkit-linear-gradient(top,  #3476be 40%, #1165ae 40%);
	background: -o-linear-gradient(top,  #3476be 40%,#1165ae 40%);
	background: -ms-linear-gradient(top,  #3476be 40%,#1165ae 40%);
	background: linear-gradient(top,  #3476be 40%,#1165ae 40%);
}
div.content .infographic .borrowing h2{
	position: absolute;
	top: -79px;
	left: 50%;
	margin-left: -167px;
	width: 334px;
  	height: 56px;
  	background: transparent url('zag-fill.png') no-repeat center center;
  	font-size: 18px;
	font-weight: 500;
	color: #ffffff;
	line-height: 49px;
    text-align: center;
}

div.content .infographic .borrowing p{
	position: absolute;
	color: #ffffff;
	font-size: 13px;
	text-align: center;
}
.card1, .card2, .card3{
	top: 171px;
}
.infographic .card1{
	left:98px;
	width: 157px;
}
.infographic .card2{
	left: 364px;
	width: 123px;
}
.infographic .card3{
	right: 78px;
	width: 193px;
}
.infographic .card-green{
	text-transform: uppercase;
	font-weight: 500;
	top: 540px;
    left: 98px;
}
div.content .infographic p.pay1, div.content .infographic p.pay2{
	top: 625px;
	font-size: 15.5px;
  	font-weight: 500;
  	text-transform: uppercase;
}
.infographic .pay1{
	left: 105px;
}
.infographic .pay2{
	right: 105px;
}

.infographic .card4, .infographic .card5, .infographic .card6{
	font-size: 13px;
	top: 960px;
}
.infographic .card4{
    left: 86px;
    width: 257px;
    top: 968px;
}
.infographic .card5{
	left: 498px;
    width: 83px;
    top: 966px;
}
.infographic .card6{
	right: 74px;
	width: 92px;
}
.infographic p.note, .infographic p.note-disabled{
	top: 740px;
}
.infographic p.note{
    left: 154px;
    width: 120px;	
}
.infographic p.note-disabled{
	right: 154px;
	width: 101px;	
}
.infographic .card7, .infographic .card8{
	bottom: 175px;
}
.infographic .card7 {
    right: 275px;
    width: 70px;
}
.infographic .card8 {
    right: 71px;
    width: 88px;
}
.infographic p.note {
    width: 120px;
}
div.content .infographic p.profit, div.content .infographic p.return{
	font-size: 13px;
  	font-weight: 500;
  	text-transform: uppercase;
    bottom: 29px;
    left: 75px;
}
div.content .infographic p.return{
	bottom: 206px;
}
.infographic img.cards-img,
.infographic img.green-cards-img{
	padding: 26px 0 0;
	width: 716px;
    display: block;
    margin: 0 auto;
}


/* en */
html[lang=en] .infographic .operations-debt{
	right: 68px;
	top: 188px;
}
html[lang=en] .infographic .service-debt {
    left: 68px;
}
html[lang=en] div.content .infographic p.limit-debt{
	right: 309px;	
}
html[lang=en] .infographic p.partner-one{
    left: 62px;	
    width: 190px;    
}
html[lang=en] .infographic p.partner-two {
    right: 86px;
}
html[lang=en] div.content .infographic p.trust-limit {
    left: 367px;
}
html[lang=en] div.content .infographic p.contract-limit{
    left: 286px;
}
html[lang=en] div.content .infographic p.paymer-text {
    right: 85px;
    width: 143px;
}
html[lang=en] .infographic p.creditor {
    right: 117px;
    width: 77px;
}
html[lang=en] .infographic p.borrower {
    left: 100px;
    width: 111px;
}
html[lang=en] div.content .infographic p.check-system {
    left: 365px;
    width: 120px;
}
html[lang=en] .infographic .card1 {
	left: 78px;
    width: 189px;
}
html[lang=en] .infographic .card2 {
    left: 373px;
    width: 106px;
}
html[lang=en] .infographic .card3 {
    right: 75px;
    width: 200px;
}
html[lang=en] .infographic .card-green {
    left: 104px;
}
html[lang=en] .infographic .card4 {
    left: 95px;
    width: 237px;
}
html[lang=en] .infographic .card5 {
    left: 486px;
    width: 106px;
    top: 968px;
}
html[lang=en] .infographic .card6 {
	right: 73px;
    width: 91px;
}
html[lang=en] .infographic .card7 {
    right: 271px;
    width: 79px;
}
html[lang=en] .infographic .card8 {
	right: 60px;
    width: 119px;
    bottom: 170px;
}
html[lang=en] div.content .infographic p.profit,
html[lang=en] div.content .infographic p.return {
    left: 101px;
    width: 232px;
}
html[lang=en] .infographic p.trust-limit-value{
	width: 271px;
}
html[lang=en] div.content .infographic p.profit{
    bottom: 24px;	
}
html[lang=en] .infographic .limit-two {
    left: 356px;
}
html[lang=en] .infographic .limit-three {
    right: 63px;
}
html[lang=en] .infographic p.release {
    right: 175px;
    width: 67px;
}
html[lang=en] .infographic .pay2 {
    right: 146px;
}
html[lang=en] .infographic .pay1 {
    left: 141px;
}
html[lang=en] .infographic .limit-one {
    left: 143px;
    width: 106px;
}
html[lang=en] .infographic p.install{
    width: 107px;	
}
html[lang=en] .infographic p.text{
	width: 66px;
}
html[lang=en] div.content .infographic p.lender_person{
    left: 123px;
} 
html[lang=en] div.content .infographic p.set_word{
	left: 142px;
}
html[lang=en] div.content .infographic p.accept_word {
    left: 398px;
}
html[lang=en] div.content .infographic p.accept_word2 {
    left: 666px;
}

html[lang=vi] .infographic .operations-debt {
    top: 176px;
}
html[lang=vi] .infographic .service-debt {
    top: 190px;
}
html[lang=vi] div.content .infographic p.partner-one {
    top: 575px;
}
html[lang=vi] div.content .infographic p.lender_person{
    bottom: 168px;
    left: 96px;	
    width: 122px;
}
html[lang=vi] div.content .infographic p.borrower_wmid{
    top: 330px;	
}
html[lang=vi] div.content .infographic p.contract-limit{
    left: 324px;	
}
html[lang=vi] div.content .infographic p.set_word{
    left: 121px;
}
html[lang=vi] div.content .infographic p.accept_word2 {
    left: 656px;
}
html[lang=vi] div.content .infographic p.borrower{
    top: 809px;
}
html[lang=vi] div.content .infographic p.creditor{
    top: 800px;
}
html[lang=vi] .infographic .card-green{
	top: 533px;
    left: 81px;
    width: 313px;	
}
html[lang=vi] div.content .infographic p.pay1,
html[lang=vi] div.content .infographic p.pay2{
    top: 623px;	
}
html[lang=vi] .infographic .card4 {
    top: 958px;
}
html[lang=vi] .infographic .card6 {
    right: 64px;
    width: 110px;
    top: 949px;
}
html[lang=vi] div.content .infographic p.return{
    left: 58px;	
}
html[lang=vi] div.content .infographic p.profit{
	left: 50px;
    width: 325px;
    bottom: 22px;
}
html[lang=vi] div.content .infographic p.pay2{
 	right: 118px;	
}
html[lang=vi] div.content .infographic p.pay1{
    left: 119px;	
}
html[lang=vi] .infographic .service-debt {
    left: 66px;
}
html[lang=vi] .infographic .card7 {
    bottom: 169px;
}
@media only screen and (max-width: 48em) {

}
