/* 20220909 调整字体字号 */

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body * {
    box-sizing: border-box;
    font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","PingFang SC","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}

h1, h2, p {
    margin: 0;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clear:after {
    content: '';
    display: table;
    clear: both;
}

.mt115 {
    margin-top: 115px;
}

.mt20 {
    margin-top: 20px;
}

.mb7 {
    margin-bottom: 16px;
}

.mb13 {
    margin-bottom: 13px;
}

.mb19 {
    margin-bottom: 19px;
}

.mb24 {
    margin-bottom: 24px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb44 {
    margin-bottom: 50px;
}

.mb65 {
    margin-bottom: 60px;
}

.mb116 {
    margin-bottom: 100px;
}

.mb120 {
    margin-bottom: 120px;
}

.ml26 {
    margin-left: 26px;
}

.ml3 {
    margin-left: 3px;
}

.ml10 {
    margin-left: 10px;
}

.mr13 {
    margin-right: 13px;
}

.mr73 {
    margin-right: 73px;
}

.mr76 {
    margin-right: 76px;
}

.text-align-center {
    text-align: center;
}

.text-align-right {
    text-align: right;
}

.text-align-left {
    text-align: left;
}

.blue-text {
    color: #22A1F5;
}

.nowrap {
    white-space: nowrap;
}

.out-container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.out-container .content {
    width: 1200px;
    margin: 0 auto;
    color: #000;
    font-size: 22px;
    line-height: 1.6em;
}

.first {
    background: url("../img/top_back.png") top right no-repeat;
    height: 850px;
    padding-top: 85px;
}

.shop .first {
    background: url("../img/shop-first-back.png") top right no-repeat;
}

.sale .first {
    background: url("../img/top_back_sale.png") top right no-repeat;
}

.track .first {
    background: url("../img/top_back_track.png") top right no-repeat;
}

.logo {
    margin-bottom: 110px;
}

.more_features{
    height: 187px;
    background-color: white;
    border-top: 2px solid #F2F2F2;
}
.more_features .content{
    position: relative;
    height: 100%;
    margin: 0 auto;
}
.more_features .more_features_left_title{
    position: absolute;
    left: 0;
    top: 0;
    width: 240px;
    height: 100%;
}
.more_features .more_features_left_title span{
    color: #22A1F5;
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    line-height: 49px;
    position: absolute;
    top: 50%;
    width: 100%;
    left: 0;
    margin-top: -31px;
}
.more_features .more_features_left_title img{
    position: relative;
    top: 12px;
    margin-left: 10px;
}
.more_features .more_features_right{
    position: relative;
    height: 100%;
    padding-left: 240px;
    text-align: center;
}
.more_features .more_features_right .feature{
    width: 299px;
    height: 68px;
    background: #FFFFFF;
    border: 1px solid #DFDFDF;
    border-radius: 8px;
    display: inline-block;
    position: relative;
    top: 64px;
    line-height: 68px;
    color: #868686;
    font-weight: 400;
    font-size: 24px;
    float: right;
    margin-left: 18px;
    text-decoration-line: none;
}
.more_features .more_features_right .left_icon{
    position: relative;
    top: 11px;
}
.more_features .more_features_right .right_icon{
    position: relative;
    top: 5px;
}
.more_features .more_features_right .feature:hover{
    border: 1px solid #22A1F5;
    cursor: pointer;
    color: #22A1F5;
}

.first .content h1 {
    font-size: 68px;
    font-weight: bold;
    line-height: 110px;
}

.first .content p:first-of-type {
    margin-top: 19px;
}

.first .content p {
    font-size: 24px;
    font-weight: normal;
    color: #979797;
    line-height: 36px;
}

.skip-btn {
    cursor: pointer;
}

.first .skip-btn {
    margin-top: 54px;
}

.second {
    height: 1123px;
    background: url("../img/handPhoneBack.png") center bottom no-repeat;
}

.second h1.title {
    text-align: center;
    font-size: 56px;
    font-weight: bold;
    line-height: 82px;
}

.second .content .canvas {
    width: 687px;
    text-align: center;
    margin-top: 160px;
}

.second .content .canvas span {
    line-height: 33px;
}

.second .content .canvas h2 {
    font-size: 42px;
    line-height: 1.5em;
}

.sub-details {
    margin-top: 50px;
}

.sub-details>div {
    width: 320px;
}

.third {
    height: 1120px;
    margin-top: -50px;
    background: url("../img/ThirdBack.png") center top no-repeat;
    padding-top: 130px;
}

.shop .third {
    height: 1220px;
}

.third .content {
    color: white;
}

.third .content h1 {
    font-size: 56px;
    line-height: 82px;
}

.third .content h2 {
    font-size: 42px;
    line-height: 66px;
}

.des-list {
    /*width: 520px;*/
}

.shop .des-list {
    padding-top: 50px;
}

.des-list p {
    margin-bottom: 60px;
}

.des-list p * {
    vertical-align: middle;
    line-height: 33px;
}

.des-list p img {
    margin-right: 17px;
}

.des-list p span {
    display: inline-block;
    width: 480px;
    position: relative;
    top: -4px;
}

.des-right {
    width: 596px;
}

.shop .des-right {
    width: 520px;
    height: 720px;
    background: url("../img/shop-third-1.png") top left no-repeat, url("../img/shop-third-2.png") top right no-repeat, url("../img/shop-third-3.png") bottom left no-repeat, url("../img/shop-third-4.png") bottom right no-repeat;
}

.des-right .problems {
    width: 100%;
    height: 211px;
    padding: 40px 37px 0;
    background: rgba(255,255,255,0.85);
    box-shadow: 0 4px 4px rgba(0,0,0,0.25);
}

.problems .problem-item {
    display: inline-block;
    font-size: 20px;
    line-height: 58px;
    /*padding: 0 13px;*/
    background: #22A1F5;
    border-radius: 4px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.25);
    text-align: center;
    white-space: nowrap;
    margin-right: 6px;
    margin-bottom: 13px;
}

.problems .problem-item:nth-child(1) {
    width: 94px;
}

.problems .problem-item:nth-child(2) {
    width: 95px;
}

.problems .problem-item:nth-child(3) {
    width: 95px;
}

.problems .problem-item:nth-child(4) {
    width: 95px;
}

.problems .problem-item:nth-child(5) {
    width: 119px;
    margin-right: 0;
}

.problems .problem-item:nth-child(6) {
    width: 137px;
}

.problems .problem-item:nth-child(7) {
    width: 137px;
}

.problems .problem-item:nth-child(8) {
    width: 138px;
}

.problems .problem-item:nth-child(9) {
    width: 92px;
    margin-right: 0;
}

.problems .ask {
    color: #000;
    margin-top: 33px;
}

.problems .ask>span {
    display: inline-block;
}

.problems .ask>span * {
    vertical-align: middle;
}

.problems .ask>span img {
    margin-right: 5px;
}

.problems .ask>span:nth-child(1) {
    margin-right: 37px;
    margin-bottom: 25px;
}

.problems .ask>span:nth-child(2) {
    margin-right: 25px;
    margin-bottom: 25px;
}

.problems .ask>span:nth-child(4) {
    margin-right: 61px;
}

.content .problems .ask.sale>span {
    font-size: 20px;
    margin-right: 24px;
}

.fourth {
    height: 1070px;
}

.fourth .content h1 {
    font-size: 56px;
    line-height: 82px;
    margin-top: 93px;
}

.fourth .content h2 {
    font-size: 42px;
    line-height: 66px;
    white-space: nowrap;
    margin-top: 30px;
}

.fourth .panels {
    margin-top: 132px;
}

.fourth .panels .panel {
    width: 350px;
    margin-bottom: 68px;
}

.fourth .panels .panel .panel-circle {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    margin-bottom: 43px;
    background: url("../img/Fourth1.png") center bottom no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
    position: relative;
}

.fourth .panels .panel .panel-circle img {
    position: absolute;
    bottom: 8px;
    right: -2px;
}

.fourth .panels .panel:nth-child(2) .panel-circle {
    background: url("../img/Fourth2.png") center bottom no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.fourth .panels .panel:nth-child(3) .panel-circle {
    background: url("../img/Fourth3.png") center bottom no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.sale .fourth .panels .panel:nth-child(1) .panel-circle {
    background: url("../img/sale-fourth-1.png") center bottom no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.sale .fourth .panels .panel:nth-child(2) .panel-circle {
    background: url("../img/sale-fourth-2.png") center bottom no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.sale .fourth .panels .panel:nth-child(3) .panel-circle {
    background: url("../img/sale-fourth-3.png") center bottom no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.shop .fourth .panels .panel:nth-child(1) .panel-circle {
    background: url("../img/shop-fourth-1.png") center bottom no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.shop .fourth .panels .panel:nth-child(2) .panel-circle {
    background: url("../img/shop-fourth-2.png") center bottom no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.shop .fourth .panels .panel:nth-child(3) .panel-circle {
    background: url("../img/shop-fourth-3.png") center bottom no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.track .fourth .panels .panel:nth-child(1) .panel-circle {
    background: url("../img/track-fourth-1.png") center bottom no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.track .fourth .panels .panel:nth-child(2) .panel-circle {
    background: url("../img/track-fourth-2.png") center bottom no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.fifth {
    height: 1074px;
    background: url("../img/fifthBack.png") top right no-repeat, rgba(251,251,251,1);
    padding-top: 79px;
}

.fifth.sale {
    height: 1248px;
    background-size: auto 100%;
}

.fifth.track {
    height: 1138px;
    background-size: auto 100%;
    background: url("../img/trackFifthBack.png") top right no-repeat, rgba(251,251,251,1);
}

.fifth.shop {
    height: 1138px;
    background-size: auto 100%;
    background: url("../img/shopFifthBack.png") top right no-repeat, rgba(251,251,251,1);
}

.fifth .content h1 {
    font-size: 56px;
    line-height: 82px;
}

.fifth .content h2 {
    font-size: 42px;
    line-height: 66px;
    white-space: nowrap;
    margin-top: 30px;
}

.function-list {
    margin-top: 80px;
}

.sale .function-list {
    padding: 86px 64px;
    background: linear-gradient(to right, rgba(255,255,255,0.78) 85.94%, rgba(255,255,255,0) 100%);
    height: 850px;
}

.func {
    margin-bottom: 114px;
}

.sale .function-list {
    margin-top: 80px;
}

.sale .func {
    margin-bottom: 66px;
}

.func .func-icon {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    margin-right: 40px;
    background: url("../img/fifth1.png") center center no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.sale .func .func-icon {
    width: 78px;
    height: 78px;
    margin-right: 22px;
    background-size: 50%!important;
}

.func:nth-child(2) .func-icon {
    background: url("../img/fifth2.png") center center no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.func:nth-child(3) .func-icon {
    background: url("../img/fifth3.png") center center no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.sale .func:nth-child(2) .func-icon {
    background: url("../img/sale-fifth-2.png") center center no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.sale .func:nth-child(3) .func-icon {
    background: url("../img/sale-fifth-3.png") center center no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.sale .func:nth-child(4) .func-icon {
    background: url("../img/sale-fifth-4.png") center center no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.sale .func:nth-child(5) .func-icon {
    background: url("../img/sale-fifth-5.png") center center no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.shop .func:nth-child(3) .func-icon {
    background: url("../img/shop-fifth-3.png") center center no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.track .func:nth-child(1) .func-icon {
    background: url("../img/track-fifth-1.png") center center no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.track .func:nth-child(2) .func-icon {
    background: url("../img/track-fifth-2.png") center center no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.track .func:nth-child(3) .func-icon {
    background: url("../img/track-fifth-3.png") center center no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.track .func:nth-child(4) .func-icon {
    background: url("../img/track-fifth-4.png") center center no-repeat,linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
}

.fun-des span:nth-child(1) {
    font-size: 30px;
    margin-right: 9px;
}

.fun-des span:nth-child(2) {
    font-size: 20px;
}

.fifth .ask {
    color: #000;
    margin-top: 16px;
    max-width: 494px;
    line-height: 40px;
    display: flex;
    flex-wrap: wrap;
}

.fifth.sale .ask {
    max-width: unset;
    margin-top: 3px;
}

.fifth .ask>span {
    display: inline-block;
}

.fifth .ask>span * {
    vertical-align: middle;
}

.fifth .ask>span img {
    margin-right: 5px;
}

.fifth.sale .ask>span {
    margin-right: 20px;
}

.shop .fifth .ask>span {
    margin-right: 20px;
}

.sixth {
    height: 1073px;
    padding-top: 117px;
    background: #fcfcfc;
}

.sixth .content h1 {
    font-size: 56px;
    line-height: 82px;
}

.sixth .content h2 {
    font-size: 42px;
    line-height: 66px;
    white-space: nowrap;
    margin-top: 30px;
}

.version-list {
    margin-top: 100px;
    margin-bottom: 105px;
}

.version-list .version {
    width: 285px;
    height: 390px;
    margin-right: 20px;
    box-shadow: 0 6px 10px rgb(0 0 0 / 15%);
    border-radius: 5px;
    text-align: center;
    padding: 77px 19px 0;
    background-color: #ffffff;
}

.version-list .version div {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.version-list .version:last-child {
    margin-right: 0;
}

.version-list .version .sub-title {
    font-size: 32px;
    line-height: 50px;
    margin-top: 25px;
    margin-bottom: 41px;
}

.version-list .version div:nth-child(3) {
    font-size: 20px;
    line-height: 32px;
}

.seven {
    height: 1860px;
    background: url("../img/seventhBack.png") center top no-repeat;
    padding-top: 120px;
}

.seven .content h1 {
    font-size: 56px;
    line-height: 82px;
    color: white;
    margin-bottom: 63px;
}

.seven .content .introduce {
    color: white;
    line-height: 36px;
}

.company-list {
    margin-top: 150px;
}

.company-list .company {
    padding-top: 56px;
    padding-bottom: 84px;
    border-bottom: 1px solid rgba(0,0,0,0.5);
}

.company-list .company .company-logo {
    width: 295px;
    height: 295px;
    border-radius: 50%;
    background: url("../img/seven1.png") center center no-repeat, rgba(217,217,217,0.1);
    box-shadow: 0 4px 4px rgba(0,0,0,0.25);
}

.company-list .company:nth-child(2) .company-logo {
    background: url("../img/seven2.png") center center no-repeat, rgba(217,217,217,0.1);
}

.company-list .company:nth-child(3) .company-logo {
    background: url("../img/seven3.png") center center no-repeat, rgba(217,217,217,0.1);
}

.company-list .company .company-introduce {
    width: 839px;
}

.company-list .company .company-introduce h2 {
    margin-bottom: 23px;
}

.eight {
    background: rgb(245,245,245);
    height: 751px;
}

.eight .logo-list {
    padding-top: 83px;
}

.eight .logo-list .logo-item {
    width: 178px;
    height: 122px;
    box-shadow: 0 4px 4px rgb(0 0 0 / 10%);
    float: left;
    margin-right: 26px;
    margin-bottom: 30px;
    text-align: center;
    line-height: 122px;
    font-weight: bold;
    background: white;
    border-radius: 10px;
}

.eight .logo-list .logo-item:nth-child(6n) {
    margin-right: 0;
}

.eight .logo-list .logo-item:nth-child(1) {
    background: url("../img/partner/1.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(2) {
    background: url("../img/partner/2.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(3) {
    background: url("../img/partner/3.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(4) {
    background: url("../img/partner/4.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(5) {
    background: url("../img/partner/5.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(6) {
    background: url("../img/partner/6.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(7) {
    background: url("../img/partner/7.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(8) {
    background: url("../img/partner/8.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(9) {
    background: url("../img/partner/9.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(10) {
    background: url("../img/partner/10.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(11) {
    background: url("../img/partner/11.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(12) {
    background: url("../img/partner/12.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(13) {
    background: url("../img/partner/13.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(14) {
    background: url("../img/partner/14.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(15) {
    background: url("../img/partner/15.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(16) {
    background: url("../img/partner/16.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(17) {
    background: url("../img/partner/17.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(18) {
    background: url("../img/partner/18.png") center center no-repeat, white;
}

/*.eight .logo-list .logo-item:nth-child(19){background: url("../img/partner/1.png") center center no-repeat;}*/
.eight .logo-list .logo-item:nth-child(20) {
    background: url("../img/partner/20.png?t=20220909") center center no-repeat, white;
}

/*.eight .logo-list .logo-item:nth-child(21){background: url("../img/partner/1.png") center center no-repeat;}*/
.eight .logo-list .logo-item:nth-child(22) {
    background: url("../img/partner/22.png") center center no-repeat, white;
}

.eight .logo-list .logo-item:nth-child(23) {
    background: url("../img/partner/23.png") center center no-repeat, white;
}

/*.eight .logo-list .logo-item:nth-child(24){background: url("../img/partner/1.png") center center no-repeat;}*/
.ten {
    background: #22A1F5;
    padding-top: 114px;
    text-align: center;
}

.ten .content {
    color: white;
}

.ten .content h1 {
    font-size: 56px;
    line-height: 82px;
    color: white;
}

.eleven {
    height: 465px;
    text-align: center;
    background: url(../img/eleven/bg.png) center no-repeat white;
    position: relative;
}
.eleven .eleven_title{
    font-style: normal;
    font-weight: bold;
    font-size: 62px;
    line-height: 82px;
    text-align: center;
    color: #444444;
    position: relative;
    top: 85px;
}

.eleven_card_list{
    position: relative;
    top: 164px;
}
.eleven_card_list .eleven_card{
    display: inline-block;
    width: 400px;
    height: 130px;
    background: #FFFFFF;
    border-radius: 8px;
    text-align: center;
    margin: 0 10px;
    position: relative;
    text-decoration-line: none;
}

.eleven_card_list .eleven_card .eleven_card_icon{
    position: absolute;
    display: inline-block;
    background: linear-gradient(180deg, #08BAFE 14.06%, #4084EC 100%);
    width: 48px;
    height: 48px;
    border-radius: 24px;
    top: 40px;
    left: 34px;
}
.eleven_card_list .eleven_card .eleven_card_icon img{
    position: relative;
    top: 6px;
    width: 38px;
    height: 38px;
}
.eleven_card_list .eleven_card .eleven_card_icon img.eleven_card_icon_lx{
    width: 23px;
    height: 23px;
    top: 14px;
}
.eleven_card_list .eleven_card_text{
    font-size: 28px;
    color: #6C6C6C;
    position: relative;
    top: 43px;
    left: 28px;
}
.eleven_card_list .eleven_card_text img{
    position: relative;
    left: 5px;
    top: -5px;
}
.eleven_card_list .eleven_card:hover{
    cursor: pointer;
}
.eleven_card_list .eleven_card:hover .eleven_card_text{
    color: #22A1F5;
}

.prizes {
    padding: 389px 90px 0;
}

.prizes .prize {
    width: 444px;
    height: 570px;
    background: rgba(255,255,255,0.85);
    border-radius: 100px 100px 5px 5px;
    color: #000;
}

.prizes .prize .prize-pic {
    height: 125px;
    position: relative;
}

.prizes .prize .prize-pic img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.prizes .prize:nth-child(2) .prize-pic img {
    bottom: -24px;
}

.prize-title {
    font-size: 32px;
    font-weight: bold;
    margin-top: 46px;
    margin-bottom: 46px;
}

.prize-des {
    padding: 0 68px;
    line-height: 32px;
    letter-spacing: 0px;
    font-size: 20px;
}

.ten-des {
    font-size: 26px;
    line-height: 1.6em;
}

.proves{
    margin-top: 10px;
    padding-bottom: 70px;
}
.proves .certificate_list{
    margin: 0 auto;
    display: flex;
    height: 300px;
}
.proves .certificate_list .certificate{
    flex: 1;
    position: relative;
    height: 100%;
}
.proves .certificate_box{
    width: 320px;
    height: 240px;
    background: url(../img/security/bg.png) no-repeat center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.proves .certificate_box.left{
    transform: translate(-35%,-50%);
}
.proves .certificate_box.right{
    transform: translate(-65%,-50%);
}
.proves .certificate_icon{
    position: absolute;
    left: 50%;
    top: 32px;
    transform: translate(-50%, 0);
}
.proves .certificate_name_box{
    width: 100%;
    position: absolute;
    bottom: 0px;
    height: 102px;
    text-align: center;
}
.proves .certificate_name{
    color: #283038;
    font-size: 28px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.out-container.bottom-bar {
    height: 500px;
    text-align: left;
    background: #393939;
    padding-top: 69px;
}

.out-container.bottom-bar .content {
    color: #fff;
}

.out-container.bottom-bar .content .footer-left p:nth-child(1) {
    font-size: 32px;
    line-height: 44px;
    font-weight: bold;
}

.out-container.bottom-bar .content .footer-left p:nth-child(2) {
    font-size: 22px;
    line-height: 32px;
    color: #979797;
}

.out-container.bottom-bar .content .input-bar {
    width: 455px;
    height: 60px;
    background: white;
    border-radius: 60px;
    color: #000;
    font-size: 24px;
    line-height: 60px;
    position: relative;
    overflow: hidden;
    margin-top: 60px;
    margin-bottom: 30px;
}

.out-container.bottom-bar .content .input-bar .input-left {
    width: 81px;
    height: 100%;
    background: #67FDCF;
    color: #061E91;
    font-weight: bold;
    padding-left: 20px;
    position: absolute;
    top: 0;
    left: 0;
}

.out-container.bottom-bar .content .input-bar .input-right {
    padding-left: 90px;
}

.footer-center {
    margin-left: 125px;
    margin-top: 123px;
}

.footer-center>p:nth-child(1n) {
    font-size: 24px;
    line-height: 33px;
    font-weight: bold;
}

.footer-center>p:nth-child(2n) {
    font-size: 32px;
    line-height: 44px;
    font-weight: normal;
}

.footer-center>p:nth-child(3) {
    margin-top: 17px;
}

.qrcode-bar {
    margin-top: 88px;
}

.qrcode-bar img {
    margin-left: 12px;
}

.qrcode-bar img:nth-child(2) {
    margin-bottom: 6px;
}

.out-container.bottom-bar .content .footer-top {
    border-bottom: 1px solid #fff;
    padding-bottom: 45px;
}

.bottom-bar img.gw {
    cursor: pointer;
    margin-left: -5px;
}

.footer-bottom {
    font-size: 18px;
    color: #979797;
    line-height: 78px;
}

.fixed-bar {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    z-index: 999;
}

.fixed-bar .fixed {
    width: 140px;
    height: 80px;
    white-space: nowrap;
    border-radius: 5px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.25);
    padding: 20px 0 0 20px;
    /*line-height: 58px;*/
    font-size: 24px;
    background: white;
    overflow: hidden;
    margin-bottom: 2px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s linear;
    position: relative;
}

.fixed-bar .fixed * {
    vertical-align: middle;
}

.fixed-bar .fixed img {
    margin-right: 15px;
    width: 40px;
    height: 40px;
    top: 2px;
    position: relative;
}

.fixed-bar .fixed.fixed1 {
    background: linear-gradient(to bottom, #08BAFE 14.06%, #4084EC 100%);
    color: white;
}

.fixed-bar .fixed.fixed1:hover {
    width: 200px;
    margin-left: -60px;
}

.fixed-bar .fixed.fixed2:hover {
    width: 250px;
    margin-left: -110px;
}

.fixed-bar .fixed.fixed3:hover {
    width: 200px;
    margin-left: -60px;
}

.fixed-bar .fixed.fixed4:hover {
    width: 200px;
    margin-left: -60px;
}
.fixed-bar .fixed .normal_text{
    display: inline-block;
    width: 50px;
    word-break: break-all;
    white-space: normal;
    position: absolute;
    top: 9px;
    left: 75px;
}
.fixed-bar .fixed .hover_text{
    display: none;
}
.fixed-bar .fixed:hover .normal_text{
    display: none;
}
.fixed-bar .fixed:hover .hover_text{
    display: inline-block;
}

.extra {
    height: 1125px;
    background: url(../img/extraBack.png) center center no-repeat;
    background-size: 100%;
    padding-top: 101px;
}

.extra .content h1 {
    font-size: 56px;
    line-height: 82px;
    color: white;
}

.extra .content h2 {
    font-size: 22px;
    line-height: 36px;
    white-space: nowrap;
    margin-top: 43px;
    color: white;
}