html, body {
overflow-x: hidden;
overflow-y: auto;
-webkit-font-smoothing: antialiased;
background-color:transparent;
}
html,body,header,section,footer,div,ul,ol,li,img,a,span,em,del,legend,center,strong,var,fieldset,form,label,dl,dt,dd,cite,input,hr,time,mark,code,figcaption,figure,textarea,h1,h2,h3,h4,h5,h6,p {
margin:0;
border:0;
padding:0;
font-style:normal;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
outline: none;
}
@font-face {
font-family:"阿里妈妈数黑体";
src:url(../font/AlimamaShuHeiTi-Bold.ttf);
}
@font-face {
font-family:"maoken";
src:url(../font/maoken.ttf);
}
a {
text-decoration:none;
color:#333
}
a:hover {
text-decoration:none;
}
ul, ol, li {
list-style-type:none;
vertical-align:0
}
/* 设置滚动条的样式*/
::-webkit-scrollbar {
width:6px;
}
/* 滚动槽*/
::-webkit-scrollbar-track {
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
border-radius:10px;
}
/* 滚动条滑块*/
::-webkit-scrollbar-thumb {
border-radius:10px;
background:rgba(0,0,0,0.1);
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background:rgba(0,0,0,0.6);
}
/*---------------移动端顶部*/
.m-top{position: fixed; top:0;left:0;right:0;z-index:999;background:#fff;box-shadow: 5px 0px 10px #ddd; width: 100%;height:80px;display: flex;}
.m-top-left{height:100%; width: 100%; padding: 10px}
.m-top-left img{display:inline-block; max-height: 100%; max-width: 100%; height: 100%}
.m-top-lang{width:80px;height: 80px; flex-shrink:0;padding:5px}
.m-top-lang .lang{width:100%;height:100%;text-align: center}
.m-top-lang .lang a{line-height: 70px;font-size: 30px}
.m-top-lang .lang a:hover{color:#DB0017}
.m-top-right{font-size: 24px; width: 80px;padding: 5px;flex-shrink:0;}
.m-top-right .m-top-right-nav{ width:98%;height:98%; position: relative; }
.m-top-right .m-top-right-nav .h{display:table-cell;vertical-align:middle;text-align: center; }
.m-top-bottom{ padding-top:80px;width: 100%;height: 0}
/*----------------- 手机站导航开始----------*/
.sp_nav {
width:50%;
position:absolute;
cursor:pointer;
height:50%;
top:25%;
left:25%;
}
.sp_nav span {
display:block;
background:#333;
width:100%;
height:10%;
position:absolute;
left:0px;
transition:all ease 0.35s
}
.sp_nav span:nth-of-type(1) {
top:0px
}
.sp_nav span:nth-of-type(2) {
top:45%
}
.sp_nav span:nth-of-type(3) {
top:90%
}
.sp_nav_se span:nth-of-type(1) {
top:45%;
transform:rotate(45deg)
}
.sp_nav_se span:nth-of-type(2) {
width:0
}
.sp_nav_se span:nth-of-type(3) {
top:45%;
transform:rotate(-45deg)
}
/*手机隐藏导航样式*/
.sjj_nav {
position:fixed;
border-top:1px solid #0977d9;
padding-bottom:20px;
padding-top:20px;
z-index:9999;
background:#333;
width:70%;
height:100%;
font-size:14px;
line-height:40px;
left:-120%;
overflow:auto;
overflow-x:hidden;
top:0px;
transition: left 1s;
-moz-transition: left 1s;
/* Firefox 4*/
-webkit-transition: left 1s;
/* Safari 和 Chrome*/
-o-transition: left 1s;
/* Opera*/
}
.sjj_nav>ul>li {
border-bottom:1px #ddd solid;
padding-left:5% ;
margin-left:5%;
position:relative;
line-height:40px;
font-size:14px;
width:90%;
}
.sjj_nav ul li a {
color:#fff;
display: inline-block;
width:100%;
height:100%;
text-align: left;
font-size: 16px;
}
.sjj_nav ul li a span {
margin-right: 10px
}
.sjj_nav ul li>ul {
}
.sjj_nav ul li>ul li {
border-top: 1px dashed #666;
padding-left: 10%;
}
/*----------------移动端顶部结束*/
/*PC端导航*/
.pc-top {
width:100%;
height:80px;
transition:all ease 0.35s;
position: relative;
z-index: 999;
background: rgb(255,255,255,0.8)
}
.pc-top .logo {
width:100%;
height:80px;
padding:10px;
padding-left:50px
}
.pc-top .logo img {
height:60px;
display: inline-block;
vertical-align:top;
margin-right:20px
}
.pc-top .logo .text {
width:290px;
display: inline-block;
vertical-align:top;
}
.pc-top .logo p {
width:290px;
text-align-last:justify;
text-align:justify;
}
.pc-top .logo .p1 {
font-weight: 800;
font-size: 22px;
line-height: 30px;
}
.pc-top .logo .p2 {
font-weight: 800;
font-size: 14px;
line-height: 20px
}
.pc-top .pc-nav {
width:100%;
height:90px;
text-align: center;
text-align: right
}
.pc-nav-ul {
display: inline-block;
height:90px;
padding-right:50px
}
.pc-nav-ul li {
display: inline-block;
padding:15px 0;
height:100%;
position:relative;
}
.pc-nav-ul li a {
color:#333;
width:110px;
display: inline-block;
height:50px;
line-height: 50px;
text-align: center;
transition:all ease 0.35s
}
.pc-nav-ul li a:hover {
color:#BB0E1E;
letter-spacing:2px
}
.pc-nav-ul li .l {
font-family:"阿里妈妈数黑体";
font-weight:800
}
.pc-nav-ul li .l:hover {
font-family:"阿里妈妈数黑体";
font-weight:800;
border-bottom:none
}
.pc-nav-ul .now {
color:#BB0E1E
}
.pc-nav-ul .tel {
width:190px;
color:#BB0E1E;
font-size: 18px;
font-family:"阿里妈妈数黑体";
text-align:center;
transition:all ease 0.35s
}
.pc-nav-ul .tel:hover {
letter-spacing:1px
}
.pc-nav-ul .tel span {
margin-right: 5px
}
.pc-top-m {
width:100%;
height:50px;
position: fixed;
z-index: 999;
background:#BB0E1E;
transition:all ease 0.35s;
top:-50px
}
.pc-top-m .logo {
width:100%;
height:50px;
padding:5px;
padding-left:50px
}
.pc-top-m .logo img {
height:40px;
display: inline-block;
vertical-align:top;
margin-right:20px
}
.pc-top-m .logo .text {
width:290px;
display: inline-block;
vertical-align:top;
}
.pc-top-m .logo p {
width:290px;
text-align-last:justify;
text-align:justify;
color:#fff
}
.pc-top-m .logo .p1 {
font-weight: 800;
font-size: 20px;
line-height: 25px;
}
.pc-top-m .logo .p2 {
font-size: 14px;
line-height: 15px
}
.pc-top-m .pc-nav {
height:50px;
bottom:0;
right:10px;
text-align: right
}
.pc-top-m .pc-nav-ul {
display: inline-block;
height:50px;
padding-right:50px
}
.pc-top-m .pc-nav-ul li {
display: inline-block;
padding:0;
height:100%;
position:relative;
}
.pc-top-m .pc-nav-ul li a {
color:#fff;
display: inline-block;
height:50px;
line-height: 50px;
text-align: center
}
.pc-top-m .pc-nav-ul li a:hover {
color:#ffc954;
}
.pc-top-m .pc-nav-ul li .l {
font-family:"阿里妈妈数黑体";
font-weight:800;
}
.pc-top-m .pc-nav-ul li .l:hover {
font-family:"阿里妈妈数黑体";
font-weight:800;
border-bottom:none
}
.pc-nav-ul .tel:hover {
letter-spacing:1px
}
.pc-nav-ul .tel span {
margin-right: 5px
}
.pc-top-m .pc-nav-ul .now {
color:#ffc954
}
.pc-top-m .pc-nav-ul .now a {
color:#ffc954
}
.pc-nav-ul .second {
position: absolute;
background: #fff;
top:82px;
display: none;
width:140%;
left:-20%;
box-shadow:0px 2px 10px #ccc;
text-align: center
}
.pc-nav-ul .second>li {
height:50px;
padding:0;
width:100%;
/*white-space:nowrap;*/
text-align: center;
position: relative;
display: flex;
align-items:center;
}
.pc-nav-ul .second>li>a {
line-height:15px;
color:#333;
text-align: center;
height:15px;
width:100%;
display: inline-block;
}
.pc-nav-ul .second>li:hover {
border-bottom:2px solid #BB0E1E;
}
.pc-nav-ul .second>li>a:hover {
color:#BB0E1E;
letter-spacing:0px
}
.pc-top-m .pc-nav-ul .second {
top:50px
}
.pc-nav-ul .second .third{
padding:0px;
position: absolute;
right:-200px;
top:0;
width:200px;
display: none;
text-align: center;
padding:0px 10px;
}
.pc-nav-ul .second .third:after{
content: '';
position: absolute;
width:10px;
height: 20px;
background: url(../image/left.png);
left:-0px;
top:15px;
}
.pc-nav-ul .second .third li{
display: block;
height:50px;
line-height: 50px;
padding:0px;
box-shadow:0px 2px 10px #ccc;
background: #fff;
align-items:center;
}
.pc-nav-ul .second .third li a{
color:#333;
display: inline-block;
line-height: 15px;
width:100%;
}
.pc-nav-ul .second .third li a:hover{
color:#BB0E1E;
}
.pc-top-m .tel {
color: #fff
}
.pc-top-m .tel:hover {
color:#ffc954
}
/*banner*/
.banner-bg {
width:100%;
position: fixed;
top:0;
z-index: 2;
background: #fff;
}
.carousel-inner {
width: 100%;
height: 0;
padding-top: 50%;
position: relative;
}
.carousel-inner .carousel-item {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: block;
}
.carousel-inner .carousel-item>img {
width: 110%;
height: 110%;
transition: all 5s ease 0s;
position: absolute;
left: -5%;
top: -5%;
}
.carousel-inner .active>img {
width: 100%;
height: 100%;
left: 0%;
top: 0%;
transition: all 5s ease 0s;
}
.carousel-inner .carousel-item .text{
position: absolute;
height:50%;
width:80%;
left:10%;
right:10%;
bottom: 25%;
}
.carousel-inner .carousel-item .text:after{
content: '';
width:500%;
height:50%;
position: absolute;
top:25%;
left:-100%;
background: rgba(0,0,0,0.3);
}
.carousel-inner .carousel-item .left p{text-align: left;}
.carousel-inner .carousel-item .right p{text-align: right;}
.carousel-inner .carousel-item .middle p{text-align: center;}
.carousel-inner .carousel-item .text p{
text-shadow: 3px 3px 5px #444;
width:100%;
z-index: 2;
}
.carousel-inner .carousel-item .text .title{
width:100%;
height:50%;
position: absolute;
bottom:50%;
color: #fff;
font-size: 46px;
text-shadow: 3px 3px 5px #444;
font-weight: 100;
overflow: hidden;
}
.carousel-inner .carousel-item .text .title p{
transition: all 1s ease 0s;
position: absolute;
bottom:-50%;
}
.carousel-inner .carousel-item .text .desc{
width:100%;
height:50%;
position: absolute;
top:50%;
color: #fff;
font-size: 26px;
text-shadow: 3px 3px 5px #444;
font-weight:300;
overflow: hidden;
}
.carousel-inner .carousel-item .text .desc p{
font-family: "阿里妈妈数黑体";
transition: all 1s ease 0.5s;
position: absolute;
top:-50%;
text-transform:uppercase;
}
.carousel-inner .carousel-item .text p{
text-shadow: 3px 3px 5px #444;
width:100%;
z-index: 2;
}
.carousel-inner .carousel-item .text .line{width:100%;height:0px;background:rgba(255,255,255,0.5) }
.carousel-inner .active .text .title p{
bottom:0%;
}
.carousel-inner .active .text .desc p{
top:0%;
}
.carousel-inner .carousel-item .min-img {
position: absolute;
top:0;
right: 0;
bottom: 0
}
.carousel-inner .carousel-item .min-img img {
height: 100%
}
.carousel-indicators {
bottom: 10%
}
@media (max-width: 1200px) {
.banner-bg{padding-top:0px;position: relative;}
.carousel-inner .carousel-item .text .title{font-size: 35px;}
.carousel-inner .carousel-item .text .desc{font-size: 35px;}
}
@media (max-width: 992px) {
.carousel-inner .carousel-item .text .title{font-size: 30px;}
.carousel-inner .carousel-item .text .desc{font-size: 18px;}
}
@media (max-width: 768px) {
.carousel-inner .carousel-item .text .title{font-size: 16px;}
.carousel-inner .carousel-item .text .desc{font-size: 10px;}
}
/*首页大标题样式*/
.home-biaoti-box {
width:100%;
margin-bottom:3%;
position: relative;
height:60px;
overflow: hidden;
}
.home-biaoti {
position: absolute;
left:50%;
margin-left:-130px;
width:260px;
padding-left:90px;
height:60px;
background: url('../image/logo-3.svg');
background-repeat: no-repeat;
background-size:auto 50px;
background-position: center left;
position: relative;
transition: all 0.5s ease 0s;
}
.home-biaoti:after {
content: '';
width:100px;
height:2px;
left:-130px;
position: absolute;
top:50%;
z-index: 2;
background: #B70224;
}
.home-biaoti:before {
content: '';
width:100px;
height:2px;
left:260px;
position: absolute;
top:50%;
z-index: 2;
background: #B70224;
transition: all 0.5s ease 0s;
}
.home-biaoti .biaoti-left {
float:left;
font-size: 40px;
font-weight: 800;
color:#A90028;
height:58px;
line-height: 58px;
margin-right:10px;
}
.home-biaoti .biaoti-right {
float:left;
}
.home-biaoti .p1 {
text-align: left;
font-size: 20px;
font-weight: 800;
height:30px;
line-height: 40px;
}
.home-biaoti .p2 {
line-height: 26px;
text-align: left;
font-weight: 800;
font-size: 18px;
color:#A90028;
opacity: 0.3;
}
.home-more{
margin-top:5%;
width:100%;
text-align: center;
}
.home-more a{
width:150px;
display: inline-block;
height:60px;
line-height: 60px;
text-align: center;
background: #ccc;
transition: all 0.5s ease 0s;
color:#555;
}
.home-more a:hover{
width:200px;
background: #B70224;
color:#fff;
}
.home-gategory {
width:100%;
text-align: center;
margin-bottom:3%
}
.home-gategory a {
display: inline-block;
padding:5px 10px;
background:#eee;
border-radius: 30px;
font-size: 14px;
min-width: 140px;
margin:10px;
transition: all 0.5s ease 0s;
}
.home-gategory a:hover {
background:#DB0017;
color:#fff;
letter-spacing:2px
}
/*公司简介*/
.home-about-bg {
margin-top:50%;
background: #fff;
position: relative;
padding:8% 0;
z-index: 4
}
@media (max-width: 1200px) {
.home-about-bg {
margin-top:0%;
}
}
/*产品展示*/
.home-product-bg {
background: #fff;
position: relative;
padding:5% 0;
z-index: 4
}
@media (max-width: 992px) {
.home-product-bg {
}
}
.home-product-list-box {
width:100%;
padding-top:75%;
position: relative;
background: red;
margin-bottom:30px
}
.home-product-list {
height:100%;
position: absolute;
left:0;
right:0;
top:0
}
.home-product-list .img {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow: hidden;
}
.home-product-list .img img {
width:110%;
height:110%;
position: absolute;
left:-5%;
top:-3%;
transition: all 0.5s ease 0s;
z-index: 0
}
.home-product-list:hover .img:after {
content: ' ';
width:100%;
height:100%;
left:0;
top:0;
z-index:1;
position: absolute;
background: rgba(0,0,0,0.2)
}
.home-product-list:hover .img img {
top:-6%
}
.home-product-list:after {
content: ' ';
width:0%;
height:80%;
position: absolute;
top:10%;
left:50%;
border-top: 1px solid red;
border-bottom: 1px solid red;
transition: all 0.5s ease 0s;
z-index: 3;
}
.home-product-list:before {
content: ' ';
width:80%;
height:0%;
position: absolute;
top:50%;
left:10%;
border-left: 1px solid red;
border-right: 1px solid red;
z-index: 3;
transition: all 0.5s ease 0s;
}
.home-product-list:hover:after {
content: ' ';
width:90%;
height:80%;
position: absolute;
top:10%;
left:5%;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
.home-product-list:hover:before {
content: ' ';
width:80%;
height:90%;
position: absolute;
top:5%;
left:10%;
border-left: 1px solid red;
border-right: 1px solid red;
z-index: 2
}
.home-product-list .title {
position: absolute;
left:50%;
top:50%;
margin-top:-50px;
z-index: 5;
width:0%;
overflow: hidden;
height:100px;
transition: all 0.5s ease 0.2s;
}
.home-product-list:hover .title {
left:15%;
width:70%
}
.home-product-list .title p {
width:500px;
text-align: center;
position: absolute;
left:50%;
margin-left:-250px;
line-height: 100px;
color:#fff;
font-size: 16px;
font-weight: 800;
background: #BB0E1E
}
.home-about-bg {
background: #ebebeb;
padding:8% 0;
position: relative;
z-index: 3
}
.home-about-bg:after{
content: '';
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background: url('../image/home-about-1.png');
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center bottom;
z-index: 0;
}
.home-about-bg>div{
position: relative;
z-index: 2;
}
.home-about-text {
margin-top:10%;
margin-bottom:10%;
text-indent: 2em;
line-height: 2em;
}
/*文字动画*/
.ah-words-wrapper b{ font: inherit;font-style:normal;}
.ah-words-wrapper{font-style:normal;}
.animate-type{text-align: center}
.is-visible{ font-style:normal;}
.ah-words-wrapper{text-align: center;display: inline-block;font-size: 50px}
@media (max-width: 992px) {
.ah-words-wrapper{font-size: 24px}
}
.home-about-text{line-height: 30px;text-indent: 2em}
.home-about-text p{margin-bottom: 1em;}
.home-middle {
width:100%;
padding-top:50%;
position: relative;
background:#494A5E
}
/*首页产品与服务*/
.home-fuwu-all {
position:relative;
background:#494A5D;
background-size: cover;
}
.home-fuwu-all:after{
content: ' ';
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index: 1;
background: url('../image/about1.jpg');
background-size:100%;
opacity: 0.3;
}
.home-fuwu-all-bg {
position: absolute;
top:0;
z-index: 2;
width:100%;
bottom:0;
overflow: hidden;
}
.home-fuwu-all-bg .box {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index: 1;
background-size: cover;
opacity: 0;
transition: all 2s ease 0s;
background-position: center;
background-repeat: no-repeat;
}
/*.home-fuwu-all-bg .box:hover {
position: absolute;
top:-5%;
left:-5%;
width:110%;
height:110%;
}*/
.home-fuwu-all-bg .boxbig {
top:-5%;
left:-5%;
width:110%;
height:110%;
z-index: 10;
transition: all 2s ease 0s;
opacity: 1
}
/*.home-fuwu-all-bg .boxbig:hover {
top:-5%;
left:-5%;
width:110%;
height:110%;
z-index: 10;
transition:2s ease-in-out;
}*/
.home-fuwu-all .col-box {
background: rgba(34, 110, 183,0.2);
border-right:1px solid rgba(255,255,255,0.1);
border-left:1px solid rgba(0,0,0,0.1);
border-bottom:1px solid rgba(255,255,255,0.1);
}
.home-fuwu-box {
position: relative;
width:100%;
height:0;
padding-top: 200%;
}
@media (max-width: 1200px) {
.home-fuwu-box {
position: relative;
width:100%;
height:0;
padding-top: 20%;
}
}
.home-fuwu-box-in {
position: absolute;
width:100%;
height:100%;
left:0;
top:0;
overflow: hidden;
}
.home-fuwu-text {
top:50%;
position: absolute;
padding:0 10%;
margin-top:-25px;
transition:0.5s ease-in-out;
width:100%;
}
.home-fuwu-text .title {
color:#fff;
height:50px;
width:100%;
font-size: 20px;
text-align: center;
line-height: 50px;
transition:0.5s ease-in-out;
overflow: hidden;
background: #B70224;
border-radius: 5px;
}
.home-fuwu-text .pic {
width:100%;
margin-top:30px;
display: none;
transition:0.5s ease-in-out;
}
.home-fuwu-text .pic .pic-list-box{
position: relative;
width:100%;
padding-top:70%;
margin-bottom:5%;
}
@media (max-width: 1200px) {
.home-fuwu-text .pic .pic-list-box{
position: relative;
width:33%;
padding-top:20%;
margin-bottom:5%;
float:left;
}
}
.home-fuwu-text .pic-list-box .t{
position: absolute;
top:50%;
left:50%;
height:40px;
margin-top:-20px;
width:0%;
z-index: 1;
text-align: center;
background: rgba(0, 0, 0, 0.5);
color:#fff;
line-height: 40px;
overflow: hidden;
transition:0.5s ease-in-out;
}
.home-fuwu-text .pic-list-box:hover .t{
width:100%;
left:0;
}
.home-fuwu-text .pic-list-box img{
position: absolute;
top:0;
left:0;
height:100%;
width:100%;
transition:0.5s ease-in-out;
}
.home-fuwu-text .pic-list-box:hover img{
position: absolute;
top:-5%;
left:-5%;
height:110%;
width:110%;
}
.home-fuwu-text .picbox {
padding:5px;
}
.home-fuwu-text .picbox2 {
background: #fff;
width:100%;
padding-top:70%;
position: relative;
}
.home-fuwu-text .picbox3 {
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
padding:10%
}
.home-fuwu-text .picbox3 .img {
width:100%;
height:100%;
}
.home-fuwu-text .picbox3 .img img {
max-width:100%;
max-height:100%;
}
.home-fuwu-all .col-box:hover {
background:rgba(0,0,0,0.6)
}
.home-fuwu-all .col-box:hover .home-fuwu-text {
top:5%
}
.home-fuwu-all .col-box:hover .home-fuwu-text .title {
height:0px;
overflow: hidden;
font-size: 0px;
color:#fff;
background: rgba(0,0,0,0)
}
.home-fuwu-all .col-box:hover .home-fuwu-text .pic {
display: block;
}
/*news*/
.home-news-bg {
padding:5% 0;
position: relative;
z-index: 20;
background: #fff;
}
.home-news-box>div {
margin-bottom:20px
}
.home-news-list-box {
width:100%;
padding:10px;
border:1px solid #ccc;
border-radius: 10px;
position: relative;
overflow: hidden;
transition: all 1s ease 0s;
}
.home-news-list-box:before {
content:'';
transform: rotate(45deg);
width:30px;
height:300%;
position: absolute;
background:rgba(255,255,255,0);
z-index: 16;
left:-50%;
top:-60%;
transition: all 1s ease 0s;
z-index: 8
}
.home-news-list-box:hover:before {
content:'';
transform: rotate(45deg);
width:100px;
height:300%;
position: absolute;
background:rgba(255,255,255,0.5);
z-index: 16;
left:200%;
top:-60%;
z-index: 8
}
.home-news-img {
width:100%;
padding-top:50%;
position: relative;
}
.home-news-img img {
position: absolute;
width:100%;
height: 100%;
top:0;
left:0;
border-radius: 5px;
}
.home-news-title {
margin-top:20px;
font-size: 18px;
font-weight: 800;
}
.home-news-time {
margin-top: 20px;
}
.home-news-time span {
margin-right:10px;
color:#B70224
}
.home-news-desc {
margin-top:20px;
font-size: 14px;
}
.home-news-list-box:hover {
background-image: linear-gradient(to left bottom,red,#B70224);
}
.home-news-list-box:hover div {
color:#fff;
}
.home-news-list-box:hover span {
color:#fff;
}
/*联系我们*/
.home-contact-bg {
background: #3A3A3A;
position: relative;
padding:3% 0;
z-index: 6;
}
.home-contact-bg .home-biaoti:before {
height:0px;
}
.home-contact-text {
display: flex;
justify-content:space-around;
align-items:flex-end;
}
.home-contact-text .text-left{
margin-right:20px;
}
.home-contact-text p {
font-size: 14px;
line-height: 32px;
color:#fff
}
.home-contact-img{
border-left: 1px solid #555;
border-right: 1px solid #555;
text-align: center;
}
@media (max-width: 1200px) {
.home-contact-img{
border-left: 0px solid #555;
border-right: 0px solid #555;
padding:40px 0;
}
}
.home-contact-img .bottom-logo{
display: inline-block;
width:40%;
padding-top:40%;
position: relative;
}
.home-contact-img .bottom-logo img{
width:100%;
position: absolute;
top:0;
left:0;
transition: all 1s ease 0s;
}
.home-contact-bg:hover .bottom-logo img{
width:120%;
position: absolute;
top:-10%;
left:-10%;
}
.home-contact-bg .home-title-ch {
color:#fff
}
.home-contact-bg .home-title-en {
color:#fff
}
.home-contact-bg .home-title {
border-bottom:1px solid #fff
}
.bottom-nav>ul {
width:100%;
display: flex;
justify-content:space-between
}
.bottom-nav ul li {
font-size: 14px;
margin-bottom:10px
}
.bottom-nav>ul li ul {
margin-top:10px
}
.bottom-nav a:hover {
color:red
}
.bottom-search {
width:600px;
max-width: 100%;
}
.form-group {
position: relative;
}
.form-group input {
width: 100%;
height:40px;
border-radius: 5px;
border:1px solid #ccc
}
.form-group button {
position: absolute;
right: 0;
top: 0;
bottom: 0;
border: 0px;
background: #fff;
line-height: 40px;
background:#DB0017;
width: 80px;
border-radius: 0 5px 5px 0;
color: #fff
}
.form-group button:hover {
background: #e91f34
}
.bottom-banquan-all{
display: flex;
flex-direction:column;
justify-content:flex-end;
}
.remen {
color: #fff;
font-size: 14px;
}
.remen a {
color: #fff;
font-size: 14px;
margin-right:10px
}
.remen a:hover {
color:red
}
.home-area {
color:#fff;
font-size: 14px
}
.home-area a {
color:#fff;
font-size: 14px;
margin-right:10px
}
.home-area a:hover {
color:#DB0017
}
.bottom-nav {
padding-bottom:20px;
margin-bottom: 20px;
border-bottom:1px solid #fff
}
.bottom-nav li {
display: inline-block;
vertical-align:top;
margin-right:10px
}
.bottom-nav li a {
color:#fff
}
.bottom-nav .second li {
display: block;
}
.bottom-erweima-img {
width:100%;
text-align: center
}
.bottom-erweima-img img {
width:100%;
max-width: 150px
}
.bottom-banquan {
text-align: ;
margin-top:20px;
color:#fff;
font-size: 14px
}
.bottom-banquan a {
color:#fff;
font-size: 14px;
margin-right:10px
}
.bottom-banquan a:hover {
color:#DB0017
}
/*右侧按钮*/
.right-button {
width: 50px;
position: fixed;
right: -50px;
top: 40%;
z-index: 9999;
transition: all 0.3s ease 0s;
}
.right-button .buttonA {
width: 50px;
height: 50px;
background: #DB0017;
margin-bottom: 4px;
border-radius: 5px 0 0 5px;
padding: 0;
text-align: center;
cursor: hand;
position: relative;
}
.right-button .aa {
padding: 5px
}
.right-button .buttonA a {
display: block;
width: 100%;
height: 100%;
padding: 5px
}
.right-button .buttonA:hover {
background: #ed7500;
}
.right-button .buttonA span {
font-size: 20px;
color: #fff;
line-height: 20px;
display: inline-block;
height: 20px
}
.right-button .buttonA p {
font-size: 12px;
color: #fff;
height: 10px;
font-family: '宋体'
}
.right-button .buttonA:hover span {
color: #fff
}
.right-button .buttonA:hover p {
color: #fff
}
.right-button .buttonB {
width: 50px;
height: 30px;
background: #DB0017;
margin-bottom: 4px;
border-radius: 5px 0 0 5px;
text-align: center;
}
.right-button .buttonB:hover {
background: #ed7500;
}
.right-button .buttonB span {
font-size: 20px;
color: #fff;
line-height: 30px;
display: inline-block;
height: 30px
}
.right-button .buttonB:hover span {
color: #fff;
}
.right-button .buttonA .b-left {
width: 200px;
position: absolute;
right: -200px;
top: 0;
transition: all 0.3s ease 0s;
z-index: -1;
opacity: 0;
padding-right:10px
}
.right-button .buttonA .b-left img {
width: 100%
}
.right-button .buttonA:hover .b-left {
right: 50px;
opacity: 1
}
.right-button .buttonA .b-left .b-tel {
font-weight: 800;
}
/*移动端底部按钮*/
.m-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
background: #333;
border-top: 1px solid #666;
padding:5px 0;
height: 50px
}
.m-bottom .col-4,.m-bottom .row {
padding: 0;
margin: 0
}
.m-bottom .row .col-4 {
border-right: 1px solid #000;
border-left: 1px solid #666
}
.m-bottom .row .col-4:last-child {
border-right: 0px solid #ccc;
}
.m-bottom .row .col-4:first-child {
border-left: 0px solid #ccc;
}
.m-bottom a {
display: block;
width: 100%;
}
.m-bottom-ico {
text-align: center;
color: #fff;
font-size: 20px;
height: 20px;
line-height: 20px;
}
.m-bottom-text {
text-align: center;
color: #fff;
font-size: 12px;
height: 20px;
line-height: 20px;
}
.product-min-nav{width:100%;text-align: center; margin-bottom:3%}
.product-min-nav li{display: inline-block;}
.product-min-nav li{display: inline-block;padding:5px 20px;background:#eee;border-radius: 30px;font-size: 14px; margin:10px 5px;transition: all 0.5s ease 0s;}
.product-min-nav li:hover {background:#DB0017;color:#fff;letter-spacing:2px}
.product-min-nav a{width:100%;height:100%;display:block;text-align:center }
.product-min-nav li:hover a{color:#fff; }
.product-min-nav .now{background: #DB0017;}
.product-min-nav .now:hover a{color: #fff}
.product-min-nav .now a{color: #fff}
/*内页新闻*/
.inpage-newlist-box{position: relative;width:100%;padding-top:200px; background-image: linear-gradient(to left bottom,#F4F4F4,#F4F4F4);margin-bottom:20px;transition: all 0.3s ease 0s; }
.inpage-newlist-box a{display: block;position: absolute;top:15px;left:15px;right:15px;bottom:15px;overflow: hidden;display: flex;}
.inpage-newlist-box a .img-box{flex-shrink:0;width:40%;height:100%; position: relative;overflow: hidden; margin-right:10px}
.inpage-newlist-box .img-box .img{ width:100%;height:100%;transition: all 0.3s ease 0s;position: absolute;left:0;top:0; background-size: cover ;background-position: center;}
.inpage-newlist-box:hover .img-box .img{width:110%;height:110%;left:-5%;top:-5%; background-size: cover ;background-position: center;}
.inpage-newlist-box .text-box{width:100%;height:100%; right:0;top:0; display: flex; flex-direction:column;justify-content:center}
.inpage-newlist-box .text-box .inpage-newlist-title{font-size: 20px;margin-bottom:15px}
.inpage-newlist-box .text-box .inpage-newlist-time{font-size: 20px;color:#D70021;font-weight: 600;margin-bottom:15px}
.inpage-newlist-box .text-box .inpage-newlist-time span{margin-right:10px;}
.inpage-newlist-box .text-box .inpage-newlist-desc{font-size: 14px;color:#999;line-height:28px;max-height:60px;overflow:hidden; }
.inpage-newlist-box:hover .inpage-newlist-title{color:#fff}
.inpage-newlist-box:hover .inpage-newlist-time{color:#fff}
.inpage-newlist-box:hover .inpage-newlist-desc{color:#fff}
.inpage-newlist-box:hover{background-image: linear-gradient(to left bottom,red,#B70224);border-radius: 10px}
.inpage-show-title{text-align: center;font-size: 22px; }
.inpage-show-time{border-bottom:1px solid #D70021;text-align: center;padding-bottom:10px;padding-top:10px}
.inpage-show-content{margin-top:3%;margin-bottom:3%}
/*产品列表页*/
.inpage-product-list-box {
width:100%;
padding-top:75%;
position: relative;
background: red;
margin-bottom:30px
}
.inpage-product-list {
height:100%;
position: absolute;
left:0;
right:0;
top:0
}
.inpage-product-list .img {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow: hidden;
}
.inpage-product-list .img img {
width:110%;
height:110%;
position: absolute;
left:-5%;
top:-3%;
transition: all 0.5s ease 0s;
z-index: 0
}
.inpage-product-list:hover .img:after {
content: ' ';
width:100%;
height:100%;
left:0;
top:0;
z-index:1;
position: absolute;
background: rgba(0,0,0,0.2)
}
.inpage-product-list:hover .img img {
top:-6%
}
.inpage-product-list:after {
content: ' ';
width:0%;
height:80%;
position: absolute;
top:10%;
left:50%;
border-top: 1px solid red;
border-bottom: 1px solid red;
transition: all 0.5s ease 0s;
z-index: 3;
}
.inpage-product-list:before {
content: ' ';
width:80%;
height:0%;
position: absolute;
top:50%;
left:10%;
border-left: 1px solid red;
border-right: 1px solid red;
z-index: 3;
transition: all 0.5s ease 0s;
}
.inpage-product-list:hover:after {
content: ' ';
width:90%;
height:80%;
position: absolute;
top:10%;
left:5%;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
.inpage-product-list:hover:before {
content: ' ';
width:80%;
height:90%;
position: absolute;
top:5%;
left:10%;
border-left: 1px solid red;
border-right: 1px solid red;
z-index: 2
}
.inpage-product-list .title {
position: absolute;
left:0%;
bottom:0;
z-index: 5;
width:100%;
line-height: 30px;
transition: all 0.5s ease 0.2s;
}
.inpage-product-list:hover .title {
left:15%;
width:70%;
bottom:50%;
}
.inpage-product-list .title p {
width:100%;
text-align: center;
position: absolute;
left:0;
bottom:0;
line-height:30px;
color:#fff;
font-size: 16px;
font-weight: 800;
background: rgba(183, 2, 36,0.5);
transition: all 0.5s ease 0s;
}
.inpage-product-list:hover .title p{
background: rgba(183, 2, 36,1);
color:#fff;
}
#qd-pages{width:100%; text-align: center; display: flex;justify-content: center;margin-top:3%}
#qd-pages p{display: inline-block; height:30px;line-height: 10px; }
#qd-pages li{display: inline-block; height:30px; border:1px solid #ddd;margin:3px;border-radius: 3px; background: #eee}
#qd-pages li:hover{background: #B70224}
#qd-pages li:hover a{color:#fff;}
#qd-pages li a{display:block; width:auto;height:30px;padding:5px 10px;font-size: 14px; line-height: 20px;color:#777 }
#qd-pages li a:hover{color:#fff;}
#qd-pages span{display:inline-block; height:30px; font-size: 14px; }
#qd-pages .now{background: #B70224}
#qd-pages .now a{color:#fff;}
#qd-pages .dian{border:none; background: none; padding: 0;line-height: 20px; height: 30px; vertical-align:top;}
#qd-pages .dian a{color: #aaa; line-height: 20px;padding: 0}
#qd-pages .dian:hover{border:none; background: none}
#qd-pages .pages-first{text-transform:Uppercase;padding:5px 10px }
#qd-pages .pages-last{text-transform:Uppercase; padding:5px 10px }