.pricing { background: #f3f7fd; padding: 7.876rem 0 2.25rem 0; } .scheme { display: flex; justify-content: center; margin-bottom: 2.55rem; } .subject { display: flex; justify-content: space-around; } .common { width: 32%; box-sizing: border-box; border: 1px solid #dddddd; /* display: flex; */ /* flex-direction: column-reverse; */ background: #ffffff; transition:all 1s ease-out; } .subject a { color: #fff; text-decoration:none } .common .upper { text-align: center; padding-top: 2.2rem; border-bottom: 1px solid #dddddd; position: relative; } .common .upper span { display: inline-block; width: 6rem; height: 2rem; background: #03a9f5; line-height: 2rem; color: #ffffff; margin-top: .4rem; margin-bottom: 1.6rem; transition:all 0.5s ease-out; } .sale::after { content: "*热销*"; position: absolute; top: .4rem; left: 43%; font-size: 14px; color: #15c381; } .common .upper p { margin-bottom: 0.75rem; } .middle { padding: 1.6rem 1.2rem 0 1.2rem; height: 16rem; border-bottom: 1px solid #dddddd; } .middle i, .whole i { display: inline-block; margin-right: .4rem; } .whole { height: 32rem; padding: 1.6rem 1.2rem 0 1.2rem; } .total { color: #f26522; } .customization { text-align: center; margin: 6.6rem 0 3.2rem 0; } .simple:hover, .basics:hover, .specialty:hover{ cursor:pointer; background: #eafdf3; border: 1px dashed #5abf87; transform:scale(1.05); } .simple:hover .upper span, .basics:hover .upper span, .specialty:hover .upper span { background: #f0483e; } /* 弹出层样式 */ .popups { position: absolute; /* background: ; */ } /* 使用说明样式 */ .instructions { width: 100%; height: 100%; background: rgba(0, 0, 0, .7); position: fixed; top: 0; z-index: 9999; } .popup { width: 40rem; height: 20rem; margin: auto; box-sizing: border-box; background: #fff; margin-top: 8.333333rem; position: relative; z-index: 999999999999999999999; } .use { padding: 1rem; height: 3.5rem; } .use h5 { float: left; } .use span { float: right; cursor:pointer; } .use span:hover { color: red; } .docums { padding: 3rem 1rem 0 1rem; } /* 新写的 */ .indx { font-size: 1.375rem; color: #fff; width: 34.375rem; margin-top: 23rem; text-align: left; margin-left: 38.625rem; line-height: 35px; margin-bottom: 1.5rem; } .ald { display: flex; /* justify-content: flex-end; */ } .all { width: 15rem; height: 5rem; background: #fff; color: #4bd0ff; font-size: 1.625rem; } .allsal { width: 15rem; line-height: 5rem; background: #fff; text-align: center; border-radius: 5rem; text-decoration: none; margin: 0 4.375rem 1.875rem 0; font-size: 1.625rem; font-weight: bold; color: #2fc9ff !important; } .allsal:hover { text-decoration: none; cursor:pointer; } .navbar-custom .navbar-brand.logo-image img { /* width: 4.4375rem; height: 1.75rem; */ width: 8.875rem; height: 3.0625rem; } .tabls { position: relative; display: flex; /* width: 41.875rem; */ justify-content: flex-end; margin-top: -12px; } .tabls div { margin-left: 3.4375rem; } .tabls div a { text-decoration: none; font-size: 1.125rem; color: #5e5e5e; } .tabls div a:hover { text-decoration: none; } .navbar-custom.top-nav-collapse { background-color: #fff !important; } .product { width: 100%; background: #fff; text-align: center; } .pro_tops { padding-top: 8.625rem; padding-bottom: 3.75rem; } .pro_tops h2 { font-size: 2.5rem; color: #666666; } .pro_tops p { font-size: 1.125rem; margin-top: 1rem; margin-bottom: 1.8125rem; } .pro_tops div { font-size: 1.125rem; line-height: 2.5rem; width: 55.625rem; margin: auto; } .pro_con { display: flex; justify-content: center; } .pro_con img { width: 82.3125rem; height: 26.25rem; } .process { background: #fff; text-align: center; width: 80rem; margin:auto; position: relative; } .process_til { padding: 5.9375rem 0 6.25rem 0; } .process_til h2 { font-size: 2.5rem; color: #666666; } .process_til p { font-size: 1.125rem; color: #666666; margin-top: 1rem; } .process_con { display: flex; justify-content: space-between; position: relative; } .process_ctn { width: 14.875rem; height: 19.25rem; border: .0625rem solid #aeaeae; border-radius: .9375rem; position: relative; cursor:pointer; } .process_ctn:hover { border: .0625rem solid #1296db; } .process_ctn:hover h4{ color:#1296db; } .process_ctn:hover span{ background:#1296db; } .xm1:hover .pro_im1{ background-image: url(../images/img/xmcj.png); } .xm2:hover .pro_im2{ background-image: url(../images/img/ygtbs.png); } .xm3:hover .pro_im3{ background-image: url(../images/img/xmjls.png); } .xm4:hover .pro_im4{ background-image: url(../images/img/hzsjs.png); } .xm5:hover .pro_im5{ background-image: url(../images/img/tjbs.png); } .pro_im1 { width: 7.5rem; height: 5rem; background-image: url(../images/img/xmcjs.png); background-size: 100%; position: absolute; top: -2.5rem; left: 3.75rem; } .pro_im2 { width: 7.5rem; height: 5rem; background-image: url(../images/img/ygtb.png); background-size: 100%; position: absolute; top: -2.5rem; left: 3.75rem; } .pro_im3 { width: 7.5rem; height: 5rem; background-image: url(../images/img/xmjl.png); background-size: 100%; position: absolute; top: -2.5rem; left: 3.75rem; } .pro_im4 { width: 7.5rem; height: 5rem; background-image: url(../images/img/hzsj.png); background-size: 100%; position: absolute; top: -2.5rem; left: 3.75rem; } .pro_im5 { width: 7.5rem; height: 5rem; background-image: url(../images/img/tjb.png); background-size: 100%; position: absolute; top: -2.5rem; left: 3.75rem; } .process_ctn h4 { padding-top: 3.4375rem; font-size: 1.625rem; color: #434343; padding-bottom: 0.5rem; } .process_ctn span { /* margin-top: 1.25rem; */ height: .3125rem; display: block; background: #aeaeae; margin: auto; width: 3.75rem; } .alp { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .alp p { font-size: 1.375rem; color: #7a7a7a; width: 100%; text-align: center; margin-bottom: 1rem; } .features { text-align: center; margin-top: 1.875rem; } .chul { display: flex; justify-content: space-between; width: 75rem; margin: auto; flex-wrap: wrap; } .chul div { width: 13.75rem; height: 5.3125rem; background: #fff; box-shadow: 0px 1px 5px #888888; font-size: 1.5rem; color: #666666; display: flex; justify-content: center; align-items: center; margin-bottom: 1.125rem; cursor: pointer; } .chul div img { width: 2.25rem; height: 2.375rem; margin-right: 1.5rem; } .chul .on { box-shadow: 0px 0px 0px #fff; border: .125rem solid #107bff; } .feat_bottom { margin-top: 1.75rem; text-align: center; } .feat_bottom h5 { font-size: 1.5rem; color: #666666; padding-bottom: 1.875rem; } .lis { width: 62.5rem; height: 30.75rem; margin: auto; } .feat { width: 100%; height: 30.75rem; overflow: hidden; margin: auto; background-image: url(../images/img/bj.png); background-size:100% 100% } .lis img { width: 100%; height: 100%; } .show { display: block; } .hide { display: none; } .rectangular { text-align: center; } .rect_con { width: 80.9375rem; height: 17.5rem; margin: auto; } .rect_con img { width: 100%; height: 100%; } .advantage { text-align: center; } .advant_con { width: 75.1875rem; height: 43.625rem; margin: auto; } .advant_con img { width: 100%; height: 100%; margin-left: 6.25rem; } .customer { text-align: center; } .aldd { padding-top: 0; padding-bottom: 0; } /* 测试 */ .containerss{ width:1000px; height:450px; overflow:hidden; position:relative; margin:0 auto; } .listss{ width:3000px; height:450px; position:absolute; } .listss img{ width:1000px; height:450px; float:left; } .buttss{ width:300px; height:20px; position:absolute; left: 456px; bottom:-30px; cursor:pointer; } .buttss span{ width: .75rem; height: .75rem; border-radius: 50%; position: relative; border: 1px solid #000; display: inline-block; margin-right: 1.25rem; } .arrows{ width: 2.5rem; height: 60px; position: absolute; top: 42%; cursor: pointer } .lefts{ left: 0; } .rights{ right: 0; } .ons i::after { content: ''; width: .5rem; height: .5rem; background: #000; border-radius: 50%; position: absolute; top: 1px; left: 1px; } .cust { text-align: center; margin-top: 3.125rem; } .cust h6 { font-size: 1.875rem; color: #393939; margin-bottom: 1.625rem; } .cust p { width: 48.75rem; margin: auto; font-size: 1.5rem; color: #7f7f7f; line-height: 2.625rem; } .pricings { text-align: center; } .pri { display: flex; justify-content: space-between; width: 94rem; margin: auto; } .li { text-align: center; background: #fff; padding: .625rem; box-shadow: 0px 1px 20px 0px #c8c8c8; cursor: pointer; transition: all .25s ease-in; } .li_con { width: 21.875rem; height: 17.5rem; background: #f3f3f3; box-sizing: border-box; padding-top: 4.875rem; /* display: flex; align-items: center; flex-wrap: wrap; */ } .li_con div { width: 100%; text-align: center; font-size: 2.375rem; color: #565656; margin-bottom: 2.375rem; } .li_con div span{ font-size: 3.75rem; } .li li { width: 100%; height: 3rem; font-size: 1.125rem; line-height: 3rem; text-align: center; list-style-type:none; color: #b5b0b0; } .li li:nth-child(2n) { background: #f3f3f3; } .btn { width: 11.875rem; height: 3rem; margin: auto; background-image: url(../images/img/xg.png); background-size: 100%; margin-bottom: .625rem; border:0; background-repeat:no-repeat; } .li:hover { /* position: relative; top: -1.25rem; */ transform:translateY(-20px); } .li:hover .btn{ background: url(../images/img/xgs.png); background-repeat:no-repeat; } .li:hover .li_con{ background: linear-gradient(to left,#4daefe,#01f1fe); } .li:hover .li_con div{ color: #fff; } .btn a { display: inline-block; width: 100%; height: 100%; } .al a{ color: #407be7 !important; } .al { position: relative; } .al::after { content: ''; width: 100%; height: .1875rem; background: #407be7; position: absolute; bottom: -1.25rem; left: 0; } .pro_con_pl { width: 79.6875rem; height: 13.375rem; margin: auto; } .pro_con_pl img { width: 116%; height: 100%; margin-left: -8%; } .service2s { display: block; position: fixed; top: 10.8rem; /* bottom: 10rem; */ right: 0; padding: 1rem; background: #fff; box-shadow: 3px 3px 10px #ccc; z-index: 99999999; text-align: center; } .service2s img { width: 8rem; } .service2s p { margin-bottom: 0; margin: 0.5rem 0; } .service2s p:last-child { color: #20a0ff; } .aplll { margin-left: 20%; }