.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 !important;height:38px;}
.crumbs .crumbsRight .child:hover{color:#5690D7;border-bottom:2px solid #5690D7;height:38px;}
.banner{position:relative;min-width:1200px;margin:0px auto;overflow:hidden;width:1200px;max-height:895px;}
.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{position:absolute;top:30px;left:30px;width:320px;height:240px;background:url(../images/about/bannerMsgBg.png); opacity:0;}
.banner-info .title{position:absolute;top:30px;left:25px;color:#fff;font-size:18px;width:270px;}
.banner-info .info{position:absolute;top:70px;left:25px;color:#fff;font-size:30px;width:270px;}
.banner-info .state{position:absolute;bottom:30px;left:25px;color:#fff;font-size:18px;width:270px;}
.bannerTitle{min-width:1200px;margin:12px auto;width:1200px;color:#333333;font-size:30px;border-bottom:1px solid #b9b9b9;height:70px;line-height:70px;}

.main{position:relative;min-width:1200px;margin:0px auto;width:1200px;}
.main:after{content: "020"; display: block; height: 0; clear: both;visibility:hidden;}
.main .mainLeft{position:relative;float:left;width:800px;padding:14px 0px;}
.main .mainLeft .mainTitle{margin:26px 0px;color:#00377D;font-size:18px;}
.main .mainLeft .title{font-size:14px;margin:5px 0px;}
.main .mainLeft .title font{font-weight:bold;}
.main .mainLeft .info{font-size:14px;line-height:25px;color:#333333;margin-bottom:28px;}
.main .mainLeft img{max-width:100%;height:auto !important;}
.main .mainRight{position:relative;float:right;width:330px;}
.main .mainRight .child{position:relative;height:230px;width:330px;border-bottom:1px solid #b9b9b9;text-align:center;}
.main .mainRight .child .childImg{width:110px;margin:45px 0px 22px 0px; vertical-align:middle;}
.main .mainRight .child .childTitle{color:#999999;font-size:18px;}
@media (min-width: 240px) and (max-width: 319px) {
	
}
@media (min-width: 320px) and (max-width: 479px) {
.crumbs{min-width:320px;height:40px;}
.crumbs .crumbsLeft{display:none;}
.crumbs .crumbsRight{left:0px;height:40px;}
.crumbs .crumbsRight .child{margin:0px 0px;float:left;font-size:14px;width:33%;line-height:40px;height:40px;border-right:1px solid #bcbcbc;text-align:center;}
.crumbs .crumbsRight #child3{border:0px;}
.crumbs .crumbsRight .child.on{height:38px;border-bottom:2px solid #5690D7;}
.crumbs .crumbsRight .child:hover{height:38px;border-bottom:2px solid #5690D7;}

.banner{min-width:290px;width:290px;}
.banner .bg{height:125px;}
.banner-img img{width:auto;height:125px;}
.banner-btn{bottom:6px;right:10px;z-index:2;}
.banner-btn img{margin:0px 2px;width:10px;}
.banner-info{top:94px;left:0px;width:290px;height:31px;}
.banner-info .title{display:none;}
.banner-info .info{left:10px;top:0px;height:31px;line-height:31px;font-size:12px;width:210px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.banner-info .state{display:none;}
.bannerTitle{min-width:290px;margin:5px auto;width:290px;font-size:20px;height:35px;line-height:35px;}

.main{min-width:290px;width:290px;}
.main .mainLeft{float:none;width:290px;padding:7px 0px;margin:0px auto;}
.main .mainLeft .mainTitle{margin:11px 0px;font-size:14px;}
.main .mainLeft .title{font-size:12px;margin:10px 0px;}
.main .mainLeft .info{font-size:12px;line-height:20px;margin-bottom:23px;}
.main .mainRight{float:none;width:290px;margin:0px auto 20px auto;}
.main .mainRight:after{content: "020"; display: block; height: 0; clear: both;visibility:hidden;}
.main .mainRight .child{height:100px;width:144px;border:0px;float:left;}
#mainChild2{border-left:1px solid #b9b9b9;}
.main .mainRight .child .childImg{margin:11px 0px 12px 0px;width:55px;}
.main .mainRight .child .childTitle{font-size:14px;}

}
@media (min-width: 480px) and (max-width: 639px) {
.crumbs{min-width:480px;height:60px;}
.crumbs .crumbsLeft{display:none;}
.crumbs .crumbsRight{left:0px;height:60px;}
.crumbs .crumbsRight .child{margin:0px 0px;float:left;font-size:16px;width:33%;line-height:60px;height:60px;border-right:1px solid #bcbcbc;text-align:center;}
.crumbs .crumbsRight #child3{border:0px;}
.crumbs .crumbsRight .child.on{height:57px;border-bottom:3px solid #5690D7;}
.crumbs .crumbsRight .child:hover{height:57px;border-bottom:3px solid #5690D7;}

.banner{min-width:435px;width:435px;}
.banner .bg{height:188px;}
.banner-img img{width:auto;height:188px;}
.banner-btn{bottom:9px;right:15px;z-index:2;}
.banner-btn img{margin:0px 2px;}
.banner-info{top:141px;left:0px;width:435px;height:47px;}
.banner-info .title{display:none;}
.banner-info .info{left:15px;top:0px;height:47px;line-height:47px;font-size:14px;width:315px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.banner-info .state{display:none;}
.bannerTitle{min-width:435px;margin:8px auto;width:435px;font-size:24px;height:53px;line-height:53px;}

.main{min-width:435px;width:435px;}
.main .mainLeft{float:none;width:435px;padding:10px 0px;margin:0px auto;}
.main .mainLeft .mainTitle{margin:16px 0px;font-size:20px;}
.main .mainLeft .title{font-size:16px;margin:5px 0px;}
.main .mainLeft .info{font-size:14px;line-height:25px;margin-bottom:35px;}
.main .mainRight{float:none;width:435px;margin:0px auto 30px auto;}
.main .mainRight:after{content: "020"; display: block; height: 0; clear: both;visibility:hidden;}
.main .mainRight .child{height:150px;width:216px;border:0px;float:left;}
#mainChild2{border-left:1px solid #b9b9b9;}
.main .mainRight .child .childImg{margin:17px 0px 18px 0px;width:83px;}
.main .mainRight .child .childTitle{font-size:16px;text-align: justify;line-height: 30px}


}
@media (min-width: 640px) and (max-width:1023px ) {
.crumbs{min-width:640px;height:80px;}
.crumbs .crumbsLeft{display:none;}
.crumbs .crumbsRight{left:0px;height:80px;}
.crumbs .crumbsRight .child{margin:0px 0px;float:left;font-size:26px;width:33%;line-height:80px;height:80px;border-right:1px solid #bcbcbc;text-align:center;}
.crumbs .crumbsRight #child3{border:0px;}
.crumbs .crumbsRight .child.on{height:76px;border-bottom:4px solid #5690D7;}
.crumbs .crumbsRight .child:hover{height:76px;border-bottom:4px solid #5690D7;}

.banner{min-width:580px;width:580px;}
.banner .bg{height:250px;}
.banner-img img{width:auto;height:250px;}
.banner-btn{bottom:15px;right:20px;z-index:2;}
.banner-btn img{margin:0px 2px;}
.banner-info{top:188px;left:0px;width:580px;height:62px;}
.banner-info .title{display:none;}
.banner-info .info{left:20px;top:0px;height:62px;line-height:62px;font-size:23px;width:420px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.banner-info .state{display:none;}
.bannerTitle{min-width:580px;margin:10px auto;width:580px;font-size:36px;}

.main{min-width:580px;width:580px;}
.main .mainLeft{float:none;width:580px;padding:14px 0px;margin:0px auto;}
.main .mainLeft .mainTitle{margin:22px 0px;font-size:28px;}
.main .mainLeft .title{font-size:26px;margin:10px 0px;}
.main .mainLeft .info{font-size:26px;line-height:40px;margin-bottom:45px;}
.main .mainRight{float:none;width:580px;margin:0px auto 80px auto;}
.main .mainRight:after{content: "020"; display: block; height: 0; clear: both;visibility:hidden;}
.main .mainRight .child{height:200px;width:289px;border:0px;float:left;}
#mainChild2{border-left:1px solid #b9b9b9;}
.main .mainRight .child .childImg{margin:22px 0px 25px 0px;}
.main .mainRight .child .childTitle{font-size:28px;}

}
@media (min-width: 1024px) and (max-width:1199px ) {
.crumbs{min-width:1024px;}
.banner{min-width:900px;width:900px;}
.banner-img{min-width:900px;}
.banner-info{top:20px;left:20px;width:245px;height:183px;}
.banner-info .title{position:absolute;top:22px;left:17px;font-size:14px;width:208px;}
.banner-info .info{position:absolute;top:52px;left:17px;font-size:23px;width:208px;}
.banner-info .state{position:absolute;bottom:20px;left:17px;font-size:14px;width:208px;}
.bannerTitle{min-width:900px;width:900px;}

.main{min-width:900px;width:900px;}
.main .mainLeft{width:600px;padding:14px 0px;}
.main .mainRight{width:250px;}
.main .mainRight .child{height:230px;width:250px;}
.main .mainRight .child .childImg{width:110px;}


}


/*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:translateY(-200px); opacity:0;}
100%{ transform:translateY(0px);opacity:1;}
}
@-moz-keyframes bannerInfoIn{
0%{ -moz-transform:translateY(-200px); opacity:0;}
100%{ -moz-transform:translateY(0px);opacity:1;}
}
@-webkit-keyframes bannerInfoIn {
0%{ -webkit-transform:translateY(-200px); opacity:0;}
100%{ -webkit-transform:translateY(0px);opacity:1;}
}
@-o-keyframes bannerInfoIn{
0%{ -o-transform:translateY(-200px); opacity:0;}
100%{ -o-transform:translateY(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:translateY(200px); opacity:0;}
0%{ transform:translateY(0px);opacity:1;}
}
@-moz-keyframes bannerInfoOut{
100%{ -moz-transform:translateY(200px); opacity:0;}
0%{ -moz-transform:translateY(0px);opacity:1;}
}
@-webkit-keyframes bannerInfoOut {
100%{ -webkit-transform:translateY(200px); opacity:0;}
0%{ -webkit-transform:translateY(0px);opacity:1;}
}
@-o-keyframes bannerInfoOut{
100%{ -o-transform:translateY(200px); opacity:0;}
0%{ -o-transform:translateY(0px);opacity:1;}
}
