*{ box-sizing:border-box;}
body,h1,h2,h3,h4,ul{margin:0;padding:0;}
body{font-size:16px;font-family:"微软雅黑"; font-weight:100;color:#333; background:#eee;}
.wrap{width:1200px;margin:auto;}
a{text-decoration:none;color:#333; outline: 0;}
.clr:after{content:"";display:block;clear:both;}
.fl{float:left;}
.fr{float:right;}
#nav{ text-align: center;}
#nav a{display: inline-block; background:#911; color: #fff; opacity: 0.7; padding: 5px 10px; border-radius:2px; margin-bottom: 5px; -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
     -o-transition: all .25s ease;
        transition: all .25s ease}
    #nav a.gy{ background:#191;}
    #nav a.cz{ background:#119;}
    #nav a:hover{ opacity: 1;}
#pages{ text-align: center; padding: 30px 0;}
    #pages a{ display: inline-block; background:#ddd; padding: 5px 10px; margin: 0 1px; border-radius:2px;}
    #pages a:hover{ color:#39f;}
    #pages a.current{ background:#39f; color:#fff;}
#faq{ padding: 40px 10px; background:#eee;}
    #faq>.clr{ padding-bottom: 30px;}
    #faq .part{ padding-top: 10px; line-height: 24px; color:#000}
    #faq .clr span{ float: left; width: 40px; height: 40px; background:url(images/q.jpg) center #ccc; text-align: center; line-height: 40px; border-radius:3px; margin-right:8px; overflow: hidden; text-indent:-80px;}
    #faq .a span{ float: right;margin:0 0 0 8px; background:url(images/a.jpg);}
    #faq .q div{ background:#fff; padding: 8px; border-radius:3px; display: inline-block; max-width:calc(100% - 88px);}
    #faq .a{ margin-top:10px;}
    #faq .a div{ max-width:calc(100% -  88px); background:#7cd64f; padding: 8px; border-radius:3px;}
    #faq .a div{ float: right;}

#plist{ position:relative; width:100%; }
    #plist .hd span{ display: block; cursor: pointer; width: 60px; height: 60px; color: #ccc; font-family: "宋体"; font-size: 60px; line-height: 60px; text-align: center; position: absolute; top: 325px;}
        #plist .hd .prev{ left: -60px;}
        #plist .hd .next{ right: -60px;}
        #plist .hd span:hover{ color: #666;}
    #nav{ padding: 30px 0 10px;}
    #plist .hd{ overflow:hidden;  height:30px; text-align: center; }
    #plist .hd ul{  overflow:hidden; zoom:1; zoom:1; }
    #plist .hd ul li{ display: inline-block;width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:0; cursor:pointer; background:#ccc; }
    #plist .hd ul li.on{ background:#333; }
    #plist .bd{ padding:10px 0; overflow:hidden;  }
    #plist .bd ul{ overflow:hidden; zoom:1; width:300px;  float:left; _display:inline;  }
    #plist .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center; padding-bottom: 10px;  }
    #plist .bd ul li img{ display:block; -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease}
    #plist .bd ul li a:hover img{ opacity: 0.9; }
    #plist .bd ul li h3{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; font-size: 16px; font-weight: normal;}
    #plist .bd ul li a:hover{ color:#c00;}
#alist{ border-top: 1px dashed #ddd; padding: 20px 0;}
#alist .li{ width: 24%; margin: 0 1.333% 1.333% 0; float: left;}
    #plist img{ display: block; max-width:100%; margin-bottom: 10px;}
    #alist .li{ margin-bottom: 0;}
    #alist .li:nth-child(4n){ float: right; margin-right: 0;}
    #alist .li a{ display: block; overflow: hidden;border-bottom: 1px dashed transparent; text-overflow:ellipsis; white-space: nowrap; padding:5px 0;}
        #alist .li a:before{ content:"▪ ";}
        #alist .li a:hover{ color:#c00; border-color: #c00; }
#qmenu{width:200px;position:fixed;right:0;top: 50%; background:#c00; padding: 10px; color: #fff; text-align: center;}
    #qmenu img{ display: block; max-width:100%; margin-bottom: 10px;}
    #qmenu mark{ display: block; font-size: 20px; font-weight: bold; padding: 5px 0; background:#fc0; color: #000; margin: 4px 0;}
    #qmenu span{ display: block;}
    #qmenu a{ color: #fc0; cursor: pointer; padding: 5px 0; display: block; letter-spacing:3px;}
        #qmenu a:hover{ text-decoration: underline;}
.i{ background:url(images/i.png) no-repeat;}
#qmenu a>div{ background:#f60;}
.pages{ padding:20px 0; text-align: center;}
.pages a{ display: inline-block; padding:5px; margin: 1px; background:#ddd; font-size: 16px;}
.pages a.current{ background:#39f; color: #fff;}
body{ background:#fff;}
header{ background-position:center; background-repeat:no-repeat; background-size:cover; height:700px; text-align: center; color:#fff;}
    header .h{ padding:60px 40px 0;}
    header .h .fr{ background:url(images/tel.png) right no-repeat; height: 50px; color:#fc0; padding:24px 60px 0 0; font-size: 24px; font-weight: bold;}
    header .t{ font-size: 24px; font-weight: normal; margin-top: 130px; color:rgba(255,255,255,.7);}
    header h1{ font-size: 60px; padding: 45px 0 10px; letter-spacing:4px; color:#fc0; text-shadow: 0 0 10px rgba(0,0,0,.5);}
    header p{ width:700px; margin:0 auto 40px; color:rgba(255,255,255,.7);}
    header ul{ width:500px; margin: auto;}
    header li{ display: block; float: left; width:250px; text-align: left; line-height: 3em; overflow: hidden; white-space: nowrap;}
        header li span{ font-size: 24px; display: inline-block; padding: 0 2px; font-weight: bold;}
#spec,#detail,#case{ padding: 120px 0;}
#spec .clr,#chang .clr{ padding: 60px 0;}
#spec .part{ width: 275px; float: left;}
    #spec .part.r{ float: right; margin-left: 20px;}
    #spec .part img{ display: block; max-width:100%;}
    #spec .part .pic{ height:275px; background:#fc0; overflow: hidden; position: relative;}
        #spec .part .pic div{ position: absolute; width: 100%; height:100%; left: 0; top: 0; background-position:left top; z-index: 99; background-repeat: no-repeat; background-size: contain;}
        #spec .l .pic div{ background-image:url(images/mask_l.png);}
        #spec .r .pic div{ background-image:url(images/mask_r.png);}
        #spec .l{ text-align: right;}
    #spec .part h4{ font-size: 24px; padding: 10px 0;}
    #spec .part p{ margin: 0; font-size: 18px;}
    #spec .part:hover img{ opacity: 0.9;}
    #spec .part:hover h4{ color: #f60;}
    #spec .part:hover p{ color: #333;}
#detail{ background:#111;}
    #detail h2{ color: #ccc;}
    #detail .clr{ padding:60px 0;}
    #detail .mask{ height:334px; width: 100%; background:url(images/mask.png) left top no-repeat; background-size:contain; z-index: 2; position: absolute; left: 0; top: 0;}
    #detail .part{ position: relative; float: left; width: 24%; margin-right:1.333%;}
    #detail .part:last-child{ margin: 0;}
    #detail .pic{ background:#f60; height:334px;}
    #detail img{ display: block; width:100%; height:100%; -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease}
    #detail .part:hover img{ opacity: 0.9;}
    #detail h4{ text-align: center; font-size: 24px; font-weight: normal; color: #ccc; margin: 20px 0;}
    #detail .part:hover h4{ color:#f60;}
    #detail p{ font-size: 18px; font-family: "宋体"; line-height: 1.6em; padding: 0 20px; color:#666; margin: 0;}
#win,#wchat{ display: none; position: fixed; z-index: 999999; left:0; top: 0; width:100%; height: 100%; background:rgba(0,0,0,.95);}
    #win{ z-index: 9999999;}
        #win>div{ width:800px; height: 100%; margin: auto; position: relative;}
        #win a{  width:60px; height: 60px; line-height: 60px; text-align: center; font-size: 36px; color:#fff; background:#c00; opacity: 0.7; font-family: "宋体"; position: absolute; top: 50%; margin-top: -30px;}
        #win .fl{ left: 0;}
        #win .fr{ right: 0;}
        #win .close{ margin-top:40px; background:#39f;}
        #win a:hover{ opacity: 1;}
    #wchat>div{ width:240px; background:#fff; text-align: center; margin: 200px auto 0; padding: 20px;}
    #win>div img{ display: block; position: absolute; width:600px; height: 600px; left: 50%; top: 50%; margin: -300px 0 0 -300px;}
    #wchat img{ display: block; margin-bottom: 10px;}
    #wchat span{display: block; color:#900; font-weight: bold; margin-top: 6px;}
#loc{ background:rgba(0,0,0,.85); white-space: nowrap; overflow: hidden; text-overflow:ellipsis; z-index: 99999; height: 40px; line-height: 40px; padding: 0 20px; text-align: left; color:#ccc;}
    #loc a{ color:#fff; display: block; float: left; padding:0 10px; }
    #loc a:hover{ color: #fc0;}
    #loc span{ display: block; float: left; font-family: "宋体";}
h2{ font-size: 48px; font-weight: 100; color:#444; line-height: 60px; text-align: center;}
    h2 span{ display: inline-block; font-size: 36px; line-height: 60px; vertical-align: middle; padding: 0 10px;}
.h3{ font-size: 24px; color:#f60; font-weight: 100; text-align: center; padding-top: 10px;}
a.zx{ display: block; margin: auto; font-size: 24px; max-width:35%; border-radius:4px; letter-spacing: 2px;  background:#39f; color:#fff; padding:15px 40px; text-align: center; -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease}
    a.zx:hover{ opacity: 0.9;}
.plist .part{display: block; -webkit-transition: box-shadow .25s ease;
   -moz-transition: box-shadow .25s ease;
    -ms-transition: box-shadow .25s ease;
     -o-transition: box-shadow .25s ease;
        transition: box-shadow .25s ease; float: left; width: 24%; margin: 0 1.333% 70px 0; background:#fff; padding: 10px 10px 0; position: relative;}
    .plist .part:nth-child(4n){ float: right; margin-right: 0;}
    .plist .part .pic{ background:#000; overflow: hidden; margin-bottom: 2px; }
    .plist .part img{ width: 100%; display: block; -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease}
    .plist .part h3{ position: absolute; left: 0; bottom: -50px; background:#fff; width: 100%; height:50px; line-height: 50px; padding: 0;}
    .plist .part h3 a{ font-size: 16px; text-align: center; font-weight: normal; overflow: hidden; padding: 0 10px; text-overflow:ellipsis; white-space: nowrap; display: block;}
    .plist .part:hover{ box-shadow:0 0 10px rgba(0,0,0,0.2);}
    .plist .part:hover img{ -webkit-transition: all 2s ease;
       -moz-transition: all 2s ease;
        -ms-transition: all 2s ease;
         -o-transition: all 2s ease;
            transition: all 2s ease -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);}
    .plist .part:hover a{ color:#d00;}
#order{ padding: 120px 0;  }
    #order .clr{ padding: 60px 0;}
    #order .part{ width:19%; float: left; margin: 0 1.25% 1.25% 0; padding: 15px; border:1px solid #ddd;position: relative; cursor: default;}
        #order .part:nth-child(5n){ float: right; margin-right: 0;}
        #order .part .addr{ color:#999;}
        #order .part .addr span{ color:#666;}
        #order .part time{ color:#999; font-size: 12px; font-family:Georgia, "Times New Roman", Times, serif;}
        #order .part h4{ font-size: 18px; font-weight:100; padding: 5px 0; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
        #order .part .s{ font-size: 14px; color:#999;}
        #order .part .s2{ color: #090;}
        #order .part .s3{ color: #f00;}
        #order .part .detail{ position: absolute; left: 0; bottom: 110px; width:100%; background:#fff; box-shadow:0 0 10px rgba(0,0,0,.5); padding: 10px;}
            #order .part .detail li{ list-style-position:inside; font-size: 14px; padding: 2px 0;}
            #order .part .detail img{ display: block; max-width:100%;}
            #order .part .detail time{ display: inline-block; margin-right: 6px;}
    #order .part:hover{ background:rgba(0,0,0,.95); border:1px solid #000;}
        #order .part:hover h4{ color: #f60;}
#header{ display: block; margin: auto;}
#chang{ padding: 60px 0;}
#chang img{ display: block; float: left; margin: 0 16.5px 16.5px 0;}
    #chang img:nth-child(3n){ float: right; margin-right:0;}
#process{ background:url(images/process.png) center no-repeat; background-size: cover; padding: 60px 0;}
    #process h2{ color:#ccc; }
    #detail h3,#process h3{ color:#fc0; margin-bottom: 30px;}
    #process .clr{ padding: 30px 0;}
    #process .part{ width:170px; float: left; margin-right:36px; text-align: center; color:#ccc;}
    #process .part:last-child{ float: right; margin-right:0;}
    #process .part img{ display: block; margin:0 auto 20px;}
#cont{ padding: 60px 0;}
    #cont .fl{ width: 40%;}
    #cont .fl img{ display: block; max-width:100%;}
    #cont .fl h2{ font-size: 18px; text-align: center;}
    #cont article{ margin-left: 40%; padding-left: 40px;}
        #cont article p{ text-indent: 2em; line-height: 1.6em; margin-top: 0;}
footer{ padding: 30px; background:#333; color: #fff; text-align: center;}
    footer a{ color:#999;}
    footer a:hover{ text-decoration: underline;}
    #btmNav{ display: none;}
@media screen and (max-width:640px){
    #qmenu{ display:none;}
    header p,header ul,.wrap{ width:98%;}
    #plist .bd ul li,#order .part,#spec .part,#process .part{ width:49%; margin: 0 0.5% 1% !important;}
    #detail .part{ width:49%; margin: 0 0.5%;}
    #detail .pic,#spec .part .pic{ height: 50%;}
    #detail p{ padding: 0 5px;}
    a.zx{ max-width:98%;}
    img#header,#chang img{ margin: 0; max-width:100%;}
    #plist .hd{ display: none;}
    #cont .fl{ width:100%;}
    #cont article{ margin: 0; padding: 0;}
        #btmNav{ display:block; position: fixed; width:100%; height: 50px; line-height: 50px; text-align: center; left: 0; bottom: 0; }
    #btmNav a{ display:block; float: left; width:33.333%; background:#333; color: #fff; border-right:1px solid #222;}
    #btmNav .tel{ border:0; background:#f90;}

}