* { margin: 0; padding: 0; } body { font-family: monospace; position: relative; } input { background: none; outline: none; border: none; } @media screen and (min-width:1680px) { .pospal{ background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 282px 0 315px 456px; } } @media screen and (max-width:1680px) and (min-width:992px) { .pospal{ padding:282px 0 315px 235px; background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; } } .pospal-title { font-size: 62px; font-family: alibaba puhuiti 2; font-weight: normal; color: #ffffff; line-height: 78px; margin-bottom: 24px; } .pospal-subtitle { font-size: 24px; font-family: alibaba puhuiti 2; font-weight: normal; color: #ffffff; line-height: 30px; } .pospal-window { margin-top: 47px; width: 354px; height: 206px; background: #ededed; border-radius: 5px; padding-top: 13px; text-align: center; } .pospal-window_title { font-size: 22px; font-family: microsoft yahei; font-weight: normal; color: #777777; } .pospal-window_input { display: block; width: 305px; height: 40px; background: #ffffff; margin: 9px auto 0; text-align: center; border-radius: 5px; font-size: 20px; font-family: microsoft yahei; font-weight: normal; color: #c6c6c6; line-height: 40px; } .pospal-window_button { width: 183px; height: 41px; background: #286af8; border-radius: 21px; font-size: 20px; font-family: microsoft yahei; font-weight: normal; color: #ffffff; line-height: 41px; margin: 13px auto 0; } .specialty { background: #fff; text-align: center; } .specialty-title { font-size: 30px; font-family: microsoft yahei; font-weight: normal; color: #464c56; padding: 99px 0 69px; } .specialty-subtitle { font-size: 18px; font-family: microsoft yahei; font-weight: 400; color: #aeaeae; } .specialty-imgbox { margin: 75px 0 107px; display: inline-block; width: 495px; height: 357px; background: ; background-repeat: no-repeat; background-size: contain; background-position: center center; position: relative; } .specialty-imgbox_text { width: 100%; height: 70px; background: #3892f9; line-height: 70px; font-size: 18px; font-family: microsoft yahei; font-weight: normal; color: #ffffff; position: absolute; bottom: 0; } .specialty-imgbox1 { margin-left: 27px; background: ; background-repeat: no-repeat; background-size: contain; background-position: center center; } .wisdom { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; } .wisdom-title { text-align: center; font-size: 30px; font-family: microsoft yahei; font-weight: 600; color: #464c56; padding: 136px 0 83px; } .wisdom-title_show { opacity: 0; } .wisdom-content { display: flex; flex-direction: row; justify-content: center; padding-bottom: 133px; } .wisdom-content_left { width: 514px; background: #286af8; border-radius: 20px 0px 0px 20px; padding: 24px 0 39px 81px; box-sizing: border-box; } .wisdom-content_left-top { display: flex; flex-direction: row; justify-content: space-between; } .wisdom-content_left-top-title { font-size: 20px; font-family: microsoft yahei; font-weight: bold; color: #fff; line-height: 40px; } .wisdom-content_left-top-icon { width: 40px; height: 40px; background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; margin-right: 111px; } .wisdom-content_left-item { margin-top: 35px; } .wisdom-content_left-item_number { width: 65px; height: 65px; background: #ffffff; border-radius: 10px; font-size: 35px; font-family: din black; font-weight: 400; color: #286af8; line-height: 65px; text-align: center; display: inline-block; vertical-align: top; } .wisdom-content_left-item_content { display: inline-block; margin-left: 60px; } .wisdom-content_left-item_content .title { font-size: 18px; font-family: microsoft yahei; font-weight: 400; color: #fff; } .wisdom-content_left-item_content .item-content { font-size: 14px; font-family: microsoft yahei; font-weight: 400; color: rgba(255, 255, 255, 0.6); } .wisdom-content_right { width: 514px; background: #262e3b; border-radius: 0px 20px 20px 0px; padding: 24px 80px 39px 0; box-sizing: border-box; text-align: right; } .wisdom-content_right-top { display: flex; flex-direction: row; justify-content: space-between; } .wisdom-content_right-top-title { font-size: 20px; font-family: microsoft yahei; font-weight: bold; color: #fff; line-height: 40px; } .wisdom-content_right-top-icon { margin-left: 94px; width: 40px; height: 40px; background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; transform: rotatey(180deg); } .wisdom-content_right-item { float: right; margin-top: 35px; } .wisdom-content_right-item_number { width: 65px; height: 65px; background: #286af8; border-radius: 10px; font-size: 35px; font-family: din black; font-weight: 400; color: #ffffff; line-height: 65px; text-align: center; display: inline-block; vertical-align: top; } .wisdom-content_right-item_content { display: inline-block; margin-right: 60px; } .wisdom-content_right-item_content .title { font-size: 18px; font-family: microsoft yahei; font-weight: 400; color: #fff; } .wisdom-content_right-item_content .item-content { font-size: 14px; font-family: microsoft yahei; font-weight: 400; color: rgba(255, 255, 255, 0.6); } .quick { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 102px 0 91px; } .quick-title { text-align: center; font-size: 30px; font-family: microsoft yahei; font-weight: 600; color: #fff; } .quick-quota { display: flex; justify-content: center; margin: 87px 0 56px; flex-direction: row; text-align: center; font-size: 18px; font-family: microsoft yahei; font-weight: normal; color: #fff; } .quick-quota-1 { margin: 24px 57.5px 0; } .quick-quota-2 { margin: 24px 57.5px 0; } .quick-quota-3 { margin: 24px 57.5px 0; } .quick-quota-4 { margin: 24px 57.5px 0; } .quick-imgbox { display: flex; justify-content: center; flex-direction: row; text-align: center; } .quick-imgbox .quick-img { width: 326px; height: 256px; border-radius: 10px; position: relative; margin: 0 10px 0; } .quick-imgbox .quick-img .quick-text { height: 71px; font-size: 22px; font-family: microsoft yahei; font-weight: 600; color: #7e7e7e; line-height: 71px; position: absolute; bottom: 0; width: 100%; } .quick-imgbox .img1 { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; } .quick-imgbox .img2 { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; } .quick-imgbox .img3 { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; } .advantage { padding: 126px 0 182px; } .advantage-title { text-align: center; font-size: 30px; font-family: microsoft yahei; font-weight: 600; color: #464c56; } .advantage-content { width: 1030px; margin: 61px auto 0; display: flex; flex: 1; } .advantage-content-imgbox { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; width: 756px; height: 357px; margin-right: 5px; } .advantage-content-1 { background: rgba(38, 46, 59, 1); padding: 0 25px 20px 29px; width: 467px; box-sizing: border-box; margin-top: 4px; } .advantage-content-1 .title { font-size: 20px; font-family: microsoft yahei; font-weight: normal; color: #fff; line-height: 58px; } .advantage-content-1 .item-content { font-size: 18px; font-family: microsoft yahei; font-weight: normal; color: #fff; } .advantage-content-2 { display: inline-block; width: 230px; height: 219px; background: rgba(40, 106, 248, 1); font-size: 18px; font-family: microsoft yahei; font-weight: normal; color: #fff; letter-spacing: 2px; line-height: 48px; text-align: center; padding-top: 24px; box-sizing: border-box; margin-top: 3px; } .advantage-content-3 { display: inline-block; float: right; width: 230px; height: 219px; background: #afafaf; font-size: 18px; font-family: microsoft yahei; font-weight: normal; color: #747474; letter-spacing: 2px; line-height: 48px; text-align: center; padding-top: 24px; box-sizing: border-box; margin-top: 3px; } .data { background: #fff; padding-top: 139px; padding-bottom: 458px; text-align: center; } .data-title { font-size: 30px; font-family: microsoft yahei; font-weight: 600; color: #464c56; } .data-subtitle { font-size: 18px; font-family: microsoft yahei; font-weight: 400; color: #aeaeae; margin: 23px 0 73px; } .data-imgbottom { width: 1026px; height: 207px; margin: 0 auto; background: rgba(40, 106, 248, 1); position: relative; } .data-imgbottom .img { position: absolute; width: 915px; height: 461px; background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; left: 50%; top: 34px; transform: translate(-50%); font-size: 16px; font-family: microsoft yahei; font-weight: normal; color: #464c56; line-height: 17px; text-align: center; } .data-imgbottom .img-text1 { position: absolute; right: 144px; top: 38px; } .data-imgbottom .img-text2 { position: absolute; right: 219px; top: 205px; } .data-imgbottom .img .bluefont { font-size: 19px; font-family: microsoft yahei; font-weight: 600; color: #1484ff; line-height: 36px; } .pattern { text-align: center; padding: 94px 0 120px; } .pattern-title { font-size: 30px; font-family: microsoft yahei; font-weight: 600; color: #464c56; } .pattern-subtitle { font-size: 18px; font-family: microsoft yahei; font-weight: 400; color: #aeaeae; margin: 24px 0 58px; } .pattern-content { display: flex; flex-direction: row; justify-content: center; margin-bottom: 75px; } .pattern-content-img { width: 320px; height: 180px; background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; } .pattern-content .img1 { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; margin-left: 14px; } .pattern-content-text { height: 180px; background: rgba(40, 106, 248, 1); padding: 36px 34px 36px 21px; box-sizing: border-box; font-size: 16px; font-family: microsoft yahei; font-weight: normal; color: #fff; line-height: 24px; text-align-last: left; } .pattern-content-text .title { font-size: 20px; font-family: microsoft yahei; font-weight: 400; color: #fff; padding-bottom: 23px; } .pattern-imgbottom { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; width: 1014px; height: 327px; margin: 0 auto; } .recognition { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 61px 0 66px; } .recognition-title { font-size: 30px; font-family: microsoft yahei; font-weight: 400; color: #fff; text-align: center; } .recognition-subtitle { font-size: 18px; font-family: microsoft yahei; font-weight: normal; color: #fff; padding: 23px 0 56px; text-align: center; } .recognition-content { display: flex; flex-direction: row; justify-content: center; } .recognition-content_left { margin-top: 20px; margin-right: -3px; counter-reset: addnumber; } .recognition-content_left .title { width: 279px; height: 52px; background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; line-height: 52px; font-size: 20px; font-family: microsoft yahei; font-weight: normal; color: #fff; text-align: center; } .recognition-content_left .item-content { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; width: 279px; height: 303px; margin-top: 25px; margin-bottom: 32px; padding: 35px 45px 0; box-sizing: border-box; position: relative; text-align-last: left; } .recognition-content_left .item-content .content_title { font-size: 17px; font-family: microsoft yahei; font-weight: normal; color: #fff; } .recognition-content_left .item-content .content_text { font-size: 14px; font-family: microsoft yahei; font-weight: normal; color: #fff; position: absolute; bottom: 20px; line-height: 30px; } .recognition-content_left .tips { font-size: 14px; font-family: microsoft yahei; font-weight: normal; color: #aab0c2; line-height: 20px; } .recognition-content_left .tips::before { display: inline-block; counter-increment: addnumber; content: counter(addnumber); margin: 0 5px; width: 15px; height: 15px; background: #5fa1f5; border-radius: 8px; font-size: 14px; font-family: microsoft yahei; font-weight: normal; color: #fff; line-height: 15px; text-align: center; } .recognition-content_middle .title { width: 279px; height: 52px; background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; line-height: 52px; font-size: 25px; font-family: microsoft yahei; font-weight: normal; color: #fff; margin: 0 auto; text-align: center; } .recognition-content_middle .item-content { background: ; background-repeat: no-repeat; background-size: contain; background-position: center center; width: 432px; height: 437px; } .recognition-content_right { margin-top: 20px; margin-left: -3px; counter-reset: addnumber; } .recognition-content_right .title { width: 279px; height: 52px; background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; line-height: 52px; font-size: 20px; font-family: microsoft yahei; font-weight: normal; color: #fff; text-align: center; } .recognition-content_right .item-content { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; width: 279px; height: 303px; margin-top: 25px; margin-bottom: 32px; padding: 35px 13px 0; box-sizing: border-box; position: relative; text-align-last: left; } .recognition-content_right .item-content .content_text { font-size: 14px; font-family: microsoft yahei; font-weight: normal; color: #fff; position: absolute; bottom: 20px; line-height: 30px; } .recognition-content_right .tips { font-size: 14px; font-family: microsoft yahei; font-weight: normal; color: #aab0c2; line-height: 20px; } .recognition-content_right .tips::before { display: inline-block; counter-increment: addnumber; content: counter(addnumber); margin: 0 5px; width: 15px; height: 15px; background: #5fa1f5; border-radius: 8px; font-size: 14px; font-family: microsoft yahei; font-weight: normal; color: #fff; line-height: 15px; text-align: center; } .lightspot { background: #ffffff; padding-bottom: 162px; text-align: center; } .lightspot-title { padding: 124px 0 77px; font-size: 30px; font-family: microsoft yahei; font-weight: 400; color: #323232; } .lightspot-content { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; width: 1200px; margin: 0 auto; } .lightspot-content-item { width: 334px; height: 272px; border: 1px solid #bfbfbf; padding: 29px 0 33px; box-sizing: border-box; margin: 0 7px 23px; } .lightspot-content-item .img { width: 69px; height: 69px; } .lightspot-content-item .title { font-size: 18px; font-family: microsoft yahei; font-weight: bold; color: #2c364f; margin: 22px 0 13px; } .lightspot-content-item .subtitle { font-size: 14px; font-family: microsoft yahei; font-weight: normal; color: #878787; margin: 13px 0 25px; } .lightspot-content-item .btn { width: 121px; height: 33px; background: #4d84ff; line-height: 33px; text-align: center; font-size: 14px; font-family: microsoft yahei; font-weight: normal; color: #f8fafb; margin: 0 auto; } .lightspot-content-item:hover { border: 2px solid #4d84ff; cursor: pointer; } .sorts { text-align: center; padding: 106px 0 48px; background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; } .sorts-title { font-size: 30px; font-family: microsoft yahei; font-weight: 400; color: #fff; margin-bottom: 124px; } .sorts-content { display: flex; flex-direction: row; justify-content: center; } .sorts-content-item { width: 206px; height: 460px; text-align: center; line-height: 460px; font-size: 18px; font-family: microsoft yahei; font-weight: normal; color: #ffffff; } .sorts-content .item1 { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; } .sorts-content .item2 { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; } .sorts-content .item3 { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; } .sorts-content .item4 { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; } .sorts-content .item5 { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; } .sorts-content .dispatch { width: 582px; height: 344px; position: relative; background-size: cover; visibility: hidden; } .sorts-content .dispatch .text { position: absolute; bottom: -116px; width: 100%; height: 116px; text-align: center; background: rgba(77, 132, 255, 1); } .sorts-content .dispatch .text .title { padding-top: 26px; padding-bottom: 23px; font-size: 18px; font-family: microsoft yahei; font-weight: normal; color: #ffffff; } .sorts-content .dispatch .text .item-content { padding-bottom: 34px; font-size: 14px; font-family: microsoft yahei; font-weight: normal; color: #fff; } .sorts .controller { display: flex; flex-direction: row; justify-content: center; margin-top: 70px; } .sorts .controller-item { width: 13px; height: 13px; background: #949494; border-radius: 50%; margin: 13px; } .sorts .controller-item_selected { width: 13px; height: 13px; background: #286af8; border-radius: 50%; margin: 13px; } .example { background: #fff; } .example-title { font-size: 30px; font-family: microsoft yahei; font-weight: 400; color: #323232; padding-top: 97px; padding-bottom: 105px; text-align: center; } .example-content { padding-bottom: 154px; display: flex; flex-direction: row; justify-content: center; font-size: 18px; font-family: microsoft yahei; font-weight: normal; color: #5b5b5b; } .example-content-left { width: 551px; height: 422px; box-sizing: border-box; background: ; background-repeat: no-repeat; background-size: contain; background-position: center center; position: relative; } .example-content-left .text { position: absolute; top: -31px; left: -52px; } .example-content-right { margin-left: 95px; } .example-content-right .item1 { width: 333px; height: 70px; line-height: 70px; border-bottom: 1px solid rgba(91, 91, 91, 0.5); } .example-content-right .item2 { width: 333px; height: 150px; border-bottom: 1px solid rgba(91, 91, 91, 0.5); display: flex; flex-direction: row; align-items: center; } .example-content-right .item2 .text { padding-left: 26px; display: inline-block; } .example-content-right .item2 .text .blue-text { font-size: 55px; font-family: microsoft yahei; font-weight: 600; color: #3892f9; } .example-content-right .item2 .img { width: 94px; height: 94px; } .end { background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; background-color: #fff; padding-top: 654px; } .end-content { width: 100%; background: rgba(41, 117, 255, 1); color: white; display: flex; flex-direction: row; justify-content: center; padding: 66px 0 72px; } .end-content .img { width: 116px; height: 116px; background: #ffffff; border-radius: 2px; position: relative; margin-top: 8px; } .end-content .img .imgpos { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .end-content .text { font-size: 26px; font-family: microsoft yahei; font-weight: normal; color: #f7fbfe; margin-left: 43px; } .end-content .btn { width: 216px; height: 40px; background: #ffffff; border-radius: 10px; font-size: 17px; font-family: alibaba puhuiti 2; font-weight: 600; color: #2975ff; text-align: center; line-height: 40px; margin-top: 15px; } .show { position: fixed; top: 50%; left: 50%; width: 80vw; height: 80vh; background: rgba(0, 0, 0, 0.67); transform: translate(-50%, -50%); display: none; justify-content: center; align-items: center; } .show .img { display: inline-block; } .show .text { width: 264px; margin-left: 106px; } .show .text .title { font-size: 20px; font-family: microsoft yahei; font-weight: 600; color: #fefefe; line-height: 127px; } .show .text .item-content { font-size: 16px; font-family: microsoft yahei; font-weight: normal; color: #fefefe; line-height: 30px; } .show .btn { width: 19px; height: 19px; font-size: 18px; font-family: microsoft yahei; font-weight: normal; color: #fefefe; background: ; background-repeat: no-repeat; background-size: cover; background-position: center center; position: absolute; top: 40px; right: 234px; } .fixed { width: 182px; height: 428px; background-color: #ffffff; box-shadow: 3px 4px 37px 1px rgba(159, 163, 168, 0.35); border-radius: 10px 0 0 10px; position: fixed; top: 426px; right: 0; z-index: 2; overflow: hidden; } .fixed-code { height: 237px; background-color: #f27c4a; color: #ffffff; text-align: center; position: relative; padding-top: 22px; } .fixed-code_img-box { width: 137px; height: 137px; background-color: #ffffff; border-radius: 10px; position: relative; margin: 0 auto; margin-bottom: 14px; } .fixed-code_img { position: absolute; left: 50%; top: 50%; width: 123px; height: 123px; background-size: 100% 100%; background-image: ; transform: translate(-50%, -50%); } .fixed-code_text { font-size: 20px; line-height: 25px; letter-spacing: 0px; color: #f7fbfe; } .fixed-phone_img { margin: 30px auto; width: 37px; height: 37px; background-image: ; } .fixed-phone { text-align: center; } .fixed-phone_text { font-size: 20px; line-height: 30px; letter-spacing: 0px; color: #151341; }