html,body{
background: #F3F4F8;
}
.con{
width: 1280px;
margin: 0 auto;
}
h2{
text-align: center;
font-size: 36px;
font-weight: 800;
color: #000000;
padding-top: 80px;
}
h4 {
text-align: center;
font-size: 16px;
font-weight: 400;
color: #666666;
padding: 24px 0 46px;
}
.header{
width: 100%;
height: 70px;
margin: 0 auto;
z-index: 9;
font-size: 14px;
color: #000000;
background-color: #d31616;
}
.logo{
width: 150px;
height: 40px;
}
.nav{
flex: 1;
display: flex;
justify-content: space-around;
padding: 0 40px;
}
.nav a:hover{
color: #E52928;
}
.phone{
width: 14px;
height: 14px;
margin-right: 5px;
}
.header-box{
width: 1280px;
margin: 0 auto;
height: 70px;
align-items: center;
}
.header-box div{
width: 150px;
height: 34px;
border-radius: 4px 4px 4px 4px;
opacity: 1;
border: 1px solid #E52928;
color: #FFF;
}
.pop{
width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
font-size: 12px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 14px;
height: 57px;
}
.pop a{
display: flex;
align-items: center;
font-size: 12px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 14px;
margin-right: 5px;
}
.pop a:nth-child(2){
margin-left: 5px;
}
.pop a img{
margin-right: 5px;
}
.cont{
width: 1280px;
margin: 0 auto 60px;
display: flex;
justify-content: space-between;
}
.cont-left{
width: 950px;
background: #FFFFFF;
border-radius: 5px 5px 5px 5px;
opacity: 1;
}
.cont-left h3{
width: 100%;
height: 60px;
border-bottom: 1px solid #e8e8e8;
padding-left: 30px;
box-sizing: border-box;
font-size: 16px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
line-height: 60px;
position: relative;
}
.cont-left h3 span{
display: block;
width: 64px;
height: 3px;
background-color: #ff4b4b;
position: absolute;
left: 30px;
bottom: 0;
border-radius: 2px;
}
.cont-cen{
width: 100%;
padding: 0 30px;
box-sizing: border-box;
margin-top: 10px;
}
.cont-cen a{
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e8e8e8;
box-sizing: border-box;
}
.cont-cen a p{
width: 600px;
display: flex;
align-items: center;
justify-content: space-between;
}
.cont-cen a p .yuan{
display: block;
width: 4px;
height: 4px;
background: #D9D9D9;
opacity: 1;
border-radius: 50%;
}
.cont-cen a p span{
display: block;
width: calc(100% - 15px);
font-size: 14px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 24px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.cont-cen a .time{
font-size: 12px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #999999;
line-height: 24px;
display: flex;
align-items: center;
}
.cont-cen a .time img{
margin-right: 5px;
}
.cont-cen a .guanzhu{
font-size: 12px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #999999;
line-height: 24px;
display: flex;
align-items: center;
}
.cont-cen a .guanzhu img{
margin-right: 5px;
}
.cont-cen a .btn{
width: 80px;
height: 28px;
border-radius: 4px 4px 4px 4px;
opacity: 1;
border: 1px solid #CCCCCC;
font-size: 12px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #666666;
line-height: 26px;
text-align: center;
cursor: pointer;
box-sizing: border-box;
}
.cont-cen a:hover p span{
color: #E52928;
}
.cont-cen a:hover .btn{
color: #E52928;
border: 1px solid #E52928;
}
.pages{
width: 100%;
height: 110px;
display: flex;
align-items: center;
justify-content: center;
}
.pages a{
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 0px 0px 0px 0px;
opacity: 1;
border: 1px solid #DDDDDD;font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
box-sizing: border-box;
margin: 0 10px;
}
.pages a:nth-child(1),.pages a:nth-last-child(1){
width: 50px;
height: 30px;
border-radius: 0px 0px 0px 0px;
opacity: 1;
border: 1px solid #DDDDDD;
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.pages a:nth-child(2),.pages a:nth-last-child(2){
width: 70px;
height: 30px;
border-radius: 0px 0px 0px 0px;
opacity: 1;
border: 1px solid #DDDDDD;
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.pages .curpage{
width: 30px;
height: 30px;
border-radius: 0px 0px 0px 0px;
opacity: 1;
border: 1px solid #FF4B4B;
color: #E52928;
}
.cont-right{
width: 320px;
}
.c-r-top{
width: 100%;
height: 150px;
background: linear-gradient(180deg,#d31616 0%,#d31616 100%);
border-radius: 5px 5px 5px 5px;
opacity: 1;
padding: 0 20px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
}
.top-word{
width: 128px;
}
.c-r-top img{
width: 110px;
}
.top-word h3{
font-size: 16px;
font-family: PingFang SC-Heavy, PingFang SC;
font-weight: 800;
color: #FFFFFF;
line-height: 24px;
}
.top-word p{
font-size: 12px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 24px;
margin-top: 18px;
}
.top-word p span{
color: #FFF6A6;
}
.c-r-cen{
width: 100%;
height: 370px;
background: #FFFFFF;
border-radius: 5px 5px 5px 5px;
opacity: 1;
margin-top: 10px;
overflow: hidden;
}
.c-r-cen h3{
width: 100%;
height: 60px;
padding: 0 20px;
box-sizing: border-box;
font-size: 16px;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #000000;
line-height: 60px;
border-bottom: 1px solid #e8e8e8;
}
.c-r-cen-box{
width: 100%;
padding: 10px 20px;
box-sizing: border-box;
}
.c-r-cen-box a{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
.c-r-cen-box a .shu{
font-size: 14px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #AAAAAA;
line-height: 16px;
}
.c-r-cen-box a span{
display: block;
width: calc(100% - 20px);
font-size: 14px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.c-r-cen-box a:nth-child(1) .shu{
color: #FF4B4B;
}
.c-r-cen-box a:nth-child(2) .shu{
color: #FF8C4B;
}
.c-r-cen-box a:nth-child(3) .shu{
color: #FFCD4B;
}
.footer{
height: auto;
background: #111111;
padding: 60px 0 26px;
}
.footer-box{
width: 1280px;
margin: 0 auto;
}
.footer-top{
display: flex;
height: 265px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.f-item{
width: 25%;
}
.f-logo{
width: 112px;
height: 30px;
display: block;
}
.f-title{
height: 30px;
font-size: 20px;
font-weight: 800;
color: #FFFFFF;
line-height: 30px;
}
.f-item-con{
display: flex;
}
.f-item-con .f-txt{
width: 40%;
}
.f-txt{
padding-top: 40px;
font-size: 14px;
font-weight: 500;
color: #CCCCCC;
line-height: 30px;
}
.f-btn{
width: 120px;
height: 34px;
line-height: 34px;
text-align: center;
background: linear-gradient(225deg, #E52928 0%, #B80A0B 100%);
border-radius: 5px;
font-size: 14px;
color: #FFFFFF;
margin-top: 40px;
cursor: pointer;
}
.footer-bottom{
padding-top: 30px;
display: flex;
align-items: center;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
.beian{
flex: 1;
}
.footer-bottom i{
display: inline-block;
width: 80px;
height: 30px;
background-image: url('../picture/fc-icon.png');
margin-left: 6px;
}
.footer-bottom .fc-beian {
width: 14px;
height: 14px;
background-position: -110px -110px;
}
.fc-beian_1 {
background-position: -10px -10px;
}
.fc-beian_2 {
background-position: -10px -60px;
}
.fc-beian_3 {
background-position: -110px -10px;
}
.fc-beian_4 {
background-position: -110px -60px;
}
.fc-beian_5 {
background-position: -10px -110px;
}
/* 二维码弹框 */
.code-model{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
z-index: 999;
display: none;
}
.code-bg{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
.code-box{
width: 400px;
height: 410px;
background: #FFFFFF;
border-radius: 20px;
border: 2px solid #FF4B4B;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
padding: 40px 40px 0;
text-align: center;
display: flex;
flex-direction: column;
}
.code-t1{
font-size: 24px;
font-weight: bold;
color: #333333;
}
.code-img{
width: 180px;
height: 180px;
margin: 20px auto 5px;
}
.code-t2{
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-weight: bold;
color: #333333;
}
.code-t2+.code-t2{
border-top: 1px solid #E5E5E5;
}
.code-btn{
width: 100px;
height: 30px;
line-height: 28px;
background: #FFFFFF;
box-shadow: 0px 10px 20px 1px rgba(0, 0, 0, 0.02);
border-radius: 15px;
border: 1px solid #FF4B4B;
color: #FF4B4B;
cursor: pointer;
}
.code-btn:hover{
background: #FF4B4B;
color: #fff;
}
/* 问答 */
.wenda{
width: 140px;
height: 390px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
margin: auto;
background: linear-gradient(45deg,#d31616 0%,#d31616 100%);
z-index: 999;
border-radius: 10px;
overflow: hidden;
}
.wenda-top{
width: 100%;
height: 80px;
font-size: 18px;
line-height: 24px;
padding-top: 15px;
text-align: center;
background: url('../picture/cs-wenda.png') no-repeat;
background-size: 100% 100%;
color: #FFFFFF;
}
.wenda-t1{
font-weight: bold;
}
.wenda-box{
height: 310px;
padding: 0 2px 2px;
}
.wenda-con{
height: 100%;
border-radius: 0 0 10px 10px;
background: #fff;
font-size: 12px;
font-weight: 400;
color: #333333;
line-height: 14px;
padding: 0 10px;
}
.wenda-con p {
display: flex;
padding-top: 20px;
}
.wenda-btn{
width: 100%;
height: 34px;
line-height: 34px;
text-align: center;
background: linear-gradient(225deg,#d31616 0%,#d31616 100%);
border-radius: 5px;
font-size: 14px;
font-weight: 800;
color: #FFFFFF;
cursor: pointer;
margin-top: 20px;
}
/* 联系我们 */
.lianxi{
min-height: 235px;
position: fixed;
top: 200px;
right: 0;
z-index: 999;
cursor: pointer;
}
.code2{
width: 190px;
height: 360px;
opacity: 1;
transition: 0.2s all;
overflow: hidden;
position: absolute;
top: 0;
left: -190px;
}
.code2-box{
width: 180px;
height: 300px;
border: 1px solid #DDDDDD;
background: #FFFFFF;
text-align: center;
padding: 20px;
}
.code2-t1{
font-size: 14px;
color: #000000;
}
.code2-img{
width: 140px;
height: 140px;
margin: 10px auto 0;
}
.code2-t2{
font-size: 12px;
line-height: 24px;
color: #333333;
padding-top: 20px;
text-align: center;
}
.code2-btn{
width: 80px;
height: 24px;
line-height: 22px;
background: #FFFFFF;
box-shadow: 0px 10px 20px 1px rgba(0, 0, 0, 0.02);
border-radius: 12px;
border: 1px solid #FF4B4B;
color: #FF4B4B;
cursor: pointer;
text-align: center;
margin: 5px auto;
}
.code2-btn:hover{
background: #FF4B4B;
color: #fff;
}