body{ margin:0px; padding:0px;}
a{ text-decoration:none;}
ul{ list-style:none; margin:0px; padding:0px;}
p{ margin:0px;}
.width{ width:1200px; margin:0 auto;}
.both{ clear:both;}
a{ color:#000; transition:0.5s;}
#box{ width:100%; position:relative; overflow:hidden; height:500px;}
#box img{ transition:0.3s; position:absolute; top:0px; left:0px; height:100%; width:100%; object-fit:cover;}
.arrow{width:100%;}
.arrow a{ position:absolute; top:45%; background-color:rgba(255,255,255,0.8);border-radius:50%; color:#333; font-size:24px; padding:10px 15px; opacity:0;}
#box:hover .arrow a{ opacity:1;}
#logo{ box-shadow:0 0 15px #aaa;}
#logo .logo{ float:left; width:40%; font-size:24px; font-weight:600; color:#888; height:80px; line-height:80px;}
#logo .daohang{ height:80px; line-height:80px; float:right; width:60%;}
#logo .daohang a{ float:left; text-align:center; width:calc(100% / 6); font-size:14px; color:#333;}
#logo .daohang a:hover{ color:#83C326;}

#about{ padding:40px 0;}
#about img{ float:left; width:600px; height:400px;}
#about .right{ float:right; width:calc(100% - 680px); margin:40px 0; height:320px;}
#about .right .p1{ font-weight:600; font-size:32px; color:#333; line-height:200%; margin-bottom:20px;}
#about .right .p2{ color:#888; font-size:14px; line-height:200%;}
#about .right .p3{ margin-top:40px;}
#about .right .p3 a{ background:#434343; color:#fff; font-size:12px; display:inline-block; height:40px; line-height:40px; width:120px; text-align:center;}
#about .right .p3 a:hover{ background:#83C326;}

#recommend{ background:#f5f5f5;}
#recommend .product{ float:left; width:calc(100% / 4); background:#83C326; height:400px; position:relative; overflow:hidden;}
#recommend .product img{ position:absolute; left:0px; transition:0.5s; height:100%; width:100%; object-fit:cover;}
#recommend .product .p1{ position:absolute; top:30%; width:80%; right:100%; transition:0.5s;}
#recommend .product .p1 a{ color:#fff; font-size:20px; font-weight:600;}
#recommend .product .p2{ font-size:14px; position:absolute; top:calc(30% + 50px); right:100%; width:80%; color:#fff; line-height:200%; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp:4;-webkit-box-orient: vertical; transition:0.5s;}
#recommend .product:hover img{ left:100%;}
#recommend .product:hover .p1{ right:10%;}
#recommend .product:hover .p2{ right:10%;}

#product{ padding:40px 0;}
#product .more{ float:right; height:40px; width:140px; line-height:40px; text-align:center; background:#434343; color:#fff; font-size:14px; margin-top:10px;}
#product .title{ font-size:30px; font-weight:600; margin-bottom:10px;}
#product .descript{ color:#888; font-size:14px; margin-bottom:30px;}
#product .product{ float:left; width:calc(100% / 3 - 30px); margin:15px 30px 15px 0;}
#product .product img{ width:100%; height:260px;}
#product .product p{ text-align:center; line-height:200%; font-size:14px; font-weight:600;}
#product .product p a{ color:#454545;}
#product .more:hover{ background:#83C326;}
#product .product p a:hover{ color:#83C326;}

#example{ background:#f5f5f5; padding:40px 0;}
#example .more_a{ float:right; height:40px; width:140px; line-height:40px; text-align:center; background:#83C326; color:#fff; font-size:14px; margin-top:10px;}
#example .title{ font-size:30px; font-weight:600; margin-bottom:10px;}
#example .descript{ color:#888; font-size:14px; margin-bottom:30px;}
#example .product{ float:left; width:calc(100% / 3 - 30px); margin:15px 30px 15px 0;}
#example .product img{  width:100%; height:260px;}
#example .product p{ text-align:center; line-height:200%; font-size:14px; font-weight:600;}
#example .product p a{ color:#454545;}
#example .more_a:hover{ background:#fff; color:#83C326; border:1px solid #83C326;}
#example .product p a:hover{ color:#83C326;}

#news{ padding:40px 0;}
#news .more{ float:right; height:40px; width:140px; line-height:40px; text-align:center; background:#434343; color:#fff; font-size:14px; margin-top:10px;}
#news .title{ font-size:30px; font-weight:600; margin-bottom:10px;}
#news .descript{ color:#888; font-size:14px; margin-bottom:30px;}
#news .product{ float:left; width:calc(100% / 2 - 40px); margin:20px 40px 20px 0; border-bottom:1px #ddd dashed;}
#news .product .p1{ font-size:20px; margin-bottom:10px;}
#news .product .p1 a{ color:#333;}
#news .product img{ float:left; width:200px; height:120px; object-fit:cover;}
#news .product .p2{ float:right; width:calc(100% - 220px); color:#888; font-size:14px; line-height:200%; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp:4;-webkit-box-orient: vertical;}
#news .product .p2 a{ color:#83c326;}
#news .product .p3{ text-align:right; font-size:12px; color:#888; margin:8px 0;}
#news .more:hover{ background:#83C326;}
#news .product .p1 a:hover{ color:#83c326;}
#news .product .p2 a:hover{ color:#e00000;}

#links{ padding:20px 0;}
#links p{ font-size:14px; color:#666;}
#links p a{ color:#666;}
#links p a:hover{ color:#83c326;}

#foot{ background:#222; padding:40px 0;}
#foot .product{ float:left; width:calc((100% - 140px) / 3 - 40px); margin-right:40px;}
#foot .product .p1{ font-weight:600; font-size:24px; color:#ccc; margin:10px 0 30px;}
#foot .product .p2{ color:#777; font-size:14px; line-height:200%;}
#foot .product .p3{ font-size:28px; color:#999; line-height:200%;}
#foot .product .p4{ color:#ccc; margin-bottom:40px;}
#foot .product .p5{ font-size:14px; line-height:200%;}
#foot .product .p5 a{ color:#999;}
#foot .product .p6{ font-size:14px; line-height:200%; color:#999;}
#foot .wx{ float:right; width:140px; margin-top:50px;}
#foot .wx img{ width:100%; height:140px;}
#foot .product .p5 a:hover{ color:#fff;}

#beian{ background:#111; padding:20px 0;}
#beian p{ color:#777; font-size:14px; text-align:center;}
#beian p a{ color:#777;}
#beian p a:hover{ color:#fff;}

@media screen and (max-width: 980px) {
*{-webkit-text-size-adjust:none;}
#box{ height:300px;}
.width{ width:98%;}
#logo .logo{ font-size:30px; width:200px;}
#logo .daohang{ width:calc(100% - 200px);}
#logo .daohang a{ font-size:20px; font-weight:600;}
#about img{ display:none;}
#about .right{ width:100%; height:auto;}
#about .right .p2{ font-size:18px;}
#recommend .product{ height:500px; width:calc(100% / 2);}
#recommend .product .p1{ top:20%;}
#recommend .product .p1 a{ font-size:30px;}
#recommend .product .p2{ font-size:20px;}
#product .descript{ font-size:20px;}
#product .more{ height:50px; line-height:50px; width:180px; font-size:18px; margin-top:15px;}
#product .product{ width:calc(100% / 2 - 30px); margin:15px;}
#product .product img{ height:300px;}
#product .product p{ font-size:20px;}
#example .descript{ font-size:20px;}
#example .more_a{ height:50px; line-height:50px; width:180px; font-size:18px; margin-top:15px;}
#example .product{ width:calc(100% / 2 - 30px); margin:15px;}
#example .product img{ height:300px;}
#example .product p{ font-size:20px;}
#news .descript{ font-size:20px;}
#news .more{ height:50px; line-height:50px; width:180px; font-size:18px; margin-top:15px;}
#news .product{ width:100%; margin:20px 0;}
#news .product .p1{ font-size:24px;}
#news .product img{ height:150px; width:260px;}
#news .product .p2{ width:calc(100% - 280px); font-size:20px;}
#news .product .p3{ font-size:22px;}
#links{ font-size:18px;}
#foot .foot_none{ display:none;}
#foot .product{ width:calc(100% / 2 - 70px); margin:0px;}
#foot .product .p1{ font-size:36px; margin:0 0 20px;}
#foot .product .p2{ font-size:18px;}
#foot .product .p4{ font-size:30px;}
#foot .product .p6{ font-size:20px;}
#foot .f_r{ float:right;}
#foot .text_align_r{ text-align:right;}
#beian p{ font-size:20px;}
}