@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:600px;}
#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:#f4f4f4; border-bottom:1px solid #e7e7e7; height:40px; line-height:40px;}
#top p{ font-size:12px; color:#666;}
.wximg{position: fixed;right: 10px; top: 60%;z-index: 15;}
.wximg img{width: 100px;}
.wximg{background-color: white;font-weight: 700;    padding: 10px;
    border-radius: 10px;    color: #51b331;
    border: 1px solid #51b331;}
#logo{ padding:40px 0;}
#logo .logo{ float:left; font-size:32px; color:#48b634; line-height:70px; margin:0;}
#logo .logo_right{ float:left; border-left:1px solid #bfbfbf; margin-left:20px; padding-left:20px;}
#logo .logo_right .p1{ font-size:26px; color:#48b634; font-weight:600;}
#logo .logo_right .p2{ color:#ff8000; line-height:220%;}
#logo .tel{ float:right; background:url(../img/tel.png) left no-repeat; padding:10px 0 10px 60px;}
#logo .tel .p1{ color:#666666;}
#logo .tel .p2{ font-weight:600; font-size:24px; color:#18a100;}

#nav{ background:#48b634;}
#nav a{ float:left; height:60px; line-height:60px; width:calc(100% / 7); text-align:center; color:#fff;}

#key{ border-bottom:1px solid #f0f0f0;}
#key p{ height:80px; line-height:80px; font-size:14px; color:#666; font-weight:600;}
#key p a{ color:#666; font-weight:500;}

#product{ padding:40px 0;}
#product .title{ text-align:center; font-weight:600; color:#333; font-size:38px;}
#product .title b{ color:#31b015;}
#product .descript{ color:#999; font-size:18px; text-align:center; line-height:40px; margin-bottom:20px;}
#product .left{ float:left; width:260px;}
#product .left .p1{ width:100%; height:80px; background:url(../img/product_type_icon.png) calc(100% - 25px) center no-repeat #48b634; border-top-left-radius:10px; border-top-right-radius:10px; color:#fff; font-size:24px; line-height:80px; font-weight:600; text-indent:24px;}
#product .left .p2{ height:40px; line-height:40px; background:url(../img/product_type_a.png) calc(100% - 40px) center no-repeat #f7f7f7; text-indent:40px;}
#product .left .p2 a{ color:#666;}
#product .left .tel{ background:#48b634; text-align:center; padding:10px 0;}
#product .left .tel .p3{ font-size:18px; color:#fff;}
#product .left .tel .p4{ font-size:26px; font-weight:600; color:#fff; background:url(../img/product_tel.png) 10px no-repeat; text-indent:10px;}
#product .right{ float:right; width:calc(100% - 300px);}
#product .right .product_title{ height:80px; line-height:80px; background:#f7f7f7; margin-bottom:30px;}
#product .right .product_title .p1{ float:left; background:#48b634; width:180px; text-align:center; color:#fff; font-size:18px;}
#product .right .product_title .p2{ float:right; margin-right:20px; background:url(../img/title_tel.png) left no-repeat; color:#666; padding-left:35px;}
#product .right .product_title .p2 b{ font-size:26px; color:#48b634;}
#product .right .product{ float:left; width:calc(100% / 3 - 20px); margin:10px;}
#product .right .product img{ width:100%; height:240px; object-fit:cover;}
#product .right .product video{ width:100%; height:240px; object-fit:cover;}
#product .right .product p{ background:#f5f5f5; height:45px; line-height:45px; text-align:center;}
#product .right .product p a{ color:#444;}

#example{ padding:40px 0;}
#example .title{ text-align:center; font-weight:600; color:#333; font-size:38px;}
#example .title b{ color:#31b015;}
#example .descript{ color:#999; font-size:18px; text-align:center; line-height:40px; margin-bottom:20px;}
#example .product{ float:left; width:calc(100% / 4 - 30px); margin:15px;}
#example .product img{ width:100%; height:220px; object-fit:cover;}

#youshi{ padding:40px 0; background:url(../img/youshi_bg.jpg);}
#youshi .title{ text-align:center; font-weight:600; color:#333; font-size:38px;}
#youshi .title b{ color:#31b015;}
#youshi .descript{ color:#999; font-size:18px; text-align:center; line-height:40px; margin-bottom:20px;}
#youshi .product{ margin:15px 0;}
#youshi .product .fl{ float:left; width:50%;}
#youshi .product .fr{ float:right; width:50%;}
#youshi .product .product_img img{ width:100%; height:400px; object-fit:cover;}
#youshi .product .product_text{ width:calc(50% - 80px); margin-top:80px;}
#youshi .product .product_text .p1{ padding:; font-size:28px; color:#333; font-weight:600; height:85px; line-height:85px;}
#youshi .product .product_text .p1 b{ background:url(../img/youshi_icon.png) center no-repeat; background-size:contain; color:#fff; font-size:48px; display:inline-block; width:70px; text-align:center; margin-right:20px;}
#youshi .product .product_text .p2{ line-height:200%; color:#383838;}
#youshi .product .product_text .p3{ margin-top:20px; color:#31b015; font-weight:600;}
#youshi .product .product_text .p3 b{ font-size:24px;}
#youshi .product .product_text .p4 a{ display:inline-block; width:220px; height:40px; text-align:center; line-height:40px; background:#31b015; color:#fff; border-radius:20px; box-shadow:0 0 20px #31b015; font-size:14px; margin-top:20px;}

#about{ padding:40px 0; background:#f7f7f7;}
#about .title{ text-align:center; font-weight:600; color:#333; font-size:38px;}
#about .title b{ color:#31b015;}
#about .descript{ color:#999; font-size:18px; text-align:center; line-height:40px; margin-bottom:20px;}
#about .left{ float:left; width:590px; height:400px;}
#about .left img{ width:100%; height:100%; object-fit:cover;}
#about .right{ float:right; width:calc(100% - 620px); height:355px; background:#fff; padding:45px 15px 0 15px;}
#about .right .p1{ color:#040203; font-weight:600; font-size:44px;}
#about .right .p2{ color:#333; font-size:24px;}
#about .right .p3{ color:#666; line-height:200%; margin-top:20px; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp:4;-webkit-box-orient: vertical;}
#about .right .p4{ margin-top:30px;}
#about .right .p4 a{ display:inline-block; width:200px; height:50px; line-height:50px; text-align:center; background:#31b015; color:#fff; font-size:14px; border-radius:5px;}

#news{ padding:40px 0;}
#news .title{ text-align:center; font-weight:600; color:#333; font-size:38px;}
#news .title b{ color:#31b015;}
#news .descript{ color:#999; font-size:18px; text-align:center; line-height:40px; margin-bottom:20px;}
#news .left{ float:left; width:calc(50% - 20px);}
#news .left .new_title{ border-bottom:1px solid #eee; margin-bottom:30px; padding-bottom:10px;}
#news .left .new_title .p1{ float:left; color:#333; font-size:22px; height:40px; line-height:40px;}
#news .left .new_title .p2{ float:left; margin-left:14px; color:#999; font-size:14px; height:40px; line-height:40px;}
#news .left .new_title .p3{ float:right;}
#news .left .new_title .p3 a{ display:inline-block; width:24px; height:24px; background:url(../img/new_title.png); margin-top:10px;}
#news .left .new_img{}
#news .left .new_img .new_img_left{ float:left; width:270px; height:170px;}
#news .left .new_img .new_img_left img{ width:100%; height:100%; object-fit:cover;}
#news .left .new_img .new_img_right{ float:right; width:calc(100% - 300px);}
#news .left .new_img .new_img_right .p1{ font-weight:600; line-height:200%;}
#news .left .new_img .new_img_right .p1 a{ color:#333;}
#news .left .new_img .new_img_right .p2{ color:#999; line-height:200%; font-size:14px; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp:3;-webkit-box-orient: vertical;}
#news .left .new_img .new_img_right .p3{ margin-top:10px;}
#news .left .new_img .new_img_right .p3 a{ display:inline-block; width:28px; text-align:center; height:28px; line-height:28px; background:url(../img/new_img_icon.png) center no-repeat;}
#news .left .new_border{ margin-top:25px; border:1px solid #eee; padding:20px;}
#news .left .new_border .product{ height:30px; line-height:30px;}
#news .left .new_border .product a{ position:relative; padding-left:22px; color:#666; float:left; font-size:14px;}
#news .left .new_border .product a:before{ position:absolute; content:''; left:0; top:12px; height:5px; width:5px; border:1px solid #31b015;}
#news .left .new_border .product span{ float:right; color:#999; font-size:14px;}
#news .right{ float:right; width:calc(50% - 20px);}
#news .right .new_title{ border-bottom:1px solid #eee; margin-bottom:30px; padding-bottom:10px;}
#news .right .new_title .p1{ float:left; color:#333; font-size:22px; height:40px; line-height:40px;}
#news .right .new_title .p2{ float:left; margin-left:14px; color:#999; font-size:14px; height:40px; line-height:40px;}
#news .right .new_title .p3{ float:right;}
#news .right .new_title .p3 a{ display:inline-block; width:24px; height:24px; background:url(../img/new_title.png); margin-top:10px;}
#news .right .product{ padding:15px 0; border-bottom:1px dashed #dcdcdc;}
#news .right .product .product_left{ float:left; width:160px; height:100px;}
#news .right .product .product_left img{ width:100%; height:100%; object-fit:cover;}
#news .right .product .product_right{ float:right; width:calc(100% - 180px);}
#news .right .product .product_right .p1{ color:#333; font-weight:600; line-height:220%;}
#news .right .product .product_right .p1 a{ color:#333;}
#news .right .product .product_right .p2{ color:#999; line-height:200%; font-size:14px; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}

#foot{ background:#252526; padding:20px 0;}
#foot .daohang{ text-align:center; border-bottom:1px dashed #fff; padding-bottom:20px; margin-bottom:20px;}
#foot .daohang a{ font-size:14px; color:#fff; width:calc(100% / 7 - 50px); display:inline-block; position:relative;}
#foot .daohang a:before{ position:absolute; content:''; left:0; top:2px; width:1px; height:14px; background:#fff;}
#foot .daohang .fir:before{ content:normal;}
#foot .left{ float:left;}
#foot .left p{ color:#fff; line-height:200%; font-size:14px;}
#foot .left p a{ color:#fff;}
#foot .right{ float:right;}
#foot .right img{ width:140px; height:140px;}

#beian{ background:#222; padding:10px 0;}
#beian p{ font-size:12px; color:#fff; line-height:200%;}
#beian p a{ color:#fff;}

#foot_nav{ display:none;}

@media screen and (max-width: 980px) {
*{-webkit-text-size-adjust:none;}
#box{ height:300px;}
#key{padding-top: 10px;}
.width{ width:98%;}
#logo{ padding:20px 0;}
#logo .logo_right{ display:none;}
#key p{ height:30px; line-height:30px;}
#product .left{ display:none;}
#product .right{ width:100%;}
#product .right .product{ width:calc(100% / 2 - 20px);}
#example .product{ width:calc(100% / 2 - 30px);}
#youshi .product .fr{ width:42%;}
#youshi .product .fl{ width:42%;}
#youshi .product .product_img img{ height:300px;}
#youshi .product .product_text{ width:calc(58% - 20px); margin:0;}
#about .left{ display:none;}
#about .right{ width:calc(100% - 30px);}
#news .left{ width:100%;}
#news .right{ display:none;}
#foot .daohang a{ width:calc(100% / 7 - 6px);}
#foot .daohang a:before{ top:4px;}
#beian{ 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:#31b015; color:#fff; float:left;}
}