*{ 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:#f60; opacity: 0.7; padding: 5px 10px; border-radius:2px; color:#fff; 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:#060;}
    #nav a.cz{ background:#39f;}
    #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;}
header .abtn { margin-top: 200px; position: relative;}
    div#intro { width: 900px; padding: 20px; color: #333; background: #fff; position: absolute; z-index: 9999; left: 50%; bottom: 80px; margin-left: -450px; opacity: 0; -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease}
    div#intro.on{ opacity: 1;}
    #intro h3{ font-weight: 100;}
    #intro p{ color: #333; width: 100%; margin: 1em 0; line-height: 1.6em;}
    #intro ul{ width: auto; margin-top:1em;}
    #intro li{ float: none; width: auto; text-align: center; line-height: 1em; padding: 5px 0;}
    #intro li span{ font-size:12px; font-weight:normal; background:#ccc; display: inline-block; padding: 2px 4px; border-radius:2px; margin-right:4px;}
    #intro>a{ float: right; font-size:36px; padding: 0 0 0 20px;}
    #intro .desc{ color: #39f; font-weight: bold;}
#about{ padding: 60px 0; background:#eee;}
    #about p{ line-height: 1.6em; text-indent: 2em; width: 700px; margin:1em auto;}
#plist{ overflow:hidden; position:relative; width:100%; }
    #nav{ padding: 30px 0 10px;}
    #plist .hd{ overflow:hidden;  height:30px; text-align: center; }
    #plist .hd .prev,#plist .hd .next{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
         cursor:pointer; background:#c00;}
    #plist .hd .next{ background:#0c0;  }
    #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 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:70px;position:fixed;right:0;bottom:350px;}#qmenu a{display:block;width:100%;height:70px;margin-bottom:1px;position:relative;}#qmenu a:hover{padding-right:20px;}#qmenu a>div{position:absolute;left:0;top:0;min-width:80px;border-bottom-left-radius:3px;border-top-left-radius:3px;background:#e18337;color:#fff;}#qmenu a.top>div{background:#ddd;color:#999;}#qmenu a .left{ float:left;width:70px;height:70px; box-sizing:border-box;font-size:12px;text-align:center; padding-top: 45px;}#qmenu a .cont{padding:5px 20px 5px 0;height:60px;line-height:60px;font-weight:bold;font-size:18px;margin-left:70px; width:200px;}#qmenu a .cont img{display:block;height:60px;}
#qmenu .left{ background:url(images/qmenu.png) no-repeat;}
#qmenu .tel .left{ background-position:4px -6px;}
#qmenu .wx .left{ background-position:-74px -6px;}
#qmenu .qq .left{ background-position:-154px -6px}
#qmenu .top .left{ background-position:-230px -6px;}
.i{ background:url(images/i.png) no-repeat;}
#qmenu a>div{ background:#f60;}
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 20px 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: bold; margin-top: 60px; 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:400px; margin: auto;}
    header li{ display: block; float: left; width:200px; text-align: left; line-height: 3em;}
        header li span{ font-size: 24px; display: inline-block; padding: 0 2px; font-weight: bold;}
#spec,#detail,#case{ padding: 120px 0;}
#spec .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:#f60; 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{ position: fixed; width:100%; background:rgba(0,0,0,.9); 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;}
    #loc span{ font-family: "宋体"; color:#666; display: inline-block; padding: 0 3px;}
h2{ font-size: 60px; color:#444; font-weight: bold; text-align: center;}
h3{ font-size: 24px; color:#f60; font-weight: bold; text-align: center; padding-top: 10px;}
a.zx{ display: block; margin: auto; font-size: 24px; max-width:30%; letter-spacing: 3px;  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;}
#case .part{ cursor: pointer;}
#case .abtn{ text-align: center;}
#case .abtn a{ display: inline-block; font-size: 24px; letter-spacing:2px; background:#39f; color: #fff;}
#case .abtn a.more{ background:#333; padding: 15px 40px;}
#case .abtn a:hover{ opacity: 0.9;}
#vs{ padding: 120px 0;background:#111;}
    #vs h2{ color:#fff;}
    #vs table{ width:100%; border:1px solid #222; border-collapse:collapse; margin: 60px 0;}
    #vs td{ border:1px solid #222; font-size: 18px; color:#ccc; line-height: 2em; padding:10px 20px;}
    #vs td.n{ background:url(images/n.png) 10px center no-repeat; padding-left: 40px;}
    #vs td.y{ background:url(images/y.png) 10px center no-repeat; padding-left: 40px;}
    #vs td.fz{ color:#999;}
    #vs tr:hover td{ background-color: #2c2c2c;}
#case .subs{ text-align: center; border-top: 1px dashed #ddd; padding: 30px 0;}
    #case .subs a{ display: inline-block; padding: 10px; color:#39f; font-size: 18px;}
    #case .subs a:hover{ text-decoration: underline;}
.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;}
#gy{ padding-bottom: 0 !important;}
#gy .part{ width:230px; float: left; text-align: center; padding: 10px; border-radius: 4px; margin: 0 12.5px 0 0;}
    #gy .part.mid{ background:rgba(255,255,255,.5); color:#000; height: 230px; line-height: 230px; text-align: center; border-radius:50%; font-size: 48px; font-weight: bold;}
    #gy .part img{opacity: 0.6; -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease}
    #gy .part:hover img{ opacity: 1;}
    #gy .part p{ color:rgba(255,255,255,.7); font-size: 12px;}
    #gy .part:hover p{ color:#fff;}
#header{ position: relative;}
    #header img{ display: block; margin:auto;}
    #header .desc{ position: absolute; left: 40px; top:50%; height:120px; margin-top: -60px; font-size: 18px; color: #fff; line-height: 1.8em; width: 600px;}
#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; }
    #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;}
#faq .part{ width: 33%; float: left; margin:0 0.5% 0.5% 0;}
    #faq .part h4{ white-space: nowrap;}
    #faq .part:nth-child(3n){ float: right; margin-right: 0;}
    #faq .part p{ font-size: 14px; height: 40px; overflow: hidden;}