@charset "utf-8";
/* CSS Document */
.banner {
	position:relative;
	width:100%;
	height:auto;
	overflow:hidden;
	padding-top:0px;
}
.banner .container {
	height:100%;
}
.banner .contents {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
.banner .content {
	position:absolute;
	top:0px;
	width:100%;
	height:100%;
	background-size:100%;
	background-repeat:no-repeat;
	background-position:left top;
	text-align:center;
}
.banner .contentInfo {
	display:none;
	overflow:hidden;
	position:absolute;
	top:50%;
	left:100px;
	left:378px;
	width:675px;
	height:200px;
	margin-top:-100px;
	z-index:1;
	text-align:left;
}
.banner .contentInfo .sub {
	text-shadow:0px 0px 3px #222;
	position:absolute;
	top:17px;
	left:8px;
	width:2px;
	height:120px;
	background:#fff;
}
.banner .contentInfo .sub {
	transform-origin:left bottom;
	-moz-transform-origin:left bottom;
	-ms-transform-origin:left bottom;
	-o-transform-origin:left bottom;
	-webkit-transform-origin:left bottom;
}
.banner .contentInfo .quan {
	text-shadow:0px 0px 3px #222;
	position:absolute;
	top:128px;
	left:2px;
	width:14px;
	height:14px;
	border:2px solid #fff;
	border-radius:16px;
	-moz-border-radius:16px;
	-ms-border-radius:16px;
	-o-border-radius:16px;
	-webkit-border-radius:16px;
}
.banner .contentInfo .title {
	text-shadow:0px 0px 3px #222;
	position:absolute;
	left:32px;
	top:8px;
	line-height:50px;
	font-size:50px;
	color:#fff;
	font-weight:bold;
	font-family:"微软雅黑";
}
.banner .contentInfo .info {
	text-shadow:0px 0px 3px #222;
	position:absolute;
	left:32px;
	top:70px;
	line-height:26px;
	font-size:18px;
	color:#fff;
	font-family:"微软雅黑", serif;
	font-weight:noraml;
}
.banner .contentInfo .btn {
	text-shadow:0px 0px 3px #222;
	text-shadow:none;
	position:absolute;
	top:146px;
	left:32px;
	color:#fff;
	/*border:1px solid #fff;*/
	text-align:center;
	line-height:1em;
	width:130px;
	height:36px;
	font-size: 1em;
	background-color: #ff6000;
	background-color: #1169af;
	background-color: #00aeef;
	border-radius:6px;
	-moz-border-radius:6px;
	-ms-border-radius:6px;
	-o-border-radius:6px;
	-webkit-border-radius:6px;
}
.banner .contents .content:nth-child(1) .contentInfo .title {text-shadow:0px 0px 3px #fff;position:absolute;left:32px;top:8px;line-height:50px;font-size:50px;color:#000;font-weight:bold;}
.banner .contents .content:nth-child(1) .contentInfo .info {text-shadow:0px 0px 3px #fff;position:absolute;left:32px;top:70px;line-height:26px;	font-size:18px;	color:#000;	font-weight:bold;}
.banner .contents .content:nth-child(1) .contentInfo .btn {position:absolute;top:146px;left:32px;color:#fff;text-align:center;line-height:1em;	width:130px;height:36px;font-size: 1em;	background-color: #e42620;border-radius:6px;-moz-border-radius:6px;	-ms-border-radius:6px;-o-border-radius:6px;	-webkit-border-radius:6px; text-shadow:none;}

.banner .contents .content:nth-child(2) .contentInfo .title {text-shadow:0px 0px 3px #fff;position:absolute;left:32px;top:8px;line-height:50px;font-size:50px;color:#000;font-weight:bold;}
.banner .contents .content:nth-child(2) .contentInfo .info {text-shadow:0px 0px 3px #fff;position:absolute;left:32px;top:70px;line-height:26px;	font-size:18px;	color:#000;	font-weight:bold;}
.banner .contents .content:nth-child(2) .contentInfo .btn {position:absolute;top:146px;left:32px;color:#fff;text-align:center;line-height:1em;	width:130px;height:36px;font-size: 1em;	background-color: #e42620;border-radius:6px;-moz-border-radius:6px;	-ms-border-radius:6px;-o-border-radius:6px;	-webkit-border-radius:6px; text-shadow:none;}

.banner .contents .content:nth-child(3) .contentInfo .title {text-shadow:0px 0px 3px #fff;position:absolute;left:32px;top:8px;line-height:50px;font-size:50px;color:#000;font-weight:bold;}
.banner .contents .content:nth-child(3) .contentInfo .info {text-shadow:0px 0px 3px #fff;position:absolute;left:32px;top:70px;line-height:26px;	font-size:18px;	color:#000;	font-weight:bold;}
.banner .contents .content:nth-child(3) .contentInfo .btn {position:absolute;top:146px;left:32px;color:#fff;text-align:center;line-height:1em;	width:130px;height:36px;font-size: 1em;	background-color: #e42620;border-radius:6px;-moz-border-radius:6px;	-ms-border-radius:6px;-o-border-radius:6px;	-webkit-border-radius:6px; text-shadow:none;}
.banner .bannerNav {
	position:absolute;
	bottom:10px;
	width:100%;
	text-align:center;
	z-index:2;
}
.banner .bannerNav .bannerNavChild {
	margin:0 10px;
	width:10px;
	height:10px;
	display:inline-block;
*display:inline;
*zoom:1;
	background:#fff;
	border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	-o-border-radius:10px;
	-webkit-border-radius:10px;
	cursor:pointer;
}
.banner .bannerNav .bannerNavChild.on {
	background:#ff0000 !important;
	animation:bannerNavChildOn .2s ease-in-out 0s both;
	-moz-animation:bannerNavChildOn .2s ease-in-out 0s both;
	-webkit-animation:bannerNavChildOn .2s ease-in-out 0s both;
	-o-animation:bannerNavChildOn .2s ease-in-out 0s both;
}
.banner .bannerBg {
	width:100%;
	height:auto;
	vertical-align:middle;
}

.banner .contentInfo .sub {
	animation:sub .5s ease-in-out 0s both;
	-moz-animation:sub .5s ease-in-out 0s both;
	-webkit-animation:sub .5s ease-in-out 0s both;
	-o-animation:sub .5s ease-in-out 0s both;
}
@keyframes sub {
0% {
height:0px;
}
100% {
height:120px;
}
}
@-moz-keyframes sub {
0% {
height:0px;
}
100% {
height:120px;
}
}
@-webkit-keyframes sub {
0% {
height:0px;
}
100% {
height:120px;
}
}
@-o-keyframes sub {
0% {
height:0px;
}
100% {
height:120px;
}
}
.banner .contentInfo .quan {
	animation:quan .2s ease-in-out .5s both;
	-moz-animation:quan .2s ease-in-out .5s both;
	-webkit-animation:quan .2s ease-in-out .5s both;
	-o-animation:quan .2s ease-in-out .5s both;
}
@keyframes quan {
0% {
transform:scale(0);
}
100% {
transform:scale(1);
}
}
@-moz-keyframes quan {
0% {
-moz-transform:scale(0);
}
100% {
-moz-transform:scale(1);
}
}
@-webkit-keyframes quan {
0% {
-webkit-transform:scale(0);
}
100% {
-webkit-transform:scale(1);
}
}
@-o-keyframes quan {
0% {
-o-transform:scale(0);
}
100% {
-o-transform:scale(1);
}
}
.banner .contentInfo .title {
	animation:tranx .8s ease-in-out .5s both;
	-moz-animation:tranx .8s ease-in-out .5s both;
	-webkit-animation:tranx .8s ease-in-out .5s both;
	-o-animation:tranx .8s ease-in-out .5s both;
}
.banner .contentInfo .info {
	animation:tranx .8s ease-in-out .7s both;
	-moz-animation:tranx .8s ease-in-out .7s both;
	-webkit-animation:tranx .8s ease-in-out .7s both;
	-o-animation:tranx .8s ease-in-out .7s both;
}
.banner .contentInfo .btn {
	animation:tranx .8s ease-in-out .9s both;
	-moz-animation:tranx .8s ease-in-out .9s both;
	-webkit-animation:tranx .8s ease-in-out .9s both;
	-o-animation:tranx .8s ease-in-out .9s both;
}
@keyframes tranx {
0% {
transform:translateX(-700px);
}
100% {
transform:translateX(0);
}
}
@-moz-keyframes tranx {
0% {
-moz-transform:translateX(-700px);
}
100% {
-moz-transform:translateX(0);
}
}
@-webkit-keyframes tranx {
0% {
-webkit-transform:translateX(-700px);
}
100% {
-webkit-transform:translateX(0);
}
}
@-o-keyframes tranx {
0% {
-o-transform:translateX(-700px);
}
100% {
-o-transform:translateX(0);
}
}
 @keyframes bannerNavChildOn {
0% {
background:#fff;
transform:scale(1);
}
50% {
transform:scale(0);
}
100% {
background:#e50012;
transform:scale(1);
}
}
@-moz-keyframes bannerNavChildOn {
0% {
background:#fff;
-moz-transform:scale(1);
}
50% {
transform:scale(0);
}
100% {
background:#e50012;
-moz-transform:scale(1);
}
}
@-webkit-keyframes bannerNavChildOn {
0% {
background:#fff;
-webkit-transform:scale(1);
}
50% {
transform:scale(0);
}
100% {
background:#e50012;
-webkit-transform:scale(1);
}
}
@-o-keyframes bannerNavChildOn {
0% {
background:#fff;
-o-transform:scale(1);
}
50% {
transform:scale(0);
}
100% {
background:#e50012;
-o-transform:scale(1);
}
}
@media (max-width:767px)
{
.banner .content {
    background-size: auto 200px;
    background-position: 60% 0px;
    background-attachment: inherit;
}
.banner .contentInfo {
    top: 50%;
    left: 10px;
    height: 200px;
    width: 100%;
    margin-top: -100px;
}
.banner .contentInfo .title {
    position: relative;
    left: 32px;
    top: 0px;
    line-height: 30px;
    font-size: 16px;
    padding-top: 40px;
	font-weight: bold;
}

.banner .contentInfo .info {
display: none;
}

.banner .contentInfo .btn {
    position: relative;
    top: 0;
    left: 32px;
    /*line-height: 32px;*/
    margin-top: 6px;
    width: 130px;
    height: 36px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    -webkit-border-radius: 6px;
}
.banner .contents .content:nth-child(1) .contentInfo .title {position: relative; left: 32px; top: 0px; line-height: 30px; font-size: 16px; padding-top: 40px;font-weight: bold; color:#000;}
.banner .contents .content:nth-child(1) .contentInfo .btn {position:relative;top:0px;left:32px;text-shadow:none;}
.banner .contents .content:nth-child(2) .contentInfo .title {position: relative; left: 32px; top: 0px; line-height: 30px; font-size: 16px; padding-top: 40px;font-weight: bold; color:#000;}
.banner .contents .content:nth-child(2) .contentInfo .btn {position:relative;top:0px;left:32px;text-shadow:none;}
.banner .contents .content:nth-child(3) .contentInfo .title {position: relative; left: 32px; top: 0px; line-height: 30px; font-size: 16px; padding-top: 40px;font-weight: bold; color:#000;}
.banner .contents .content:nth-child(3) .contentInfo .btn {position:relative;top:0px;left:32px;text-shadow:none;}
	.banner .bannerBg {
	width:100%;
	height:200px;
	vertical-align:middle;
	}
	
}

/*apid平板电脑 调整部分*/
@media (min-width:768px) and (max-width:1024px)
{
	.banner .contentInfo {left:60px;}
}

@media (min-width:1025px) and (max-width:1366px)
{
	.banner .contentInfo {left:136px;}
}

@media (min-width:1367px) and (max-width:1600px)
{
	.banner .contentInfo {left:150px;}
}


