@keyframes ym_tleft{0%, 60%, 75%, 90%, 100%{animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);} 
    0%{opacity: 0;transform: translate3d(-500px, 0, 0);} 
    60%{opacity: 1;transform: translate3d(25px, 0, 0);} 
    75%{-webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0);} 90%{-webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0);} 
    100%{-webkit-transform: none; transform: none;}}
.ym_tleft{animation-name: ym_tleft;animation-duration:1s}
.ym_up {-webkit-animation-name: ym_up;animation-name: ym_up;animation-duration:2s;}
@keyframes ym_up{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes ym_ud {
    0% {transform: translateY(0px);}
    50% {transform: translateY(20px);}
    100% {transform: translateY(0px);}
}
@keyframes ym_rl {
    0% {transform: translateX(0px);}
    50% {transform: translateX(20px);}
    100% {transform: translateX(0px);}
}
@keyframes ym_xz {transform: rotateY(180deg);transition-duration: 0.6s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: all;}
.ym_bt{padding: 90px 0 60px;text-align: center;}
.ym_bt h2{font-size: 52px;line-height: 52px;color: #333333;font-weight: bold;text-align: center;margin-bottom: 26px;}
.ym_bt p{font-size: 24px;line-height: 24px;color: #5e5e5e;text-align: center;font-weight: lighter;}
.ym_bc{width:100%;padding:50px 10%;background: url(/imgs/gn/app_a.jpg) center bottom no-repeat #ffffff;overflow: hidden;}
.ym_bc .ym_bcn{width:100%;display: flex; align-items: center; justify-content: space-between; margin: 0 auto;}
.ym_bc .ym_bcn li{width:24%;margin: 2% 0;justify-content: space-between;background: #ffffff; text-align: center; border-radius: 10px; overflow: hidden; transition: 0.8s;}
.ym_bc .ym_bcn li span{width: 110px; height: 110px; margin: 0 auto 10px; transition: 0.8s;overflow:hidden;display:block}
.ym_bc .ym_bcn li span img{width: 100%; display: block;transition: 0.8s;}
.ym_bc .ym_bcn li h6{white-space: nowrap; font-size: 30px; font-family: Microsoft YaHei; font-weight: bold; color: #000000; line-height: 36px; margin-bottom: 8px; transition: 0.8s;}
.ym_bc .ym_bcn li p{font-size: 18px; font-family: Microsoft YaHei; font-weight: 400; color: #5E5E5E; line-height:24px;margin-bottom:50px}
.ym_bc .ym_bcn li:hover{background: #026eff;}
.ym_bc .ym_bcn li:hover h6{color: #fff;}
.ym_bc .ym_bcn li:hover p{color: #fff;}
.ym_bc .ym_bcn li:hover span img{margin-top:-95px;}
.ym_bk{width:100;padding:50px 10%;overflow: hidden;}
.ym_bk .ym_bkn{height: 490px; background: url(/imgs/gn/app_b.png) center bottom no-repeat; position: relative; margin-top:10px;}
.ym_bk .ym_bkn .ym_bknl{position: absolute;}
.ym_bk .ym_bkn .ym_bknl span{width: 85px; height: 72px; display: block; position: absolute; top: calc(50% - 36px);}
.ym_bk .ym_bkn .ym_bknl span img{width: 100%; height: 100%; display: block;}
.ym_bk .ym_bkn .ym_bknl span img.sj{display: none;}
.ym_bk .ym_bkn .ym_bknl h6{font-size: 22px; font-family: Microsoft YaHei; font-weight: 400; color: #000; line-height: 30px; margin:0 0 10px 10px;}
.ym_bk .ym_bkn .ym_bknl p{font-size: 16px; font-family: Microsoft YaHei; font-weight: 300; color: #000; line-height: 24px;margin-left:10px;}
.ym_bk .ym_bkn .ym_bknl:nth-child(1){padding-right: 104px; right: calc(50% + 186px); top: 125px; text-align: right;animation: ym_rl 3s -2s linear infinite;}
.ym_bk .ym_bkn .ym_bknl:nth-child(1) span{right: 0;animation: ym_rl 3s -2s linear infinite;}
.ym_bk .ym_bkn .ym_bknl:nth-child(2){padding-left: 104px; left: calc(50% + 150px); top: 125px; text-align: left;animation: ym_rl 1.8s -2.2s linear infinite;}
.ym_bk .ym_bkn .ym_bknl:nth-child(2) span{left: 0;animation: ym_rl 1.8s -2.2s linear infinite;}
.ym_bk .ym_bkn .ym_bknl:nth-child(3){padding-right: 104px; right: calc(50% + 186px); top: 330px; text-align: right;animation: ym_rl 1.6s -2.5s linear infinite;}
.ym_bk .ym_bkn .ym_bknl:nth-child(3) span{right: 0;animation: ym_rl 1.6s -2.5s linear infinite;}
.ym_bk .ym_bkn .ym_bknl:nth-child(4){padding-left: 104px; left: calc(50% + 150px); top: 330px; text-align: left;animation: ym_rl 2s -2.5s linear infinite;}
.ym_bk .ym_bkn .ym_bknl:nth-child(4) span{left: 0;animation: ym_rl 2s -2.5s linear infinite;}
.ym_bf{width:100%;padding:50px 10%; overflow: hidden;}
.ym_bf .ym_bfn{height: 720px; background: url(/imgs/gn/app_d.png) center center no-repeat; position: relative; margin: 10px 0;}
.ym_bf .ym_bfn .ym_bfnl{position: absolute; width: 106px; height: 106px;}
.ym_bf .ym_bfn .ym_bfnl span{display: block; width: 106px; height: 106px;}
.ym_bf .ym_bfn .ym_bfnl span img{display: block; width: 100%; height: 100%;}
.ym_bf .ym_bfn .ym_bfnl em{line-height: 46px; font-size: 18px; color: #333333; display: block; text-align: center;}
.ym_bf .ym_bfn .ym_bfnl:nth-child(1){right: calc(50% + 182px); top: -30px; animation: ym_ud 3s -2s linear infinite;}
.ym_bf .ym_bfn .ym_bfnl:nth-child(2){left: calc(50% + 150px); top: -40px; animation: ym_ud 2.9s -3s linear infinite;}
.ym_bf .ym_bfn .ym_bfnl:nth-child(3){left: calc(50% + 300px); top: 120px; animation: ym_ud 1.8s -2.2s linear infinite;}
.ym_bf .ym_bfn .ym_bfnl:nth-child(4){left: calc(50% + 430px); top: 304px; animation: ym_ud 2.7s -2.6s linear infinite;}
.ym_bf .ym_bfn .ym_bfnl:nth-child(5){left: calc(50% + 282px); top: 515px; animation: ym_ud 1.6s -2.5s linear infinite;}
.ym_bf .ym_bfn .ym_bfnl:nth-child(6){right: calc(50% + 256px); top: 550px; animation: ym_ud 2.1s -1.6s linear infinite;}
.ym_bf .ym_bfn .ym_bfnl:nth-child(7){right: calc(50% + 440px); top: 410px; animation: ym_ud 2s -2.5s linear infinite;}
.ym_bf .ym_bfn .ym_bfnl:nth-child(8){right: calc(50% + 353px); top: 190px; animation: ym_ud 3.2s -1.8s linear infinite;}

.ym_by{width:100%;padding:50px 10%;overflow:hidden;}
.ym_byn{width:100%;height:100%}
.ym_by .ym_byn .ym_bynl{position: relative; padding-right: 50%; margin-bottom:3%;height:400px;}
.ym_by .ym_byn .ym_bynl:last-child{margin-bottom: 0;}
.ym_by .ym_byn .ym_bynl .ym_byp{position: absolute; width: 50%; right: 0; top: 0; height: 100%; overflow: hidden; background-color: #fff; border-radius: 10px;}
.ym_by .ym_byn .ym_bynl .ym_byw{height: 100%; width: 100%; padding-top: 10px; position: relative;}
.ym_by .ym_byn .ym_bynl .ym_byw em{line-height: 1; font-size:150px; color: #999999; display: inline-block; font-family: Impact; position: absolute;z-index:-1;top: 0;opacity:0.3}
.ym_by .ym_byn .ym_bynl .ym_byw h1{font-size:36px; line-height:80px; color: #000000; margin-top:65px; position: relative; z-index: 2; font-weight: bold;}
.ym_by .ym_byn .ym_bynl .ym_byw p{font-size: 20px; line-height: 1.5; color: #999999; width: 80%; height: 120px; position: relative; z-index: 2;}
.ym_by .ym_byn .ym_bynl .ym_byw a{display: block; width:150px; height:50px; border: 1px solid #026eff; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #363636; line-height: 1; border-radius:23px; transition: 0.5s;}
.ym_by .ym_byn .ym_bynl:nth-child(2n + 0){padding-left: 50%; padding-right: 0;}
.ym_by .ym_byn .ym_bynl:nth-child(2n + 0) .ym_byp{left: 0; right: auto;}
.ym_by .ym_byn .ym_bynl:nth-child(2n + 0) .ym_byw{text-align: right;}
.ym_by .ym_byn .ym_bynl:nth-child(2n + 0) .ym_byw em{right:30px;}
.ym_by .ym_byn .ym_bynl:nth-child(2n + 0) .ym_byw p{margin: 0 0 0 auto;}
.ym_by .ym_byn .ym_bynl:nth-child(2n + 0) .ym_byw a{margin: 0 0 0 auto;}
.ym_by .ym_byn .ym_bynl .ym_byw a:hover{background-color: #026eff; color: #ffffff;}
.ym_by .ym_byn .ym_bynl:hover img{transform: rotateY(180deg);transition-duration: 0.6s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: all;}
.ym_by .ym_byn .ym_bynl:hover em{opacity:0.8}

.ym_bg{width:100%;padding:50px 10%;overflow:hidden;}
.ym_bg .ym_bgn{width:100%;display: flex; flex-wrap: wrap; border-top: 1px solid #f3f5f7; border-left: 1px solid #f3f5f7;}
.ym_bg .ym_bgn .ym_bgnl{width: 20%; height: 240px; background-color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: #f3f5f7 2px solid; border-right: 2px solid #f3f5f7; padding-top: 13px; transition: 0.5s;}
.ym_bg .ym_bgn .ym_bgnl:hover{position: relative; z-index: 2; box-shadow: 0px 0px 0.38rem 0px rgba(15 14 96 / 84%);}
.ym_bg .ym_bgn .ym_bgnl span{width:50px; height:50px; display: block; margin-bottom: 16px;}
.ym_bg .ym_bgn .ym_bgnl span img{width: 100%; height: 100%; display: block;}
.ym_bg .ym_bgn .ym_bgnl em{font-size: 18px; color: #333333; line-height: 32px;}