*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {font-family: "Microsoft YaHei", arial; height: 100%;line-height: 1.2;}

#container{
	min-height: 100%;
	position: relative;
}

#header{
	position: relative;
	top: 0;
	left: 0;
	right: 0;
}

.padding-top0 {padding-top: 0}
.padding-top10 {padding-top: 0.8em}
.padding-top20 {padding-top: 1.5em}
.padding-bottom0 {padding-bottom: 0}
.padding-bottom10 {padding-bottom: 0.8em}
.padding-left0 {padding-left: 0}
.padding-left10 {padding-left: 0.8em}
.padding-left20 {padding-left: 1.5em}
.padding-left30 {padding-left: 2em}
.padding-left50 {padding-left: 4em}
.padding-right0 {padding-right: 0}
.padding-right10 {padding-right: 0.8em}
.padding-right20 {padding-right: 1.5em}
.padding-right30 {padding-right: 2em}
.padding-right50 {padding-right: 4em}
.margin-bottom10 {margin-bottom: 0.8em}
.col-xs-offset {margin-right: 100%;}

.bg-blue {background: #167dbe}
.bg-lblue {background: #017bff}
.bg-dblue {background: #1b5aa1}
.bg-green {background:#4cd5b9}
.bg-purple {background:#755bfc}
.hd-flex {display: flex;}

.txt-white {color: #fff}
.txt-lblue {color: #daedfe}
.txt-lgrey {color: #afafaf}
.txt-grey {color: #4e4d4d}
.txt-dgrey {color: #5a5d62}
.txt-red {color: #FF0000}
.font07 {font-size: 0.7em}
.font08 {font-size: 0.8em}
.font09 {font-size: 0.9em}
.font10 {font-size: 1em}
.font12 {font-size: 1.2em}
.font13 {font-size: 1.3em}
.font16 {font-size: 1.6em}
.smain-title {font-size: 2.3em}
.main-title {
	font-size: 1.3em; 
	color: #1B1B1B; 
	font-weight: 700
}
.sub-title {
	background: #a5c4e2;
    color: #fff;
    font-size: 1.2em;
    padding: 5px 20px;
}
.hbold {font-weight: 600}

.border0 {border: 0}
.border-radius0 {border-radius: 0}
.border-bottom {border-bottom: #2D2D2D 0.2em solid}

.img-center{display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;}

.hd-logo{ width: 10em; height: auto}
.hd-user, .hd-menu {width: 20px; height: auto}

.col-register {	padding-left:2em;}
	.col-register img{width:70%}

#page-wrap {min-height: 30em}

.form-term {font-size:0.9em; line-height:20px}

.term-style {}
.term-style li {padding-bottom: 1em}
/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.icon-bar {
  display: inline-flex;
  position: fixed;
  bottom: 3%;
  left:50%;
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  transform: translate(-50%);
	z-index:100;
}

/* Style the icon bar links */
.icon-bar a { /*display: inline;*/
  display: block;
  text-align: center;
  padding: 5px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}


.icon-fx {
  display: inline-flex;
  position: relative;
  bottom: 10%;
  left:50%;
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  transform: translate(-50%);
	z-index:100;
  cursor: pointer;
}

/* Style the icon bar links */
.icon-fx a { /*display: inline;*/
  display: block;
  text-align: center;
  padding: 5px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;

}


/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  /*background-color: #000;*/
}

.icon-cs {
  color: white;
}

.icon-online {
  color: white;
}

.icon-qq {
  color: white;
}

.icon-cs img, .icon-online img, .icon-qq img{width: 3em}

/*----- table style-----*/

.table-row tr:nth-child(odd){
    background-color:#fbfbfb
}
.table-row tr:nth-child(even){
    background-color:#ececec
}


.news td:nth-child(2) {
    text-align:center;
}
/*----- footer-----*/

#footer{
	height: 100px;
	background: #f7f7f9;
}
.footer { background: #f7f7f9; color:#a9a9ab;}
.footer p { text-align: center; font-size: 0.85em; line-height: 1.2em} 

/*----- login page -----*/
.id-content-txt {font-size: 0.9em}

/*----- login page -----*/
.purple-gradient {
    background: -webkit-linear-gradient(50deg,#ff6ec4,#7873f5)!important;
    background: -o-linear-gradient(50deg,#ff6ec4,#7873f5)!important;
	background: linear-gradient(40deg,#ff6ec4,#7873f5)!important;}
.z-depth-1 {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)!important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)!important;
}
.color-block {
    text-align: center;
    height: 130px;
    color: #fff;
    padding: 40px;
}

.login-bg {
	background: url(../images/login-bg.png) ;
	background-position: bottom center;
	background-repeat:  no-repeat;
	/*background-attachment: fixed;*/
	background-size:  cover;
	background-color: #fff;
	width: 100%;
	min-height: 250px;
}
.login-logo {
	display:block;
	text-align:center;
}
	.login-logo img{
		width: 100px;
	}	

.input-group-addon-login {
	background: url(../images/icon-id.png) no-repeat;
	padding: 0 0 0 1.5em;
	background-size: 2.3em;
	background-position-x: 2em;
}
.input-group-addon-pass {
	background: url(../images/icon-pass.png) no-repeat;
	padding: 0 0 0 1.5em;
	background-size: 2.3em;
	background-position-x: 2em;}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }



/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 400px) {
  .hd-logo{ width: 8em; height: auto}
  .col-register {padding-left:1em;	}
	  .col-register img{width:80%}
  .login-bg {min-height: 200px;}

	.id-content-txt {font-size: 0.8em}
	

}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 320px) {
  .hd-logo{ width: 8em; height: auto}
  .col-register {padding-left:0.5em;}
	  .col-register img{width:80%}
  .login-bg {min-height: 200px;}
	
.id-content-txt {font-size: 0.7em}
}

/** Center aligned placeholder text */

input {
	box-sizing: border-box;
	width: 100%;
	padding: 0.5em;
	border: 1px solid #ced4da;
	/*border-radius: 0.5em;*/
	text-align: center;
}

::-webkit-input-placeholder {
   color: #808080;
   text-align: center;

}

:-moz-placeholder {
   color: #808080;
   text-align: center;

}

.form-check-input {width:10%;}
input .input-style {border-radius: 0}
/*---- bank icon ----*/

.bank-icbc {
	background: url(../images/bank/icbc.jpg) no-repeat;
	padding: 0 0 0 1.5em;
	background-size: 2.3em;
	background-position-x: 2em;
}

.bank-agri {
	background: url(../images/bank/agri.jpg) no-repeat;
	padding: 0 0 0 1.5em;
	background-size: 2.3em;
	background-position-x: 2em;
}

.bank-cons {
	background: url(../images/bank/cons.jpg) no-repeat;
	padding: 0 0 0 1.5em;
	background-size: 2.3em;
	background-position-x: 2em;
}

.bank-cmb {
	background: url(../images/bank/cmb.jpg) no-repeat;
	padding: 0 0 0 1.5em;
	background-size: 2.3em;
	background-position-x: 2em;
}

.bank-apd {
	background: url(../images/bank/apd.jpg) no-repeat;
	padding: 0 0 0 1.5em;
	background-size: 2.3em;
	background-position-x: 2em;
}

.bank-pingan {
	background: url(../images/bank/pingan.jpg) no-repeat;
	padding: 0 0 0 1.5em;
	background-size: 2.3em;
	background-position-x: 2em;
}

.bank-comm {
	background: url(../images/bank/comm.jpg) no-repeat;
	padding: 0 0 0 1.5em;
	background-size: 2.3em;
	background-position-x: 2em;
}

/*--- tab ---*/
.tab-menu  { 
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
	justify-content: center;
}
ul.tab-menu  { 
	/*overflow: hidden;
    margin: 0;
    padding: 0;*/

}
ul.tab-menu li {
	background: #167dbe;
	margin: 0.3em 0.1em;
	padding:0.6em;
	list-style: none;
	flex: 1;
	flex-basis: auto;
	text-align: center;
}


.tab-menu a{
	color: #fff;
	font-size: 1em;
}

/*--- ul style ---*/
ul.ul-style {
	line-height: 1.2em;


}
ul.ul-style li{
	padding-bottom: 0.5em;

}

ol.ul-style {
	line-height: 1.2em;


}
ol.ul-style li{
	padding-bottom: 0.5em;

}


/*--- content page ---*/
.cmain-title {
	font-size: 1em;
	color: #20638e;
	font-weight: bold;
}
.csub-title {
	font-size: 1em;
	color: #3277a2;
	/* font-weight: bold; */
}
.c-details {
	color: #505050;
	padding-bottom: 3em;
}


/*--- table ---*/
.table-style {
	border: 1px solid #9dc0d6;
	font-size:1em;
	text-align:center;
}
	.table-style th {
		background:#A0AAB5;
		color:#ffffff;
		border: 1px solid #a0aab5;
		font-weight:normal;
		padding: 0.5em;
	}
	.table-style td {
		border: 1px solid #a0aab5;
		padding: 0.5em;
	}
	.table-style tr:nth-child(odd) {background-color: #f2f2f2;}


.table-style-record {
	font-size:0.8em;
	text-align:left;
}
	.table-style-record th {
		background:#A0AAB5;
		color:#ffffff;
		font-weight:normal
	}
	.table-style-record td {
		padding: 1em;
	}
	.table-style-record tr:nth-child(odd) {background-color: #f2f2f2;}


.table_row {
	border-bottom: 1px solid #e6e7e8
}
.table_row:last-child {border-bottom: 0;}
.table_row:nth-child(odd) {background-color: #f2f2f2;}

/*--- FAQ ---*/
.btn-expand {
	font-weight: 400;
    color: #007bff;
    text-decoration: none;
	text-align: left;
}




/*--- carousel-caption ---*/

.banner-caption {
    position: absolute;
    right: 15%;
    bottom: 5px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
	
}


	.dark-layer {
	background: #000;
	padding: 3.7em;
	opacity:0.8;
    position: absolute;
    bottom: 0;
    width: 100%;
}
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 600px) {

.banner-caption  {
    position: absolute;
    bottom: -8px;
    z-index: 10;
    padding-top: 20px;
    color: #fff;
    text-align: center;
    line-height: 1em;
}
	.banner-indicators {
		bottom:-5px;
	}
	.dark-layer {
	background: #000;
	padding: 2.5em;
	opacity:0.8;
    position: absolute;
    bottom: 0;
    width: 100%;
}
	
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 320px) {
.banner-caption  {
	bottom: -18px;
	font-size: 0.8em;
	line-height: 1.2em;
	}
	.banner-indicators {
		bottom:-12px;
	}
	.dark-layer {
	background: #000;
	padding: 2.3em;
	opacity:0.8;
    position: absolute;
    bottom: 0;
    width: 100%;
}

}

/** Center aligned placeholder text */


/*------ page advantage -------*/
.pg-advantage-txt {
	padding: 3em 0;
}
.pg-advantage-img{
	width: 500px;
	height: auto;
}
@media (max-width: 767px) {	
	.pg-advantage-txt, .pg-advantage-img {
	width: 100%;
	height: auto
}
	

}
	
.btn-download {
	border-radius: 2em;
}
	


.image {
	width: 500px;
	height: auto;
}