@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{ padding:20px 0;}
#top .logo{ float:left; font-size:44px; color:#cc0000; font-weight:600;}
#top .tel{ float:right; background:url(../img/tel.png) left no-repeat; background-size:75px; padding-left:80px;}
#top .tel .p1{ font-size:14px; color:#5a5a5a;}
#top .tel .p2{ font-size:26px; color:#cc0000; font-weight:600;}

#nav{ background:#cc0000;}
#nav a{ float:left; height:60px; line-height:60px; font-size:14px; color:#fff; width:calc(100% / 6); text-align:center;}
#nav a:hover{ background:#fff; color:#cc0000;}

#key{ padding:20px 0;}
#key p{ height:50px; line-height:50px; border-bottom:1px dashed #d9d9d9; font-size:14px; color:#cc0000; font-weight:600;}
#key p a{ color:#5a5a5a; font-weight:500;}
#key p a:hover{ color:#cc0000;}

#product{ padding-bottom:30px;}
#product .left{ float:left; width:228px; border:1px solid #d9d9d9; border-top:3px solid #cc0000;}
#product .left .left_title{ padding:0 18px; border-bottom:1px solid #d9d9d9;}
#product .left .left_title .p1{ float:left; height:35px; line-height:35px; color:#cc0000;}
#product .left .left_title .p2{ float:right; height:35px; line-height:35px;}
#product .left .left_title .p2 a{ font-size:14px; color:#cc0000;}
#product .left .left_index{ padding:18px;}
#product .left .left_index .p1{ width:100%; background:#d9d9d9; margin-bottom:4px; height:40px; line-height:40px; text-align:center; font-size:14px; transition:0.3s;}
#product .left .left_index .p1 a{ color:#cc0000;}
#product .left .left_index .left_tel{ background:#cc0000; text-align:center; padding:30px 0 20px;}
#product .left .left_index .left_tel .p2{ font-size:14px; color:#fff;}
#product .left .left_index .left_tel .p3{ font-size:22px; color:#fff; font-weight:600; line-height:200%;}
#product .left .left_index .left_tel .p4{ text-align:center;}
#product .left .left_index .left_tel .p4 a{ display:inline-block; width:120px; height:35px; line-height:35px; border:1px solid #fff; font-size:14px; font-weight:600; color:#fff;}
#product .right{ float:right; width:calc(100% - 252px); border:1px solid #d9d9d9; border-top:3px solid #cc0000;}
#product .right .right_title{ padding:0 18px; border-bottom:1px solid #d9d9d9;}
#product .right .right_title .p1{ float:left; height:35px; line-height:35px; color:#cc0000;}
#product .right .right_title .p2{ float:right; height:35px; line-height:35px;}
#product .right .right_title .p2 a{ font-size:14px; color:#cc0000;}
#product .right .product{ float:left; width:calc(100% / 3 - 36px); margin:18px 18px 0;}
#product .right .product img{ width:100%; height:200px; object-fit:cover;}
#product .right .product p{ text-align:center;}
#product .right .product p a{ font-size:18px; line-height:200%;}
#product .left .left_index .p1:hover{ background:#cc0000;}
#product .left .left_index .p1:hover a{ color:#fff;}
#product .left .left_index .left_tel .p4 a:hover{ background:#fff; color:#cc0000;}

#recom{ padding:20px 0;}
#recom .width{ border:1px solid #d9d9d9; border-top:3px solid #cc0000;}
#recom .title{ padding:0 18px; border-bottom:1px solid #d9d9d9;}
#recom .title .p1{ float:left; height:35px; line-height:35px; color:#cc0000;}
#recom .title .p2{ float:right; height:35px; line-height:35px;}
#recom .title .p2 a{ font-size:14px; color:#cc0000;}
#recom .product{ float:left; width:calc(100% / 5 - 22px); margin:18px 0 0 18px;}
#recom .product img{ height:180px; width:100%; object-fit:cover;}
#recom .product p{ text-align:center; font-size:18px; margin-bottom:15px;}

#about{ padding:20px 0;}
#about .width{ border:1px solid #d9d9d9; border-top:3px solid #cc0000; padding-bottom:20px;}
#about .title{ padding:0 18px; border-bottom:1px solid #d9d9d9; margin-bottom:20px;}
#about .title .p1{ float:left; height:35px; line-height:35px; color:#cc0000;}
#about .title .p2{ float:right; height:35px; line-height:35px;}
#about .title .p2 a{ font-size:14px; color:#cc0000;}
#about .left{ float:left; margin-left:18px; height:230px; width:360px;}
#about .left img{ width:100%; height:100%; object-fit:cover;}
#about .right{ float:right; width:calc(100% - 420px); margin-right:18px;}
#about .right .p1{ color:#cc0000; font-size:20px;}
#about .right .p2{ margin-top:8px; font-size:14px; line-height:200%; color:#5a5a5a; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp:4;-webkit-box-orient: vertical;}
#about .right .p3{ text-align:right; margin-top:36px;}
#about .right .p3 a{ display:inline-block; width:120px; height:45px; line-height:45px; text-align:center; background:#cc0000; color:#fff; font-size:14px;}

#example{}
#example .width{}
#example .left{ float:left; width:730px; border:1px solid #d9d9d9; border-top:3px solid #cc0000;}
#example .left .title{ padding:0 18px; border-bottom:1px solid #d9d9d9;}
#example .left .title .p1{ float:left; height:35px; line-height:35px; color:#cc0000;}
#example .left .title .p2{ float:right; height:35px; line-height:35px;}
#example .left .title .p2 a{ font-size:14px; color:#cc0000;}
#example .left .product{ margin:18px 18px 0; padding-bottom:18px; border-bottom:1px dashed #d9d9d9;}
#example .left .product .product_left{ float:left; height:135px; width:190px;}
#example .left .product .product_left img{ width:100%; height:100%;}
#example .left .product .product_right{ float:right; width:calc(100% - 205px); margin:10px 0;}
#example .left .product .product_right .p1{ font-size:18px;}
#example .left .product .product_right .p1 a{ color:#434343;}
#example .left .product .product_right .p2{ font-size:14px; line-height:200%; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp:3;-webkit-box-orient: vertical;}
#example .right{ float:right; width:calc(100% - 750px); border:1px solid #d9d9d9; border-top:3px solid #cc0000; padding-bottom:10px;}
#example .right .title{ padding:0 18px; border-bottom:1px solid #d9d9d9; margin-bottom:10px;}
#example .right .title .p1{ float:left; height:35px; line-height:35px; color:#cc0000;}
#example .right .title .p2{ float:right; height:35px; line-height:35px;}
#example .right .title .p2 a{ font-size:14px; color:#cc0000;}
#example .right .product{ height:35px; line-height:35px; margin:0 18px; border-bottom:1px dashed #d9d9d9;}
#example .right .product a{ font-size:12px; background:url(../img/news_icon.png) left no-repeat; padding-left:20px; color:#434343;}
#example .right .product span{ float:right; font-size:12px; color:#666;}
#example .left .product .product_right .p1 a:hover{ color:#cc0000;}
#example .right .product a:hover{ color:#cc0000;}

#envir{ padding:20px 0;}
#envir .width{ border:1px solid #d9d9d9; border-top:3px solid #cc0000; padding-bottom:20px;}
#envir .title{ padding:0 18px; border-bottom:1px solid #d9d9d9;s}
#envir .title .p1{ float:left; height:35px; line-height:35px; color:#cc0000;}
#envir .title .p2{ float:right; height:35px; line-height:35px;}
#envir .title .p2 a{ color:#cc0000; font-size:14px;}
#envir .product{ float:left; width:calc(100% / 5 - 22px); margin:18px 0 0 18px;}
#envir .product img{ width:100%; height:180px; object-fit:cover;}

#foot{ background:#2c2c2c; padding:40px 0;}
#foot .left{ float:left;}
#foot .left .p1{ background:url(../img/foot_tel.png) left no-repeat; line-height:200%; font-size:18px; color:#fff; padding-left:30px; font-weight:600; margin-bottom:15px;}
#foot .left .p2{ color:#999999; line-height:200%; font-size:12px;}
#foot .left .p2 a{ color:#999999;}
#foot .right{ float:right;}
#foot .right img{ width:120px; height:120px;}
#foot .left .p2 a:hover{ color:#fff;}

#links{ background:#000; padding:15px 0;}
#links p{ color:#ddd; font-size:12px;}
#links p a{ color:#ddd;}
#links p a:hover{ color:#fff;}

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

@media screen and (max-width: 980px) {
*{-webkit-text-size-adjust:none;}
#box{ height:300px;}
.width{ width:98%;}
#top .logo{ max-width:300px; height:54px; line-height:54px; overflow:hidden;}
#top .tel{ background-size:75px 54px;}
#product .left{ display:none;}
#product .right{ width:100%;}
#product .right .product{ width:calc(100% / 2 - 36px);}
#recom .title{ margin-bottom:20px;}
#recom .product{ width:calc(100% / 2 - 28px); margin:0 0 18px 18px;}
#recom .product p{ margin-bottom:0;}
#about .left{ display:none;}
#about .right{ float:left; margin:0 18px; width:calc(100% - 36px);}
#about .right .p3{ margin-top:26px;}
#example .left{ width:calc(100% - 2px);}
#example .right{ width:calc(100% - 2px); margin-top:20px;}
#envir .width{ padding:0;}
#envir .title{ margin-bottom:20px;}
#envir .product{ width:calc(100% / 2 - 28px); margin:0 0 18px 18px;}
#links{ margin-bottom:50px;}
.pc_dis_none{ display:block;}
#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-fit:fill;}
}