.crumbs{position:relative;width:100%;min-width:1200px;height:40px;margin:0px auto;background:#f4f4f4;}
.crumbs .crumbsLeft{position:absolute;left:12px;top:0px;height:40px;line-height:40px;}
.crumbs .crumbsLeft font{margin:0px 10px;color:#999999;font-size:12px;}
.crumbs .crumbsLeft img{width:4px; vertical-align:middle;}
.crumbs .crumbsRight{position:absolute;right:8px;top:0px;height:40px;}
.crumbs .crumbsRight .child{margin:0px 10px;color:#999999;font-size:14px;line-height:40px;display:inline-block;vertical-align: top;}
.crumbs .crumbsRight .child.on{color:#5690D7;border-bottom:2px solid #5690D7;height:38px;}
.crumbs .crumbsRight .child:hover{color:#5690D7;border-bottom:2px solid #5690D7;height:38px;}

.main{position:relative;width:1200px;margin:0px auto;}
.main:after{content: "020"; display: block; height: 0; clear: both;visibility:hidden;}
.mainTitle{width:1200px;margin:0px auto;color:#333333;font-size:30px;border-bottom:1px solid #b9b9b9;padding:30px 0px 20px;}
.banner{position:relative;width:100%;height:auto;margin:11px auto 20px auto;overflow:hidden;}
.banner .bg{width:100%; visibility:hidden;}
.banner-img{position:absolute;top:0px;width:100%;height:auto;min-width:1200px;}
.banner-img img{position:absolute;top:0px;left:0px;width:100%;}
.banner-btn{position:absolute;bottom:15px;right:20px;}
.banner-btn img{margin:0px 3px;cursor:pointer;}
.banner-info{overflow: hidden;position:absolute;bottom:0px;left:0px;width:550px;height:76px;background:url(../images/images/bannerInfoBg.png);}
.banner-info .child{position:absolute;top:0px;left:0px;width:550px;height:76px; opacity:0;}
.banner-info .title{position:absolute;width:500px;top:18px;left:18px;color:#fff;font-size:16px;width:500px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.banner-info .info{position:absolute;width:500px;top:46px;left:18px;color:#999999;font-size:12px;width:500px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.navTitle{width:100%;height:auto;margin:20px auto;border-bottom:1px solid #b9b9b9;}
.navTitle .child{position:relative;padding:0px 16px;font-size:14px;color:#333333;margin:20px auto;border-left:1px solid #bdbdbd;display:inline-block;}
.navTitle .child.on{color:#00377D;}
.navTitle .child img{display:none;position:absolute;bottom:-22px;left:50%;width:9px;margin-left:-4px;z-index:2;}
.navTitle .child.on img{display:block;}
.navTitle .child:hover{color:#00377D;}
.navTitle .child:hover img{display:block;}
.navTitle #navTitleLast{border-left:0px;}
.images{position:relative;width:100%;min-width:1200px;height:auto;}
.images:after{content: "020"; display: block; height: 0; clear: both;visibility:hidden;}
.images .content{width:1200px;margin:0px auto;}
.images .content:after{content: "020"; display: block; height: 0; clear: both;visibility:hidden;}
.images .content .child{position:relative;width:265px;height:auto;float:left;margin:20px 15px 20px 20px;}
.images .content .child .childImg{position:relative;width:265px;height:165px;overflow:hidden;}
.images .content .child .childImg img{width:100%; vertical-align:middle;}
.images .content .child .childImg .childImgBg{text-align:right;position:absolute;bottom:10px;left:100%;background:url(../images/grayBg.png);width:100%;height:30px;line-height:30px;}
.images .content .child .childImg .childImgBg{
transition-property: all;
transition-duration: .5s;
-moz-transition-property: all; /* Firefox 4 */
-moz-transition-duration: .5s; /* Firefox 4 */
-webkit-transition-property: all; /* Safari and Chrome */
-webkit-transition-duration: .5s; /* Safari and Chrome */
-o-transition-property: all; /* Opera */
-o-transition-duration: .5s; /* Opera */}
.images .content .child .childImg .childImgBg span{font-weight:bold;margin-right:5%;color:#000;font-size:14px;}
.images .content .child .childImg:hover .childImgBg{left:0px;}
.images .content .child .childTitle{width:100%;color:#333333;font-size:16px;margin:15px 0px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.images .content .child .childIcon img{ vertical-align:middle;margin-right:2px;cursor: pointer;}
.images .content .child .childIcon font{ vertical-align:middle;margin-right:5px;font-size:14px;color:#999999;margin-right:12px;}
.mainBtn{margin:40px 0px 148px 0px;text-align:left;}
.mainBtn .child{border:1px solid #bbb;height:30px;line-height:30px;margin: 0px 2px;text-align:center;color:#333333;font-size:14px;display:inline-block;}
.mainBtn .child:hover{background:#00387d;color:#fff;}
.mainBtn .child.on{background:#00387d;color:#fff;}
.mainBtn .longBtn{width:64px;}
.mainBtn .shortBtn{width:30px;}
.mainBtn .load{display:none; vertical-align:middle;margin:0px auto;}
@media (min-width: 240px) and (max-width: 319px) {
	
}
@media (min-width: 320px) and (max-width: 479px) {
.crumbs{display:none;}

.main{width:290px;}
.mainTitle{width:290px;padding:10px 0px;font-size:22px;}

.banner{margin:6px auto 10px auto;}
.banner .bg{width:auto;height:125px;}
.banner-img{min-width:290px;}
.banner-img img{width:auto;height:125px;}
.banner-btn{bottom:6px;right:6px;}
.banner-btn img{margin:0px 1px;width:10px;}
.banner-info{width:290px;height:31px;}
.banner-info .child{width:290px;height:31px;}
.banner-info .title{position:relative;top:0;left:0;margin-left:10px;font-size:14px;width:225px;height:31px;line-height:31px;}
.banner-info .info{display:none;}

.navTitle{margin:10px auto;}
.navTitle .child{padding:0px 7px;font-size:13px;margin:10px auto;}
.navTitle .child img{bottom:-12px;}
.images{width:290px;min-width:290px;}
.images .content{width:290px;}
.images .content .child{width:133px;margin:10px 5px 10px 5px;}
.images .content .child .childImg{width:133px;height:83px;}
.images .content .child .childTitle{font-size:14px;margin:3px 0px;}
.images .content .child .childIcon img{margin-right:1px;}
.images .content .child .childIcon font{margin-right:3px;font-size:12px;margin-right:6px;}

.mainBtn{margin:20px 0px 20px 0px;}
.mainBtn .child{height:30px;line-height:30px;font-size:14px;}
.mainBtn .longBtn{display:none;}
.mainBtn .shortBtn{width:30px;}
}
@media (min-width: 480px) and (max-width: 639px) {
.crumbs{display:none;}


.main{width:435px;}
.mainTitle{width:435px;padding:15px 0px;font-size:26px;}

.banner{margin:9px auto 15px auto;}
.banner .bg{width:auto;height:188px;}
.banner-img{min-width:435px;}
.banner-img img{width:auto;height:188px;}
.banner-btn{bottom:9px;right:9px;}
.banner-btn img{margin:0px 2px;}
.banner-info{width:435px;height:46px;}
.banner-info .child{width:435px;height:46px;}
.banner-info .title{position:relative;top:0;left:0;margin-left:10px;font-size:16px;width:338px;height:45px;line-height:45px;}
.banner-info .info{display:none;}

.navTitle{margin:15px auto;}
.navTitle .child{padding:0px 10px;font-size:20px;margin:15px auto;}
.navTitle .child img{bottom:-17px;}

.images{min-width:450px;}
.images .content{width:450px;}
.images .content .child{width:200px;margin:20px 8px;}
.images .content .child .childImg{width:200px;height:125px;}

.mainBtn{margin:30px 0px 30px 0px;}
.mainBtn .child{height:30px;line-height:30px;font-size:14px;}
.mainBtn .longBtn{width:64px;}
.mainBtn .shortBtn{width:30px;}

}
@media (min-width: 640px) and (max-width:1023px ) {
.crumbs{display:none;}

.main{width:580px;}
.mainTitle{width:580px;font-size:36px;}

.banner{margin:11px auto 20px auto;}
.banner .bg{width:auto;height:250px;}
.banner-img{min-width:580px;}
.banner-img img{width:auto;height:250px;}
.banner-btn{bottom:15px;right:20px;}
.banner-btn img{margin:0px 3px;cursor:pointer;}
.banner-info{width:580px;height:62px;}
.banner-info .child{width:580px;height:62px;}
.banner-info .title{position:relative;top:0;left:0;margin-left:20px;font-size:26px;width:450px;height:62px;line-height:62px;}
.banner-info .info{display:none;}

.navTitle{margin:20px auto;}
.navTitle .child{padding:0px 18px;font-size:26px;margin:20px auto;}

.images{min-width:580px;}
.images .content{width:580px;}
.images .content .child{width:265px;height:225px;float:left;margin:20px 10px 20px 10px;}

.mainBtn{margin:50px 0px 50px 0px;}
.mainBtn .child{height:30px;line-height:30px;font-size:14px;}
.mainBtn .longBtn{width:64px;}
.mainBtn .shortBtn{width:30px;}
}
@media (min-width: 1024px) and (max-width:1199px ) {
.crumbs{min-width:1024px;}
.main{width:900px;}
.mainTitle{width:900px;}
.images{min-width:900px;height:auto;}
.images .content{width:900px;margin:0px auto;}
.images .content .child{width:200px;margin:15px 10px 15px 10px;}
.images .content .child .childImg{width:200px;height:124px;}
.mainBtn{margin:40px 0px 80px 0px;}

}


#bannerOut{
	animation:bannerOut 0.5s  ease-out 0s  both;
	-moz-animation:bannerOut 0.5s  ease-out 0s  both;
	-webkit-animation:bannerOut 0.5s   ease-out 0s  both;
	-o-animation:bannerOut 0.5s   ease-out 0s  both;
}
@keyframes bannerOut{
0%{ transform:translateX(0px);}
100%{ transform:translateX(400px);}
}
@-moz-keyframes bannerOut{
0%{-moz-transform:translateX(0px);}
100%{ -moz-transform:translateX(400px);}
}
@-webkit-keyframes bannerOut {
0%{-webkit-transform:translateX(0px);}
100%{ -webkit-transform:translateX(400px);}
}
@-o-keyframes bannerOut{
0%{-o-transform:translateX(0px);}
100%{ -o-transform:translateX(400px);}
}


/*css3 animate*/
#bannerInfoIn{
	animation:bannerInfoIn 0.5s  ease-out 0s  both;
	-moz-animation:bannerInfoIn 0.5s ease-out 0s  both;
	-webkit-animation:bannerInfoIn 0.5s   ease-out 0s  both;
	-o-animation:bannerInfoIn 0.5s   ease-out 0s  both;
}
@keyframes bannerInfoIn{
0%{ transform:translateX(-200px); opacity:0;}
100%{ transform:translateX(0px);opacity:1;}
}
@-moz-keyframes bannerInfoIn{
0%{ -moz-transform:translateX(-200px); opacity:0;}
100%{ -moz-transform:translateX(0px);opacity:1;}
}
@-webkit-keyframes bannerInfoIn {
0%{ -webkit-transform:translateX(-200px); opacity:0;}
100%{ -webkit-transform:translateX(0px);opacity:1;}
}
@-o-keyframes bannerInfoIn{
0%{ -o-transform:translateX(-200px); opacity:0;}
100%{ -o-transform:translateX(0px);opacity:1;}
}
#bannerInfoOut{
	animation:bannerInfoOut 0.5s  ease-out 0s  both;
	-moz-animation:bannerInfoOut 0.5s ease-out 0s  both;
	-webkit-animation:bannerInfoOut 0.5s   ease-out 0s  both;
	-o-animation:bannerInfoOut 0.5s   ease-out 0s  both;
}
@keyframes bannerInfoOut{
100%{ transform:translateX(200px); opacity:0;}
0%{ transform:translateX(0px);opacity:1;}
}
@-moz-keyframes bannerInfoOut{
100%{ -moz-transform:translateX(200px); opacity:0;}
0%{ -moz-transform:translateX(0px);opacity:1;}
}
@-webkit-keyframes bannerInfoOut {
100%{ -webkit-transform:translateX(200px); opacity:0;}
0%{ -webkit-transform:translateX(0px);opacity:1;}
}
@-o-keyframes bannerInfoOut{
100%{ -o-transform:translateX(200px); opacity:0;}
0%{ -o-transform:translateX(0px);opacity:1;}
}