* { margin: 0; padding: 0; } /* 公用 */ header, section, footer, ul, li, p, dl, dt, dd { margin: 0; padding: 0; } ul, li { list-style: none; } /* pc和移动都需要都 */ header { width: 100%; /*position: fixed; top: 0; left: 0; z-index: 999;*/ } /*测试 class*/ .coral { background-color: lightcoral; } .blue { background-color: lightblue; } .green { background-color: lightgreen; } .pink { background-color: lightpink; } .gray { background-color: lightgray; } /* PC 专用样式 */ @media screen and (min-width: 960px) { .pc { display: block !important; } .mobile { display: none !important; } html, body { width: 100%; height: 100%; } .pc-content { /*width: 100%;*/ /*height: 100%;*/ } header { width: 100%; position: fixed; top: 0; left: 0; z-index: 999; } .header-con { width: 80%; margin: 0 auto; height: 100px; color: #fff; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .scroll-active { background-color: #070D41; } .nav { width: 80%; margin: 0 auto; height: 100px; color: #fff; display: flex; flex-direction: row; justify-content: start; align-items: center; } .nav > li { padding: 10px 25px; font-size: 18px; } .nav > li:first-child { padding-left: 0; padding-bottom: 0; } .nav > li > a { color: #fff; } .top-logo { width:114px; height:35px; border: none; } .register-login-btn { display: flex; flex-direction: row; justify-content: start; align-items: center; font-size :16px; } .register-btn, .login-btn { padding: 4px 15px; border-radius: 4px; cursor: pointer; } .register-btn { border: 1px solid #fff; } .login-btn { border: 1px solid #1D8EFE; background: #1D8EFE; margin-left: 20px; } #banner-swiper{ width: 100%; height: 562px; } .hxz-bullet { display: inline-block; width: 8px; height: 8px; border-radius: 100%; background-color: #fff; opacity:1; margin: 0 4px; padding-top: 1px; } .hxz-bullet-active { width: 30px; padding-top: 1px; border-radius: 10px; background-color: #fff; opacity: 1; } .active { background-color: #1e1e1e!important; } /* banner */ .banner { width: 100%; height: 562px; margin-right: auto; margin-left: auto; overflow: hidden; } /* 核心优势 */ .advantage-main-con { margin-bottom: 100px; } .advantage { margin-bottom: 0; transition: all 0.5s; } .advantage-title, .process-title, .brands-title { text-align: center; font-size: 38px; font-weight: 400; color: #333333; padding: 90px 0; } .advantage-con { width: 80%; margin: 0 auto; display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative; transition: 0.5s; } .pre-advantage { width: 268px; height: 190px; border: 1px solid #DCDCDC; margin: 0 20px; position: relative; background: #FFFFFF; z-index: 0; border-radius: 2px; } .dl-con { width: 100%; height: 100%; text-align: center; background: #FFFFFF; z-index: 0; /* 这个值要保证和 当前容器dom 一致 */ border: none; overflow: hidden; } .dl-con > dt { width: 85px; height: 88px; margin: 25px auto; } .dl-con > dd { font-size: 18px; color: #232323; margin: 0 auto; } .dl-con > .dl-con-ad1 { background: url("../image/ad1.png") no-repeat center center; background-size: cover; } .dl-con > .dl-con-ad2 { background: url("../image/ad2.png") no-repeat center center; background-size: cover; } .dl-con > .dl-con-ad3 { background: url("../image/ad3.png") no-repeat center center; background-size: cover; } .dl-con > .dl-con-ad4 { background: url("../image/ad4.png") no-repeat center center; background-size: cover; } .pre-advantage-details { width: 270px; height: 410px; position: absolute; top: -110px; left: -1px; z-index: 199; background: #fff url("../image/adfooter.png") no-repeat bottom center; box-shadow: 0 6px 18px 1px rgba(57, 124, 255, 0.26); overflow: hidden; display: none; } .ad-details-title { width: 100%; height: 76px; line-height: 76px; text-align: center; color: #fff; font-weight: 400; font-size: 20px; background: linear-gradient(118deg, #0157FF 0%, #538DFF 100%); overflow: hidden; } .ad-details { width: calc(100% - 60px); padding: 30px; color: #333333; font-size: 16px; font-weight: 400; line-height: 28px; word-wrap: break-word; text-align: justify; text-align-last: center; -ms-text-align-last: center; -moz-text-align-last: center; } .mgT20 { margin-top: 80px; } .up-ad-details { display: block; z-index: 199; } .mgB100 { margin-bottom: 150px; } /*入驻流程*/ .progress-main-con { padding-bottom: 90px; background-color: #f9f9fa; } .process-steps, .process-mater { display: flex; flex-direction: row; justify-content: center; align-items: center; } .pro-step { width: 275px; height: 315px; background: #fff; margin: 0 20px; } .pro-ma { width: 590px; height: 190px; background: #fff; margin: 35px 20px 0; background: #fff url("../image/mate-bg.png") no-repeat 100%; } .pro-ma:hover, .pro-step:hover { box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05); } .step-one, .step-two, .step-three, .step-four { width: 58px; height: 58px; text-align: center; margin: 30px auto; } .step-one { background: url("../image/step1.png") no-repeat center center; } .step-two { background: url("../image/step2.png") no-repeat center center; } .step-three { background: url("../image/step3.png") no-repeat center center; } .step-four { background: url("../image/step4.png") no-repeat center center; } .pro-step > dl > dd { height: 20px; font-size: 20px; font-weight: 400; margin: 0 auto; text-align: center; } .pro-step > span { display: block; width: 100px; height: 25px; font-size: 14px; color: #666; background: #F0F0F5; border-radius: 13px; line-height: 25px; margin: 18px auto; text-align: center; } .pro-step > p { font-size: 14px; font-weight: 400; color: #666666; line-height: 28px; text-align: center; padding: 0 20px; } .set-in-ma { height: 20px; font-size: 20px; font-weight: 400; color: #000000; line-height: 20px; text-indent: 30px; margin: 35px 0 15px 68px; } .m-bg { background: url("../image/setIn1.png") no-repeat 0 center; } .n-m-bg { background: url("../image/setIn2.png") no-repeat 0 center; } .optional { display: flex; justify-content: start; flex-direction: row; } .optional > ul:nth-child(1) { margin: 0 50px 0 72px; } .optional > ul > li { font-size: 16px; margin: 15px 0; text-indent: 20px; background: url("../image/arrow.png") no-repeat 0 center; } /*入驻品牌*/ .brand-main-con { padding: 0 0 90px; background: linear-gradient(0deg, #DEE8F9 46%, #FEFEFF 100%); } .brands-title { text-align: center; font-size: 38px; font-weight: 400; color: #333; padding: 90px 0 0; } .brands-tip { text-align: center; font-size: 24px; font-weight: 400; color: #333; opacity: 0.82; padding: 35px 0 30px; } .brand-type { display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 40%; margin: 60px auto 12px; } .pre-image { width: 150px; float: left; margin: 30px 18px; padding: 0; border: 1px solid #cccccc; transform: scale(0.9); } #brand-swiper { position: relative; max-width: 1024px; margin: 0 auto } #brand-swiper { height: 460px; padding-bottom: 10px; } #brand-swiper .swiper-slide { width: 760px; height: 406px; background: #fff; box-shadow: 0 8px 30px #ddd; overflow: hidden; padding: 30px 20px; } #brand-swiper .swiper-slide img{ display:block; } #brand-swiper .swiper-slide p { line-height: 98px; padding-top: 0; text-align: center; color: #636363; font-size: 1.1em; margin: 0; } #brand-swiper .swiper-pagination { width: 100%; /*bottom: 20px;*/ } #brand-swiper .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; border: 3px solid #fff; background-color: #d5d5d5; width: 10px; height: 10px; opacity: 1; } #brand-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active { border: 3px solid #00aadc; background-color: #fff; } #brand-swiper-pagination { text-align:center; } #brand-swiper-pagination { width: 800px; margin: 40px auto 20px; display: flex; flex-direction: row; justify-content: space-around; align-items: center; } .pre-title-span { height: 30px; line-height: 30px; cursor: pointer; font-size: 20px; font-weight: 400; color: #000; text-indent: 33px; } .pre1 { background: url("../image/clothes.png") no-repeat 0 center; background-size: 40%; } .pre2 { background: url("../image/electrical.png") no-repeat 0 center; background-size: 40%; } .pre3 { background: url("../image/food.png") no-repeat 0 center; background-size: 40%; } .pre4 { background: url("../image/maternal.png") no-repeat 0 center; background-size: 40%; } .active-custom-title { color: #1966FF; } /*关于我们-底部*/ .contact { height: 243px; background: url("../image/footer-bg.png") no-repeat center 0; background-size: 100% 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .contact > p { letter-spacing: 2px; text-align: center; font-size: 26px; font-weight: 400; color: #FFFFFF; line-height: 46px; } .contact > p > span { color: #1966FF; } .about-con { height: 200px; color: #fff; background: #242A37; display: flex; flex-direction: row; justify-content: center; align-items: center; font-size: 14px; } .about-list, .about-us {} .about-list { height: 110px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid #50555f; padding-right: 80px; } .about-list > ul { height: 66px; font-size: 18px; font-weight: 400; color: #FFFFFF; display: flex; flex-direction: row; justify-content: space-around; } .about-list > ul > li { height: 30px; padding: 0 40px; line-height: 30px; border-right: 1px solid #50555f; cursor: pointer; } .about-list > ul > li:last-child { border: none; } .about-list a { color: #fff; } .about-gs { font-size: 14px; font-weight: 400; color: #959BA8; } .about-us { margin-left: 80px; } .about-us > p { letter-spacing: 1px; font-weight: 400; color: #959BA8; line-height: 26px; } .about-us .us-title { font-size: 18px; font-weight: 400; color: #FFFFFF; line-height: 40px; } /* 公共样式 */ /*增加 手指标*/ .custom-cursor { cursor: pointer; } /* 取消a标签默认样式 */ a { text-decoration: none; } /*正常的未被访问过的链接*/ a:link { text-decoration: none; } /*已经访问过的链接*/ a:visited { text-decoration: none; } /*鼠标划过(停留)的链接*/ a:hover { text-decoration: none; } /* 正在点击的链接*/ a:active { text-decoration: none; } /* 可以自定义 滚动条样式 */ /* 滚动条宽度 */ /*::-webkit-scrollbar {*/ /* width: 12px;*/ /* height: 12px;*/ /*}*/ /* 滚动条的滑块 */ /*::-webkit-scrollbar-thumb {*/ /* background-color: #c0ccda;*/ /* border-radius: 6px;*/ /*}*/ } /* pc end */ /* 移动端 专用样式 */ @media screen and (max-width: 961px) { .pc { display: none !important; } .mobile { display: block !important; } } /* mobile end */