@charset "utf-8";
/* CSS Document */

/*自然初色*/
.z1 {background:#414141;position:relative;}
.z1 .r{color:#fff; height:0; padding-bottom:37%;position:relative;}
.z1 .r .tit{ position:absolute;top:20%; left:8%; }
.z1 .r .tit h1,.z1 .r .tit h2{ text-align:left;}
.z1 .r .con{position:absolute; top:50%; left:8%;}

.z1 .r .price{position:absolute; top:80%; left:8%; color:#f4b98f;}
.z1 .r .price p{ font-size:3em; margin-right:15px;}

.z2{ width:70%; margin:50px auto;}
.z2 ul li{width:21%; margin:2%; text-align:center;float:left;}
.z2 ul li img{ width:80%; max-width:121px;}
.z2 ul li p{height:3em; margin-top:15px;}

.z3{ text-align:center;position:relative; height:100%;}
.z3 .tit{ z-index:100; top:25%; position:absolute; width:100%; color:#fff;}

.z4{ background:#414141; overflow:auto;padding-bottom:8%;}
.z4 .tit{ margin:100px auto 30px;}
.z4 .tit h2{color:#fff;}
.z4 img{ max-width:1070px; width:70%;}

.z5{ background:#fff; overflow:auto; padding-bottom:3%;}
.z5 .tit{ margin:100px auto 30px;}
.z5 .tit h2{ color:#585858;}
.z5 img{ max-width:1060px; width:80%; margin-bottom:20px;}

.z6{ position:relative;}
.z6 .tit{ width:100%; position:absolute; top:15%;}
.z6 .tit h4{line-height:4em;}
.z6 .con{ width:100%; position:absolute; top:50%; color:#414141;}
.z6 .con2{ position:relative;}
.z6 .con .l,.z6 .con .r{ position:absolute; width:48%; max-width:190px;}
.z6 .con .l span,.z6 .con .r span{ float:left; font-size:6em;font-family: 'RobotoDraft Thin'; font-weight:bold; margin-right:10px;}
.z6 .con .l{right:55%;}
.z6 .con .r{left:55%;}
.z6 .con .m{ position:absolute; left:50%; margin-left:-1px;width:2px; background:#414141; line-height:6em; display:block; margin-top:15px;}
.z6 .con i{ font-size:1.5em; margin-top:30px;}
.z6 .con p{ font-size:1em;}
.z6 .con i,.z6 .con p{ font-style:normal; text-align:left; display:block;}
.z7{ background:#f6f6f6; text-align:center; padding:50px 0; color:#414141; ;}
.z7 .tit{ max-width:665px;margin:0.5em auto; line-height:1.2em;}
.z7 .con p{max-width:665px;}
.z8{ background:#414141; overflow:auto; padding-bottom:5%;}
.z8 .tit h2{ width:100%; line-height:4em; color:#fff; margin-top:3%;}
.z8 .tit h3{ width:100%;line-height:3em; color:#fff;margin-top:2%;}
.z8 ul{ width:60%; margin:0 auto;}
.z8 ul li{ width:20%; float:left; margin:0 6.6%; text-align:center;}
.z8 ul li img{ max-width:160px;}
.z9{ color:#5d5d5d; text-align:center; margin:150px auto 0px;height:100%;}
.z9 .con{  margin:30px auto;  top:150px; width:100%;}
.z9 .con p{width:45%;max-width:585px; display:block;}
.z10{ position:relative; color:#585858;}
.z10 .tit{ position:absolute; left:15%; top:65%;}
.z10 .con{ position:absolute; left:15%; top:80%;}
.z10 .con p{ width:55%; float:left;}
.z11{ background:#414141;color:#fff; overflow:auto; padding-bottom:5%; padding-top:6%;}
.z11 .tit{ text-align:center;}
.z11 .con{ margin-bottom:10%;}
.z11 .con p{ display:block;width:80%; max-width:610px; margin:30px auto;}
.z11 .con2{ position:relative;}
.z11 .con2 .m{ position:relative; width:50%; max-width:660px;}
.z11 .con2 .m .yd,.z11 .con2 .m .yd2,.z11 .con2 .m .yd3{ position:absolute; width:100%;text-align:center;}
.z11 .con2 .m .yd{top:-25%;}
.z11 .con2 .m .yd2{top:30%;}
.z11 .con2 .m .yd3{top:70%;}
.z11 .con2 .m .yd2 img{width:45px;}
.z11 .con2 .m .yd3 img{width:40px;}
.z11 .con2 .l,.z11 .con2 .r{ position:absolute;  max-width:190px; }
.z11 .con2 .l{width:15%;top:25%;}
.z11 .con2 .r{width:20%;top:46%;}
.z11 .con2 .l span{ font-size:8em; line-height:1em;font-family: 'RobotoDraft Thin'; font-weight:bold;}
.z11 .con2 .r span{font-size:4em;line-height:1em;font-family: 'RobotoDraft Thin'; font-weight:bold;}
.z11 .con2 .l span i{ margin-top:2em; font-size:0.2em; color:#f4b98f;}
.z11 .con2 .l p{font-size:1.2em; margin-left:10px;color:#f4b98f;}
.z11 .con2 .r span i{ font-size:0.8em;font-family: 'RobotoDraft Thin'; margin-left:10px;}
.z11 .con2 .r p{font-size:1.2em; margin-left:10px;color:#f4b98f;}
.z11 .con2 .l{ right:75%;}
.z11 .con2 .r{ left:75%;}
.z12{ color:#fff; overflow:auto; position:relative;}
.z12 .tit{ position:absolute; top:15%; left:25%; }
.z12 .tit h2{text-align:left;}
.z12 .con{ position:absolute; top:30%;left:25%; width:30%; }
.z13{ padding:10% 0 5%;}
.z13 .box{ text-align:center; width:27%;float:left;}
.z13 .box.m{ width:34%; }
.z13 .box.l,.z13 .box.m{ border-right:1px solid #414141;padding-right:5%;}
.z13 .box img{ width:60%;}
.z13 .box p{ font-size:1em; color:#3c3f44;}
.z13-1{color:#3c3f44;}
.z13-1 .tit{ width:100%; text-align:center; line-height:2em;}
.z13-1 .con{ text-align:center; width:90%;}
.z13-1 .con2{ text-align:center; margin:2% auto;}
.z13-1 .con2 img{ display:inline-block;}
.z14 .l{ position:relative}
.z14 .l .tit,.z14 .l .con{ position:absolute;}
.z14 .l .tit{ top:40%; width:100%; text-align:center;}
.z14 .l .con{ top:50%; text-align:center;}
.z14 .l .con p,.z14 .l .tit h2{width:80%; text-align:left;}
.z15{ position:relative;}

.z15 .r{ width:45%; position:absolute; top:0; left:55%;}
.z15 .r .tit{ margin-top:15%;}
.z15 .r .tit h2{ text-align:left;}
.z15 .r .tit h3{ text-align:left; position:relative;}
.z15 .r .tit h3 img{ position:absolute; right:2%; bottom:0; width:15%;}
.z15 .r .con{ margin:3% 0;}
.z15 .r .ico{ float:left;}
.z16{ position:relative;}
.z16 .tit,.z16 .con{ position:absolute; left:20%;}
.z16 .tit{ top:20%;}
.z16 .con{ top:40%}
.z16 .tit h2{ text-align:left;}
.z16 .tit h2 i{ font-style:normal; font-size:0.8em;}

.z17{ position:relative; color:#fff;}
.z17 .tit,.z17 .con{ position:absolute;text-align:center; width:100%;}
.z17 .tit{top:40%;}
.z17 .con{ top:65%;}
.z18{ color:#fff;}
.z18 .l{ width:50%; float:left; position:relative;}
.z18 .r{ width:50%; float:right;}
.z18 .l .tit,.z18 .l .con{ position:absolute; width:100%;}
.z18 .l .tit{ top:30%;}
.z18 .l .con{ top:50%;}
.z18 .l .tit h2,.z18 .l .con p{ width:80%; }
.z18 .l .tit h2{ text-align:left;}
.z19{ position:relative;}
.z19 .tit{ position:absolute; top:20%; left:50%; width:40%;}
.z19 .tit h2{ text-align:left; color:#fff;}
.z19 .con{ position:absolute; top:35%; left:50%; color:#fff;}
.z19 .con p{ width:98%; text-align:left; float:left;}
.z20{ margin-top:5%;}
.z20 .tit.ft40{ line-height:2em;}
.z20 .con{ text-align:center;}
.z20 .con p{ line-height:2em;}
.z20 .line{border-bottom:1px solid #000; }
.z20 .tit2{ position:relative; height:2em;}
.z20 .tit2 span{ position:absolute; bottom:-45%; text-align:center; display:block; width:100%;}
.z20 .con2{ padding:4%; }
.z20 .con2 ul li{float: left; margin:4% auto;padding:0 4%; border-right:1px solid #333;}
.z20 .con2 ul li.last{ border-right:none;}
.z20 .more{ margin:5% auto; width:100%; background:#50a7bb; text-align:center; }
.z20 .more a{padding:1% 5%;font-size:2em; border:1px solid #fff; border-radius:5px; color:#fff; line-height:10em;}

@media screen and (max-width: 1100px){
.z1 .r{ height:auto; padding:0;}
.z1 .r .tit{ margin:30px 0 20px 10%; position: static;}
.z1 .r .con{ margin:10px 0 30px 10%;  position: static;}
.z1 .r .price{ margin:30px 0 30px 10%; position: static;}
.z2{ width:90%;}
.z4 img{width:80%;}
.z5 img{width:80%;}
.z6{ background:url(../images/z6.jpg) no-repeat center center; height:400px;}
.z6 img{ display:none;}
.z8 ul{ width:80%;}
.z8 ul li{ width:25%; float:left; margin:0 4%; text-align:center;}
.z9{margin:120px auto 0px;}
.z10 .tit{ position:absolute; left:4%; top:55%;}
.z10 .con{ top:80%; left:4%; width:92%;}
.z10 .con p{float:left;}
.z10 .con p{width:60%;}
.z11 .con2 .l{top:30%; width:15%;}
.z11 .con2 .l span{ font-size:6em;}
.z11 .con2 .r span{font-size:2em;}
.z11 .con2 .l p{font-size:1em;}
.z11 .con2 .r p{font-size:1em;}
.z12 .tit{top:10%; width:80%; left:15%;}
.z12 .con{ width:50%; left:15%;}
.z13-1 .con2{ text-align:center; margin:5% auto;}
.z17 .tit{top:30%;  }
.z17 .con{ top:55%;}
.z18 .l .tit{ top:20%}
.z19 .tit{ top:15%}
.z19 .con{ top:45%;}
.z20 .con ul li{float: left; margin:4% auto;padding:0 2%; border-right:1px solid #333;}
}

@media screen and (max-width: 800px){
.z11 .con span{ width:90%;}
.z11 .con2 .l{ width:18%;}
.z11 .con2 .m .yd img{width:11%;}
.z11 .con2 .m .yd2 img{width:10%;}
.z11 .con2 .m .yd3 img{width:9%;}
.z12 .tit{top:8%;}
.z12 .con{width:40%;}
.z15 .r{ width:60%; left:40%;}
.z15 .r { padding-bottom:3%;}
.z15 .r .tit{ margin-top:10%; }
.z15 .r .con{margin:3% auto;}
.z15 .r .ico{ float:none;}
.z18 .l,.z18 .r{ width:100%;}
.z19 .tit{ }
.z20 .con ul li{ width:50%; padding:0; border-right:none;}
}

@media screen and (max-width: 640px){
.z2 ul li{ width:30%; margin:2% 9%;}
.z3{ background:url(../images/z3.jpg) no-repeat center center; height:250px; background-size:auto 250px;}
.z3 img{ display:none;}
.z4 .tit{ margin:50px auto 20px;}
.z4 img{ width:100%;}
.z5 .tit{ margin:50px auto 20px;}
.z5 img{ width:100%;}
.z6 .con .l{ width:150px;}
.z7 .tit,.z7 .con{ padding:0 5%;}
.z9{margin:90px auto 0px; background:url(../images/z9.jpg) no-repeat center bottom; background-size: auto 200px; height:300px;}
.z9 .con{ top:80px;}
.z9 .con p{width:60%;}
.z9 img,.z10 img,.z12 img,.z19 img{ display:none;}
.z10{background:url(../images/z10.jpg) no-repeat right top; background-size: auto 300px; height:300px;}
.z10 .tit{ top:30%}
.z10 .con{top:60%;}
.z11{padding-top:10%;}
.z11 .con2 { padding-bottom:25%;}
.z11 .con2 .m{ width:80%;}
.z11 .con2 .l,.z11 .con2 .r{ width:40%;}
.z11 .con2 .l{ right:50%; top:73%;}
.z11 .con2 .r{ left:50%; top:80%;}
.z11 .con2 .l span{ font-size:4em;}
.z11 .con2 .r span{font-size:1.5em;}
.z11 .con2 .l p{font-size:1em;}
.z11 .con2 .r p{font-size:1em;}
.z12{ background:url(../images/z12.jpg) no-repeat center top; background-size:auto 400px; height:400px;}
.z12 .con{top:30%; width:50%;}

.z13-1 .tit{ width:100%; text-align:center;}
.z13-1 .con{ text-align:center;}
.z14 .l .tit{ top:30%;}
.z14 .l .con{ top:45%; }
.z15 img{ display:none;}
.z15 { background:url(../images/z15l.jpg) no-repeat 80% bottom; background-size: auto 300px; height:300px;}
.z16 .tit,.z16 .con{ left:5%;}
.z16 .tit{ top:25%;}
.z16 .con{ top:60%}
.z19{ background:url(../images/z19.jpg) no-repeat 60% bottom; background-size: auto 400px; height:400px;}
.z19 .tit{ width:62%; left:38%;}
.z19 .con{ width:62%;left:38%; top:40%;}
.z19 .tit img{ display:block;}
}

@media screen and (max-width: 480px){
.z1 .r .tit{ margin-left: 5%;}
.z1 .r .con{ margin-left: 5%;}
.z1 .r .price{ margin-left: 5%;}
.z2{ margin:20px auto;}
.z2 ul li{ margin:4% 9%;}
.z2 ul li p{ font-size:1em;}
.z6 .tit h2{ font-size:1.5em;}
.z6 .tit h3{ font-size:1.2em;}
.z6 .tit h4{ font-size:1em; line-height:30px;}
.z6 .con .l span,.z6 .con .r span{ font-size:4em;}
.z6 .con .m{ position:absolute; left:50%; margin-left:-1px;width:2px; background:#000; line-height:4em; display:block; margin-top:1em;}
.z6 .con i{ font-size:1.2em; margin-top:1.5em;}
.z6 .con p{ font-size:0.8em;}
.z6 .con .l,.z6 .con .r{ max-width:140px;}
.z6 .con .l{ width:120px;}
.z7 .con p{ position:relative;}
.z8 ul{ width:90%;}
.z8 ul li{ width:30%; float:left; margin:0 1.6%; text-align:center;}
.z9{margin:50px auto 0px; background:url(../images/z9.jpg) no-repeat center bottom; background-size: auto 200px; height:350px;}
.z9 .con{ top:50px;}
.z9 .con p{width:70%;}
.z10{background:url(../images/z10.jpg) no-repeat 20px top; background-size: auto 300px; height:300px;}
.z11 .con2 { padding-bottom:30%;}
.z11 .con2 .m{ width:80%;}
.z11 .con2 .l,.z11 .con2 .r{ width:40%;}
.z11 .con2 .l{ right:50%; top:60%;}
.z11 .con2 .r{ left:50%; top:70%;}
.z12{ background:url(../images/z12.jpg) no-repeat 30% top; background-size:auto 400px; height:300px;}
.z12 .tit,.z12 .con{ left:15%;}
.z12 .con{top:30%; width:60%; }
.z13 .box{ width:49%;  margin-bottom:5%;}
.z13 .box.l{ width:44%;}
.z13 .box.m{ width:56%;}
.z13 .box.l, .z13 .box.m{ border-right:none; padding-right:0;}
.z13 .box.r{ float:none !important;}
.z15 .r{ width:80%; left:15%;}
.z19{ background:url(../images/z19.jpg) no-repeat 70% bottom; background-size: auto 300px; height:300px;}
.z20-1{ width:60%;}
.z19 .tit{  top:15%;}
.z20 .con ul li{ width:100%; }
}