597 lines
12 KiB
CSS
597 lines
12 KiB
CSS
@charset "utf-8";
|
|
/*头部样式*/
|
|
.index_header{
|
|
height: 830px;
|
|
max-height: 830px;
|
|
background: url(../images/banner.png) no-repeat left top;
|
|
background-size: 100%;
|
|
}
|
|
/*头部banner样式*/
|
|
.index_header .banner{
|
|
margin-top: 100px;
|
|
//font-family: simhei;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 426px;
|
|
}
|
|
.index_header .banner .banner_left{
|
|
width: 600px;
|
|
}
|
|
.index_header .banner .banner_right{
|
|
width: 600px;
|
|
height: 426px;
|
|
-webkit-animation: myfirst 1.8s linear 0s infinite alternate;
|
|
animation: myfirst 1.8s linear 0s infinite alternate;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
@keyframes myfirst {
|
|
from {
|
|
bottom: 20px
|
|
}
|
|
to {
|
|
bottom: 10px
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes myfirst {
|
|
from {
|
|
bottom: 20px
|
|
}
|
|
to {
|
|
bottom: 40px
|
|
}
|
|
}
|
|
.index_header .banner .banner_right img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.index_header .banner .text1 {
|
|
font-size: 56px;
|
|
color: #fff;
|
|
font-weight: 400;
|
|
letter-spacing: 3px;
|
|
height: 80px;
|
|
width: 400px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.index_header .banner .text1_line{
|
|
width: 120px;
|
|
height: 3px;
|
|
background: #fff;
|
|
margin-bottom: 20px;
|
|
}
|
|
.index_header .banner .banner_p{
|
|
font-size: 22px;
|
|
color: #fff;
|
|
line-height: 44px;
|
|
}
|
|
.index_header .banner .banner_btnContact{
|
|
display: block;
|
|
width: 210px;
|
|
height: 56px;
|
|
border: 1px solid #fff;
|
|
border-radius: 40px;
|
|
text-align: center;
|
|
line-height: 54px;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
margin-top: 80px;
|
|
background: #3c7cdf;
|
|
overflow: hidden;
|
|
z-index: 100;
|
|
}
|
|
.index_header .banner .banner_btnContact{
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
/*支付方式-样式*/
|
|
.payment_box{
|
|
width: 866px;
|
|
height: 416px;
|
|
background: url(../images/payment_bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-top: -210px;
|
|
margin-left: -44px;
|
|
padding: 46px;
|
|
position: relative;
|
|
}
|
|
.payment_box .payment_ul{
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 94px;
|
|
left: 104px;
|
|
}
|
|
.payment_box .payment_ul li{
|
|
width: 24%;
|
|
height: 74px;
|
|
margin-left: 1%;
|
|
margin-right: 2%;
|
|
position: relative;
|
|
}
|
|
.payment_box .payment_ul li a{
|
|
display: block;
|
|
width: 100%;
|
|
height: 74px;
|
|
}
|
|
.payment_box .payment_ul li a .img1{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.payment_box .payment_ul li a .img2{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
.payment_box .payment_ul li a .img3{
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 0;
|
|
}
|
|
.payment_box .payment_ul .payment_item1 a img{
|
|
width: 137px;
|
|
height: 49px;
|
|
}
|
|
.payment_box .payment_ul .payment_item2 a img{
|
|
width: 168px;
|
|
height: 51px;
|
|
}
|
|
.payment_box .payment_ul .payment_item3 a img{
|
|
width: 168px;
|
|
height: 49px;
|
|
}
|
|
.payment_box .payment_ul .payment_item4 a img{
|
|
width: 168px;
|
|
height: 59px;
|
|
margin-left: -9px;
|
|
}
|
|
.payment_box .payment_ul .payment_item5 a img{
|
|
width: 125px;
|
|
height: 38px;
|
|
margin-left: 24px;
|
|
}
|
|
.payment_box .payment_ul .payment_item6 a img{
|
|
width: 135px;
|
|
height: 38px;
|
|
margin-left: 22px;
|
|
}
|
|
.payment_box .payment_ul .payment_item7 a img{
|
|
width: 136px;
|
|
height: 54px;
|
|
}
|
|
.payment_box .payment_ul .payment_item8 a{
|
|
width: 100%;
|
|
font-size: 16px;
|
|
color: #A0A0A0;
|
|
font-family: "苹方黑体-准-简";
|
|
line-height: 74px;
|
|
text-align: center;
|
|
padding-top: 14px;
|
|
}
|
|
/*共同样式*/
|
|
.title_common{
|
|
font-size: 30px;
|
|
color: #444444;
|
|
}
|
|
.centerRe{
|
|
position: relative;
|
|
width: 1200px;
|
|
height: 464px;
|
|
}
|
|
.leftImg_common1{
|
|
position: absolute;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 360px;
|
|
}
|
|
.leftImg_common2{
|
|
width: 64%;
|
|
height: 360px;
|
|
}
|
|
.rightImg_common1{
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
.rightImg_common2{
|
|
width: 72%;
|
|
height: 360px;
|
|
}
|
|
/*丫发卡简介-样式*/
|
|
.about{
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
.about .about_main{
|
|
width: 655px;
|
|
padding: 0 30px;
|
|
}
|
|
.about .about_main .about_title{
|
|
display: block;
|
|
width: 100%;
|
|
text-align: right;
|
|
line-height: 78px;
|
|
padding-top: 40px;
|
|
}
|
|
.about .about_main .about_line{
|
|
display: block;
|
|
width: 62px;
|
|
height: 4px;
|
|
background: #4e7dff;
|
|
}
|
|
.about .about_main .about_txt{
|
|
width: 100%;
|
|
padding-top: 30px;
|
|
}
|
|
.about .about_main .about_txt p{
|
|
font-size: 16px;
|
|
color: #666666;
|
|
line-height: 30px;
|
|
}
|
|
.about .about_main .about_more{
|
|
display: block;
|
|
width: 57px;
|
|
font-size: 14px;
|
|
color: #444444;
|
|
background: url(../images/more_arrow.png) no-repeat right center/21px 15px;
|
|
margin-top: 24px;
|
|
cursor: pointer;
|
|
}
|
|
.about .about_right{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 790px;
|
|
height: 510px;
|
|
}
|
|
.about .about_right .about_rightMain{
|
|
width: 790px;
|
|
height: 510px;
|
|
position: relative;
|
|
}
|
|
.about .about_right .about_rightMain .about_rightImg1{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 348px;
|
|
height: 504px;
|
|
z-index: 2;
|
|
}
|
|
.about .about_right .about_rightMain .about_rightCenter{
|
|
width: 370px;
|
|
}
|
|
.about .about_right .about_rightMain .about_rightCenter .rightCenter_com{
|
|
position: absolute;
|
|
z-index: 9;
|
|
height: 70px;
|
|
}
|
|
.about .about_right .about_rightMain .about_rightCenter .rightCenter_1{
|
|
top: 116px;
|
|
left: 240px;
|
|
width: 259px;
|
|
}
|
|
.about .about_right .about_rightMain .about_rightCenter .rightCenter_2{
|
|
top: 192px;
|
|
left: 240px;
|
|
width: 247px;
|
|
}
|
|
.about .about_right .about_rightMain .about_rightCenter .rightCenter_3{
|
|
top: 275px;
|
|
left: 203px;
|
|
width: 370px;
|
|
}
|
|
.about .about_right .about_rightMain .about_rightCenter .rightCenter_4{
|
|
top: 356px;
|
|
left: 203px;
|
|
width: 317px;
|
|
}
|
|
.about .about_right .about_rightMain .about_rightImg2{
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 632px;
|
|
height: 394px;
|
|
z-index: 1;
|
|
}
|
|
/*自动发卡-流程-样式*/
|
|
.process{
|
|
width: 100%;
|
|
width: 1296px;
|
|
height: 576px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
background: url(../images/process_bg.png);
|
|
margin-top: 100px;
|
|
}
|
|
.process .process_main{
|
|
position: absolute;
|
|
top: 48px;
|
|
left: 48px;
|
|
width: 1200px;
|
|
height: 480px;
|
|
}
|
|
.process .process_main .process_title{
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding-top: 70px;
|
|
}
|
|
.process .process_main .process_line{
|
|
display: block;
|
|
width: 60px;
|
|
height: 3px;
|
|
margin: 16px auto;
|
|
background: #4e7dff;
|
|
}
|
|
.process .process_main .process_h4{
|
|
display: block;
|
|
font-size: 14px;
|
|
color: #999999;
|
|
text-align: center;
|
|
}
|
|
.process .process_main .process_ul{
|
|
width: 100%;
|
|
padding: 0 30px;
|
|
overflow: hidden;
|
|
padding-top: 52px;
|
|
}
|
|
.process .process_main .process_ul li{
|
|
width: 190px;
|
|
text-align: center;
|
|
}
|
|
.process .process_main .process_ul li img{
|
|
transition: all 1s;
|
|
}
|
|
.process .process_main .process_ul li:hover img{
|
|
transform: rotateY(180deg);
|
|
}
|
|
.process .process_main .process_ul li .process_txt1{
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
color: #4E7DFF;
|
|
padding-top: 30px;
|
|
padding-bottom: 16px;
|
|
}
|
|
.process .process_main .process_ul li .process_txt2{
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: #666666;
|
|
}
|
|
/*品牌优势-样式*/
|
|
.advantage{
|
|
width: 100%;
|
|
margin-top: 60px;
|
|
}
|
|
.advantage .advantage_topBox{
|
|
width: 100%;
|
|
height: 464px;
|
|
margin-top: 60px;
|
|
position: relative;
|
|
}
|
|
.advantage .advantage_topBox .advantage_topL{
|
|
top: 0;
|
|
background: url(../images/advantage_topl.png) no-repeat;
|
|
background-size: 100%;
|
|
z-index: 9;
|
|
}
|
|
.advantage .advantage_topBox .advantage_topR{
|
|
bottom: 0;
|
|
background: url(../images/advantage_topr.png) no-repeat;
|
|
background-size: 100%;
|
|
z-index: 20;
|
|
}
|
|
.advantage .advantage_topMain{
|
|
width: 250px;
|
|
height: 100px;
|
|
position: absolute;
|
|
bottom: 32%;
|
|
right: 0;
|
|
z-index: 30;
|
|
}
|
|
.advantage .advantage_topMain .advantage_common{
|
|
display: block;
|
|
width: 100%;
|
|
color: #FFFFFF;
|
|
text-align: right;
|
|
}
|
|
.advantage .advantage_topMain .advantage_title{
|
|
font-size: 30px;
|
|
}
|
|
.advantage .advantage_topMain .advantage_line{
|
|
display: block;
|
|
width: 50px;
|
|
height: 3px;
|
|
background: #dcdcdc;
|
|
margin-left: 200px;
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.advantage .advantage_topMain .advantage_txt{
|
|
font-size: 14px;
|
|
}
|
|
.advantage .advantage_botMain{
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.advantage .advantage_botMain li{
|
|
width: 240px;
|
|
}
|
|
.advantage .advantage_botMain .li_margin{
|
|
margin-left: 40px;
|
|
margin-right: 40px;
|
|
}
|
|
.advantage .advantage_botMain li img{
|
|
width: 240px;
|
|
height: 240px;
|
|
text-align: center;
|
|
}
|
|
.advantage .advantage_botMain li:hover img{
|
|
transition: all 1s;
|
|
/*transform: translateX(180deg);*/
|
|
transform: rotateY(180deg);
|
|
}
|
|
.advantage .advantage_botMain li .advantage_botTxt{
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
color: #444444;
|
|
padding-top: 20px;
|
|
padding-bottom: 16px;
|
|
}
|
|
.advantage .advantage_botMain li .advantage_botP{
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: #909090;
|
|
line-height: 24px;
|
|
}
|
|
/*联系我们-样式*/
|
|
.contact_box .contact_bot{
|
|
width: 100%;
|
|
height: 464px;
|
|
margin-bottom: 80px;
|
|
position: relative;
|
|
}
|
|
.contact_box .contact_bot .contact_botL{
|
|
bottom: 0;
|
|
background: url(../images/contact_botl.png) no-repeat;
|
|
background-size: 100%;
|
|
z-index: 30;
|
|
}
|
|
.contact_box .contact_bot .contact_botR{
|
|
top: 0;
|
|
background: url(../images/contact_botr.png) no-repeat;
|
|
background-size: 100%;
|
|
z-index: 20;
|
|
}
|
|
.contact_box .contact_bot .contact_botMain{
|
|
width: 440px;
|
|
height: 170px;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 20%;
|
|
z-index: 50;
|
|
}
|
|
.contact_box .contact_bot .contact_botMain .contact_botMainTxt{
|
|
width: 100%;
|
|
font-size: 40px;
|
|
color: #FFFFFF;
|
|
}
|
|
.contact_box .contact_bot .contact_botMain .contact_botMainBtn{
|
|
width: 238px;
|
|
height: 68px;
|
|
background: #32ef6f;
|
|
border-radius: 8px;
|
|
font-size: 24px;
|
|
color: #FFFFFF;
|
|
line-height: 68px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
margin-top: 50px;
|
|
}
|
|
/*底部样式*/
|
|
footer{
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
footer .footer_top{
|
|
width: 1200px;
|
|
overflow: hidden;
|
|
}
|
|
footer .footer_top .footer_topLeft li{
|
|
width: 116px;
|
|
margin-right: 60px;
|
|
}
|
|
footer .footer_top .footer_topLeft li .footer_topLeftTit{
|
|
font-size: 18px;
|
|
color: #666666;
|
|
line-height: 50px;
|
|
padding-left: 38px;
|
|
}
|
|
footer .footer_top .footer_topLeft li .footer_icon1{
|
|
background: url(../images/footer_icon1.png) no-repeat left center/26px 26px;
|
|
}
|
|
footer .footer_top .footer_topLeft li .footer_icon2{
|
|
background: url(../images/footer_icon2.png) no-repeat left center/26px 26px;
|
|
}
|
|
footer .footer_top .footer_topLeft li .footer_icon3{
|
|
background: url(../images/footer_icon3.png) no-repeat left center/26px 26px;
|
|
}
|
|
footer .footer_top .footer_topLeft li .footer_icon4{
|
|
background: url(../images/footer_icon4.png) no-repeat left center/26px 26px;
|
|
}
|
|
footer .footer_top .footer_topLeft li .footer_topLeftCon{
|
|
width: 100%;
|
|
}
|
|
footer .footer_top .footer_topLeft li .footer_topLeftCon a{
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 12px;
|
|
color: #666666;
|
|
line-height: 30px;
|
|
padding-left: 40px;
|
|
}
|
|
footer .footer_top .footer_topRight{
|
|
overflow: hidden;
|
|
}
|
|
footer .footer_top .footer_topRight .footer_qrCode{
|
|
margin-top: 10px;
|
|
margin-right: 50px;
|
|
}
|
|
footer .footer_top .footer_topRight .footer_qrCode img{
|
|
display: block;
|
|
width: 98px;
|
|
height: 98px;
|
|
}
|
|
footer .footer_top .footer_topRight .footer_qrCode .rqCode_botTxt{
|
|
display: block;
|
|
font-size: 12px;
|
|
color: #666666;
|
|
line-height: 26px;
|
|
}
|
|
footer .footer_top .footer_topRight .footer_detail{
|
|
width: 218px;
|
|
}
|
|
footer .footer_top .footer_topRight .footer_detail .footer_pCom{
|
|
font-size: 12px;
|
|
color: #666666;
|
|
padding-left: 30px;
|
|
line-height: 36px;
|
|
}
|
|
footer .footer_top .footer_topRight .footer_detail .footer_tell{
|
|
width: 100%;
|
|
font-size: 30px;
|
|
color: #666666;
|
|
}
|
|
footer .footer_top .footer_topRight .footer_detail .footer_tellTime{
|
|
line-height: 28px;
|
|
padding-left: 0;
|
|
padding-bottom: 5px;
|
|
}
|
|
footer .footer_top .footer_topRight .footer_detail .footer_email{
|
|
background: url(../images/footer_email.png) no-repeat left center/22px 22px;
|
|
}
|
|
footer .footer_top .footer_topRight .footer_detail .footer_qq{
|
|
background: url(../images/footer_qq.png) no-repeat left center/22px 22px;
|
|
}
|
|
footer .footer_bottom{
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 56px 0 40px 0;
|
|
font-size: 12px;
|
|
color: #666666;
|
|
text-align: center;
|
|
}
|
|
|
|
|