div.banner{display:block; height:800px; width:100%; background-color:#666; background-image:url("../img/about-banner-bg.jpg"); background-repeat:no-repeat; background-size:cover; overflow:hidden;}

div.banner h2,div.banner h3{text-align:center; color:#FFF; letter-spacing:5px; font-weight:lighter;}
div.banner h2{font-size:60px; margin-top:320px;}
div.banner h3{font-size:30px; margin-top:20px;}

div.about-content{width:100%; overflow:hidden;}
div.about-content h2{text-align:center; font-size:30px; color:#454545; font-weight:lighter;}
div.about-content h2>div{width:40px; height:6px; margin:6px auto 0 auto; background-color:#FF6300;}

div.about-body{padding:100px 0;}
div.about-body div.content{margin-top:40px;}
div.about-body div.content p{font-size:16px; font-weight:lighter; color:#666; text-indent:2em; margin-bottom:16px;}

ul.about-qywh{display:block; width:100%; box-sizing:border-box; padding:140px 18%; background-color:#454545; background-image:url("../img/about-qywh-bg.jpg"); background-repeat:no-repeat; background-size:cover;}
ul.about-qywh li{display:block; float:left; box-sizing:border-box; width:22%; margin-left:4%; border-radius:8px; padding:30px 0; border:1px #555 solid;}
ul.about-qywh li:first-child{margin-left:0;}
ul.about-qywh li div, ul.about-qywh li h4, ul.about-qywh li p{color:#FFF; text-align:center;}
ul.about-qywh li div{font-size:100px;}
ul.about-qywh li h4{font-size:20px; margin-top:10px; letter-spacing:4px;}
ul.about-qywh li p{font-size:14px; margin-top:6px; font-weight:lighter;}

div.about-contact{position:relative; width:100%; height:620px; background-color:#FFF; padding-top:100px;}
div.about-contact>div{position:absolute;}
div.about-contact div#ditu{width:100%; height:400px; bottom:0; left:0; background-color:#CCC; background-image:url("../img/ditu-bg.jpg"); background-repeat:no-repeat; background-position:center; background-size:cover; z-index:1; border-top:1px #EEE solid;}
div.about-contact div.ditu-fg{width:100%; height:400px; bottom:0; left:0; background-color:rgba(51, 51, 51, 0.6); z-index:2;}
div.about-contact div.ditu-fg div.about-map-addr{position:absolute; width:100px; left:50%; margin-left:-50px; top:50%; margin-top:-80px; z-index:4;}
div.about-contact div.ditu-fg div.about-map-addr img{width:100%;}

div.contact-content>div>h6{font-size:16px; color:#666;}
div.contact-content>div>h6>span{color:#FF6300; margin-right:5px;}
div.contact-content p{font-size:16px; color:#666; margin-top:20px; letter-spacing:1px;}
div.contact-content p span{color:#FF6300; margin-right:5px;}
div.contact-content p.tel{font-size:32px;}

@media screen and ( min-width:800px ) {
    div.about-contact div.contact-content{width:980px; height:160px; padding:30px 0; z-index:3; left:50%; margin-left:-490px; top:190px; background-color:#FCFCFC; box-sizing:border-box; border:1px #EEE solid; border-radius:6px; box-shadow:1px 1px 2px #999;}
    div.contact-content>div{float:left; width:33.333333%; box-sizing:border-box; border-right:1px #CCC solid; height:100px; padding:10px 32px;}
    div.contact-content>div:last-child{border-right:0;}
}

@media screen and ( max-width:800px ) {
    div.banner{height:280px;}
    div.banner h2{font-size:22px; margin-top:120px;}
    div.banner h3{font-size:12px; margin-top:20px; letter-spacing:2px;}

    div.about-body{padding:50px 0;}
    div.about-body div.content{margin-top:30px; padding:0 10px;}
    div.about-body div.content p{font-size:14px; line-height:25px; margin-bottom:16px; letter-spacing:1px;}

    ul.about-qywh{padding:50px 20px;}
    ul.about-qywh li{width:47%; margin-left:6%; padding:20px 0; margin-bottom:20px;}
    ul.about-qywh li:nth-child(2n+1){margin-left:0;}
    ul.about-qywh li div{font-size:60px;}
    ul.about-qywh li h4{font-size:18px; letter-spacing:2px;}
    ul.about-qywh li p{font-size:12px; margin-top:6px; letter-spacing:0;}

    div.about-contact{height:820px; padding-top:50px;}
    div.about-contact div.contact-content{box-sizing:border-box; width:100%; padding:30px 10px;}
    div.contact-content>div{border-bottom:1px #CCC solid; padding:20px 20px;}
    div.contact-content>div:last-child{border-bottom:0;}
    div.contact-content p{margin-top:10px;}
    div.contact-content p.tel{font-size:24px;}
}