div#banner{background:url("../img/banner-about-bg.jpg") no-repeat center; height:500px;}

div#banner>div{position:absolute; z-index:10; width:720px; height:370px; left:50%; top:50%; margin-left:-360px; margin-top:-185px;}
div#banner>div>div{}
div#banner>div>div>div.fl{width:240px;}
div#banner>div>div>div.fl>img{max-width:100%;}
div#banner>div>div>div.fr{box-sizing:border-box;}
div#banner>div>div>div.fr>h2, div#banner>div>div>div.fr>h3{color:#FF7300; font-weight:bold;}
div#banner>div>div>div.fr>h2{line-height:120px; font-size:80px;  letter-spacing:20px;}
div#banner>div>div>div.fr>h3{line-height:80px; font-size:40px; letter-spacing:16px;}
div#banner>div>p{width:100%; line-height:80px; color:#333; font-weight:bold; text-align:center; font-size:60px; margin-top:50px;}
div#banner>div>p>span{margin-right:30px;}

div#banner>div.on>div>div.fl>img{animation:flipInX 1.2s ease 0s 1; animation-fill-mode:both;}
div#banner>div.on>div>div.fr>h2{animation:slideInRight 1s ease 0s 1; animation-fill-mode:both;}
div#banner>div.on>div>div.fr>h3{animation:slideInRight 1s ease 0.1s 1; animation-fill-mode:both;}
div#banner>div.on>p{animation:bounceInUp 1s ease 0.9s 1; animation-fill-mode:both;}

div.about-content{padding:80px 0; background-color:#FFF;}
div.about-content div{box-sizing:border-box;}

div.about-content h2{text-align:center; font-size:28px; color:#333; line-height:54px; font-weight:bold; letter-spacing:6px;}
div.about-content h2>div{width:3%; margin:0 auto; border-bottom:4px #333 solid;}
div.about-content h3{text-align:center; font-size:12px; color:#666; line-height:30px; letter-spacing:4px; margin-bottom:40px;}

div.about-content div.content-1{background-color:#f9f9f9;}
div.content-1 div.fl{position:relative;}
div.content-1 div.fl img{position:absolute; width:100%; top:-20px;}
div.content-1 div.fr{width:66%; padding:60px;}
div.content-1 div.fr h2{font-size:28px; color:#333; line-height:52px; text-align:left; border-bottom:1px #888 solid; font-weight:bold; letter-spacing:6px; margin-bottom:40px;}
div.content-1 div.fr h2 span{font-size:14px; margin-top:12px; color:#666; font-weight:lighter; letter-spacing:4px;}
div.content-1 div.fr p{margin-bottom:20px; text-indent:2em;}

div.content-2{background-color:#FBFBFB; background-image:url("../img/about-wenhua-bg.jpg"); background-repeat:no-repeat; background-position:center; background-size:cover; background-attachment:fixed;}

div.content-2 .biaoyu{width:60%; display:block; margin:0 auto;}
div.content-2 div.biaoyu{border:6px #f1f1f1 solid; box-shadow:1px 1px 5px #CCC; animation:toSmall 0.5s linear 0s 1; animation-fill-mode:both;}
div.content-2 div.biaoyu>img{width:100%;}
div.content-2 div.biaoyu:hover{box-shadow:2px 2px 5px #888; animation:toBig 0.5s linear 0s 1; animation-fill-mode:both;}

div.content-2 ul.biaoyu li{float:left; margin-top:60px; width:14%; margin-left:14.5%; box-sizing:border-box; background-color:#FFF; border:1px #ddd solid; animation:toSmall 0.5s linear 0s 1; animation-fill-mode:both;}
div.content-2 ul.biaoyu li h5{text-align:center; line-height:40px; font-size:18px; color:#333; font-weight:bold; border-bottom:1px #ddd solid; letter-spacing:6px;}
div.content-2 ul.biaoyu li h6{text-align:center; line-height:30px; font-size:12px; color:#888; letter-spacing:4px;}
div.content-2 ul.biaoyu li:hover{box-shadow:2px 2px 5px #888; animation:toBig 0.5s linear 0s 1; animation-fill-mode:both;}


div.content-3{background-color:#f9f9f9;}
ul.img-show{display:block; position:relative; box-sizing:border-box; width:80%; margin:0 auto; border:1px #EEE solid;}
ul.img-show>li{display:block; position:absolute; box-sizing:border-box; border:1px #DDD solid; overflow:hidden; text-align:center; z-index:5; animation:toSmall 0.5s linear 0s 1; animation-fill-mode:both;}
ul.img-show>li>img{width:100%;}
ul.img-show>li:hover{box-shadow:2px 2px 5px #888; z-index:6; animation:toBig 0.5s linear 0s 1; animation-fill-mode:both;}

div.about-contact{background-color:#f1f1f1;}
div.about-contact div.map{width:100%; box-sizing:border-box; border:4px #EEE solid;}
div.about-contact div.map>div{width:100%; height:500px;}

div.about-contact div.content{width:100%; margin-top:30px;}
div.about-contact div.content .fl, div.about-contact div.content .fr{width:50%; box-sizing:border-box; padding:20px;}
div.about-contact div.content .fl{border-right:1px #DDD solid;}
div.about-contact div.content h2{font-size:22px; text-align:left; line-height:50px; border-bottom:1px #DDD solid; margin-bottom:30px;}
div.about-contact div.content p{font-size:16px; text-align:left; line-height:32px;margin-bottom:20px;}
div.about-contact div.content p span{font-weight:bold;}

@media screen and ( min-width:1920px ) {
    div.content-1 div.fl{width:34%;}
    div.about-content div.content-1{height:500px;}
}
@media screen and ( max-width:1920px ) {
    div.content-1 div.fl{width:32%;}
    div.about-content div.content-1{height:300px;}
    div.content-1 div.fr{padding:20px;}
    div.content-1 div.fr h2{margin-bottom:20px;}
    div.content-1 div.fr p{margin-bottom:10px; font-size:12px; line-height:20px;}
    div.content-2 ul.biaoyu li h5, div.content-2 ul.biaoyu li h6{letter-spacing:2px;}
}
@media screen and ( max-width:1200px ) {
    div.content-1 div.fl{width:34%;}
    div.about-content div.content-1{height:240px;}
    div.content-1 div.fr h2{margin-bottom:10px;}
    div.content-1 div.fr p{margin-bottom:6px;}
    div.content-2 ul.biaoyu li h5, div.content-2 ul.biaoyu li h6{letter-spacing:0px;}
}