@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:#85cb10;}
#top p{ font-size:14px; color:#fff; height:40px; line-height:40px;}

#logo img{ width:90px; height:90px; float:left;}
#logo .nav{ float:right; width:65%;}
#logo .nav a{ display:inline-block; font-size:14px; width:calc(100% / 6 - 6px); text-align:center; line-height:90px; height:90px;}
#logo .message{ float:right; width:160px; height:40px; line-height:40px; background:#4caf50; color:#fff; margin:25px 0; text-align:center; border-radius:20px; margin-left:30px;}

#product{ padding:40px 0;}
#product .title{ text-align:center; font-size:24px; color:#333;}
#product .descript{ text-align:center; color:#999; line-height:200%; margin-bottom:20px;}
#product .produc{ display:flex; justify-content:center;flex-wrap: wrap }
#product .produc a{ padding:5px; width:100px; border:1px solid; margin:5px; text-align:center;}
#product .produc a:hover{ color:#F00; }
#product .product{ float:left; width:calc(100% / 3 - 20px); padding:10px;}
#product .product img{ width:100%; height:200px;}
#product .product .product_text{ padding:20px; border-bottom:1px solid #e4e4e4; background:url(../img/product_icon.png) no-repeat right 16px center;}
#product .product .product_text .p1{ color:#333; line-height:200%;}
#product .product .product_text .p2{ font-size:14px; color:#999; line-height:200%; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}

#youshi{ background:url(../img/youshi_bg.jpg) top no-repeat; padding:40px 0;}
#youshi .width{ width:1500px;}
#youshi .title{ color:#fff; text-align:center; font-size:36px; font-family:'楷体';}
#youshi .descript{ color:#999; text-align:center; font-size:14px; margin-bottom:40px;}
#youshi .youshi_index_bg{ background:#fff; box-shadow:0 15px 20px #e7e7e7;}
#youshi .product{ float:left; width:calc(100% / 4 - 140px); margin:0 70px; text-align:center; padding:40px 0;}
#youshi .product img{ width:110px; height:110px;}
#youshi .product .p1{ margin:15px 0 10px; font-size:24px; color:#333;}
#youshi .product .p2{ font-size:14px; line-height:200%; color:#a3a3a3;}

#example{ padding:20px 0;}
#example .title{ font-size:24px; text-align:center; font-weight:600;}
#example .title b{ color:#0aa770;}
#example .title_en{ text-align:center; font-size:12px; color:#ccc; margin:8px 0;}
#example .descript{ font-size:14px; color:#d9d9d9; text-align:center; margin:8px 0;}
#example .descript_bord{ background:#d9d9d9; margin:8px 0 40px;}
#example .descript_bord span{ display:block; width:50px; margin:0 auto; height:1px; background:#0aa770;}
#example .product{ float:left; width:calc(100% / 3 - 80px); margin:20px 40px;}
#example .product img{ width:100%; height:240px;}
#example .product p{ text-align:center; font-weight:600; font-size:14px; height:40px; line-height:40px;}
#example .product p a{ color:#434343;}

#about{ background:url(../img/about_bg.jpg) top no-repeat; margin-bottom:40px;}
#about img{ width:100%; margin-top:40px;}
#about .about{ padding:45px 100px 45px 0; box-shadow:0 10px 20px #efefef; background:#fff;}
#about .about .p1{ padding-left:75px; color:#85cb10; border-bottom:1px solid #85cb10; display:inline-block; font-size:24px; height:50px; line-height:50px;}
#about .about .p2{ padding:25px 0 25px 75px; color:#999; font-size:14px; line-height:200%;}
#about .about .p3{ margin-left:75px;}
#about .about .p3 a{ display:inline-block; width:170px; height:40px; line-height:40px; border:1px solid #e9e9e9; text-align:center; font-size:12px; color:#666;}

#message{ background:url(../img/message_bg.jpg) center no-repeat fixed; background-size:100%; padding:90px 0;}
#message .left{ float:left; padding:50px 45px 40px 45px; background:#fff; width:calc(100% - 490px);}
#message .left .p1{ font-size:24px; color:#231f20; line-height:45px;}
#message .left .p2{ color:#231f20; margin-bottom:24px; line-height:34px;}
#message .left .index_input_text{ float:left; width:calc(100% / 2 - 22px); padding:0; border:1px solid #dedede; margin:0 20px 20px 0; height:40px;}
#message .left .index_input_textarea{ float:left; width:calc(100% - 22px); padding:0; border:1px solid #dedede; margin:0 20px 20px 0; height:90px; resize:none;}
#message .left .index_input_submit{ float:left; width:140px; height:40px; margin:0; padding:0; background:none; border:1px solid #00813c;}
#message .right{ float:right; padding:50px 50px 88px; background:#fff; width:270px;}
#message .right .title{ font-size:24px; color:#231f20;}
#message .right .product{ margin-top:28px; padding:0 0 18px 50px; border-bottom:1px #e9e9e9 solid;}
#message .right .address{ background:url(../img/message_right_adress.png) 6px top no-repeat;}
#message .right .tel{ background:url(../img/message_right_tel.png) 6px top no-repeat;}
#message .right .email{ background:url(../img/message_right_email.png) 6px top no-repeat;}
#message .right .product .p1{ color:#231f20; font-weight:600;}
#message .right .product .p2{ color:#666; line-height:200%;}

#news{ padding:40px 0;}
#news .title{ width:280px; text-align:center; border-top:1px solid #3fb83c; margin:30px auto 50px;}
#news .title p{ display:inline-block; padding:0 10px; color:#222; font-weight:600; font-size:36px; margin-top:-26px; background:#fff;}
#news .product_type{ text-align:center; margin-bottom:60px;}
#news .product_type a{ display:inline-block; width:140px; color:#000; background:#e5e5e5; border-radius:15px; height:30px; line-height:30px; font-size:14px; margin:0 5px;}
#news .product{ float:left; width:calc(100% / 2 - 100px); margin:0 50px 40px;}
#news .product .product_left{ float:left; width:100px; height:100px; background:#01823d; border-radius:50%; text-align:center;}
#news .product .product_left .p1{ font-size:48px; color:#fff; font-weight:600; margin-top:5px;}
#news .product .product_left .p2{ font-size:14px; color:#fff;}
#news .product .product_right{ float:right; width:calc(100% - 120px);}
#news .product .product_right .p1{ font-weight:600; font-size:14px; line-height:40px;}
#news .product .product_right .p1 a{ color:#333;}
#news .product .product_right .p2{ font-size:12px; color:#777; line-height:200%; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}

#foot{ padding:50px 0 30px; background:#333;}
#foot .width{ width:1400px;}
#foot .product{ float:left; width:calc((100% - 140px) / 4 - 80px); margin-right:80px;}
#foot .product .p1{ font-size:18px; color:#fff;}
#foot .product .p1:after{ display:block; content:''; width:15px; height:2px; background:#009933; margin:4px 0 15px;}
#foot .product .p2{ font-size:18px; font-weight:600; color:#009933; margin-bottom:10px;}
#foot .product .p3{ font-size:14px; line-height:200%; color:#919090;}
#foot .product .p3 a{ color:#919090;}
#foot .wx{ float:right;}
#foot .wx .p1{ font-size:18px; color:#fff;}
#foot .wx .p1:after{ display:block; content:''; width:15px; height:2px; background:#009933; margin:4px 0 15px;}
#foot .wx img{ width:100px; height:100px;}

#links{ border-top:1px solid #919090; padding:30px 0; background:#333;}
#links .width{ width:1400px;}
#links p{ color:#919090; font-size:14px;}
#links p a{ color:#919090;}

#foot_nav{ display:none;}

@media screen and (max-width: 980px) {
*{-webkit-text-size-adjust:none;}
#box{ height:300px;}
.width{ width:98%;}
#logo .message{ display:none;}
#logo .nav{ width:calc(100% - 110px);}
#product .product{ width:calc(100% / 2 - 20px);}
#youshi .width{ width:100%;}
#youshi .product{ width:calc(100% / 2 - 140px);}
#example .product{ width:calc(100% / 2 - 20px); margin:10px;}
#about .about{ padding:25px 40px 25px 0;}
#message{ background:none; padding:0;}
#message .left{ width:calc(100% - 90px); box-shadow: 0 10px 20px #efefef}
#message .right{ width:calc(100% - 100px); margin-top:30px; box-shadow: 0 10px 20px #efefef}
#news .product{ width:calc(100% - 40px); margin:0 20px 40px;}
#foot .width{ width:98%;}
#foot .product{ display:none; width:calc(100% - 220px)}
#foot .dis_block{ display:block;}
#links .width{ width:98%;}
#links{ margin-bottom:50px;}
#foot_nav{ position:fixed; bottom:0; left:0; width:100%; display:block;}
#foot_nav a{ width:50%; color:#fff; float:left; text-align:center; font-size:20px; height:50px; line-height:50px;}
}