@charset "utf-8";
/* CSS Document */
body{font-family: PingFangSC-Regular,sans-serif,PingFangSC-Light,sans-serif,"Microsoft YaHei",arial; margin: 0;}
dl,dt,dd,ul,ol,h1,h2,h5,p{padding: 0; margin: 0;list-style-type:none}
i,em{font-style: normal}
a{text-decoration:none;cursor:pointer }
a:hover{color: #333}

header{width: 100%;position: relative}
	nav{width: 100%; position: absolute; top:0; left: 0; z-index: 100;background: #4d4d4d;padding:10px 0;border-bottom:3px #58cd58 solid}
	nav dl{display: grid; grid-template-columns:240px auto 180px;width:86%; max-width: 1200px; margin:0 auto; height: 60px;}
	nav dl dt{display: inherit;}
	nav dl dt img{width:186px;}
	nav dl dd{ width: 100%;display:grid;grid-template-columns:110px 110px 110px 110px 110px 110px auto;}
	nav dl dd text{display: inherit; font-size: 15px; line-height: 60px; text-align: center}
	nav dl dd text a{display: block; color: #fff;}
	nav dl dd text a:hover{color: #fff;position: relative}
	nav dl dd text a:hover::after{content: "";height:3px;background: #4d4d4d;width: 58px; position: absolute; left:47%; bottom:5px; transform: translate(-50% ,0)}
	nav dl em{line-height: 60px; color: #fff}
	nav dl em i{font-size:20px; padding-right: 3px}
	#nav text.a1 a{ color: #f4ce19; height:60px;line-height: 60px;position: relative;width:110px}
	#nav text.a1 a::after{content: "";height:4px;background: #ff0000;width: 40px; position: absolute; left:48%; bottom:7px; transform: translate(-50% ,0);border-radius:2px}

	/*--图片切换--*/
	.banners{height: 660px; overflow: hidden; position: relative}
	.html5zoo-space-0 strong{font-size:50px; position: absolute; z-index: 500; color: #fff; top:40%; left:60%; display:block}

	/*--动态--*/
	.trends{width: calc(1200px - 450px); padding-left: 450px; position: absolute; left:50%; bottom: -100px; transform: translate(-50% ,0); z-index: 100}
	.trends dl{width: 100%}
	.trends dl dt,.trends dl dd{ height: 280px;float:left;backdrop-filter: blur(7px);}
	.trends dl dt{width: 450px; background:rgba(88,205,88,.7);}
	.trends dl dt strong{font-size:28px; color: #fff; margin:46px 0 0 40px; display: block; width: calc(100% - 30px); font-weight: 400}
	.trends dl dt strong text{display: block; font-weight: 400; font-size: 16px;line-height: 30px; color: rgba(255,255,255,.7)}
	.trends dl dt span{display: block; float: left; margin-left: 40px; margin-top: 30px}
	.trends dl dt span i{font-style: normal;display: block; }
	.trends dl dt span i:nth-of-type(1){ font-size: 50px; color: #fff}
	.trends dl dt span i:nth-of-type(1) text{font-size:18px;padding-left: 3px}
	.trends dl dt span:nth-of-type(3) i:nth-of-type(1) text{font-size:22px;}
	.trends dl dt span i:nth-of-type(2){font-size:15px; color: rgba(255,255,255,.7); text-align: center}
	.trends dl dd{width: 300px; background: rgba(222,222,222,.5);}
	.trends dl dd a{color:#222}
	.trends dl dd span:nth-of-type(1){height: 60px;display: block}
	.trends dl dd span:nth-of-type(1) i{width: 60px; background: #d5b624; border-radius: 0 0 30px 30px; text-align: center; font-size: 16px; color: #fff; display: block; height: 55px;padding-top: 5px;margin-left: 30px; float: left}
	.trends dl dd span:nth-of-type(1) text{padding-left: 30px; line-height: 60px; font-size: 13px}
	.trends dl dd strong{font-size: 15px; display: block; padding: 20px;}
	.trends dl dd strong text{display: block; font-size: 14px; color: rgba(0,0,0,.4); font-weight: 400; padding-top: 5px}
	.trends dl dd span:nth-of-type(2){font-size: 14px;color: rgba(0,0,0,.6); padding:0 20px;display: block}

header h2{position: absolute; z-index: 30; color: rgba(255,255,255,.9); top:40%; left:18%;font-size: 34px;font-weight: 400; }
header h2 text{display: block;font-size: 17px; padding-top: 20px}
header h2 img{animation: rotateImg .7s linear infinite;-webkit-animation: rotateImg .7s linear infinite; margin-top: 130px; margin-left: 25px}
	@keyframes rotateImg {
	 0% {transform: translateY(0);}
	 25% {transform: translateY(10px);}
	 50% {transform: translateY(20px);}
	 75% {transform: translateY(10px);}
	 100% {transform: translateY(0);}
	}

/*--右侧固定联系--*/
.lianxi{width: 60px;position: fixed; z-index: 100; right:10px; top:40%;}
.lianxi ul{width: 100%}
.lianxi ul li{width: 100%; height: 60px;margin-top:1px; background:#d5b624;position: relative; cursor: pointer}
.lianxi ul li span{font-size: 30px; width: 100%; text-align: center; display: block; padding-top: 15px; height: 45px}
.lianxi ul li strong{display:none;}
.lianxi ul li a{position:relative;display:block;height: 100%; color: #fff}
.lianxi ul li a:hover{background: #76cf1d; color: #fff;}
.lianxi ul li a:hover strong {position:absolute;top:0; right:0;height: 60px; background: #76cf1d; color: #fff; padding: 0 20px; display: block;line-height: 60px;}
.lianxi ul li img{display: none}
.lianxi ul li a:hover img{position: absolute; top:0; right:60px; border: 5px #76cf1d solid; width: 130px; display: block}
.lianxi ul li a:hover strong i{font-size: 20px; padding-right: 5px; font-weight: 400}
.lianxi ul li text{display: block;font-size: 12px; width: 100%; text-align: center;padding-top: 34px}
.lianxi ul li:nth-of-type(4)::after{content: ''; width: 18px; height:18px; border-top: 2px #fff solid; border-left:2px #fff solid; position: absolute; top:27%; left:34%;transform: rotate(45deg)}

/*--首页关于我们--*/
.introduce{width:86%; max-width: 1200px; margin:0 auto;height:280px;height: 520px;padding-top: 140px}
.introduce h5{width: 100%; font-size: 24px; color: #ed6910; margin-top: -40px; margin-bottom: 20px; position: relative}
.introduce h5::after{content: ""; width: 12px; height: 12px; border-radius: 50%; border:2px #76cf1d solid; position: absolute; top:8px; left:110px}
.introduce h5 span{display: block; color:#cdcdcd;font: 900 32px/1 "Lato";}
.introduce dl{width: 100%; height: 400px}
.introduce dl dt{float: left;width: 50%; background: #f5f5f5; height: 100%}
.introduce dl dd{float: left; width: 47%; padding-left: 3%}
.introduce dl dd strong{font-size: 30px; color: #4d4d4d;width: 100%;display: block;}
.introduce dl dd strong text{display: block; font-size: 18px; font-weight: 400; padding: 8px 0}
.introduce dl dd span:nth-of-type(1){display: block; font-size: 14px; color: rgb(102, 102, 102); width: 100%; margin: 30px 0; line-height: 30px}
.introduce dl dd span:nth-of-type(1) a{display: block; width: 100px; border:1px solid #ed6910; text-align: center; margin-top: 25px; color: #ed6910; font-size: 15px; line-height: 30px}
.introduce dl dd span:nth-of-type(2){width: 100%; display: flex;}
.introduce dl dd em{display: inline; width: 110px; height: 110px; border: 1px #eee solid;background: #f5f5f5; float:left; border-radius: 50%; text-align: center;margin-right: 30px; }
.introduce dl dd em i{display: block; font-size: 36px; padding-top: 20px;color: #fff}
.introduce dl dd em text{font-size: 14px; padding:4px 23px 0 23px; display: block; color: #fff}
.video-all{width: 100%; height: 100%}
.introduce dl dd em a{display: block;width: 110px; height: 110px;border-radius: 50%;}
.introduce dl dd em a:hover{ background: #58cd58; color: #fff}
.introduce dl dd em a:hover i,.introduce dl dd em a:hover text{color: #fff}
.introduce dl dd em:nth-of-type(1){background: #58cd58}
.introduce dl dd em:nth-of-type(2){background: #ed6910}
.introduce dl dd em:nth-of-type(3){background: #fd0303}
.introduce dl dd em:nth-of-type(4){background: #848484}

.ts{width: 100%; background: #4d4d4d; padding: 40px 0;border-bottom:3px #58cd58 solid}
.ts h5{width:86%; max-width: 1200px; margin:0 auto; font-size: 24px; color: #ed6910; position: relative; text-align:left; padding-bottom: 20px}
.ts h5::after{content: ""; width: 12px; height: 12px; border-radius: 50%; border:2px #76cf1d solid; position: absolute; top:8px; left:110px}
.ts h5 span{display: block;color:rgba(255,255,255,.3);font: 900 32px/1 "Lato"; padding-top: 5px}
.ts dl{width:86%; max-width: 1200px; margin:0 auto;display: grid; grid-template-columns: auto auto auto auto;grid-gap: 25px;padding: 20px 0}
.ts dl dd{display:inline-block; height: 380px; background: #fff; position: relative;cursor: pointer;overflow:hidden; }

.ts dl dd img{vertical-align:top;-webkit-transition:all 0.6s ease-in-out;-moz-transition:all 0.6s ease-in-out;-o-transition:all 0.6s ease-in-out;transition:all .3s ease-in-out; width:100%;}
.ts dl dd em,.ts dl dd p{display:inline-block; width:100%}
.ts dl dd em img{display: none}
.ts dl dd:hover em img{ z-index:1}
.ts dl dd strong{position: absolute; left:50%; bottom:50px; transform: translate(-50% ,0);font-size: 22px;padding: 0 20px; border-radius: 22px; height: 44px;line-height: 44px;background-color: rgba(0,0,0,0.14); color: #fff;z-index: 10; font-weight: 400;font-family: inherit;}
.ts dl dd i{position: absolute; font-size: 60px; color: #fff; left:50%; top:40px; transform: translate(-50% , 0);z-index: 10;}
.ts dl dd:hover em{position: absolute; top:0; left: 0;  height: 100%; width: 100%; display: block; z-index: 1;}
.ts dl dd:hover img{-webkit-transform:scale(1.3);-moz-transform:scale(1.3);transform:scale(1.3);}
.ts dl dd:hover span{position: absolute; top:0; left: 0; background:rgba(0,0,0,0.5);  height: 100%; width: 100%; display: block; z-index: 5;backdrop-filter: blur(7px);}
.ts dl dd:hover span text{font-size: 15px; color: #fff; display: block; text-align: center; margin-top: 46%; line-height: 30px}
.ts dl dd span{display: none}

/*----*/
.honor{width:86%; max-width: 1200px; margin:50px auto 0 auto;}
.honor h5{width:100%; font-size: 24px; color: #f3521e; position: relative;}
.honor h5::after{content: ""; width: 12px; height: 12px; border-radius: 50%; border:2px #76cf1d solid; position: absolute; top:8px; left:110px}
.honor h5 span{display: block;color: #cdcdcd;font: 900 32px/1 "Lato";padding-top: 5px}
.honor dl{width:100%; padding-top: 30px}
.honor dl dd{width: 100%;margin: 0 auto;display: grid;grid-template-columns: auto auto auto auto auto auto;grid-gap: 25px;}
.honor dl dd img{width: 100%; display: inline-block}

/*--门面店铺--*/
.shop{width: 100%; margin: 50px 0 ; background: #f2f2f2; background: #4d4d4d; padding: 40px 0;border-bottom:3px #58cd58 solid}
.shop h5{width:86%; max-width: 1200px; margin:0 auto 20px auto; font-size: 24px; color: #ed6910; position: relative;}
.shop h5::after{content: ""; width: 12px; height: 12px; border-radius: 50%; border:2px #76cf1d solid; position: absolute; top:8px; left:110px}
.shop h5 span{display: block;color: #cdcdcd;font: 900 32px/1 "Lato";padding-top: 5px}
.shop dl{width:86%; max-width: 1200px; margin:0 auto;display: grid; grid-template-columns:auto auto auto;grid-gap: 25px;}
.shop dl dd{display: inline; background: #fff}
.shop dl dd span{width:260px;list-style: none;display:inline;}
.shop dl dd span figure{width: 100%;height: 0;overflow: hidden;margin: 0;padding-bottom:70%; background-position: center;background-repeat: no-repeat;background-size: cover;}
.shop dl dd strong{display: block; line-height: 38px; color: #fff; font-size: 15px; background: #58cd58; margin-bottom: 14px; padding-left: 20px}
.shop dl dd strong text{padding-left:5px; color: #fff}
.shop dl dd p{font-size: 15px; color: #4d4d4d; margin-bottom: 13px; padding: 0 20px}
.shop dl dd p i{padding-right: 8px}

/*--加盟--*/
.message{width:86%; max-width: 1200px; margin:0 auto 50px auto;}
.message dl{width: 100%;position: relative;padding: 30px 0;background:url("../images/bg.png"); background-size: 100%; border-radius: 12px}
.message dl::after {content: '';background: url(../images/dina-bw1.png) no-repeat center bottom;background-size: contain;width: 12%;height: 200%; position:absolute;right: 5%;bottom: 0;z-index: 3;}
.message dl dd {font-size: 32px;color: #fff;text-align: center}
.message dl dd text {display: block;font-size: 16px;font-weight: 400;padding: 12px 0}
.message dl dt {width: 180px;margin: 0 auto;background: #58cd58;line-height: 40px;border-radius: 6px;text-align: center;color: #fff; font-size: 20px}
.message dl dt i{font-size:25px}

/*--留言--*/
.liuyuan{width:86%; max-width: 1200px; margin:0 auto;display: flex;flex-flow: row wrap;}
.liuyuan dl{width: 50%}
.liuyuan dl dt{width: 100%}
.liuyuan dl dt strong{display: block;font-size: 25px;color: #474141;font-weight: 400;margin-bottom: 5px;}
.liuyuan dl dt span{display: block;font-size: 45px;color: #cdcdcd;}
.liuyuan dl dt text{display: block;font-size: 16px;color: #cdcdcd;text-transform:uppercase;}
.liuyuan dl dd{width: 100%;padding: 30px 0 170px 0; position: relative}
.liuyuan dl dd span{display: block; width: 100%; line-height: 30px; color: #666666}
.liuyuan dl dd span i{color: #76cf1d}
.liuyuan dl dd strong{width:190px; height:190px; border-radius: 50%; background:url("../images/logo1.jpg"); background-size: 100%; position: absolute; top:15%; right:-30px; display: block; color: #fff; font-weight: 400; }
.liuyuan dl dd strong text:nth-of-type(1){display: block; font-size: 14px; width: 100%; text-align: center;margin-bottom: 4px}
.liuyuan dl dd strong text:nth-of-type(2){display: block; font-size: 25px; width: 100%; text-align: center}
.liuyuan dl dd strong i{display: block; margin-top:24px; font-size: 36px;text-align: center; width: 100%;margin-bottom: 14px}
.liuyuan ul{width:42%; margin-left:8%;}
.liuyuan ul li{width: 100%}
.liuyuan ul li strong{display: block; font-size: 25px;color: #f3521e;}
.liuyuan ul li strong text{display: block;font-size: 15px;color: #777;font-weight: 400;margin-bottom: 25px;}
.liuyuan ul li:nth-of-type(2){height: 380px}

/*--bottom--*/
footer{width: 100%; float:left;background: #4d4d4d;}
footer ul{background: #3a3a3a; height: 50px;width:84%; padding:0 8%;}
footer ul li{line-height: 50px;display: flex;flex-flow: row wrap;width:86%; max-width: 1200px; margin:0 auto;}
footer ul li strong{color: #fff; font-size: 18px; font-weight: 400; display: inline-block}
footer ul li strong text{color: #76cf1d;font-size: 20px; padding-right: 3px}
footer ul li span{display: inline-block; padding-left: 35px;}
footer ul li a{color: #EDEAEA}
footer ul li a:hover{color: #999}
footer dl{height:160px;width:86%; max-width: 1200px; margin:0 auto; padding:15px 0;display: flex;flex-flow: row wrap;}
footer dl dt{ width: 40%;display: flex;flex-flow: row wrap; padding-top: 10px}
footer dl dt span{display: block; padding-left:50px;  float: right; text-align: center}
footer dl dt span img{display: block; margin-top: 12px; width:100px}
footer dl dt span text{display: block;line-height: 28px; font-size: 14px; color: #fff}
footer dl dd{display: inherit; width: 60%}
footer dl dd span{display: block; font-size: 14px; color: #999; padding-top: 20px}
footer dl dd span a{color: #999;}
footer dl dd span text{display: block; line-height: 28px;}