@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:1400px; margin:0 auto;}
.both{ clear:both;}
a{ color:#000; transition:0.5s;}
#box{ width:100%; position:relative; overflow:hidden; height:550px;}
#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:15px 0;}
#top .logo{ float:left; background:url(../img/logo.png) left no-repeat; background-size:contain; line-height:52px; padding-left:55px; font-size:40px; font-family:'楷体'; font-weight:500;}
#top .nav{ float:right; width:60%;}
#top .nav a{ float:left; width:calc(100% / 6); text-align:center; height:52px; line-height:52px;}
#top .nav a:hover{ background:#e00; color:#fff;}

#img_show{ padding:20px 0;}
#img_show img{ float:left; width:calc(100% / 3 - 40px); margin:20px; height:260px; object-fit:cover;}
#img_show .ph_dis_none{ display:none;}

#about{ background:url(../img/about_bg.jpg); background-size:100% 100%; padding:50px 0;}
#about .left{ float:left; margin-top:80px;}
#about .left .p1{ color:#fff; font-size:20px; font-weight:600; letter-spacing:3px;}
#about .left .p2{ color:#fff; font-size:20px; font-weight:600; letter-spacing:3px; margin-top:15px;}
#about .left .p2:after{ display:block; content:''; height:5px; width:35px; background:#e00; margin:15px 0 50px;}
#about .left .p3{}
#about .left .p3 a{ display:inline-block; color:#d50016; border:1px solid #d50016; font-size:14px; width:90px; text-align:center; height:35px; line-height:35px;}
#about .right{ float:right; width:900px;}
#about .right .p1{ font-size:14px; line-height:200%; color:#333; margin-bottom:20px;}
#about .right .product{ float:left; width:calc(100% / 3 - 30px); height:180px; margin:15px;}
#about .right .product img{ width:100%; height:100%; object-fit:cover;}
#about .left .p3 a:hover{ background:#e00; color:#fff;}

#product{ background:url(../img/product_bg.jpg); background-size:100% 100%; padding:60px 0 20px;}
#product .title{ text-align:center; color:#fff; font-size:20px; font-weight:600; text-align:center;}
#product .descript{ text-align:center; color:#fff; font-size:20px; font-weight:600;}
#product .descript:after{ display:block; content:''; width:30px; height:6px; background-color:#f30; margin:8px auto 20px;}
#product .product{ width:calc(100% / 4 - 30px); height:260px; margin:15px; float:left; position:relative; overflow:hidden;}
#product .product img{ width:100%; height:100%; object-fit:cover; transition:0.3s;}
#product .product p{ position:absolute; bottom:-50px; background:rgba(0,0,0,0.6); width:100%; text-align:center; transition:0.3s; height:40px; line-height:40px;}
#product .product p a{ color:#fff;}
#product .product:hover p{ bottom:0;}
#product .product:hover img{ transform:scale(1.2);}

#news{ padding:40px 0;}
#news .title{ background:url(../img/new_title.jpg) center no-repeat; text-align:center; color:#333; font-size:20px; font-weight:600; margin-bottom:40px;}
#news .left{ float:left; width:400px;}
#news .left img{ object-fit:cover; width:100%; height:240px;}
#news .left .p1{ font-size:14px; line-height:200%;}
#news .left .p1 a{ color:#333;}
#news .left .p2{ font-size:12px; color:#666; line-height:150%; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp:3;-webkit-box-orient: vertical;}
#news .right{ float:right; width:calc(50% - 250px); margin-left:50px;}
#news .right .product{ margin:0 0 15px;}
#news .right .product .product_left{ float:left; width:65px;}
#news .right .product .product_left .p1{ font-size:20px; font-weight:600; border-bottom:1px solid #fff; text-align:center; background:#eee; height:45px; line-height:45px; transition:0.3s;}
#news .right .product .product_left .p2{ color:#333; font-size:12px; text-align:center; background:#eee; height:25px; line-height:25px; transition:0.3s;}
#news .right .product .product_right{ float:right; width:calc(100% - 80px);}
#news .right .product .product_right .p1{ color:#333; font-size:14px;}
#news .right .product .product_right .p1 a{ color:#333;}
#news .right .product .product_right .p2{ margin-top:4px; font-size:12px; color:#999; line-height:200%; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#news .left .p1 a:hover{ color:#e00;}
#news .right .product:hover .product_left .p1{ background:#e00; color:#fff;}
#news .right .product:hover .product_left .p2{ background:#e00; color:#fff;}
#news .right .product .product_right .p1 a:hover{ color:#e00;}

#foot{ background:#222; padding:40px 0;}
#foot .left{ float:left; width:calc(100% / 3 - 1px);}
#foot .left .p1{ background:url(../img/foot_tel.png) left no-repeat; padding-left:30px; color:#fff; font-size:18px; margin-bottom:10px;}
#foot .left .p2{ color:#ddd; font-size:14px; line-height:200%;}
#foot .left .p2 a{ color:#ddd;}
#foot .center{ float:left; width:calc(100% / 3 - 1px); border-left:1px dotted #444; border-right:1px dotted #444; padding-left:100px;}
#foot .center .p1{ background:url(../img/foot_ad.png) left no-repeat; padding-left:30px; color:#fff; font-size:18px; margin-bottom:10px;}
#foot .center .p2{ float:left; width:50%; color:#fff; font-size:14px; text-indent:30px; line-height:200%; margin:20px 0 0;}
#foot .center .p2 a{ color:#fff;}
#foot .right{ float:right; width:calc(100% / 3 - 101px); text-align:right;}
#foot .right img{ width:140px; height:140px;}
#foot .center .p2 a:hover{ color:#e00;}

#beian{ background:#000; padding:10px 0;}
#beian p{ font-size:12px; text-align:center; color:#fff; line-height:200%;}
#beian p a{ color:#fff;}
#beian p a:hover{ color:#e00;}

.menu_close{ display:none;}
#foot_nav{ display:none;}

@media screen and (max-width: 980px) {
*{-webkit-text-size-adjust:none;}
#box{ height:300px;}
.width{ width:98%;}
#top .menu{ float:right; width:72px; height:72px; background:url(../img/menu.png) center no-repeat;}
#top .menu_close{ width:72px; height:72px; font-size:54px; position:absolute; text-align:center; line-height:72px; right:0; top:0; display:none; color:#666;}
#top .width{ position:relative;}
#top .logo{ padding:10px 0 10px 70px;}
#top .nav{ position:absolute; background:#0272c5; width:100%; top:87px; z-index:999;}
#top .nav a{ display:none; width:100%; color:#fff; border-bottom:1px solid #fff; margin:0;}
#img_show img{ width:calc(100% / 2 - 20px); margin:10px;}
#img_show .ph_dis_none{ display:block;}
#about{ background:#f5f5f5;}
#about .left{ margin:0;}
#about .left .p1{ color:#aaa;}
#about .left .p2{ color:#5a5a5a;}
#about .left .p2:after{ margin:15px 0 20px;}
#about .left .p3{ display:none;}
#about .right{ width:100%;}
#product .product{ width:calc(100% / 2 - 30px);}
#product .product p{ bottom:0;}
#news .left{ display:none;}
#news .right{ width:calc(100% / 2 - 20px); margin:0 10px;}
#foot .left{ width:auto;}
#foot .center{ display:none;}
#foot .right{ width:auto;}
#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;}
#box img{ object-position:left;}
#beian{ margin-bottom:50px;}
}