@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{ padding:8px 0; background:#f5f5f5;}
#top p{ font-size:14px; color:#333;}
#about .right .more:hover{border:1px solid #ff6d00; background:#fff; color:#ff6d00;}
#about{ padding:40px 0px;}
#about .title{ font-size:40px; color:#019038; font-weight:600; text-align:center;}
#about .description{ color:#bfbfbf; font-size:14px; background:url(../img/about_title.jpg) center no-repeat; text-align:center; margin-bottom:30px;}
#about .left{ float:left; width:40%;}
#about .left img{ padding:4px; border:1px solid #ccc; width:calc(100% - 10px); height:300px; 
    /* object-fit:cover; */
}
#about .right{ float:right; width:54%;}
#about .right .p1{ color:#019138; font-weight:600; font-size:26px; line-height:200%;}
#about .right .p2{ color:#575757; line-height:200%; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp:6;-webkit-box-orient: vertical; text-indent:32px; margin-bottom:20px;}
#about .right .more{ color:#fff; background:#ff6d00; font-size:12px; float:right; padding:5px 8px;}





#logo{ padding:20px 0;}
#logo .logo{ float:left; font-size:44px; font-family:'宋体'; font-weight:600;}
#logo .tel{ float:right; background:url(../img/tel.png) left no-repeat; padding-left:50px;}
#logo .tel .p1{ font-size:14px; margin-bottom:8px; color:#333;}
#logo .tel .p2{ color:#e00; font-weight:600; font-size:26px; font-family:'楷体';}

#nav{ background:#108dee;}
#nav a{ float:left; width:calc(100% / 8 - 1px); text-align:center; color:#fff; font-size:14px; height:50px; line-height:50px; border-left:1px solid #2899f0;}
#nav a:hover{ background:#fff; color:#108dee;}

#news{ padding:40px 0;}
#news .left{ float:left; width:calc(48% - 12px); border:1px solid #e4e4e4; box-shadow:0 1px 4px rgb(0,0,0,0.2); padding:5px;}
#news .left img{ width:100%; height:360px; object-fit:cover;}
#news .right{ float:right; width:48%;}
#news .right .new_type{}
#news .right .new_type a{ float:left; width:calc(100% / 3); text-align:center; background:#eee; color:#222; height:40px; line-height:40px; font-size:14px;}
#news .right .product{ background:url(../img/news_icon.png) left no-repeat; padding:15px 0;}
#news .right .product a{ margin-left:20px; font-size:14px;}
#news .right .product span{ float:right; font-size:12px;}
#news .right .more{ margin-top:15px;}
#news .right .more a{ font-size:12px; display:inline-block; border:1px solid #eee; width:100px; text-align:center; height:30px; line-height:30px; color:#444;}
#news .right .new_type a:hover{ background:#108dee; color:#fff;}
#news .right .product a:hover{ color:#108dee;}
#news .right .more a:hover{ color:#fff; background:#108dee;}

#product{ background:#f5f5f5; padding:40px 0;}
#product .title{ border-bottom:1px solid #ddd;}
#product .title .p1{ float:left; border-bottom:3px solid #087ee0; height:40px; line-height:40px; font-size:18px; font-weight:600;}
#product .title .p2{ float:left; font-size:12px; color:#999; line-height:40px; margin-left:10px;}
#product .product_type{ margin:20px 0;}
#product .product_type li{ float:left; width:140px; text-align:center; height:40px; line-height:40px; border-bottom:2px solid #f5f5f5; transition:0.3s; list-style:none;}
#product .product_type li a{ color:#444;}
#product .product_type .more{ float:right;}
#product .product_type .more a{ display:inline-block; margin-top:5px; height:30px; line-height:30px; font-size:12px; border:1px solid #077edf; color:#077edf; border-radius:15px; text-align:center; width:80px;}
#product .product{ float:left; width:calc(100% / 4 - 26px); margin:0 13px; background:#fff; transition:0.3s;}
#product .product img{ width:100%; height:200px; object-fit:cover;}
#product .product p{ text-align:center; height:50px; line-height:50px; transition:0.3s;}
#product .product p a{ color:#333;}
#product .product_type li:hover{ border-bottom:2px solid #108dee;}
#product .product_type li:hover a{ color:#108dee;}
#product .product_type .more a:hover{ background:#108dee; color:#fff;}
#product .product:hover{ background:#108dee;}
#product .product:hover p a{ color:#fff;}

#common{ padding:40px 0;}
#common .left{ float:left; width:48%;}
#common .left .title{ border-bottom:1px solid #ddd; margin-bottom:10px;}
#common .left .title .p1{ float:left; border-bottom:3px solid #087ee0; height:40px; line-height:40px; font-size:18px; font-weight:600;}
#common .left .title .p2{ float:left; font-size:12px; color:#999; line-height:40px; margin-left:10px;}
#common .left .title a{ float:right; font-family:'宋体'; color:#999; height:40px; line-height:40px; font-weight:600; width:40px; text-align:center;}
#common .left .product{ position:relative; padding-left:20px; height:40px; line-height:40px; font-size:14px;}
#common .left .product:before{ position:absolute; content:''; background:#999; width:4px; height:4px; top:18px; left:8px; border-radius:50%;}
#common .left .product a{ color:#333;}
#common .left .product span{ float:right; color:#666;}
#common .right{ float:right; width:48%;}
#common .right .title{ border-bottom:1px solid #ddd; margin-bottom:10px;}
#common .right .title .p1{ float:left; border-bottom:3px solid #087ee0; height:40px; line-height:40px; font-size:18px; font-weight:600;}
#common .right .title .p2{ float:left; font-size:12px; color:#999; line-height:40px; margin-left:10px;}
#common .right .title a{ float:right; font-family:'宋体'; color:#999; height:40px; line-height:40px; font-weight:600; width:40px; text-align:center;}
#common .right .product{ position:relative; padding-left:20px; height:40px; line-height:40px; font-size:14px;}
#common .right .product:before{ position:absolute; content:''; background:#999; width:4px; height:4px; top:18px; left:8px; border-radius:50%;}
#common .right .product a{ color:#333;}
#common .right .product span{ float:right; color:#666;}
#common .left .title a:hover{ background:#108dee; color:#fff; border-radius:50%;}
#common .right .title a:hover{ background:#108dee; color:#fff; border-radius:50%;}
#common .left .product a:hover{ color:#108dee;}
#common .right .product a:hover{ color:#108dee;}

#example{ background:#f5f5f5; padding:40px 0;}
#example .title{ border-bottom:1px solid #ddd; margin-bottom:40px;}
#example .title .p1{ float:left; border-bottom:3px solid #087ee0; height:40px; line-height:40px; font-size:18px; font-weight:600;}
#example .title .p2{ float:left; font-size:12px; color:#999; line-height:40px; margin-left:10px;}
#example .title a{ float:right; font-family:'宋体'; color:#999; height:40px; line-height:40px; font-weight:600; width:40px; text-align:center;}
#example .product{ float:left; width:calc(100% / 5 - 16px); margin:0 8px; position:relative; height:220px; overflow:hidden;}
#example .product img{ width:100%; height:100%;    object-fit: cover;}
#example .product p{ position:absolute; width:100%; text-align:center; left:0; bottom:100%; height:220px; line-height:220px; background:rgba(0,0,0,0.7); transition:0.3s;}
#example .product p a{ font-size:18px; color:#fff;}
#example .title a:hover{ background:#108dee; color:#fff; border-radius:50%;}
#example .product:hover p{ bottom:0;}
#example .pc_disnone{ display:none;}

#links{ padding:40px 0;}
#links .title{ border-bottom:1px solid #ddd; margin-bottom:20px;}
#links .title .p1{ float:left; border-bottom:3px solid #087ee0; height:40px; line-height:40px; font-size:18px; font-weight:600;}
#links .title .p2{ float:left; font-size:12px; color:#999; line-height:40px; margin-left:10px;}
#links .links a{ color:#333; margin-right:10px; font-size:14px;}
#links .links a:hover{ color:#108dee;}

#foot{ background:#2a95e5; padding:40px 0;}
#foot .logo{ float:left;}
#foot .logo .p1{ color:#fff; font-size:20px; line-height:200%;}
#foot .logo .p2{ color:#fff; font-size:26px; line-height:200%;}
#foot .product{ float:left; margin-left:120px;}
#foot .product .p1{ color:#fff; margin-bottom:10px;}
#foot .product .p2{ font-size:14px; line-height:200%;}
#foot .product .p2 a{ color:#bdf;}
#foot .wx{ float:right;}
#foot .wx img{ width:120px; height:120px;}
#foot #beian{ border-top:1px solid #bbb; margin-top:40px; padding:8px 0;}
#foot #beian p{ text-align:center; color:#fff; font-size:12px; line-height:200%;}
#foot #beian p a{ color:#fff;}
#foot .product .p2 a:hover{ color:#fff;}

#foot_nav{ display:none;}

@media screen and (max-width: 980px) {
*{-webkit-text-size-adjust:none;}
#box{ height:300px;}
.width{ width:98%;}
#top p{ overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#logo .logo{ font-size:30px; line-height:49px;}
#logo .tel .p1{ margin-bottom:0;}
#nav .width{ width:100%;}
#nav a{ width:calc(100% / 4 - 1px); border-top:1px solid #2899f0;}
#news .left{ display:none;}
#news .right .new_type a{font-size: 20px;font-weight: 600;height:50px;line-height:50px;}
#foot #beian p{    font-size: 16px;}
#common .left .product a{font-size: 16px;}
#news .right .product a{font-size: 16px;}
#common .right .product a{font-size: 16px;}
#nav a{font-size: 17px;}
#logo .logo{font-size: 31px;}
#news .right{ width:100%;}
#news .right .product{ padding:15px 15px 15px 0;}
#news .right .more a{ width:100%; background:#108dee; color:#fff; font-size:14px; height:40px; line-height:40px;}
#product .product_type li{ width:calc(100% / 4 - 20px); margin:0 10px; background:#108dee; overflow:hidden;}
#product .product_type li a{ color:#fff;}
#product .product_type .more{ display:none;}
#product .product{ width:calc(100% / 2 - 26px); margin:13px; background:#108dee;}
#product .product p a{ color:#fff;}
#common .left{ width:100%;}
#common .right{ width:100%;}
#example .product{ width:calc(100% / 2 - 16px); margin:8px; height:auto;}
#example .product img{ height:220px;}
#example .product p{ position:inherit; height:40px; line-height:40px; background:#108dee;}
#example .pc_disnone{ display:block;}
#foot .product{ display:none;}
#foot .logo .p2{ font-size:40px;}
#about .right{ width:56%;}
#about .right .p2{ font-size:18px; text-indent:0px; line-height:180%;}
#about .right .more{ font-size:20px;}
#foot{ margin-bottom:50px; padding:40px 0 0;}
#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:#108dee; color:#fff; float:left;}
}