@charset "UTF-8";

.main-welcome {
    font-size: 18px;
    font-family: Helvetica;
    color: #C7C7D3;
    line-height: 14px;
    letter-spacing: 2px;
}
.main-slogan {
    font-size: 60px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    line-height: 60px;
    padding: 20px 0px;
    margin-top: 40px;
    display: flex;
    display: -webkit-flex;


}
.main-left {
    min-height: 500px;
}
.main-appname {

    font-size: 30px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    line-height: 30px;
    padding: 10px 10px;
}
.slogo-icon {
    padding: 0px 20px;
}
.slogo-icon:before {
     content: " ";
    position: absolute;
    margin-left: -6px;
    margin-top: -6px;
    height: 14px;
    width: 14px;

    background: url(../images/icon_up.png) no-repeat;
    background-size: 100%;
}
.slogo-icon:after {
     content: " ";
    position: absolute;
    height: 14px;
    width: 14px;
  margin-top: 48px;
    margin-left: -6px;
    background: url(../images/icon_down.png) no-repeat;
    background-size: 100%;
}
.star {
    height: 11px;
    width: 11px;
    background: url(../images/icon_star.png) no-repeat;
    background-size: 100%;
}

.download-area-name {
    color: #000000;
}

.main-download {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 16px;
    width: 340px;
    text-align: center;
}

.main-down a {
        position: relative;
    cursor: pointer;
    display: flex;
}

.main-down-ios {
    padding: 0;
    margin: 0;
}
.main-down-ios img  {

 width: 340px;

    /*background: url(../images/icon-ios.png) no-repeat center center/191px 56px*/
}
.main-down-android {
    padding: 0;
    /* margin: 30px 0 0; */
    margin: 0;
    font-size: 30px;
    color: #000;
    line-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-down-android > img {
    width: 36px;
    margin-right: 12px;
}

.main-background {
width: 100%;
height: 100%;
position: absolute;
    margin: 0;
    padding: 0;

}
.phonebg {
      height:566px;
    width: 1079px;
     z-index: -1;
   background: url(../images/main_bg.png) no-repeat center center;
}


.main-phone {
    position: relative;
    width:479px;
    height:895px;
    margin-left: 250px;
    background: url(../images/main_phone.png) no-repeat center center/479px 895px;
}
.main-phone-content {
    position: absolute;
    width:100%;
    height:100%;

}
.section-main-container {
    width: 90%;
}
.section-main .section-content {

     display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    height: 800px !important;

}
.main-blue {
    position: absolute;
    top: 20px;
    left: 35px;
    width: 52px;
    height: 52px;
    background-image: url(../images/icon_blue.png) !important;
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
    -webkit-transition-delay: .1s;
    transition-delay: .1s;
}
.main-green {
    position: absolute;
    top: 84px;
    right: -35px;
    width: 112px;
    height: 112px;
    background-image: url(../images/icon_green.png) !important;
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
}

.main-pink {
     position: absolute;
    bottom: 0px;
    left: -25px;
    width: 150px;
    height: 150px;
    background-image: url(../images/icon_pink.png) !important;
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
}
.main-qrcode {
    position: absolute;
    bottom: 189px;
    left: 94px;
    width: 290px;
    height: 290px;
    background-image: url(../images/qrcode.png?v=123) !important;
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
    -webkit-transition-delay: .1s;
    transition-delay: .1s;
}

.about {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 90px;
    padding-bottom: 60px;
}

.about .about-header {

 font-size: 20px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
line-height: 20px;
}
.about .about-header::after {
    content: "✭";
    color: #7857F6;
    margin-left: 30px;
    width: 11px;
    height: 11px;

}
.about .about-header::before {
    content: "✭";
    color: #7857F6;
    margin-right: 30px;
    width: 11px;
    height: 11px;
}

.about .about-logo {
    width: 224px;
    height: 212px;
   background: url(../images/about_logo.png) no-repeat center center/224px 212px;
   margin-top:50px;
   margin-bottom: 50px;

}

.about .about-desc {
    text-align: left;
    margin-bottom: 80px;
}

.about .section {
    text-align: center;
    color: #282828
}

.about .section-title {
    font-size: 32px;
    font-weight: 500;
    line-height: 45px
}

.about .section-desc .section-content {
    margin: 50px auto 120px;
    width: 1000px;
    word-wrap: break-word;
    word-break: break-all
}

.about .section-desc .contact-text {
    padding-top: 7px;
    text-align: left
}

.about .section-desc .contact-text p {
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 32px
}

.about .section-desc .contact-text p:last-child {
    margin-bottom: 0
}

.contact-content {
    display: flex;
     display: -webkit-flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    /* justify-content: space-between; */
    align-items: center;
    padding-top: 90px;
    padding-bottom: 60px;
}

.contact-header {
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    line-height: 20px;
}
 .contact-header::after {
    content: "✭";
    color: #7857F6;
    margin-left: 30px;
    width: 11px;
    height: 11px;

}
.contact-header::before {
    content: "✭";
    color: #7857F6;
    margin-right: 30px;
    width: 11px;
    height: 11px;
}

.contact-content .content-container {
    display: flex;
    margin-top: 96px;
}

.contact-content .content-container .info-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    width: 766px;
}

.info-container .info-item {
    width: 340px;
    height: 94px;
    margin: 0 0 66px 43px;
    padding-left: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-repeat: no-repeat;
    border-radius: 47px;
}

.info-container .info-item .title {
    font-size: 26px;
    color: rgba(0, 0, 0, 0.6);
}

.info-container .info-item .contact-info {
    margin-top: 8px;
    font-size: 22px;
}

.info-container .info-item.info-item-service {
    background: url("../images/contact/service.png") left center/auto no-repeat, linear-gradient(220deg, rgba(120, 87, 246, 0) 0%, rgba(205, 123, 254, 0.04)  100%);
}

.info-container .info-item.info-item-phone {
    background: url("../images/contact/phone.png") left center/auto no-repeat, linear-gradient(220deg, rgba(120, 87, 246, 0) 0%, rgba(205, 123, 254, 0.04)  100%);
}

.info-container .info-item.info-item-business {
    background: url("../images/contact/business.png") left center/auto no-repeat, linear-gradient(220deg, rgba(120, 87, 246, 0) 0%, rgba(205, 123, 254, 0.04)  100%);
}

.info-container .info-item.info-item-script {
    background: url("../images/contact/script.png") left center/auto no-repeat, linear-gradient(220deg, rgba(120, 87, 246, 0) 0%, rgba(205, 123, 254, 0.04)  100%);
}

.info-container .info-item.info-item-adcooperation {
    background: url("../images/contact/adcooperation.png") left center/auto no-repeat, linear-gradient(220deg, rgba(120, 87, 246, 0) 0%, rgba(205, 123, 254, 0.04)  100%);
}

.contact-content .content-container .qrcode-container {
    display: flex;
}

.contact-social {
    display: flex;
     display: -webkit-flex;
      justify-content: space-between;
      width: 200px;
}
.contact-social img {
    width: 30px;
    height: 30px;
}
.info {
    margin-top: 12px;
    font-size: 12px;
    color: #999;
}

.info a {
    color: #999;
}


.cn .culture-slogan img.cn {
    display: block
}

.en .culture-slogan img.en {
    display: block
}

.cn .cn_footer {
    display: block
}

.en .en_footer {
    display: block
}


.clearfix::after {
    content: '';
    display: block;
    clear: both
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    height: 88px;
    z-index: 100;
    min-width: 800px;
    width: 100%
}

.header-content {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1340px
}

.header-logo {
    float: left;
    width: 40px;
    height: 40px;
    margin-top: 30px;
    margin-left: 20px;
     background: url(../images/img-logo.png) no-repeat center center/40px 40px;


}

.header-logo-link {
   /* display: inline-block;
    height: 100%;
    width: 100%;
    text-indent: -9999px*/
}

.header-nav {
    float: right;
    height: 100%;
    padding-top: 34px
}

.header-nav>li {
    position: relative;
    float: left;
    font-size: 18px;
    color: #fff;
    line-height: 25px;
    margin-right: 48px;
    cursor: pointer
}

/*.header-nav>li:last-child {
    margin-right: 0
}*/

.header-nav>li:hover .icon-arrow-bottom,.header-nav>li:hover>a {
    opacity: 1
}

.header-nav>li a {
    opacity: .6;
}

.header-nav>li a:hover {
    opacity: 1
}


.header-nav>li.active {
    position: relative
}

.header-nav>li.active .icon-arrow-bottom,.header-nav>li.active>a {
    font-weight: 500;
    opacity: 1
}

.header-nav>li.active::after {
    position: absolute;
    content: "";
    left: 50%;
    bottom: -13px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 24px;
    height: 6px;
    background: #fff;
    border-radius: 3px
}

.header-nav>li:nth-child(3) {
    margin-right: 48px
}

.header-nav>li:nth-child(4) {
    margin-right: 48px
}


.header-nav>li.header-nav-menu:hover .menu {
    display: block
}

.header-nav>li.header-nav-menu:hover .icon-arrow-bottom {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.header-nav>li.header-nav-menu.active .menu {
    bottom: -153px
}

.header-nav>li .menu a {
    color: #000
}

.header-nav>li .menu-triangle {
    position: relative;
    z-index: 2;
    width: 40px;
    height: 20px;
    overflow: hidden;
    margin: 0 auto -1px
}

.header-nav>li .menu-triangle::before {
    position: absolute;
    content: '';
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: 2px;
    -webkit-transform: scaleX(1.2) rotate(45deg);
    transform: scaleX(1.2) rotate(45deg);
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #ededed
}

.header-nav>li .menu-items {
    position: relative;
    z-index: 1;
    padding-left: 18px;
    padding-right: 18px;
    border: 1px solid #ededed;
    background: #fff;
    border-radius: 8px;
    cursor: auto
}

.header-nav>li .menu-item {
    display: block;
    text-align: center;
    font-size: 16px;
    line-height: 60px;
    border-bottom: 1px solid #ededed;
    cursor: pointer
}

.header-nav>li .menu-item:last-child {
    border-bottom: none
}

.header-black .header-nav>li a {
    color: #000
}

.header-black .header-nav>li.active::after {
    background: #000
}


.header-black .header-logo {
/*    background: url(../images/img-logo.png?rev=1630037580712) no-repeat center center/72px 72px
*/}

.footer {
    background-color: #E9E4FF;
    height: 32px;
    text-align: center;
    font-size: 0;
    line-height: 32px;
    font-weight: 300;
    color: #282828;
    white-space: nowrap
}
.footer_fixed {
    position: fixed;
     bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
    z-index: 100;
}

.footer a,.footer span {
    font-size: 14px
}

.footer a {
    color: #282828
}

.footer a:hover {
    text-decoration: underline
}


.home {
    position: relative;
    overflow: hidden
}

.home .header .header-nav>li.header-nav-audio {
    visibility: visible
}

.home .aside {
    position: fixed;
    top: 50%;
    right: 88px;
    z-index: 100;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.home .aside li {
    width: 8px;
    height: 8px;
    background: rgba(0,0,0,.2);
    border-radius: 4px;
    margin-bottom: 8px;
    -webkit-transition: all .3s;
    transition: all .3s;
    cursor: pointer
}

.home .aside li.active {
    height: 24px;
    background: #7857F6
}


.home .aside li:last-child {
    margin-bottom: 0
}

.home .list-container {
    position: absolute;
    width: 100%;
    height: 100%;
  /*  top:10%;*/
}

.home .list-container .list-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 9;
    background: #fff
}

.home .list-container .list-bg .bg-waves,.home .list-container .list-bg .waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    margin-bottom: -5px
}

.home .list-container .list-bg .parallax>use {
    -webkit-animation: move-forever 14s linear infinite;
    animation: move-forever 14s linear infinite
}

.home .list-container .list-bg .parallax>use:nth-child(1) {
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    fill-opacity: .2
}

.home .list-container .list-bg .parallax>use:nth-child(2) {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    -webkit-animation-duration: 12s;
    animation-duration: 12s;
    fill-opacity: 1
}

@-webkit-keyframes move-forever {
    0% {
        -webkit-transform: translate3d(-90px,0,0);
        transform: translate3d(-90px,0,0)
    }

    100% {
        -webkit-transform: translate3d(85px,0,0);
        transform: translate3d(85px,0,0)
    }
}

@keyframes move-forever {
    0% {
        -webkit-transform: translate3d(-90px,0,0);
        transform: translate3d(-90px,0,0)
    }

    100% {
        -webkit-transform: translate3d(85px,0,0);
        transform: translate3d(85px,0,0)
    }
}
.home {
  background: #fff;
}

.home .section {
    position: absolute;
    width: 100%;
    height: 100%;
    margin-top: 44px;
    z-index: 1;
    background: #fff;
}

.home .section-active {
    display: inline-block;
    z-index: 10;
}

.home .section-active .section-left .section-phone {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.home .section-active .section-left .section-video {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.home .section-active .section-icon {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1)
}

.home .section-active .section-right .right-desc,.home .section-active .section-right .right-sub,.home .section-active .section-right .right-tip,.home .section-active .section-right .right-title {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.home .section-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 100%;
    font-size: 0;
    margin-left: -40px;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home .section-left {
    float: left;
    margin-left: 40px;
    position: relative;
   /* width:  50%;
    height: 100%;*/

}

.home .section-left .section-phone {
  /* margin-top: 25%;*/
    width: 555px;
    height: 643px;
    background: no-repeat center center/contain;
    opacity: 0;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
    -webkit-transition: all 350ms;
    transition: all 350ms;
    -webkit-transition-timing-function: cubic-bezier(.25,.1,.25,1);
    transition-timing-function: cubic-bezier(.25,.1,.25,1)
}


.home  .section-icon {
    position: absolute;
    background: no-repeat center center/contain;
    opacity: 0;
    -webkit-transform: scale3d(0,0,1);
    transform: scale3d(0,0,1);
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-timing-function: cubic-bezier(.25,.1,.25,1);
    transition-timing-function: cubic-bezier(.25,.1,.25,1)
}

.home .section-right {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
/*    justify-content: center;*/
    padding-left: 150px !important;
    color: #282828;


    justify-content: center;
     height: 100%;
}
.home .section-right .box-content {

}
.home .section-right::before {
       content: '';
        position: absolute;
        width: 3px;
        height: 90px;
        background: #E9E4FF;
        margin-left: -40px;
        border-radius: 2px;
}

.home .section-right .right-title {
    font-size: 50px;
    font-weight: 600;
    /*line-height: 106px;*/
    -webkit-transition: all 350ms;
    transition: all 350ms
}

.home .section-right .right-sub {
    font-size: 44px;
    font-weight: 500;
    line-height: 38px;
    color: rgba(0,0,0,0.6);
    line-height: 62px;
    -webkit-transition: all 550ms;
    transition: all 550ms
}

.home .section-right .right-desc,.home .section-right .right-tip {
    margin-top: 20px;
    font-size: 20px;
    line-height: 32px;
    -webkit-transition: all 750ms;
    transition: all 750ms
}

.home .section-right .right-tip {
    -webkit-transition: all 950ms;
    transition: all 950ms
}

.home .section-right .right-desc,.home .section-right .right-sub,.home .section-right .right-tip,.home .section-right .right-title {
    opacity: 0;
    -webkit-transform: translate3d(0,50px,0);
    transform: translate3d(0,50px,0);
    -webkit-transition-timing-function: cubic-bezier(.25,.1,.25,1);
    transition-timing-function: cubic-bezier(.25,.1,.25,1)
}

.home .section-main {

 /*   display: flex;
    align-items: center;
    justify-content: center;*/
}

.home .section-main .video-container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.home .section-main .video-container::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.1)
}

.home .section-main .video-container .video {
    height: auto;
    min-height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.home .section-main .main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    text-align: center;
    width: 100%;
    height: 100%;
}
.home .section-main .main-content .main-content-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.home .section-main .main-content>img {
    display: none;
    width: 902px;
    height: 140px
}

.home .section-main .main-content .slogan {
    display: none;
    width: 330px;
    height: 28px;
    margin: 55px auto 48px;
    background-size: 330px 28px;
    background-repeat: no-repeat;
    background-position: center center
}

.home .section-main .main-content .main-down {
    display: inline-block
}

.contact-social>a {
    position: relative;
    float: left;
    width: 151px;
    height: 50px;
    cursor: pointer;
    position: relative;
}

.contact-social>a img {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 164px;
    height: 204px;
    bottom: 50px;
   display: none;
}

.contact-social>a:hover img {
    display: block
}


.home .section .section-phone-content {
    position: absolute;
    left: 158px;
    top: 83px;
    overflow: hidden;
    opacity: 0;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
    -webkit-transition: opacity .6s,-webkit-transform 350ms;
    transition: opacity .6s,-webkit-transform 350ms;
    transition: transform 350ms,opacity .6s;
    transition: transform 350ms,opacity .6s,-webkit-transform 350ms;
    -webkit-transition-timing-function: cubic-bezier(.25,.1,.25,1);
    transition-timing-function: cubic-bezier(.25,.1,.25,1)
}

@-webkit-keyframes move-page-top {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    100% {
        -webkit-transform: translate3d(0,-1551px,0);
        transform: translate3d(0,-1551px,0)
    }
}

@keyframes move-page-top {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    100% {
        -webkit-transform: translate3d(0,-1551px,0);
        transform: translate3d(0,-1551px,0)
    }
}

.home .section-page1 .section-phone {
    background-image: url(../images/page1_phone.png?rev=12345)
}


.home .section-page1 .page1-icon1 {
    position: absolute;
    top: 25%;
    left: 12.8%;
    width: 28%;
    height: 6%;
    background-image: url(../images/page1_icon1.png?rev=12345);
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
    -webkit-transition-delay: .1s;
    transition-delay: .1s
}

.home .section-page1 .page1-icon2{
    top: 59%;
    right: 11.5%;
    width: 32%;
    height: 11%;
    background-image: url(../images/page1_icon2.png?rev=12345);
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}
.home .section-page2 .section-phone {
    background-image: url(../images/page2_phone.png?rev=12345)
}
.home .section-page2 .page2-icon{
   top: 26px;
    left: 42px;
    width: 110px;
    height: 30px;
    background-image: url(../images/page2_icon.png);
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}

.home .section-page3 .section-phone {
    background-image: url(../images/page3_phone.png?rev=12345)
}
.home .section-page3 .page3-icon{
      bottom: 25px;
    left: 52px;
    width: 136px;
    height: 230px;
    background-image: url(../images/page3_icon.png?rev=12345);
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}
.home .section-page3 .page3-icon1{
       bottom: 25px;
    right: 40px;
    width: 162px;
    height: 268px;
    background-image: url(../images/page3_icon1.png?rev=12345);
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-delay: 105ms;
    transition-delay: 105ms
}
.home .section-page4 .section-phone {
    background-image: url(../images/page4_phone.png?rev=12345)
}
.home .section-page4 .page4-icon{
 top: 8.8%;
    left: 11.7%;
    width: 36%;
    height: 8.5%;
    background-image: url(../images/page4_icon.png?rev=12345);
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}
.home .section-page5 .section-phone {
    background-image: url(../images/page5_phone.png?rev=12345)
}
.home .section-page5 .page5-icon{
    top: 200px;
    left: 40px;
    width: 124px;
    height: 34px;
    background-image: url(../images/page2_icon.png);
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}

.home .section-page6 .section-phone {
    background-image: url(../images/page6_phone.png?rev=12345)
}
.home .section-page6 .page6-icon{
    bottom: 80px;
    left: 180px;
    width: 170px;
    height: 38px;
    background-image: url(../images/page6_icon.png);
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}

.home .section-page6 .page6-icon1{
   top: 262px;
    left: 20px;
    width: 149px;
    height: 41px;
    background-image: url(../images/page6_icon1.png);
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}

.home .section-page6 .page6-icon2{
    top: 131px;
    right: 50px;
    width: 116px;
    height: 47px;
    background-image: url(../images/page6_icon2.png);
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-delay: 100ms;
    transition-delay: 100ms
}

.home .section-page6 .page6-icon3{
     top: 9px;
    left: 30px;
    width: 138px;
    height: 43px;
    background-image: url(../images/page6_icon3.png);
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-delay: 150ms;
    transition-delay: 150ms
}


@-webkit-keyframes move-top {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    100% {
        -webkit-transform: translate3d(0,-1638px,0);
        transform: translate3d(0,-1638px,0)
    }
}

@keyframes move-top {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    100% {
        -webkit-transform: translate3d(0,-1638px,0);
        transform: translate3d(0,-1638px,0)
    }
}

.home .section-square.section-active .section-phone-content {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.home .section-square.section-active .section-phone-content::after {
    -webkit-animation: move-top 30s linear infinite;
    animation: move-top 30s linear infinite
}

.home .section-activity {
    background: #fff;
    text-align: center
}

.home .section-activity .activity-content {
    position: relative;
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 88px;
}


.home .section-activity .activity-btn:hover {
    background-color: #21beba
}

.home .section-activity .activity-btn:active {
    background-color: #1da9a6
}

.home .section-activity .activity-mess-item {
    position: relative;
    display: inline-block;
    margin-top: -14px;
    width: 5122px;
    height: 254px;
}

.home .section-activity .activity-mess-item>div {
    -webkit-transition-timing-function: cubic-bezier(.25,.1,.25,1)!important;
    transition-timing-function: cubic-bezier(.25,.1,.25,1)!important
}


.home .section-activity .activity-mess-item:first-child {
    margin-top: 0;
    -webkit-transform: translate3d(-72px,0,0);
    transform: translate3d(-72px,0,0)
}

.home .section-activity .activity-mess-item:first-child>div:first-child {
    -webkit-transform: translate3d(-153px,-102px,0) scale(1.2);
    transform: translate3d(-153px,-102px,0) scale(1.2);
    -webkit-transition: -webkit-transform .1s;
    transition: -webkit-transform .1s;
    transition: transform .1s;
    transition: transform .1s,-webkit-transform .1s
}

.home .section-activity .activity-mess-item:first-child>div:nth-child(2) {
    -webkit-transform: translate3d(-113px,-99px,0) scale(1.25);
    transform: translate3d(-113px,-99px,0) scale(1.25);
    -webkit-transition: -webkit-transform 150ms .1s;
    transition: -webkit-transform 150ms .1s;
    transition: transform 150ms .1s;
    transition: transform 150ms .1s,-webkit-transform 150ms .1s
}

.home .section-activity .activity-mess-item:first-child>div:nth-child(3) {
    -webkit-transform: translate3d(-81px,-97px,0) scale(1.18);
    transform: translate3d(-81px,-97px,0) scale(1.18);
    -webkit-transition: -webkit-transform .2s 150ms;
    transition: -webkit-transform .2s 150ms;
    transition: transform .2s 150ms;
    transition: transform .2s 150ms,-webkit-transform .2s 150ms
}

.home .section-activity .activity-mess-item:first-child>div:nth-child(4) {
    -webkit-transform: translate3d(-70px,-45px,0) scale(1.24);
    transform: translate3d(-70px,-45px,0) scale(1.24);
    -webkit-transition: -webkit-transform .1s;
    transition: -webkit-transform .1s;
    transition: transform .1s;
    transition: transform .1s,-webkit-transform .1s
}

.home .section-activity .activity-mess-item:first-child>div:nth-child(5) {
    -webkit-transform: translate3d(-33px,-107px,0) scale(1.26);
    transform: translate3d(-33px,-107px,0) scale(1.26);
    -webkit-transition: -webkit-transform .2s 50ms;
    transition: -webkit-transform .2s 50ms;
    transition: transform .2s 50ms;
    transition: transform .2s 50ms,-webkit-transform .2s 50ms
}

.home .section-activity .activity-mess-item:first-child>div:nth-child(6) {
    -webkit-transform: translate3d(52px,-87px,0) scale(1.22);
    transform: translate3d(52px,-87px,0) scale(1.22);
    -webkit-transition: -webkit-transform 150ms .1s;
    transition: -webkit-transform 150ms .1s;
    transition: transform 150ms .1s;
    transition: transform 150ms .1s,-webkit-transform 150ms .1s
}

.home .section-activity .activity-mess-item:first-child>div:nth-child(7) {
    -webkit-transform: translate3d(-153px,-102px,0) scale(1.2);
    transform: translate3d(-153px,-102px,0) scale(1.2);
    -webkit-transition: -webkit-transform .1s;
    transition: -webkit-transform .1s;
    transition: transform .1s;
    transition: transform .1s,-webkit-transform .1s
}

.home .section-activity .activity-mess-item:first-child>div:nth-child(8) {
    -webkit-transform: translate3d(-113px,-99px,0) scale(1.25);
    transform: translate3d(-113px,-99px,0) scale(1.25);
    -webkit-transition: -webkit-transform 150ms .1s;
    transition: -webkit-transform 150ms .1s;
    transition: transform 150ms .1s;
    transition: transform 150ms .1s,-webkit-transform 150ms .1s
}

.home .section-activity .activity-mess-item:first-child>div:nth-child(9) {
    -webkit-transform: translate3d(-81px,-97px,0) scale(1.18);
    transform: translate3d(-81px,-97px,0) scale(1.18);
    -webkit-transition: -webkit-transform .2s 150ms;
    transition: -webkit-transform .2s 150ms;
    transition: transform .2s 150ms;
    transition: transform .2s 150ms,-webkit-transform .2s 150ms
}

.home .section-activity .activity-mess-item:first-child>div:nth-child(10) {
    -webkit-transform: translate3d(-70px,-45px,0) scale(1.24);
    transform: translate3d(-70px,-45px,0) scale(1.24);
    -webkit-transition: -webkit-transform .1s;
    transition: -webkit-transform .1s;
    transition: transform .1s;
    transition: transform .1s,-webkit-transform .1s
}



.home .section-activity .activity-mess-item:nth-child(2)>div:first-child {
    -webkit-transform: translate3d(-153px,-102px,0) scale(1.2);
    transform: translate3d(-153px,-102px,0) scale(1.2);
    -webkit-transition: -webkit-transform .1s;
    transition: -webkit-transform .1s;
    transition: transform .1s;
    transition: transform .1s,-webkit-transform .1s
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(2) {
    -webkit-transform: translate3d(-113px,-99px,0) scale(1.25);
    transform: translate3d(-113px,-99px,0) scale(1.25);
    -webkit-transition: -webkit-transform 150ms .1s;
    transition: -webkit-transform 150ms .1s;
    transition: transform 150ms .1s;
    transition: transform 150ms .1s,-webkit-transform 150ms .1s
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(3) {
    -webkit-transform: translate3d(-81px,-97px,0) scale(1.18);
    transform: translate3d(-81px,-97px,0) scale(1.18);
    -webkit-transition: -webkit-transform .2s 150ms;
    transition: -webkit-transform .2s 150ms;
    transition: transform .2s 150ms;
    transition: transform .2s 150ms,-webkit-transform .2s 150ms
}








/*.home .section-activity .activity-mess-item:nth-child(2) {
    -webkit-transform: translate3d(-72px,0,0);
    transform: translate3d(-72px,0,0)
}

.home .section-activity .activity-mess-item:nth-child(2)>div:first-child {
    -webkit-transform: translate3d(-199px,60px,0) scale(1.45);
    transform: translate3d(-199px,60px,0) scale(1.45);
    -webkit-transition: -webkit-transform .1s 250ms;
    transition: -webkit-transform .1s 250ms;
    transition: transform .1s 250ms;
    transition: transform .1s 250ms,-webkit-transform .1s 250ms
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(2) {
    -webkit-transform: translate3d(-198px,-39px,0) scale(1.8);
    transform: translate3d(-198px,-39px,0) scale(1.8);
    -webkit-transition: -webkit-transform .2s .1s;
    transition: -webkit-transform .2s .1s;
    transition: transform .2s .1s;
    transition: transform .2s .1s,-webkit-transform .2s .1s
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(3) {
    -webkit-transform: translate3d(-168px,-64px,0) scale(1.7);
    transform: translate3d(-168px,-64px,0) scale(1.7);
    -webkit-transition: -webkit-transform 150ms;
    transition: -webkit-transform 150ms;
    transition: transform 150ms;
    transition: transform 150ms,-webkit-transform 150ms
}*/

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(4) {
    -webkit-transform: translate3d(-141px,58px,0) scale(1.63);
    transform: translate3d(-141px,58px,0) scale(1.63);
    -webkit-transition: -webkit-transform .2s .1s;
    transition: -webkit-transform .2s .1s;
    transition: transform .2s .1s;
    transition: transform .2s .1s,-webkit-transform .2s .1s
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(5) {
    -webkit-transform: translate3d(-92px,-12px,0) scale(1.71);
    transform: translate3d(-92px,-12px,0) scale(1.71);
    -webkit-transition: -webkit-transform .1s .2s;
    transition: -webkit-transform .1s .2s;
    transition: transform .1s .2s;
    transition: transform .1s .2s,-webkit-transform .1s .2s
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(6) {
    -webkit-transform: translate3d(10px,351px,0) scale(1.38);
    transform: translate3d(10px,351px,0) scale(1.38);
    -webkit-transition: -webkit-transform .1s 150ms;
    transition: -webkit-transform .1s 150ms;
    transition: transform .1s 150ms;
    transition: transform .1s 150ms,-webkit-transform .1s 150ms
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(7) {
    -webkit-transform: translate3d(-168px,-64px,0) scale(1.7);
    transform: translate3d(-168px,-64px,0) scale(1.7);
    -webkit-transition: -webkit-transform 150ms;
    transition: -webkit-transform 150ms;
    transition: transform 150ms;
    transition: transform 150ms,-webkit-transform 150ms
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(8) {
    -webkit-transform: translate3d(-141px,58px,0) scale(1.63);
    transform: translate3d(-141px,58px,0) scale(1.63);
    -webkit-transition: -webkit-transform .2s .1s;
    transition: -webkit-transform .2s .1s;
    transition: transform .2s .1s;
    transition: transform .2s .1s,-webkit-transform .2s .1s
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(9) {
    -webkit-transform: translate3d(-92px,-12px,0) scale(1.71);
    transform: translate3d(-92px,-12px,0) scale(1.71);
    -webkit-transition: -webkit-transform .1s .2s;
    transition: -webkit-transform .1s .2s;
    transition: transform .1s .2s;
    transition: transform .1s .2s,-webkit-transform .1s .2s
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(10) {
    -webkit-transform: translate3d(10px,351px,0) scale(1.38);
    transform: translate3d(10px,351px,0) scale(1.38);
    -webkit-transition: -webkit-transform .1s 150ms;
    transition: -webkit-transform .1s 150ms;
    transition: transform .1s 150ms;
    transition: transform .1s 150ms,-webkit-transform .1s 150ms
}


.home .section-activity .activity-mess-item:nth-child(1)::before {
    position: absolute;
    content: "";
    opacity: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-transition: opacity .3s .3s;
    transition: opacity .3s .3s;
    background: url(../images/banner1.png?rev=12345) repeat-x top left/1660px 254px
}

.home .section-activity .activity-mess-item:nth-child(1)>div {
    position: relative;
    z-index: 10;
    width: 166px;
    height: 254px;
    float: left;
    background: url(../images/banner1.png?rev=12345) no-repeat top left/1660px 254px;
}

.home .section-activity .activity-mess-item:nth-child(1)>div:nth-child(2) {
    background-position-x: -166px
}

.home .section-activity .activity-mess-item:nth-child(1)>div:nth-child(3) {
    background-position-x: -332px
}

.home .section-activity .activity-mess-item:nth-child(1)>div:nth-child(4) {
    background-position-x: -498px
}

.home .section-activity .activity-mess-item:nth-child(1)>div:nth-child(5) {
    background-position-x: -664px
}

.home .section-activity .activity-mess-item:nth-child(1)>div:nth-child(6) {
    background-position-x: -830px
}

.home .section-activity .activity-mess-item:nth-child(1)>div:nth-child(7) {
    background-position-x: -996px
}

.home .section-activity .activity-mess-item:nth-child(1)>div:nth-child(8) {
    background-position-x: -1162px
}

.home .section-activity .activity-mess-item:nth-child(1)>div:nth-child(9) {
    background-position-x: -1328px
}

.home .section-activity .activity-mess-item:nth-child(1)>div:nth-child(10) {
    background-position-x: -1494px
}

.home .section-activity .activity-mess-item:nth-child(1)>div:nth-child(11) {
    background-position-x: -1660px
}

.home .section-activity .activity-mess-item:nth-child(2)::before {
    position: absolute;
    content: "";
    opacity: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-transition: opacity .3s .3s;
    transition: opacity .3s .3s;
    background: url(../images/banner2.png?rev=12345) repeat-x top left/1660px 254px
}

.home .section-activity .activity-mess-item:nth-child(2)>div {
    position: relative;
    z-index: 10;
    width: 166px;
    height: 254px;
    float: left;
    background: url(../images/banner2.png?rev=12345) no-repeat top left/1660px 254px
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(2) {
    background-position-x: -166px
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(3) {
    background-position-x: -332px
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(4) {
    background-position-x: -498px
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(5) {
    background-position-x: -664px
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(6) {
    background-position-x: -830px
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(7) {
    background-position-x: -996px
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(8) {
    background-position-x: -1162px
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(9) {
    background-position-x: -1328px
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(10) {
    background-position-x: -1494px
}

.home .section-activity .activity-mess-item:nth-child(2)>div:nth-child(11) {
    background-position-x: -1660px
}


.home .section-activity .footer {
 /*   display: none;
    position: absolute;
    left: 50%;
    bottom: 23px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)*/
}

.home .section-activity.section-active .activity-btn {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation: spring .5s ease-in-out .3s;
    animation: spring .5s ease-in-out .3s
}

@-webkit-keyframes spring {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    80% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    95% {
        opacity: 1;
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes spring {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    80% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    95% {
        opacity: 1;
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.home .section-activity.section-active .activity-mess-item::before {
    opacity: 1
}

.home .section-activity.section-active .activity-mess-item:first-child {
    -webkit-animation: banner-move-1 64s linear infinite .6s;
    animation: banner-move-1 64s linear infinite .6s
}

.home .section-activity.section-active .activity-mess-item:nth-child(2) {
    -webkit-animation: banner-move-2 96s linear infinite .6s;
    animation: banner-move-2 96s linear infinite .6s
}

.home .section-activity.section-active .activity-mess-item>div {
    -webkit-transform: translate3d(0,0,0) scale(1)!important;
    transform: translate3d(0,0,0) scale(1)!important
}

@-webkit-keyframes banner-move-1 {
    0% {
        -webkit-transform: translate3d(-72px,0,0);
        transform: translate3d(-72px,0,0)
    }

    100% {
        -webkit-transform: translate3d(-2633px,0,0);
        transform: translate3d(-2633px,0,0)
    }
}

@keyframes banner-move-1 {
    0% {
        -webkit-transform: translate3d(-72px,0,0);
        transform: translate3d(-72px,0,0)
    }

    100% {
        -webkit-transform: translate3d(-2633px,0,0);
        transform: translate3d(-2633px,0,0)
    }
}

@-webkit-keyframes banner-move-2 {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    100% {
        -webkit-transform: translate3d(-2561px,0,0);
        transform: translate3d(-2561px,0,0)
    }
}

@keyframes banner-move-2 {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    100% {
        -webkit-transform: translate3d(-2561px,0,0);
        transform: translate3d(-2561px,0,0)
    }
}

.home .qrcode {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    display: none
}

.home .qrcode-mask {
    background: rgba(0,0,0,.7);
    width: 100%;
    height: 100%
}

.home .qrcode-content {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 318px;
    background: #fff;
    color: #282828;
    padding: 24px 24px 30px;
    border-radius: 16px
}

.home .qrcode-content img {
    width: 270px;
    height: 270px;
    margin: 0 auto
}

.home .qrcode-content p {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    text-align: center
}

@media screen and (max-height: 800px) {
    .activity-mess {
        -webkit-transform:scale(.9);
        transform: scale(.9);
        -webkit-transform-origin: left top;
        transform-origin: left top
    }

    .main-phone {
          width:367px;
         height:662px;
         background: url(../images/main_phone.png) no-repeat center center/367px 662px;
    }
    .main-qrcode {
         position: absolute;
        bottom: 139px;
         left: 75px;
         width: 214px;
         height: 214px;
    }
}

@media screen and (min-width: 1800px) {
    .activity-content {
        top:50%!important;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}

@media screen and (min-width: 1200px) {
     .section-phone {
        width: 400px !important;
        height: 500px !important;
    }
    .home .section-right .right-title {
    font-size: 40px !important;
   /* line-height: 80px !important;*/

    }


.home .section-right .right-sub {
    font-size: 32px !important;
  /*  line-height: 32px !important;*/

}
}

@media screen and (min-width: 1500px) and (max-width:1800px) {
   /* .activity-content {
        top:200px!important
    }*/
}

@media screen and (min-width: 2560px) {
    .activity-mess-item {
        width:7683px!important
    }

    .section-phone {
        width: 600px !important;
        height: 700px !important;
    }
}

@media screen and (max-width: 1200px) {
    .home .section-avatar .section-content {
        width:960px
    }

    .home .section-avatar img {
        width: 960px;
        height: 612px
    }
    .main-slogan {
         font-size: 50px !important;
    }
}

@media screen and (max-width: 1440px) {
    .home .section-right {
        padding-left:0
    }

    .home .aside {
        right: 58px
    }
}
.contact-social  a {
    display: block;
    cursor: pointer;
    width: 30px;
    height: 30px;
}

.social-icon {
     width: 30px;
    height: 30px;
}

 .facebook  {
     background: url('../images/contact/contact_fb.png') no-repeat center center/30px 30px;
}
.facebook:hover {
     background: url('../images/contact/contact_fb_h.png') no-repeat center center/30px 30px;
}
.twtter {
     background: url('../images/contact/contact_tw.png') no-repeat center center/30px 30px;
}
.twtter:hover {
     background: url('../images/contact/contact_tw_h.png') no-repeat center center/30px 30px;
}
.contact_ins {
     background: url('../images/contact/contact_ins.png') no-repeat center center/30px 30px;
}
.contact_ins:hover {
     background: url('../images/contact/contact_ins_h.png') no-repeat center center/30px 30px;
}
.wechat {
     background: url('../images/contact/contact_wechat.png') no-repeat center center/30px 30px;
}
.wechat:hover {
     background: url('../images/contact/contact_wechat_h.png') no-repeat center center/30px 30px;
}
.bilibili {
     background: url('../images/contact/contact_bilibili.png') no-repeat center center/30px 30px;
}
.bilibili:hover {
     background: url('../images/contact/contact_bilibili_h.png') no-repeat center center/30px 30px;
}
.cn.home .section-main .main-content>img.cn {
    display: block;
    width: 902px;
    height: 144px
}

.en.home .section-main .main-content>img.en {
    width: 1071px;
    height: 218px;
    display: block
}

.cn.home .section-main .main-content .slogan {
    display: block
}



.cn.home .section-activity .cn_footer {
    display: block
}



.cn.home .section-avatar .section-content img.cn {
    display: block
}

.en.home .section-avatar .section-content img.en {
    display: block
}

.outside {
    font-size: 0;
    background-color: #252a57
}

.outside .main {
    position: relative;
    min-height: 100%
}

.outside .main-bg {
    width: 100%
}


.outside .main-btn:hover {
    background-color: #21beba
}

.outside .main-btn:active {
    background-color: #1da9a6
}



/*
    设置在弹性容器上的属性
*/
.hl_flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/*flex-direction属性决定主轴的方向（即项目的排列方向）。*/
.hl_row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.hl_column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}


/*默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。*/
.hl_nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.hl_wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}


/*justify-content属性定义了项目在主轴上的对齐方式。*/
.justify_content__flex_start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.justify_content__flex_end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.justify_content__center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.justify_content__space_between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.justify_content__space_around {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

/*align-items属性定义项目在交叉轴上如何对齐。*/
.align_items__flex_start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.align_items__flex_end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.align_items__center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.align_items__baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

/*align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。*/
.align_content__flex_start {
    -ms-flex-line-pack: start;
    align-content: flex-start;
}
.align_content__flex_end {
    -ms-flex-line-pack: end;
    align-content: flex-end;
}
.align_content__center {
    -ms-flex-line-pack: center;
    align-content: center;
}
.align_content__space_between {
    -ms-flex-line-pack: justify;
    align-content: space-between;
}
.align_content__space_around {
    -ms-flex-line-pack: distribute;
    align-content: space-around;
}

/*
    设置在弹性项目上的属性
*/

/*order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。以下是兼容样式写法示例，可根据需要修改属性值。*/
.order__1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

/*flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。以下是兼容样式写法示例，可根据需要修改属性值。*/
.flex_grow__1 {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

/*flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。以下是兼容样式写法示例，可根据需要修改属性值。*/
.flex_shrink__0 {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/*
    flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
    以下是兼容样式写法示例，可根据需要修改属性值。
*/
.flex_basis__100px {
    -ms-flex-preferred-size: 100px;
    flex-basis: 100px;
}

/*align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。*/
.align_self__flex_start {
    -ms-flex-item-align: start;
    align-self: flex-start;
}
.align_self__flex_end {
    -ms-flex-item-align: end;
    align-self: flex-end;
}
.align_self__center {
    -ms-flex-item-align: center;
    align-self: center;
}
.align_self__baseline {
    -ms-flex-item-align: baseline;
    align-self: baseline;
}