.banner{position:relative;width:100%;height:100%;overflow:hidden;}

.banner .container{height:100%;}

.banner .contents{position:absolute;top:0;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;width:875px;height:200px;margin-top:-100px;z-index:1;text-align:left;}

.banner .contentInfo .sub{text-shadow:0px 0px 6px #1d3da0;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 6px #1d3da0;position:absolute;top:128px;left:0px;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 6px #1d3da0;position:absolute;left:32px;top:8px;line-height:50px;font-size:40px;color:#fff;font-family:"微软雅黑";}

.banner .contentInfo .info{text-shadow:0px 0px 6px #1d3da0;position:absolute;left:32px;top:70px;line-height:32px;font-size:20px;color:#fff;}

.banner .contentInfo .btn{text-shadow:0px 0px 6px #1d3da0;position:absolute;top:146px;left:32px;color:#fff;border:1px solid #fff;text-align:center;line-height:32px;width:110px;height:30px; border-radius:30px;-moz-border-radius:30px;-ms-border-radius:30px;-o-border-radius:30px;-webkit-border-radius:30px;}

.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:#000;

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;}


@media (max-width: 639px) {

.banner{ height:100%; top:3rem; margin-bottom:2rem}

.banner .contents{top:0px;}

.banner .content{background-size:auto 160px;background-position:center 0px;background-attachment: inherit;}

.banner .contentInfo{top:50%;left:0px;height:200px;width:100%;margin-top:-100px;}

.banner .contentInfo .sub{top:47px;left:8px;width:2px;height:120px;}

.banner .contentInfo .quan{top:98px;left:0px;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{position:relative;left:32px;top:0px;line-height:30px;font-size:22px;padding-top:40px;}

.banner .contentInfo .info{display:none;position:relative;left:32px;top:0px;line-height:32px;padding-top:10px;font-size:20px;}

.banner .contentInfo .btn{position:relative;top:0;left:32px;line-height:32px;margin-top:6px;width:110px;height:30px; border-radius:30px;-moz-border-radius:30px;-ms-border-radius:30px;-o-border-radius:30px;-webkit-border-radius:30px;}

.banner .bannerNav{bottom:10px;}

.banner .bannerNav .bannerNavChild{margin:0 10px;width:10px;height:10px;border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;-webkit-border-radius:10px;}

.banner .bannerBg{width:auto;height:160px;}



@keyframes sub{

0%{height:0px;}

100%{height:60px;}

}

@-moz-keyframes sub{

0%{height:0px;}

100%{height:60px;}

}

@-webkit-keyframes sub {

0%{height:0px;}

100%{height:60px;}

}

@-o-keyframes sub{

0%{height:0px;}

100%{height:60px;}

}



}

@media (min-width: 640px) and (max-width:1023px ) {

.banner{ height:120%}

.banner .content{background-size:auto 320px;background-position:center 0px;background-attachment: inherit;}

.banner .contents{top:0;}

.banner .contentInfo{top:50%;left:0px;height:200px;width:100%;margin-top:-100px;}

.banner .contentInfo .sub{top:17px;left:8px;width:2px;height:120px;}

.banner .contentInfo .quan{top:128px;left:0px;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{position:relative;left:32px;top:0px;line-height:50px;font-size:40px;}

.banner .contentInfo .info{position:relative;left:32px;top:0px;line-height:32px;padding-top:10px;font-size:20px;}

.banner .contentInfo .btn{position:relative;top:0;left:32px;line-height:32px;margin-top:6px;width:110px;height:30px; border-radius:30px;-moz-border-radius:30px;-ms-border-radius:30px;-o-border-radius:30px;-webkit-border-radius:30px;}

.banner .bannerNav{bottom:10px;}

.banner .bannerNav .bannerNavChild{margin:0 10px;width:10px;height:10px;border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;-webkit-border-radius:10px;}

.banner .bannerBg{width:auto;height:320px;  opacity: 0;}



}

@media (min-width: 1024px) and (max-width:1199px ) {

.banner{}

.banner .contents{top:0;}

.banner .content{background-size:auto 500px;background-position:center 0px;background-attachment: inherit;}

.banner .contentInfo{margin-top:-100px;}

.banner .bannerBg{width:auto;height:500px;}



}

@media (min-width: 1200px) and (max-width:1439px ) {



}

@media (min-width: 1440px) and (max-width:1920px ) {



}







@keyframes scaleOpacityShow{

0%{ transform: scale(0) rotate(20deg);opacity:0;}

80%{ opacity:0.5;}

100%{ transform:scale(1) rotate(0deg); opacity:1;}

}

@-moz-keyframes scaleOpacityShow{

0%{ -moz-transform: scale(0) rotate(20deg);opacity:0;}

80%{ opacity:0.5;}

100%{ -moz-transform:scale(1) rotate(0deg); opacity:1;}

}

@-webkit-keyframes scaleOpacityShow {

0%{ -webkit-transform: scale(0) rotate(20deg);opacity:0;}

80%{ opacity:0.5;}

100%{ -webkit-transform:scale(1) rotate(0deg); opacity:1;}

}

@-o-keyframes scaleOpacityShow{

0%{ -o-transform: scale(0) rotate(20deg);opacity:0;}

80%{ opacity:0.5;}

100%{ -o-transform:scale(1) rotate(0deg); opacity:1;}

}