﻿/*！
 * @author: Mr.cat;
 * @createDate: 20160818;
 */
.container {
	width: 1200px;
	margin: 0 auto;
}
.content {
	width: 1000px;
	margin: 0 auto;
}
.orange { color: #da915e; }
section h3 {
	font-size: 34px;
	text-align: center;
	letter-spacing: 1px;
}
section h5 {
	font-size: 24px;
	text-align: center;
	letter-spacing: 2px;
}
section h6 {
	font-size: 14px;
	text-align: center;
	letter-spacing: 3px;
	margin-top: 5px;
}

/* header
 ------------------------------------ */
header {
	height: 54px;
	line-height: 54px;
}
header .top-nav {
	margin-top: 15px;
}
header .top-nav li {
	float: left;
	font-size: 14px;
	height: 24px;
	line-height: 24px;
	padding: 0 16px;
	border-right: 1px solid #ccc;
}
header .top-nav li a:hover {
	color: #e7bc71;
}
header .top-nav li:last-child {
	border-right: none;
	padding-right: 0;
}

/* Banner
 ------------------------------- */
.banner {
	height: 680px;
	background: url(../../images/depository/banner.jpg) center top no-repeat;
}
.banner .content {
	text-align: center;
	height: 680px;
	position: relative;
}
.banner .rrjc-xmbank {
	margin-top: 200px;
	margin-bottom: 50px;
}
.banner h2 {
	font-size: 50px;
	font-weight: 400;
	color: #fff;
	letter-spacing: 10px;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.banner h4 {
	font-size: 30px;
	color: #fff;
	letter-spacing: 5px;
	margin-top: 30px;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}
.banner .arrow-down {
	position: absolute;
	left: 50%;
	bottom: 20px;
	width: 32px;
	height: 18px;
	background: url(../../images/depository/arrow.png) 0 0 no-repeat;
}
.banner .rolling {
	bottom: 35px;
	-webkit-animation: rolling 1.5s infinite;
	   -moz-animation: rolling 1.5s infinite;
		-ms-animation: rolling 1.5s infinite;
			animation: rolling 1.5s infinite;
}

/* Part-1
-------------------------------------------- */
.part-1 h3 {
	margin-top: 54px;
}
.part-1 .box-wrapper {
	margin-top: 44px;
	margin-bottom: 54px;
	padding: 0 94px;
}
.part-1 .box {
	width: 320px;
	height: 370px;
	border: 1px solid #dedede;
	-webkit-transition: box-shadow .5s linear;
	   -moz-transition: box-shadow .5s linear;
		-ms-transition: box-shadow .5s linear;
		 -o-transition: box-shadow .5s linear;
			transition: box-shadow .5s linear;
}
.part-1 .box:hover {
	box-shadow: 0 5px 20px #c6c4d4;
}
.part-1 .box .wrap {
	height: 163px;
	color: #fff;
	padding-top: 45px;
}
.part-1 .box .new { background: url(../../images/depository/bg_1_1.jpg) center top no-repeat; }
.part-1 .box .old { background: url(../../images/depository/bg_1_2.jpg) center top no-repeat; }
.part-1 .wrap h5 {
	text-align: center;
	font-size: 20px;
	font-weight: 200;
}
.part-1 .wrap p {
	margin: 20px 40px;
	font-size: 14px;
	letter-spacing: 3px;
}
.part-1 .box .btn {
	display: block;
	width: 210px;
	height: 44px;
	line-height: 44px;
	background: url(../../images/depository/btn_bg.png) 0 0 no-repeat;
	text-align: center;
	color: #fff;
	font-size: 16px;
	font-weight: 200;
	letter-spacing: 2px;
	margin: 64px auto;
}
.part-1 .box .btn:hover {
	background-position: 0 -131px;
}
.part-1 .box .disabled,
.part-1 .box .disabled:hover {
	background-position: 0 -65px;
}

/* Part-2
-------------------------------------------- */
.part-2 {
	background-color: #f3f3f3;
}
.part-2 h3 {
	padding-top: 54px;
	margin-bottom: 25px;
}
.part-2 h5 {
	margin-bottom: 25px;
}
.part-2 ul li {
	margin-bottom: 22px;
}
.part-2 ul li .point {
	background-color: #fff;
	width: 8px;
	height: 8px;
	float: left;
	margin: 8px 15px 8px 0;
	border-radius: 100%;
}
.part-2 ul li span {
	font-size: 18px;
	color: #f7f7f7;
	letter-spacing: 2px;
}
.part-2 p {
	font-size: 14px;
	line-height: 26px;
	letter-spacing: 1.5px;
	text-align: justify;
}
.part-2 ul li p {
	margin-left: 23px;
}
.part-2 h4 {
	font-size: 18px;
	color: #4d5590;
	margin: 35px auto 25px;
	text-align: center;
}
.part-2 .type {
	text-align: center;
	margin-bottom: 55px;
}
.part-2 .chart {
	margin: 30px auto 40px 140px;
	display: block;
}
.part-2 .btn-large {
	display: block;
	width: 280px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #fff;
	font-size: 16px;
	letter-spacing: 2px;
	background-color: #626cb2;
	border-radius: 25px;
	margin: 40px auto;
}
.part-2 .btn-large:hover {
	background-color: #535984;
}
.part-2 .bg {
	height: 768px;
	background: url(../../images/depository/bg_2.jpg) center top no-repeat;
	padding-top: 54px;
	color: #fff;
}
.part-2 .mgt { margin-top: 55px; }
.part-2 .img-wrapper {
	margin-top: 30px;
	position: relative;
	height: 306px;
	overflow: hidden;
}
.part-2 .img-wrapper img {
	position: absolute;
	-webkit-animation-duration: .5s;
	-o-animation-duration: .5s;
	animation-duration: .5s;
}
.part-2 .img-wrapper .img-1 {
	left: 0;
	top: 153px;
}
.part-2 .img-wrapper .img-2 {
	left: 50%;
	margin-left: -242px;
	top: 78px;
	z-index: 10;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.part-2 .img-wrapper .img-3 {
	right: 0;
	top: 153px;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}
.part-2 .img-wrapper .img-4 {
	left: 50%;
	margin-left: -318.5px;
	z-index: 5;
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
}

/* Part-3
 ------------------------------------------- */
.part-3 {
	padding-top: 54px;
}
.slider {
    height: 404px;
    margin-top: 50px;
    overflow: hidden;
    position: relative;
}
.slider ul {
    position: absolute;
    width: 2000px;
}
.slider ul > li {
    float: left;
    width: 870px;
    padding: 0 65px;
}
.part-3 .box {
	width: 346px;
	height: 404px;
	background-color: #f3f3f3;
}
.part-3 .box .icon {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	margin: 35px auto;
	background-color: #fff;
	background-image: url(../../images/depository/icon_advantage.png);
	background-repeat: no-repeat;
}
.part-3 .box .icon-1 { background-position: 31px 31px; }
.part-3 .box .icon-2 { background-position: 31px -62px; }
.part-3 .box .icon-3 { background-position: 31px -160px; }
.part-3 .box .icon-4 { background-position: 31px -268px; }
.part-3 .box h5 {
	font-size: 20px;
	margin: 30px 0;
}
.part-3 .box p {
	margin: 35px 45px 40px;
	text-align: justify;
	font-size: 14px;
	letter-spacing: 2px;
}

.part-3 .controller {
	margin: 54px auto;
    text-align: center;
}
.part-3 .controller li {
    display: inline-block;
    margin: 0 12px;
}
.part-3 .controller li a {
	background: url(../../images/depository/point.png) left top no-repeat;
    display: block;
    width: 20px;
    height: 20px;
    text-indent: -999em;
}
.part-3 .controller li.current a {
	background: url(../../images/depository/point.png) right top no-repeat;
}

/* Part-4
 ------------------------------------------- */
.part-4 {
	height: 442px;
	background: url(../../images/depository/bg_4.jpg) center top no-repeat;
	color: #fff;
	padding-top: 54px;
	padding-bottom: 54px;
}
.part-4 h3 {
	margin-bottom: 50px;
	letter-spacing: 10px;
}
.part-4 dl {
	margin-bottom: 36px;
}
.part-4 dl dt {
	float: left;
	width: 30px;
	height: 30px;
	background: url(../../images/depository/icon_question.png) center no-repeat;
	margin-right: 20px;
}
.part-4 dl dd {
	margin-left: 50px;
}
.part-4 .question {
	font-size: 20px;
	letter-spacing: 2px;
}
.part-4 .answer {
	font-size: 14px;
	margin-top: 10px;
	letter-spacing: 2px;
	text-align: justify;
}
.part-4 .more {
	font-size: 14px;
	color: #fff;
	margin-left: 50px;
	-webkit-transition: color .5s ease-in;
	   -moz-transition: color .5s ease-in;
		-ms-transition: color .5s ease-in;
		 -o-transition: color .5s ease-in;
			transition: color .5s ease-in;
}
.part-4 .more:hover {
	color: #7a8fd0;
}

/* Footer
 ------------------------------------------- */
footer {
	text-align: center;
	height: 110px;
}
footer span {
	display: block;
	color: #333;
	font-size: 14px;
	padding: 28px 0 20px;
}
footer p {
	font-size: 14px;
	color: #888;
	letter-spacing: 1px;
}

/* goTop
 ------------------------------------------ */
.back-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 76px;
	display: none;
}
.back-top a {
	display: block;
	height: 76px;
	background: url(../../images/depository/btn_backtop.png) left bottom no-repeat;
	text-indent: -9999em;
	border-radius: 50%;
}
.back-top a:hover {
	background-position: left top;
}

/* Agreement
 -------------------------------------------- */
.agreement-wrap {
	width: 450px;
	position: fixed;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 101;
	display: none;
}
.agreement-wrap img {
	width: 450px;
}
.agreement-wrap .close {
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	background: url(../../images/depository/close.png) 0 0 no-repeat;
	text-indent: -99999em;
}

.masker {
	display: none;
	position: absolute;
	z-index: 100;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.2;
	filter: alpha(opacity=20);
}


/* Animate
 -------------------------------------------- */
.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.revealOnScroll { opacity: 0; }
/* flipInY */
@-webkit-keyframes flipInY {
	from {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}

	40% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	60% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		opacity: 1;
	}

	80% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
	}

	to {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
	}
}
@keyframes flipInY {
	from {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}

	40% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	60% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		opacity: 1;
	}

	80% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
	}

	to {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
	}
}
.flipInY {
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	-webkit-animation-name: flipInY;
	animation-name: flipInY;
	opacity: 1;
}

/* zoomIn */
@-webkit-keyframes zoomIn {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}

	50% {
		opacity: 1;
	}
}
@keyframes zoomIn {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}

	50% {
		opacity: 1;
	}
}
.zoomIn {
	-webkit-animation-name: zoomIn;
	animation-name: zoomIn;
	opacity: 1;
}

/* bounceInDown */
@-webkit-keyframes bounceInDown {
	from, 60%, 75%, 90%, to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0);
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
	}

	75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}

	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}

	to {
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes bounceInDown {
	from, 60%, 75%, 90%, to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0);
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
	}

	75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}

	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}

	to {
		-webkit-transform: none;
		transform: none;
	}
}
.bounceInDown {
	-webkit-animation-name: bounceInDown;
	animation-name: bounceInDown;
	opacity: 1;
}

@-webkit-keyframes rolling {
	0% {
		-webkit-transform: translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		-webkit-transform: translate(0, 20px);
		opacity: 0;
	}
}
@keyframes rolling {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translate(0, 20px);
		opacity: 0;
	}
}

@-webkit-keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

.fadeInRight {
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
}

@-webkit-keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}

@-webkit-keyframes zoomInUp {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
		transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	}

	100% {
		opacity: 1;
	}
}

@keyframes zoomInUp {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
		transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	}

	100% {
		opacity: 1;
	}
}

.zoomInUp {
	-webkit-animation-name: zoomInUp;
	animation-name: zoomInUp;
}


.xmcg p{font-size: 16px;text-align: center;color: #444;}
.xmcg p.fs20{font-size: 20px;}
.xmcg .btn-lantoubao{color: #444;}
.xmcg .btn-lantoubao:hover{color: #2ca6e0;}
.safebot:link,.safebot:visited{ display:block; width:150px; height:45px; font-size: 16px; background:url("../../images/zhanghu/anquanzhognxin/safebot1.jpg") no-repeat; text-align:center; line-height:45px; color:#A57545; font-size:16px; margin: 30px auto 10px;}
.safebot:hover{ background:url("../../images/zhanghu/anquanzhognxin/safebot2.jpg") no-repeat; color:#A57545; font-size:16px;}
.xmcg .img01{display: block;margin: 20px auto;}

.mg10{margin: 10px 0;}
.mb20{margin: 0px 0 20px;}
