@charset "utf-8";
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;}

#top{ background:#7bc520; padding:8px 0; font-size:12px;}
#top .p1{ float:left; color:#fff;}
#top .p2{ float:right; color:#fff;}
#top .p2 a{ color:#fff;}

#logo{ padding:30px 0;}
#logo .width{ display:flex; justify-content:space-between;}
#logo .logo{ font-size: 50px;font-weight: 700; height:70px; line-height:70px; padding-right:50px; border-right:1px solid #ddd;}
#logo .logo_right{ height:70px; display:flex; flex-direction:column; align-items:center; justify-content:space-around;}
#logo .logo_right p{}
#logo .tel{ background:url(../img/tel.png) no-repeat left; padding-left:50px;}
#logo .tel .p1{ color:#7bc520; font-weight:700;}
#logo .tel .p2{ font-size:36px; color:#7bc520; font-weight:600;}

#nav{ background:#7bc520;}
#nav a{ float:left; height:50px; line-height:50px; width:calc(100% / 8 - 1px); text-align:center; color:#fff; border-right:1px solid #fff;font-weight: 700;}

#about{ padding:50px 0;}
#about .left{ float:left; width:600px;}
#about .left .p1{ font-size:34px; color:#222; font-weight:600; padding:30px 0;}
#about .left .p2{ font-size:14px; line-height:200%; color:#5b5b5b; margin-bottom:30px; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;}
#about .left .js_icon{ float:left; width:calc(100% / 3);}
#about .left .js_icon .p3{ color:#222;}
#about .left .js_icon .p3 span{ color:#ffba00; font-weight:600; font-size:48px; margin-right:5px;}
#about .left .js_icon .p4{ font-weight:100;}
#about .right{ float:right; width:calc(100% - 640px);}
#about .right img{ width:100%; height:360px; object-fit:contain;}

#product{ background:#f7f7f7; padding:40px 0;}
#product .title{ text-align:center; font-size:36px; font-weight:600; color:#323232; background:url(../img/title.png) no-repeat center bottom; padding-bottom:35px;}
#product .descript{ text-align:center; font-size:24px; margin-top:5px; color:#6b6b6b;}
#product .descript b{ color:#f09e01;}
#product .product_type{ margin:30px 0; text-align:center;}
#product .product_type a{ display:inline-block; color:#fff; background:#7bc520; width:160px; height:50px; line-height:50px; margin:5px 3px;}
#product .product_flex{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;}
#product .product{ width:calc(100% / 4 - 4px); margin:2px 0;}
#product .product img{ width:100%; height:200px; object-fit:cover;}
#product .product p{ text-align:center; color:#5a5a5a; border:1px solid #ddd; height:50px; line-height:50px; background:#fff;}

#youshi{ padding:40px 0; background:url(../img/youshi_bg.jpg) no-repeat center bottom;}
#youshi .title{ text-align:center; font-size:36px; font-weight:600; color:#323232; background:url(../img/title.png) no-repeat center bottom; padding-bottom:35px;}
#youshi .descript{ text-align:center; font-size:24px; margin:5px 0 30px; color:#6b6b6b;}
#youshi .descript b{ color:#f09e01;}
#youshi .product_flex{ display:flex; justify-content:space-between; flex-wrap:wrap;}
#youshi .product{ width:calc(100% / 4 - 20px);border:1px solid #ddd; background:#fff; padding:5px;}
#youshi .product img{ width:100%; height:200px; object-fit:cover;}
#youshi .product .p1{ border-bottom:1px solid #9a9a9a; color:#323232; font-size:20px; font-weight:600; text-align:center; padding-bottom:5px; margin:20px 0 12px;}
#youshi .product .p2{ text-align:center; padding:0 20px; color:#636363; font-size:14px; line-height:200%; padding-bottom:40px; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}

#item{ padding:40px 0;}
#item .title{ display:flex; align-items:center; justify-content:center; margin-bottom:60px;}
#item .title .num{ background:rgb(240,158,1); color:#fff; font-size:102px; width:102px; height:102px; line-height:102px; border-radius:50%; text-align:center;}
#item .title .num_right .p1{ font-size:48px; color:#323232; font-family:'楷体';}
#item .title .num_right .p2{ font-size:24px; text-align:center; background:rgb(240,158,1); border-radius:45px; height:45px; line-height:45px; color:#fff;}
#item .product{}
#item .product .left{ float:left; width:50%; height:340px; display:flex; justify-content:center;}
#item .product .right{ float:right; width:50%; height:340px; display:flex; justify-content:center;}
#item .product .num{ background:#f09e01; font-size:48px; width:68px; height:68px; line-height:68px; border-radius:50%; color:#fff; text-align:center; font-family:'楷体'; margin:50px 10px 0 0;}
#item .product .num_right{ width:500px; margin-top:50px;}
#item .product .num_right .p1{ font-size:30px; color:#f09e01; font-weight:600;}
#item .product .num_right .p2{ font-size:18px; color:#3b3b3b;}
#item .product .num_right .p3{ margin-top:30px; color:#6d6d6d; line-height:200%;}
#item .product .num_right .p4{ background:url(../img/tel_item.png) no-repeat; background-size:contain; height:50px; display:flex; align-items:center; font-size:18px; color:#323232; padding-left:70px;}
#item .product .num_right .p4 b{ font-size:24px; padding-left:20px;}
#item .product img{ width:100%; height:100%; object-fit:cover;}

#example{ padding:40px 0;}
#example .title{ text-align:center; font-size:36px; font-weight:600; color:#323232; background:url(../img/title.png) no-repeat center bottom; padding-bottom:35px;}
#example .descript{ text-align:center; font-size:24px; margin:5px 0 30px; color:#6b6b6b;}
#example .descript b{ color:#f09e01;}
#example #list{ overflow:hidden; width:100%;}
#example #list img{ width:260px; height:260px; object-fit:cover; margin:0 5px;}

#news{ padding:40px 0;}
#news .title{ text-align:center; font-size:36px; font-weight:600; color:#323232; background:url(../img/title.png) no-repeat center bottom; padding-bottom:35px;}
#news .descript{ text-align:center; font-size:24px; margin:5px 0 30px; color:#6b6b6b;}
#news .left{ float:left; width:600px;}
#news .left img{ width:100%; height:260px; object-fit:cover;}
#news .left .p1{ margin:14px 0;}
#news .left .p1 a{ color:#323232;}
#news .left .p2{ font-size:14px; color:#5a5a5a; line-height:200%; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#news .left .p3{ font-size:14px; color:#787878; margin:15px 0;}
#news .left .p4{ text-align:right;}
#news .left .p4 a{ display:inline-block; background:#f09e01; color:#fff; font-size:14px; border-radius:30px; width:120px; height:40px; line-height:40px; text-align:center;}
#news .right{ float:right; width:calc(100% - 640px);}
#news .right .product{ border-bottom:1px solid #dadada; padding:10px 0;}
#news .right .product .p1 a{ color:#5a5a5a; font-weight:600;}
#news .right .product .p2{ margin:15px 0; color:#5a5a5a; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#news .right .product .p3{ font-size:14px; color:#5a5a5a;}

#foot{ border-top:4px solid #f09e01; background:#ededed; padding:30px 0;}
#foot .width{ display:flex; justify-content:space-between;}
#foot .left .p1{ color:#656565; font-weight:600; margin-bottom:20px;}
#foot .left .p2{ line-height:180%;}
#foot .left .p2 a{ color:#656565; font-size:14px; color:#888;}
#foot .center{ border-left:1px solid #959595; border-right:1px solid #959595; padding:0 0 30px 50px; width:360px;}
#foot .center .p1{ color:#656565; font-weight:600; margin-bottom:20px;}
#foot .center .p2{ line-height:300%; display:inline-block; width:calc(100% / 3 - 5px);}
#foot .center .p2 a{ color:#777;}
#foot .right .p1{ color:#656565; font-weight:600; margin-bottom:20px;}
#foot .right .p2{ color:#494949; font-size:20px; line-height:200%; font-weight:600;}
#foot .right .p3{ color:#858585; line-height:200%;}
#foot .wx img{ width:120px; height:120px;}
#foot .wx p{ color:#656565; font-weight:600; margin-top:10px; text-align:center;}

#links{ padding:15px 0;}
#links p{ font-size:14px; color:#777; line-height:200%;}
#links p a{ color:#777;}

#foot_nav{ display:none;}

@media screen and (max-width: 980px) {
*{-webkit-text-size-adjust:none;}
#box{ height:300px;}
.width{ width:98%;}
#logo .logo{ border:none; padding:0;}
#logo .logo_right{ display:none;}
#nav .width{ width:100%;}
#about{text-align: center;}
#about .left .p2{padding: 0 30px;}
#about .left .p1{ padding:0 0 30px;}
#about .right{ display:none;}
#product .product_type a{ margin:5px 3px;}
#product .product{ width:calc(100% / 2 - 2px);}
#youshi .product{ width:calc(100% / 2 - 15px); margin:3px 0;}
#item .title .num_right .p1{ font-size:40px;}
#item .product .left{ width:auto;}
#item .product .right{ width:auto;}
#item .product .num{ display:none;}
#item .product .num_right{ width:360px; margin-left:20px;}
#item .product .num_right .p4{ margin-top:20px;}
#item .product img{ width:200px;}
#news .left{ display:none;}
#news .right{ width:100%;}
.width{ margin:0;}
#foot .left{ display:none;}
#foot .center{ display:none;}
#links{ text-align:center; margin-bottom:50px;}
#foot_nav{ display:block; position:fixed; bottom:0px; width:100%; left:0px;}
#foot_nav li{ list-style:none;}
#foot_nav li a{ width:calc(100% / 4); text-align:center; height:50px; line-height:50px; background:#7bc520; color:#fff; float:left;}
}