* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
nav {
width: 100%;
height: 40px;
background-color: #333333;
}
.zhongjian {
margin: 0px auto;
width: 1226px;
height: 40px;
}
.zhongjian>.s1>li {
float: left;
font-size: 12px;
padding: 0px 3px;
}
.zhongjian>.s1 {
width: 794.13px;
text-align: center;
line-height: 40px;
background-color: red;
}
.s2 {
text-align: center;
line-height: 40px;
position: relative;
left: 155px;
}
.s2>li {
float: left;
padding: 0px 3px;
font-size: 12px;
}
.s3 {
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: #424242;
float: left;
margin-left: 186px;
}
.s3>span {
font-size: 12px;
}
.s8:hover {
color: orange;background-color: white;
}
.zhongjian a {
color: #B0B0B0;
}
.zhongjian a:hover {
color: white;
}
.zhongjian li:nth-of-type(2n) {
color: #424242;
}
.s6 {
width: 330px;
/* height: 110px; */
height: 0px;
border-left: 1px solid #f5f2f2;
border-right: 1px solid #f5f2f2;
border-bottom: 1px solid #f5f2f2;
box-shadow: -1px 3px 9px rgba(#333333);
margin-left: -210px;
line-height: 150px;
overflow: hidden;
text-align: center;
line-height: 110px;
transition: all 0.6s;
position: relative;
z-index: 12000;
background-color: white;
}
.s3:hover>.s6 {
height: 110px;
}
.a1 {
width: 45.95px;
height: 40px;
}
#s5 {
width: 0px;
height: 0px;
border: 8px solid white;
border-color: transparent transparent white;
margin-left: 17px;
margin-top: -15px;
display: none;
}
.a1:hover>#s5 {
display: block;
}
.s7 {
width: 120px;
height: 0px;
box-shadow: 0px 0px 4px rgba(167, 167, 167, 0.5);
background-color: white;
/* display: none; */
margin-left: -35px;
overflow: hidden;
transition: all 0.6s;
position: relative;
}
.a1:hover>.s7 {
/* display: block; */
height: 140px;
position: relative;
z-index: 12000;
}
.s7>span {
position: relative;
font-size: 15px;
bottom: 20px;
}
/* .search{
border: 1px solid black;
} */
/* .search>input:focus{
outline: none;
} */
#a1 {
width: 100%;
height: 100px;
position: relative;
z-index: 9999;
}
#a2 {
float: left;
line-height: 100px;
}
#a3 {
float: left;
text-align: center;
line-height: 100px;
margin-left: 174px;
}
#a3>li {
float: left;
height: 17.6;
font-size: 16px;
padding-left: 9px;
padding-right: 9px;
}
#a3 a {
color: #333333;
}
#a3 a:hover {
color: #FF7FA5;
}
a.icon-icon-xiaomiguishu {
font-size: 56px;
color: #FF6A00;
}
#a4 {
line-height: 100px;
float: right;
padding-left: 20px;
}
#a4:hover> #a6{
border: 1px solid #B0B0B0;
}
#a4:hover> .icon-sousuo{
border-top: 1px solid #B0B0B0;
border-right: 1px solid #B0B0B0;
border-bottom: 1px solid #B0B0B0;
}
#a4:active> #a6{
border: 1px solid red;
}
#a4:active> .icon-sousuo{
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
}
#a4>input {
border: 1px solid #E0E0E0;
outline: none;
}
#a4>span {
font-size: 26.5px;
width: 52px;
height: 49px;
padding: 12px;
border-top: 1px solid #E0E0E0;
border-right: 1px solid #E0E0E0;
border-bottom: 1px solid #E0E0E0;
box-sizing: border-box;
}
#a4>span:hover {
background-color: #FF6700;
}
#a5 {
width: 1226px;
height: 100px;
margin: 0px auto;
}
#a6 {
width: 245px;
line-height: 50px;
position: relative;
bottom: 6px;
left: 5px;
}
#a4:hover>#o1{
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
#o1{
background-color: white;
margin-top: -28px;
margin-left: 5px;
width: 243px;
/* border: 1px solid black; */
display: none;
}
#a4:active>#o1{
display: block;
}
#o1>p{
line-height: 40px;
margin-left: 10px;
font-size: 13px;
}
#o1>p>a{
color: #333333;
}
.c1 {
width: 100%;
height:150px;
border-top: 1px solid #E0E0E0;
box-shadow: 0px 2px 3px #DADADA;
background-color: white;
position: absolute;
/* position: relative; */
left: 0;
/* overflow: hidden;
transition: all 0.6s; */
display: none;
z-index: 11;
}
.c2:hover>.c1 {
display: block;
}
/* #a3>li:hover,.c1 {
display: block;
} */
.d1 {
width: 1226px;
height: 500px;
margin: 0px auto;
}
.d2 {
width: 234px;
height: 500px;
background-color: rgba(165, 163, 163,.7);
position: relative;
z-index: 4;
}
.d3>li {
line-height: 42px;
/* overflow: hidden; */
font-size: 16px;
padding-left: 25px;
height: 42;
}
.d3>li:hover {
background-color: #FF6700;
}
.d3>li>a {
color: white;
}
.d3 div{
width: 992px;
height: 498px;
/* background-color: #FF6700; */
border: 1px solid gray;
background-color: white;
box-shadow: 0px 0px 5px grey;
position: absolute;
display: none;
left: 234px;
z-index: 6px;
bottom: 0px;
}
.d3:hover div{
display: block;
}
.d4 {
margin-top: 15px;
padding-top: 20px;
}
span.icon-right {
float: right;
color: white;
font-size: 40px;
}
.swiper {
width: 1226px !important;
height: 500px;
overflow: hidden;
/* display: none; */
position: relative;
/* left: 234px; */
bottom: 500px;
padding-right: -50px;
z-index: 2;
}
.swiper-slide>img {
position: relative;
z-index: 10;
}
.footer {
width: 100%;
/* height: 170px; */
margin: 0px auto;
background-color: rgb(19, 18, 17);
}
.e1 {
width: 234px;
height: 170px;
padding: 3px;
box-sizing: border-box;
background-color: #5f5750;
float: left;
}
.e2 {
width: 1226px;
margin: 20px auto;
}
.e1 li {
float: left;
width: 76px;
height: 82px;
position: relative;
box-sizing: border-box;
left: 14px;
}
.e1 img {
display: block;
font-size: 22px;
margin-bottom: 4px;
padding: 13px;
}
.e1 a {
color: #fff;
font-size: 12px;
opacity: .7;
display: block;
}
.e1 a:hover {
opacity: 1;
}
.f1::after {
position: absolute;
content: "";
bottom: 0;
left: -5px;
height: 1px;
width: 64px;
background-color: #797876;
}
.f2::before{
position: absolute;
top: 6px;
right:10px;
content: "";
width: 1px;
height: 70px;
background-color: #797876;
}
.g1>li{
float: left;
}
.g2{
margin-left: 12px;
}
.g3{
margin-left: 10px;
margin-right: 10px;
}
.g1 img:hover{
box-shadow: 0px 3px 5px gray;
transition: all 0.6s;
}
.swiper-button-prev{
margin-left: 224px;
color: #D9D9D7;
width: 40px;
height: 60px;
/* background-color: #7F7F7F; */
/* display: none; */
}
.swiper-button-next{
color: #D9D9D7;
width: 40px;
height: 60px;
/* background-color: #7F7F7F; */
}
/* .swiper-button-prev:hover{
display: block;
} */
.swiper-button-next:hover{
background-color: #333333;
}
.swiper-button-prev:hover{
background-color: #333333;
}
#p1 *{
width: 15px;
height: 15px;
background-color: #333333;
position: relative;
left: 520px;
bottom: 20px;
}
.m1{
position: fixed;
bottom: 100px;
right: 0;
}
.m1>li{
width: 70px;
line-height: 40px;
border: 1px solid rgb(190, 187, 187) ;
}
.m1>li>a>span{
position: relative;
top: 10px;
left: 17px;
font-size: 40px;
color: #999999;
}
.m1>li>a>.p1{
position: relative;
left: 10px;
}
.m1>li>a>p{
color:#999999 ;
}
.m1 a:hover{
color: #FF6700;
}
.m1 a:hover>span{
color: #FF6700;
}
.m1 a:hover>p{
color: #FF6700;
}