@charset "utf-8";
body{ margin:0px; padding:0px;    --botnavcolor--: rgb(45, 0, 193);    --fss--: 20px;
    --showcolor--: rgb(2 110 175);}
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:700px;}
#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{ border-bottom:1px solid #eee; height:35px; line-height:35px;}
#top .p1{ float:left; font-size:14px;}
#top .p2{ float:right; font-size:14px;}
#top .p2 a{ color:#333;}
#top .p2 a:hover{ color:#ff9233;}

#logo{ padding:20px 0;}
#logo .logo{ float:left; font-size:44px; font-family:'楷体'; font-weight:600;}
#logo .tel{ float:right; font-size:36px; background:url(../img/tel.png) left no-repeat; background-size:contain; padding-left:60px;}

#nav{ background:#005bac;}
#nav a{ float:left; height:50px; line-height:50px; color:#fff; width:calc(100% / 7); text-align:center;}
#nav a:hover{ background:#ff9233;}

#key{ height:40px; line-height:40px;}
#key .width{ border-bottom:1px solid #eee;}
#key p{ font-size:14px; color:#666;}
#key p a{ color:#666; margin:0 5px;}
#key p a:hover{ color:#ff9233;}

#product{ padding:40px 0;}
#product .title{ text-align:center; background:url(../img/title.jpg) bottom center no-repeat; font-size:30px; font-weight:600; color:#005bac; padding-bottom:20px;}
#product .product_type{ text-align:center; margin:20px 0;}
#product .product_type a{ display:inline-block; color:#222; border:1px solid #222; padding: 0 10px; height:35px; line-height:35px; margin:0 10px;}
#product .product{ float:left; width:calc(100% / 4 - 22px); border:1px solid #ddd; margin:10px; transition:0.3s;}
#product .product img{ width:calc(100% - 10px); margin:5px; height:200px; oject-fit:cover;}
#product .product p{ color:#333; background:url(../img/product_icon.png) calc(100% - 10px) no-repeat; transition:0.3s; height:40px; line-height:40px; text-indent:10px; font-size:14px;}
#product .product p a{ color:#5a5a5a;}
#product .product_type a:hover{ background:#ff9233; color:#fff; border-color:#ff9233;}
#product .product:hover{ border-color:#ff9233; background:#005bac;}
#product .product:hover p a{ color:#fff;}

#about{ background:#005bac; padding:50px 0;}
#about .left{ float:left; width:600px; height:360px;}
#about .left img{ padding:5px; width:100%; height:100%; object-fit:cover; box-sizing:border-box; background:#fff;}
#about .right{ float:right; width:calc(100% - 720px); height:260px; background:url(../img/about_right.jpg) no-repeat; position:relative; padding:50px 30px;}
#about .right .p1{ font-size:16px; line-height:200%; color:#fff; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp:8;-webkit-box-orient: vertical;}
#about .right .p2{ margin-top:20px;}
#about .right .p2 a{ display:inline-block; width:115px; height:35px; line-height:28px; box-sizing:border-box; text-align:center; color:#fff; border:3px solid #fff; font-size:14px;}
#about .right img{ position:absolute; bottom:0; right:0;}
#about .right .p2 a:hover{ color:#ff9233; border-color:#ff9233;}

#news{ padding:40px 0;}
#news .title{ height:80px; line-height:80px; text-align:center; color:#005bac; font-size:30px; font-weight:600; background:url(../img/title.jpg) no-repeat bottom; margin-bottom:20px;}
#news .news{ float:left; width:calc(100% / 3 - 40px); margin:0 20px;}
#news .news .product_title{ background:#005bac;}
#news .news .product_title .p1{ margin-left:10px; float:left; height:40px; line-height:40px; color:#fff;}
#news .news .product_title .p2{ margin-right:10px; float:right; height:40px; line-height:40px;}
#news .news .product_title .p2 a{ color:#fff; font-size:14px;}
#news .news .product{ border-bottom:1px solid #f3f3f3;}
#news .news .product a{ float:left; background:url(../img/news_icon.png) 2px no-repeat; text-indent:20px; height:40px; line-height:40px;width: 72%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;}
#news .news .product span{ float:right; height:40px; line-height:40px; font-size:14px; color:#999;}
#news .news .product_title .p2 a:hover{ color:#ff9233;}
#news .news .product a:hover{ color:#ff9233;}

#example{ padding:40px 0;}
#example .title{ height:80px; line-height:80px; text-align:center; color:#005bac; font-size:30px; font-weight:600; background:url(../img/title.jpg) no-repeat bottom; margin-bottom:20px;}
#example .product{ float:left; width:calc(100% / 4 - 30px); margin:15px;}
#example .product img{ width:calc(100% - 16px); height:180px; padding:8px; background:#eee;}
#example .product p{ height:35px; line-height:35px; text-align:center; font-size:14px;}
#example .product p a{ color:#222;}
#example .product p a:hover{ color:#ff9233;}

#links{ padding:20px 0;}
#links .p1{ float:left; width:120px; height:35px; line-height:35px; background:url(../img/links.jpg) no-repeat center; font-size:18px; color:#006ce6; text-align:center;}
#links .p2{ float:left; width:calc(100% - 120px); height:35px; line-height:35px; }
#links .p2 a{ font-size:14px; margin-left:15px;}
#links .p2 a:hover{ color:#ff9233;}

#foot{ padding:40px 0; background:#005bac;}
#foot .left{ float:left; width:calc(100% / 2 - 230px);}
#foot .p1{ font-size:18px; color:#e2e2e2; border-bottom:2px solid #f1f1f1; padding-bottom:15px; margin-bottom:20px;}
#foot .left .p2{ float:left; width:50%;}
#foot .left .p2 a{ display:inline-block; height:40px; line-height:40px; color:#fff; font-size:14px;}
#foot .center{ float:left; width:140px; margin:0 160px;}
#foot .center img{ width:140px; height:140px;}
#foot .right{ float:right; width:calc(100% / 2 - 230px); text-align:right;}
#foot .right .p2{ line-height:200%; font-size:14px; color:#fff;}
#foot .right .p2 a{ color:#fff;}
#foot .left .p2 a:hover{ color:#ff9233;}

#foot_nav{ display:none;}

@media screen and (max-width: 980px) {
*{-webkit-text-size-adjust:none;}
#box{ height:300px;}
.width{ width:98%;}
#logo .logo{ height:40px; line-height:40px; font-size:30px;}
#logo .tel{ font-size:30px;}
#nav a{ width:calc(100% / 6);}
#product .product_type a{ margin:10px;}

#top .p1{
    width: 88%;
    word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;
}

#product .product{ width:calc(100% / 2 - 22px);}
#about .left{ display:none;}
#about .right{ width:calc(100% - 60px);}
#news{ padding:0;}
#news .news{ width:100%; margin:10px 0;}
#example .product{ width:calc(100% / 2 - 20px); margin:10px;}
#foot .left{ display:none;}
#foot .center{ float:right; margin:0;}
#foot .right{ float:left; width:calc(100% - 240px); text-align:left;}
#foot{ 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:#005bac; color:#fff; float:left;}
}