@charset "utf-8";a,abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,ul,var,video {
    border: 0;
    margin: 0;
    outline: 0;
    padding: 0
}

a,a:link,a:visited {
    color: #666;
    text-decoration: none
}

html {
    height: 100%;
    background: #fff;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    font-family: roboto,"Heiti SC",Helvetica,"Droidsansfallback","Droid Sans",'\5FAE\8F6F\96C5\9ED1',ProximaThin,"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
    -webkit-touch-callout: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
    -webkit-font-smoothing: antialiased;
    color: #666;
    background: #fff;
    line-height: 1.5em
}

b,strong {
    font-weight: bold
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
    font-size: 0;
    background: transparent
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%
}

th,td,caption {
    vertical-align: middle;
    font-weight: normal;
    text-align: left
}

* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    box-sizing: border-box
}

textarea {
    resize: none;
    border: 0;
    padding: 8px 0
}

input,button,select,textarea {
    outline: none;
    -webkit-appearance: none
}

li {
    list-style: none
}

h1,h2,h3,h4,h5 {
    font-weight: normal
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: "";
    clear: both;
    height: 0
}

*html .clearfix {
    zoom:1}

*:first-child+html .clearfix {
    zoom:1}

@media screen and (min-width: 310px) and (max-width:380px) {
    body,h1,h2,h3,h4,h5,h6,input,button,textarea,select,optgroup,option {
        font-size:7px
    }
}

@media screen and (min-width: 381px) and (max-width:750px) {
    body,h1,h2,h3,h4,h5,h6,input,button,textarea,select,optgroup,option {
        font-size:8px
    }
}

@media screen and (min-width: 751px) and (max-width:900px) {
    body,h1,h2,h3,h4,h5,h6,input,button,textarea,select,optgroup,option {
        font-size:9px
    }
}

@media screen and (min-width: 901px) and (max-width:1090px) {
    body,h1,h2,h3,h4,h5,h6,input,button,textarea,select,optgroup,option {
        font-size:12px
    }
}

@media screen and (min-width: 1091px) {
    body,h1,h2,h3,h4,h5,h6,input,button,textarea,select,optgroup,option {
        font-size:14px
    }
}

.fl {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0
}

.fr {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0
}

.cb {
    clear: both
}

.txt {
    display: inline-block;
    vertical-align: middle
}

.pop {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.box {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 200px;
    height: 100px;
    background: #fff;
    overflow: visible;
    text-align: center
}

.mask {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.5)
}

.blue_btn,a.blue_btn,a.blue_btn:link,a.blue_btn:visited {
    color: #fff;
    background: #3c73ea;
    text-align: center;
    box-sizing: content-box
}

a.blue_btn:hover {
    background-color: #5384ec
}

a.blue_btn:active {
    background-color: #2562e8
}

.blue {
    color: #5d9cee
}

body {
    position: relative;
    height: 100%;
    overflow: hidden
}

.layout {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 800%;
    transition: transform 1s
}

.top_all {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 5.555555555555555%;
    background: #fff;
    box-shadow: 0 10px 40px #fff
}

.top_center {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    max-width: 1372px;
    margin: 0 auto;
    transition: max-width 1s;
    animation: top_center 1s forwards;
    opacity: 0
}

.top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    width: 100%;
    text-align: left;
    margin-top: 1%
}

.logo {
    display: inline-block;
    vertical-align: middle;
    width: 2.9154518950437316%;
    padding-top: 3.3527696793002915%;
    background: url("../wpsweb/images/product/wps2019_animattion/logo.png") no-repeat;
    background-size: 100% auto;
    margin-left: 15px
}

.top_right {
    float: right;
    line-height: 2.875em;
    transition: opacity 1s
}

.top_right a {
    padding: 0 1.3125em
}

.banner_txt {
    position: absolute;
    transform: translateY(100%);
    left: 0;
    right: 0;
    z-index: 7;
    width: 100%;
    text-align: center;
    animation: banner_txt 1s forwards;
    opacity: 0;
    padding-top: 18.221574344023324%
}

.section_title1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 36.078717201166185%;
    padding-top: 5.466472303206997%;
    margin: 0 auto;
    background: no-repeat center center;
    background-image: url("../wpsweb/images/product/wps2019_animattion/WPS2019.svg");
    background-size: 100% auto;
    transition: opacity 1s
}

.section_title1_txt {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    width: 36.078717201166185%;
    padding-top: 5.393586005830904%;
    margin: 0 auto;
    background: no-repeat center center;
    background-image: url("../wpsweb/images/product/wps2019_animattion/title1_txt.png");
    background-size: 100% auto;
    transition: opacity 1s
}

a.banner_btn {
    display: block;
    position: absolute;
    top: 72%;
    right: 50%;
    transform: translateX(50%);
    width: 22.886297376093296%;
    padding: 1.5% 0;
    border-radius: 2.5em;
    font-size: 1.75em;
    transition: opacity 1s
}

.verson_txt {
    position: absolute;
    top: 102.4%;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 1
}

.box {
    position: relative;
    width: 100%;
    height: 12.5%;
    margin: 0 auto
}

.section {
    opacity: 0;
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    transition: opacity 1s
}

.box_dot {
    opacity: 0;
    position: absolute;
    z-index: 11;
    top: 50%;
    right: 30px;
    margin-top: -139.5px;
    height: 279px;
    transition: opacity 1s
}

.box_dot li {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #f1f2f4;
    margin: 20px 0;
    cursor: pointer
}

.box_dot li.active {
    background-color: #3c73ea
}

.section_center {
    position: relative;
    width: 100%;
    max-width: 1372px;
    height: 100%;
    margin: 0 auto;
    transition: max-width .5s
}

.section_center_box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 65.59766763848397%
}

.banner {
    width: 100%
}

.img1 {
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 39.752005835156815%;
    background: url("../wpsweb/images/product/wps2019_animattion/img1-bg.png") no-repeat;
    background-size: 100% auto;
    animation: img1 2s forwards;
    opacity: 1
}

.img1_word {
    position: absolute;
    top: 12.477064220183486%;
    left: 25.164113785557984%;
    width: 14.514952589350838%;
    height: 36.51376146788991%;
    background: url("../wpsweb/images/product/wps2019_animattion/img1-word.png") no-repeat;
    background-size: 100% auto;
    animation: img1_word 3s forwards;
    opacity: 1
}

.img1_ppt {
    position: absolute;
    top: 6.055045871559633%;
    right: 29.029905178701675%;
    width: 14.73377097009482%;
    height: 40.36697247706422%;
    background: url("../wpsweb/images/product/wps2019_animattion/img1-ppt.png") no-repeat;
    background-size: 100% auto;
    animation: img1_ppt 3s forwards;
    opacity: 1
}

.img1_girl {
    position: absolute;
    width: 18.453683442742523%;
    height: 21.65137614678899%;
    bottom: 0;
    left: 22.61123267687819%
}

.girl_body {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: url("../wpsweb/images/product/wps2019_animattion/img1-girl-body.png") no-repeat;
    background-size: 100% auto;
    top: 0;
    left: 0
}

.left_foot {
    position: absolute;
    z-index: 3;
    width: 12.25296442687747%;
    height: 73.72881355932203%;
    background: url("../wpsweb/images/product/wps2019_animattion/img1-girl-left.png") no-repeat;
    background-size: 100% auto;
    bottom: 18.64406779661017%;
    left: 0;
    animation: left_foot 2s infinite;
    transform-origin: 50% 100%
}

.right_foot {
    position: absolute;
    z-index: 1;
    width: 22.529644268774703%;
    height: 54.23728813559322%;
    background: url("../wpsweb/images/product/wps2019_animattion/img1-girl-right.png") no-repeat;
    background-size: 100% auto;
    bottom: 21.1864406779661%;
    left: 3.968253968253968%;
    animation: right_foot 2s infinite;
    transform-origin: 50% 100%
}

.img1_man {
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 18.818380743982495%;
    height: 41.10091743119266%;
    background: url("../wpsweb/images/product/wps2019_animattion/img1-man.png") no-repeat;
    background-size: 100% auto;
    right: 20.933625091174328%;
    animation: img1_man 2s infinite forwards
}

.img1_tree {
    position: absolute;
    z-index: 1;
    width: 10.722100656455142%;
    height: 73.76146788990826%;
    bottom: 0;
    right: 15.171407731582786%
}

.tree_top {
    position: absolute;
    z-index: 1;
    width: 74.14965986394559%;
    height: 62.93532338308457%;
    background: url("../wpsweb/images/product/wps2019_animattion/img1-tree-top.png") no-repeat;
    background-size: 100% auto;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation: tree_top 2s infinite;
    transform-origin: 50% 100%
}

.tree_foot {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 43.03482587064676%;
    background: url("../wpsweb/images/product/wps2019_animattion/img1-tree-foot.png") no-repeat;
    background-size: 100% auto;
    bottom: 0;
    left: 0;
    right: 0
}

.img1_center {
    position: absolute;
    z-index: 1;
    width: 26.039387308533918%;
    top: 51.00917431192661%;
    left: 0;
    right: 0;
    margin: 0 auto
}

.img1_center_txt {
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    font-size: .75em;
    animation: img1_center_txt 6s linear;
    width: 100%;
    text-overflow: ellipsis
}

@keyframes top_center {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes banner_txt_scoll_none {
    from {
        transform: translateY(0);
        opacity: 1
    }

    to {
        transform: translateY(50%);
        opacity: 1
    }
}

@keyframes banner_txt_scoll {
    from {
        transform: translateY(50%);
        opacity: 1
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes section_title1_none {
    from {
        transform: translateX(-101%) scale(.5, .5)
    }

    to {
        transform: translateX(0) scale(1, 1)
    }
}

@keyframes section_title1 {
    from {
        transform: translateX(0) scale(1, 1)
    }

    to {
        transform: translateX(-101%) scale(.5, .5)
    }
}

@keyframes banner_btn_none {
    from {
        top: 0;
        right: 0;
        transform: translateX(0) scale(.5, .5)
    }

    to {
        top: 72%;
        right: 50%;
        transform: translateX(50%) scale(1, 1)
    }
}

@keyframes banner_btn {
    from {
        top: 72%;
        right: 50%;
        transform: translateX(50%) scale(1, 1)
    }

    to {
        top: 0;
        right: 0;
        transform: translateX(0) scale(.5, .5)
    }
}

@keyframes banner_txt {
    from {
        transform: translateY(100%);
        opacity: 0
    }

    to {
        transform: translateY(50%);
        opacity: 1
    }
}

@keyframes img1 {
    0% {
        transform: translateY(20%);
        opacity: 0
    }

    50% {
        transform: translateY(20%);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes img1_word {
    0% {
        transform: translate(0, 0);
        opacity: 0
    }

    66% {
        transform: translate(0, 0);
        opacity: 0
    }

    100% {
        transform: translate(-100%, -150%);
        opacity: 1
    }
}

@keyframes img1_ppt {
    0% {
        transform: translate(0, 0);
        opacity: 0
    }

    66% {
        transform: translate(0, 0);
        opacity: 0
    }

    100% {
        transform: translate(100%, -100%);
        opacity: 1
    }
}

@keyframes left_foot {
    0% {
        transform: rotate(5deg)
    }

    50% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(5deg)
    }
}

@keyframes right_foot {
    0% {
        transform: rotate(-5deg)
    }

    50% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(-5deg)
    }
}

@keyframes img1_man {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-2px)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes tree_top {
    0% {
        transform: rotate(2deg)
    }

    50% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(2deg)
    }
}

@keyframes img1_center_txt {
    0% {
        width: 0;
        text-overflow: clip
    }

    60% {
        width: 0;
        text-overflow: clip
    }

    99% {
        width: 100%;
        text-overflow: clip
    }

    100% {
        width: 100%;
        text-overflow: ellipsis
    }
}

.section_all {
    width: 100%;
    max-width: 100%
}

.section_content {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: 100%
}

.section2_content {
    background: url("../wpsweb/images/product/wps2019_animattion/img2-bg.png") no-repeat center bottom;
    background-size: 100% auto
}

.section_title {
    position: absolute;
    z-index: 2;
    top: 7%;
    left: 0;
    right: 0;
    width: 36.078717201166185%;
    padding-top: 10.860058309037901%;
    margin: 0 auto;
    background: no-repeat center center;
    background-size: 100% auto
}

.section_title2 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/title2.png")
}

.section_title3 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/title3.png")
}

.section_title4 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/title4.png")
}

.section_title5 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/title5.png")
}

.section_title6 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/title6.png")
}

.section_title7 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/title7.png")
}

.section_title8 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/title8.png")
}

.section_title9 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/title9.png");
    top: 18%
}

.section2_center {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    max-width: 1372px;
    margin: 0 auto;
    transition: max-width .5s
}

.img2 {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    width: 56.04956268221575%;
    padding-top: 47.886297376093296%
}

.img2_top {
    position: absolute;
    top: 8.37138508371385%;
    left: 3.1209362808842656%;
    width: 93.36801040312093%;
    height: 8.82800608828006%;
    animation: img2_top 8s infinite;
    background: #4993ea
}

.img2_logo {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 27.715877437325904%;
    height: 37.93103448275862%;
    background: url("../wpsweb/images/product/wps2019_animattion/img2-logo.png") no-repeat center center;
    background-size: 100% auto;
    margin: auto
}

.img2_active {
    position: absolute;
    z-index: 1;
    left: 34.26183844011142%;
    width: 5.988857938718663%;
    height: 81.03448275862068%;
    background: rgba(255,255,255,0.3);
    top: 10.344827586206897%;
    border-radius: 3px;
    animation: img2_active 8s infinite
}

.img2_bg {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../wpsweb/images/product/wps2019_animattion/img2-computer.png") no-repeat center top;
    background-size: 100% auto
}

.img2_banner {
    position: absolute;
    z-index: 2;
    width: 93.62808842652795%;
    height: 57.077625570776256%;
    top: 17.35159817351598%;
    left: 3.1209362808842656%;
    background: #fff
}

.img2_ul {
    position: absolute;
    top: 0;
    left: 3.63%;
    width: 400%;
    height: 100%;
    animation: img2_ul 8s infinite
}

.img2_ul li {
    float: left;
    width: 22.95138888888889%;
    height: 100%;
    background-size: auto 91.73333333333333%;
    background-position: center center;
    background-repeat: no-repeat
}

.img2-1 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/img2-2.png")
}

.img2-2 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/img2-1.png")
}

.img2-3 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/img2-3.png")
}

.img2-4 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/img2-4.png")
}

@keyframes img2_top {
    0% {
        background-color: #4993ea
    }

    14% {
        background-color: #4993ea
    }

    16% {
        background-color: #14a22d
    }

    39% {
        background-color: #14a22d
    }

    41% {
        background-color: #e76b49
    }

    64% {
        background-color: #e76b49
    }

    66% {
        background-color: #65799a
    }

    89% {
        background-color: #65799a
    }

    91% {
        background-color: #4993ea
    }
}

@keyframes img2_active {
    0% {
        transform: translateX(0)
    }

    12% {
        transform: translateX(0)
    }

    16% {
        transform: translateX(138%)
    }

    25% {
        transform: translateX(138%)
    }

    37% {
        transform: translateX(138%)
    }

    41% {
        transform: translateX(277%)
    }

    50% {
        transform: translateX(277%)
    }

    62% {
        transform: translateX(277%)
    }

    66% {
        transform: translateX(415%)
    }

    75% {
        transform: translateX(415%)
    }

    87% {
        transform: translateX(415%)
    }

    91% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes img2_ul {
    0% {
        transform: translateX(0)
    }

    16% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(-23%)
    }

    41% {
        transform: translateX(-23%)
    }

    50% {
        transform: translateX(-46%)
    }

    66% {
        transform: translateX(-46%)
    }

    75% {
        transform: translateX(-69%)
    }

    91% {
        transform: translateX(-69%)
    }

    100% {
        transform: translateX(0)
    }
}

.img3_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 80.68513119533527%;
    padding-top: 50.218658892128275%;
    margin: 0 auto;
    background: url("../wpsweb/images/product/wps2019_animattion/img3-bg.png") no-repeat center bottom;
    background-size: 100% auto
}

.img3_computer {
    position: absolute;
    top: 16.545718432510885%;
    left: -10%;
    width: 49.05149051490515%;
    height: 61.10304789550073%;
    background: url("../wpsweb/images/product/wps2019_animattion/img3-computer.png") no-repeat;
    background-size: 100% auto;
    animation: img3_computer 1s forwards;
    opacity: 1
}

.img3_computer_txt {
    position: absolute;
    top: 2.8503562945368173%;
    right: 27.071823204419886%;
    width: 47.51381215469613%;
    height: 77.90973871733968%;
    background: url("../wpsweb/images/product/wps2019_animattion/img3-computer-txt.png") no-repeat;
    background-size: 100% auto;
    animation: img3_txt 2s;
    transform: scale(1, 1)
}

.img3_pad {
    position: absolute;
    right: 0;
    bottom: 18.867924528301888%;
    width: 33.694670280036135%;
    height: 31.059506531204644%;
    background: url("../wpsweb/images/product/wps2019_animattion/img3-pad.png") no-repeat;
    background-size: 100% auto;
    animation: img3_pad 1s forwards;
    opacity: 1
}

.img3_pad_txt {
    position: absolute;
    top: 10.2803738317757%;
    left: 15.281501340482572%;
    width: 73.45844504021449%;
    height: 71.02803738317756%;
    background: url("../wpsweb/images/product/wps2019_animattion/img3-pad-txt.png") no-repeat;
    background-size: 100% auto;
    animation: img3_txt 2s;
    transform: scale(1, 1)
}

.img3_phone {
    position: absolute;
    left: 35.59168925022583%;
    bottom: -4.063860667634253%;
    width: 29.358626919602532%;
    height: 27.431059506531202%;
    background: url("../wpsweb/images/product/wps2019_animattion/img3-phone.png") no-repeat;
    background-size: 100% auto;
    animation: img3_phone 1s forwards;
    opacity: 1
}

.img3_phone_txt {
    position: absolute;
    top: 13.227513227513226%;
    left: 14.76923076923077%;
    width: 67.38461538461539%;
    height: 57.943925233644855%;
    background: url("../wpsweb/images/product/wps2019_animattion/img3-phone-txt.png") no-repeat;
    background-size: 100% auto;
    animation: img3_txt 2s;
    transform: scale(1, 1)
}

.img3_man_all {
    position: absolute;
    right: 26.196928635953025%;
    bottom: 31.059506531204644%;
    width: 25.38392050587173%;
    height: 24.818577648766325%;
    animation: img3_man_all 1s forwards;
    opacity: 1
}

.img3_man {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: url("../wpsweb/images/product/wps2019_animattion/img3-man.png") no-repeat;
    background-size: 100% auto;
    animation: img3_man 4s infinite;
    bottom: 0
}

.img3_man_shadow {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 16.374269005847953%;
    width: 39.50177935943061%;
    height: 28.07017543859649%;
    background: url("../wpsweb/images/product/wps2019_animattion/img3-man-shadow.png") no-repeat;
    background-size: 100% auto;
    animation: img3_man_shadow 4s infinite
}

.img3_man_circle {
    position: absolute;
    z-index: 2;
    right: 20%;
    top: 22.923976608187132%;
    width: 88.96797153024912%;
    height: 81.87134502923976%
}

.circle_1,.circle_2,.circle_3 {
    position: absolute;
    border: 2px solid #fff;
    width: 50%;
    height: 75%;
    top: 10%;
    right: 10%;
    border-radius: 50%
}

.circle_1 {
    animation: circle 2s infinite;
    opacity: 0
}

.circle_2 {
    animation: circle 2s .3s infinite;
    opacity: 0
}

.circle_3 {
    animation: circle 2s .6s infinite;
    opacity: 0
}

@keyframes img3_computer {
    0% {
        transform: translateX(0);
        opacity: 0
    }

    50% {
        transform: translateX(0);
        opacity: 0
    }

    100% {
        transform: translateX(15%);
        opacity: 1
    }
}

@keyframes img3_pad {
    0% {
        transform: translateX(0);
        opacity: 0
    }

    50% {
        transform: translateX(0);
        opacity: 0
    }

    100% {
        transform: translateX(-20%);
        opacity: 0;
        opacity: 1
    }
}

@keyframes img3_phone {
    0% {
        transform: translateY(0);
        opacity: 0
    }

    50% {
        transform: translateY(0);
        opacity: 0
    }

    100% {
        transform: translateY(-30%);
        opacity: 1
    }
}

@keyframes img3_man_all {
    0% {
        transform: translateY(0);
        opacity: 0
    }

    50% {
        transform: translateY(0);
        opacity: 0
    }

    100% {
        transform: translateY(-45%);
        opacity: 1
    }
}

@keyframes img3_txt {
    0% {
        transform: scale(0, 0)
    }

    50% {
        transform: scale(0, 0)
    }

    100% {
        transform: scale(1, 1)
    }
}

@keyframes img3_man {
    0% {
        transform: translateY(0)
    }

    25% {
        transform: translateY(2%)
    }

    50% {
        transform: translateY(0)
    }

    75% {
        transform: translateY(2%)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes img3_man_shadow {
    0% {
        transform: translateY(0)
    }

    25% {
        transform: translateY(10%)
    }

    50% {
        transform: translateY(0)
    }

    75% {
        transform: translateY(10%)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes circle {
    0% {
        transform: scale(1, 1);
        opacity: .4
    }

    99.9% {
        transform: scale(1.5, 1.5);
        opacity: 0
    }

    100% {
        transform: scale(1, 1);
        opacity: .4
    }
}

.img4_bg {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 48.28592268417214%;
    margin: 0 auto;
    background: url("../wpsweb/images/product/wps2019_animattion/img4-bg.png") no-repeat center bottom;
    background-size: 100% auto
}

.img4_logo {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 23.867069486404834%;
    width: 60.83150984682714%;
    padding-top: 31.655725747629464%;
    margin: 0 auto;
    background: url("../wpsweb/images/product/wps2019_animattion/img4-logo.png") no-repeat center bottom;
    background-size: 100% auto;
    animation: img4_logo 4s infinite
}

.img4_girl {
    position: absolute;
    z-index: 3;
    left: 30.561633843909554%;
    bottom: 17.673716012084594%;
    width: 10.065645514223196%;
    padding-top: 20.787746170678336%
}

.img4_girl_body {
    position: absolute;
    z-index: 3;
    left: 5.797101449275362%;
    top: 0;
    width: 71.73913043478261%;
    height: 53.68421052631579%;
    background: url("../wpsweb/images/product/wps2019_animattion/img4-girl-body.png") no-repeat center bottom;
    background-size: 100% auto
}

.img4_girl_righthand_all {
    position: absolute;
    z-index: 4;
    right: 5.797101449275362%;
    top: 14.035087719298245%;
    width: 49.275362318840585%;
    height: 15.789473684210526%;
    animation: img4_girl_righthand_all 3s 1s infinite;
    transform: rotate(45deg);
    transform-origin: 0 48.888888888888886%
}

.img4_girl_righthand {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    background: url("../wpsweb/images/product/wps2019_animattion/img4-girl-righthand.png") no-repeat center bottom;
    background-size: 100% auto
}

.img4_girl_pan {
    position: absolute;
    z-index: 2;
    right: -10.294117647058822%;
    top: -4.444444444444445%;
    width: 39.705882352941174%;
    height: 31.11111111111111%;
    background: url("../wpsweb/images/product/wps2019_animattion/img4-girl-pan.png") no-repeat center bottom;
    background-size: 100% auto;
    animation: img4_girl_pan 3s 1s infinite;
    transform: rotate(0deg);
    transform-origin: 50% 50%
}

.img4_girl_lefthand {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 26.31578947368421%;
    width: 41.30434782608695%;
    height: 20.350877192982455%;
    background: url("../wpsweb/images/product/wps2019_animattion/img4-girl-lefthand.png") no-repeat center bottom;
    background-size: 100% auto;
    animation: img4_girl_lefthand 3s 1s infinite;
    transform: rotate(-10deg);
    transform-origin: 100% 12.068965517241379%
}

.img4_girl_rightfoot {
    position: absolute;
    z-index: 2;
    left: 21.73913043478261%;
    top: 43.859649122807014%;
    width: 42.7536231884058%;
    height: 56.14035087719298%;
    background: url("../wpsweb/images/product/wps2019_animattion/img4-girl-rightfoot1.png") no-repeat center bottom;
    background-size: 100% auto;
    animation: img4_girl_rightfoot 3s 1s infinite;
    transform: rotate(-10deg);
    transform-origin: 38.983050847457626% 0
}

.img4_girl_leftfoot {
    position: absolute;
    z-index: 1;
    left: 14.492753623188406%;
    top: 47.368421052631575%;
    width: 65.94202898550725%;
    height: 29.47368421052631%;
    background: url("../wpsweb/images/product/wps2019_animattion/img4-girl-leftfoot.png") no-repeat center bottom;
    background-size: 100% auto
}

.img4_boy {
    position: absolute;
    z-index: 3;
    right: 29.175784099197667%;
    bottom: 19.637462235649547%;
    width: 11.086797957695113%;
    padding-top: 14.73377097009482%
}

.img4_boy_body {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("../wpsweb/images/product/wps2019_animattion/img4-boy-body.png") no-repeat center bottom;
    background-size: 100% auto
}

.img4_boy_hand {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: img4_boy_hand 3s 1.5s infinite;
    transform: rotate(-20deg);
    transform-origin: 50.6578947368421% 38.11881188118812%
}

.img4_boy_hand1 {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("../wpsweb/images/product/wps2019_animattion/img4-boy-hand1.png") no-repeat center bottom;
    background-size: 100% auto
}

.img4_boy_hand2 {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("../wpsweb/images/product/wps2019_animattion/img4-boy-hand2.png") no-repeat center bottom;
    background-size: 100% auto;
    animation: img4_boy_hand2 3s 1.5s infinite;
    transform: rotate(-60deg);
    transform-origin: 23.026315789473685% 38.11881188118812%
}

@keyframes img4_logo {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-2%)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes img4_girl_righthand_all {
    0% {
        transform: rotate(45deg)
    }

    33% {
        transform: rotate(0deg)
    }

    66% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(45deg)
    }
}

@keyframes img4_girl_pan {
    0% {
        transform: rotate(0deg)
    }

    33% {
        transform: rotate(0deg)
    }

    40% {
        transform: rotate(30deg)
    }

    47% {
        transform: rotate(0deg)
    }

    66% {
        transform: rotate(30deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

@keyframes img4_girl_lefthand {
    0% {
        transform: rotate(-10deg)
    }

    33% {
        transform: rotate(0deg)
    }

    66% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(-10deg)
    }
}

@keyframes img4_girl_rightfoot {
    0% {
        transform: rotate(-10deg)
    }

    50% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(-10deg)
    }
}

@keyframes img4_boy_hand {
    0% {
        transform: rotate(-20deg)
    }

    33% {
        transform: rotate(0deg)
    }

    66% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(-20deg)
    }
}

@keyframes img4_boy_hand2 {
    0% {
        transform: rotate(-60deg)
    }

    33% {
        transform: rotate(0deg)
    }

    66% {
        transform: rotate(20deg)
    }

    100% {
        transform: rotate(-60deg)
    }
}

.img5_bg {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    width: 86.06856309263311%;
    padding-top: 46.97301239970824%;
    margin: 0 auto;
    background: url("../wpsweb/images/product/wps2019_animattion/img5-bg.png") no-repeat center bottom;
    background-size: 100% auto
}

.img5_pop {
    position: absolute;
    z-index: 2;
    top: -3.260869565217391%;
    right: 10.338983050847457%;
    width: 56.016949152542374%;
    padding-top: 42.96610169491525%;
    background: url("../wpsweb/images/product/wps2019_animattion/img5-pop.png") no-repeat;
    background-size: 100% auto;
    animation: img5_pop 1s 1s forwards
}

.img5_progress {
    box-sizing: border-box;
    position: absolute;
    z-index: 3;
    top: 39.447731755424066%;
    left: 10.59001512859304%;
    width: 15.128593040847202%;
    height: 19.723865877712033%;
    transform: scale(.8, 1)
}

.img5_progress_left_main,.img5_progress_right_main,.img5_progress_left_mask_main,.img5_progress_right_mask_main {
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    height: 100%;
    top: 0;
    border: .375em solid;
    border-radius: 50%
}

.img5_progress_left,.img5_progress_left_mask {
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    width: 50%;
    height: 100%;
    overflow: hidden;
    right: 0;
    top: 0
}

.img5_progress_right,.img5_progress_right_mask {
    box-sizing: border-box;
    position: absolute;
    z-index: 4;
    width: 50%;
    height: 100%;
    overflow: hidden;
    left: 0;
    top: 0
}

.img5_progress_left_mask {
    z-index: 5;
    animation: img5_progress_mask .1s 2.3s;
    animation-fill-mode: forwards
}

.img5_progress_right_mask {
    z-index: 3
}

.img5_progress_left_main,.img5_progress_left_mask_main {
    width: 200%;
    right: 0;
    border-color: #6eceae
}

.img5_progress_left_mask_main {
    border-color: #d9dde6
}

.img5_progress_right_main,.img5_progress_right_mask_main {
    width: 200%;
    left: 0;
    border-color: #6eceae
}

.img5_progress_right_mask_main {
    border-color: #d9dde6
}

.img5_progress_left_all {
    box-sizing: border-box;
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: img5_progress_left_all linear .3s 2s;
    transform: rotate(0deg);
    animation-fill-mode: forwards
}

.img5_progress_right_all {
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: img5_progress_right_all linear .1s 2.3s;
    transform: rotate(0deg);
    animation-fill-mode: forwards
}

.img5_tree_girl_all {
    position: absolute;
    z-index: 2;
    bottom: 16.61490683229814%;
    left: 17.11864406779661%;
    width: 21.1864406779661%;
    height: 47.36024844720497%;
    animation: img5_tree_girl_all 1s 1s forwards
}

.img5_tree_girl {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../wpsweb/images/product/wps2019_animattion/img5-tree-girl.png") no-repeat;
    background-size: 100% auto
}

.img5_girl_hand {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../wpsweb/images/product/wps2019_animattion/img5-tree-girl-hand.png") no-repeat;
    background-size: 100% auto;
    animation: img5_girl_hand linear 1s 2s;
    transform: rotate(45deg);
    animation-fill-mode: forwards;
    transform-origin: 54.800000000000004% 46.885245901639344%
}

.img5_data {
    position: absolute;
    z-index: 2;
    border: 2px solid #478de4;
    background: #fff;
    width: 1.2102874432677762%;
    height: 1.9723865877712032%;
    box-shadow: 0 0 15px #478de4;
    border-radius: 50%;
    animation: img5_data .4s 2s;
    bottom: 31.163708086785007%;
    left: 43.872919818456886%;
    animation-fill-mode: forwards
}

@keyframes img5_pop {
    0% {
        transform: translate(0, 0)
    }

    100% {
        transform: translate(-10%, 10%)
    }
}

@keyframes img5_tree_girl_all {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(20%)
    }
}

@keyframes img5_progress_left_all {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(-180deg)
    }
}

@keyframes img5_progress_right_all {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(-45deg)
    }
}

@keyframes img5_progress_mask {
    0% {
        z-index: 1
    }

    100% {
        z-index: 1
    }
}

@keyframes img5_data {
    0% {
        bottom: 31.163708086785007%;
        left: 43.872919818456886%
    }

    20% {
        bottom: 28.402366863905325%;
        left: 45.839636913767016%
    }

    40% {
        bottom: 27.613412228796847%;
        left: 47.655068078668684%
    }

    60% {
        bottom: 28.205128205128204%;
        left: 49.47049924357035%
    }

    80% {
        bottom: 29.388560157790927%;
        left: 51.13464447806354%
    }

    100% {
        bottom: 31.558185404339252%;
        left: 53.10136157337367%
    }
}

@keyframes img5_girl_hand {
    0% {
        transform: rotate(45deg)
    }

    40% {
        transform: rotate(0deg)
    }

    70% {
        transform: rotate(30deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

.img6_bg {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 43.731778425655975%;
    margin: 0 auto;
    background: url("../wpsweb/images/product/wps2019_animattion/img6-bg.png") no-repeat center top;
    background-size: 100% auto
}

.img6_txt {
    position: absolute;
    z-index: 2;
    top: 16.333333333333332%;
    left: 29.373177842565596%;
    width: 39.650145772594755%;
    height: 48%;
    background: url("../wpsweb/images/product/wps2019_animattion/img6-txt.png") no-repeat;
    background-size: 100% auto;
    animation: img6_txt .5s 1s;
    animation-fill-mode: forwards;
    transform: scale(0, 0)
}

.img6_logo {
    position: absolute;
    z-index: 2;
    top: 4.166666666666666%;
    left: 34.98542274052478%;
    width: 17.93002915451895%;
    height: 32%;
    background: url("../wpsweb/images/product/wps2019_animattion/img6-logo.png") no-repeat;
    background-size: 100% auto;
    animation: img6_txt .5s 1.5s;
    animation-fill-mode: forwards;
    transform: scale(0, 0)
}

.img6_border {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 43.731778425655975%;
    margin: 0 auto
}

.img6_border_1,.img6_border_2,.img6_border_3,.img6_border_4,.img6_border_5,.img6_border_6,.img6_border_7 {
    position: absolute;
    height: 1%;
    background: #5594f3;
    border-radius: 6px;
    animation-fill-mode: forwards
}

.img6_border_1 {
    animation: img6_border_1 1.2s 1s infinite;
    top: 9%
}

.img6_border_2 {
    animation: img6_border_2 1.2s 1.2s infinite;
    top: 22.333333333333332%
}

.img6_border_3 {
    animation: img6_border_3 1.2s 1.2s infinite;
    top: 45.666666666666664%
}

.img6_border_4 {
    animation: img6_border_4 1.2s 1.8s infinite;
    top: 67.33333333333333%
}

.img6_border_5 {
    animation: img6_border_5 1.2s 1s infinite;
    top: 1.6666666666666667%
}

.img6_border_6 {
    animation: img6_border_6 1.2s 1.2s infinite;
    top: 26.666666666666668%
}

.img6_border_7 {
    animation: img6_border_7 1.2s 1.4s infinite;
    top: 51.66666666666667%
}

.img6_man {
    position: absolute;
    z-index: 3;
    top: 46%;
    width: 24.41690962099125%;
    height: 34.5%;
    background: none;
    animation: img6_man 1.6s 1s;
    animation-fill-mode: forwards;
    right: 0;
    opacity: 0
}

.img6_man_foot_bottom {
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: 0;
    width: 92.83582089552239%;
    height: 36.71497584541063%;
    background: url("../wpsweb/images/product/wps2019_animattion/img6-foot-bottom.png") no-repeat;
    background-size: 100% auto
}

.img6_man_foot_top {
    position: absolute;
    z-index: 4;
    width: 24.776119402985074%;
    height: 26.570048309178745%;
    background: url("../wpsweb/images/product/wps2019_animattion/img6-foot-top.png") no-repeat;
    background-size: 100% auto;
    animation: img6_man_foot_top linear .1s 1.3s;
    animation-fill-mode: forwards;
    bottom: 24.154589371980677%;
    left: 43.28358208955223%;
    transform: rotate(-45deg);
    transform-origin: 10% 100%
}

.img6_man_body {
    position: absolute;
    z-index: 3;
    width: 61.49253731343284%;
    height: 39.130434782608695%;
    background: url("../wpsweb/images/product/wps2019_animattion/img6-body.png") no-repeat;
    background-size: 100% auto;
    animation: img6_man_body linear .1s 1.3s;
    animation-fill-mode: forwards;
    bottom: 67.6328502415459%;
    left: 5.970149253731343%;
    transform: rotate(90deg);
    transform-origin: 50% 100%
}

.img6_man_head {
    position: absolute;
    z-index: 3;
    width: 61.49253731343284%;
    height: 39.130434782608695%;
    background: url("../wpsweb/images/product/wps2019_animattion/img6-head.png") no-repeat;
    background-size: 100% auto;
    animation: img6_man_head linear .1s 1.3s;
    animation-fill-mode: forwards;
    bottom: 60.38647342995169%;
    left: 23.88059701492537%;
    transform: rotate(34deg);
    transform-origin: 50% 100%
}

@keyframes img6_txt {
    0% {
        transform: scale(0, 0)
    }

    100% {
        transform: scale(1, 1)
    }
}

@keyframes img6_border_1 {
    0% {
        right: 95.6268221574344%;
        width: 0
    }

    25% {
        right: 84.6938775510204%;
        width: 10.932944606413994%
    }

    50% {
        right: 84.6938775510204%;
        width: 0
    }

    100% {
        right: 84.6938775510204%;
        width: 0
    }
}

@keyframes img6_border_2 {
    0% {
        right: 85.42274052478133%;
        width: 0
    }

    25% {
        right: 74.12536443148689%;
        width: 10.932944606413994%
    }

    50% {
        right: 74.12536443148689%;
        width: 0
    }

    100% {
        right: 74.12536443148689%;
        width: 0
    }
}

@keyframes img6_border_3 {
    0% {
        right: 94.67930029154519%;
        width: 0
    }

    25% {
        right: 75.21865889212827%;
        width: 14.577259475218659%
    }

    50% {
        right: 75.21865889212827%;
        width: 0
    }

    100% {
        right: 75.21865889212827%;
        width: 0
    }
}

@keyframes img6_border_4 {
    0% {
        right: 92.71137026239067%;
        width: 0
    }

    25% {
        right: 74.12536443148689%;
        width: 14.577259475218659%
    }

    50% {
        right: 74.12536443148689%;
        width: 0
    }

    100% {
        right: 74.12536443148689%;
        width: 0
    }
}

@keyframes img6_border_5 {
    0% {
        right: 19.825072886297377%;
        width: 0
    }

    25% {
        right: 3.6443148688046647%;
        width: 14.577259475218659%
    }

    50% {
        right: 3.6443148688046647%;
        width: 0
    }

    100% {
        right: 3.6443148688046647%;
        width: 0
    }
}

@keyframes img6_border_6 {
    0% {
        right: 23.46938775510204%;
        width: 0
    }

    25% {
        right: 7.288629737609329%;
        width: 14.577259475218659%
    }

    50% {
        right: 7.288629737609329%;
        width: 0
    }

    100% {
        right: 7.288629737609329%;
        width: 0
    }
}

@keyframes img6_border_7 {
    0% {
        right: 27.113702623906704%;
        width: 0
    }

    25% {
        right: 10.932944606413994%;
        width: 14.577259475218659%
    }

    50% {
        right: 10.932944606413994%;
        width: 0
    }

    100% {
        right: 10.932944606413994%;
        width: 0
    }
}

@keyframes img6_man {
    0% {
        right: 0;
        background: none;
        opacity: 0
    }

    66% {
        right: 0;
        opacity: 1
    }

    80% {
        background: none
    }

    100% {
        right: 20.99125364431487%;
        background: url("../wpsweb/images/product/wps2019_animattion/img6-people-bg.png") no-repeat;
        background-size: 100% auto;
        opacity: 1
    }
}

@keyframes img6_man_foot_top {
    0% {
        transform: rotate(-45deg);
        bottom: 24.154589371980677%;
        left: 43.28358208955223%
    }

    100% {
        transform: rotate(0deg);
        bottom: 32.367149758454104%;
        left: 41.19402985074627%
    }
}

@keyframes img6_man_body {
    0% {
        transform: rotate(90deg);
        bottom: 36.231884057971016%;
        left: 0
    }

    100% {
        transform: rotate(0deg);
        bottom: 36.231884057971016%;
        left: 25.37313432835821%
    }
}

@keyframes img6_man_head {
    0% {
        transform: rotate(34deg);
        bottom: 36.231884057971016%;
        left: 0
    }

    100% {
        transform: rotate(0deg);
        bottom: 36.231884057971016%;
        left: 25.37313432835821%
    }
}

.img7_bg {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 49.59883296863603%;
    margin: 0 auto;
    background: url("../wpsweb/images/product/wps2019_animattion/img7-bg.png") no-repeat center top;
    background-size: 100% auto
}

.img7_pop {
    position: absolute;
    z-index: 1;
    top: 15.88235294117647%;
    left: 26.695842450765866%;
    width: 32.89569657184537%;
    height: 58.970588235294116%;
    margin: 0 auto;
    background: url("../wpsweb/images/product/wps2019_animattion/img7-pop-bg.png") no-repeat center top;
    background-size: 100% auto
}

.img7_pop_img {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: no-repeat center top;
    background-size: 100% auto;
    animation: img7_pop_img 6s 2s infinite;
    background-image: url("../wpsweb/images/product/wps2019_animattion/img7-pop-img1.png")
}

.img7_pop_img1 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/img7-pop-img1.png")
}

.img7_pop_img2 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/img7-pop-img2.png")
}

.img7_pop_img3 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/img7-pop-img3.png")
}

.img7_pop_active {
    position: absolute;
    z-index: 1;
    top: .5%;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: url("../wpsweb/images/product/wps2019_animattion/img7-pop-active.png") no-repeat center top;
    background-size: 100% auto;
    opacity: .5;
    animation: img7_pop_active 6s 2s infinite
}

.img7_people_work {
    position: absolute;
    z-index: 1;
    top: 38.23529411764706%;
    right: 21.88183807439825%;
    width: 17.578409919766592%;
    height: 42.05882352941177%;
    margin: 0 auto;
    animation: img7_people_work 1s 1s;
    animation-fill-mode: forwards
}

.img7_paper {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 8.29875518672199%;
    width: 80.91286307053942%;
    height: 55.94405594405595%;
    margin: 0 auto;
    background: url("../wpsweb/images/product/wps2019_animattion/img7-paper.png") no-repeat center top;
    background-size: 100% auto;
    animation: img7_paper 3s 2s infinite
}

.img7_people {
    position: absolute;
    z-index: 1;
    top: 7.6923076923076925%;
    right: 0;
    width: 74.27385892116183%;
    height: 91.95804195804196%;
    margin: 0 auto;
    animation: img7_people 3s 2s infinite
}

.img7_body {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: url("../wpsweb/images/product/wps2019_animattion/img7-body.png") no-repeat center top;
    background-size: 100% auto
}

.img7_left_hand {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    animation: img7_left_hand 6s 2s infinite;
    animation-fill-mode: forwards;
    transform: rotate(-30deg);
    transform-origin: 43.01675977653631% 20.912547528517113%
}

.img_left_hand1 {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: url("../wpsweb/images/product/wps2019_animattion/img7-hand1.png") no-repeat center top;
    background-size: 100% auto;
    animation: img_left_hand1 6s 2s infinite;
    animation-fill-mode: forwards;
    transform: rotate(0deg);
    transform-origin: 18.994413407821227% 18.631178707224336%
}

.img_left_hand2 {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: url("../wpsweb/images/product/wps2019_animattion/img7-hand2.png") no-repeat center top;
    background-size: 100% auto
}

.img7_right_hand {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: url("../wpsweb/images/product/wps2019_animattion/img7-righthand.png") no-repeat center top;
    background-size: 100% auto;
    animation: img7_right_hand 3s 2s infinite;
    animation-fill-mode: forwards;
    transform: rotate(-5deg);
    transform-origin: 63.128491620111724% 29.65779467680608%
}

.img7_left_foot {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: url("../wpsweb/images/product/wps2019_animattion/img7-leftfoot.png") no-repeat center top;
    background-size: 100% auto
}

.img7_right_foot {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: url("../wpsweb/images/product/wps2019_animattion/img7-rightfoot.png") no-repeat center top;
    background-size: 100% auto;
    animation: img7_right_foot 2s 2s infinite;
    animation-fill-mode: forwards;
    transform: rotate(0deg);
    transform-origin: 46.927374301675975% 42.20532319391635%
}

.img7_work {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    top: -5%;
    left: 0;
    transform: rotateZ(30deg)
}

.img7_work_img {
    position: absolute;
    top: 30.069930069930066%;
    left: 32.71028037383177%;
    width: 33.19502074688796%;
    height: 20.27972027972028%;
    opacity: .5
}

.img7_work_img1 {
    background: url("../wpsweb/images/product/wps2019_animattion/img7_work_img1.png") no-repeat;
    background-size: 100% auto;
    animation: img7_work_img1 6s 2s infinite linear;
    animation-fill-mode: forwards;
    transform: perspective(600px) rotateY(0deg) translateZ(130px)
}

.img7_work_img2 {
    background: url("../wpsweb/images/product/wps2019_animattion/img7_work_img2.png") no-repeat;
    background-size: 100% auto;
    animation: img7_work_img2 6s 2s infinite linear;
    animation-fill-mode: forwards;
    transform: perspective(600px) rotateY(45deg) translateZ(130px)
}

.img7_work_img3 {
    background: url("../wpsweb/images/product/wps2019_animattion/img7_work_img1.png") no-repeat;
    background-size: 100% auto;
    animation: img7_work_img3 6s 2s infinite linear;
    animation-fill-mode: forwards;
    transform: perspective(600px) rotateY(90deg) translateZ(130px)
}

.img7_work_img4 {
    opacity: 0;
    background: url("../wpsweb/images/product/wps2019_animattion/img7_work_img2.png") no-repeat;
    background-size: 100% auto;
    animation: img7_work_img4 6s 2s infinite linear;
    animation-fill-mode: forwards;
    transform: perspective(600px) rotateY(135deg) translateZ(130px)
}

.img7_work_img5 {
    opacity: 0;
    background: url("../wpsweb/images/product/wps2019_animattion/img7_work_img1.png") no-repeat;
    background-size: 100% auto;
    animation: img7_work_img5 6s 2s infinite linear;
    animation-fill-mode: forwards;
    transform: perspective(600px) rotateY(180deg) translateZ(130px)
}

.img7_work_img6 {
    opacity: 0;
    background: url("../wpsweb/images/product/wps2019_animattion/img7_work_img2.png") no-repeat;
    background-size: 100% auto;
    animation: img7_work_img6 6s 2s infinite linear;
    animation-fill-mode: forwards;
    transform: perspective(600px) rotateY(225deg) translateZ(130px)
}

.img7_work_img7 {
    background: url("../wpsweb/images/product/wps2019_animattion/img7_work_img1.png") no-repeat;
    background-size: 100% auto;
    animation: img7_work_img7 6s 2s infinite linear;
    animation-fill-mode: forwards;
    transform: perspective(600px) rotateY(270deg) translateZ(130px)
}

.img7_work_img8 {
    background: url("../wpsweb/images/product/wps2019_animattion/img7_work_img2.png") no-repeat;
    background-size: 100% auto;
    animation: img7_work_img8 6s 2s infinite linear;
    animation-fill-mode: forwards;
    transform: perspective(600px) rotateY(315deg) translateZ(130px)
}

@keyframes img7_pop_img {
    0% {
        background-image: url("../wpsweb/images/product/wps2019_animattion/img7-pop-img1.png")
    }

    30% {
        background-image: url("../wpsweb/images/product/wps2019_animattion/img7-pop-img1.png")
    }

    33% {
        background-image: url("../wpsweb/images/product/wps2019_animattion/img7-pop-img2.png")
    }

    63% {
        background-image: url("../wpsweb/images/product/wps2019_animattion/img7-pop-img2.png")
    }

    66% {
        background-image: url("../wpsweb/images/product/wps2019_animattion/img7-pop-img3.png")
    }

    97% {
        background-image: url("../wpsweb/images/product/wps2019_animattion/img7-pop-img3.png")
    }

    100% {
        background-image: url("../wpsweb/images/product/wps2019_animattion/img7-pop-img1.png")
    }
}

@keyframes img7_pop_active {
    0% {
        transform: translateY(0)
    }

    20% {
        transform: translateY(0)
    }

    33% {
        transform: translateY(12.5%)
    }

    53% {
        transform: translateY(12.5%)
    }

    66% {
        transform: translateY(25%)
    }

    87% {
        transform: translateY(25%)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes img7_people_work {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-20%)
    }
}

@keyframes img7_paper {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(5%)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes img7_people {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5%)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes img7_left_hand {
    0% {
        transform: rotate(-30deg)
    }

    16.66% {
        transform: rotate(0deg)
    }

    83.33% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(-30deg)
    }
}

@keyframes img_left_hand1 {
    0% {
        transform: rotate(0deg)
    }

    16% {
        transform: rotate(0deg)
    }

    26% {
        transform: rotate(-30deg)
    }

    36% {
        transform: rotate(0deg)
    }

    56% {
        transform: rotate(0deg)
    }

    66% {
        transform: rotate(-30deg)
    }

    76% {
        transform: rotate(0deg)
    }

    86% {
        transform: rotate(-30deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

@keyframes img7_right_hand {
    0% {
        transform: rotate(-5deg)
    }

    50% {
        transform: rotate(-20deg)
    }

    100% {
        transform: rotate(-5deg)
    }
}

@keyframes img7_right_foot {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(5deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

@keyframes img7_work_img1 {
    0% {
        transform: perspective(600px) rotateY(0deg) translateZ(130px)
    }

    40% {
        transform: perspective(600px) rotateY(0deg) translateZ(130px)
    }

    50% {
        transform: perspective(600px) rotateY(-45deg) translateZ(130px)
    }

    90% {
        transform: perspective(600px) rotateY(-45deg) translateZ(130px)
    }

    100% {
        transform: perspective(600px) rotateY(-90deg) translateZ(130px)
    }
}

@keyframes img7_work_img2 {
    0% {
        transform: perspective(600px) rotateY(45deg) translateZ(130px)
    }

    40% {
        transform: perspective(600px) rotateY(45deg) translateZ(130px)
    }

    50% {
        transform: perspective(600px) rotateY(0deg) translateZ(130px)
    }

    90% {
        transform: perspective(600px) rotateY(0deg) translateZ(130px)
    }

    100% {
        transform: perspective(600px) rotateY(-45deg) translateZ(130px)
    }
}

@keyframes img7_work_img3 {
    0% {
        transform: perspective(600px) rotateY(90deg) translateZ(130px)
    }

    40% {
        transform: perspective(600px) rotateY(90deg) translateZ(130px)
    }

    50% {
        transform: perspective(600px) rotateY(45deg) translateZ(130px)
    }

    90% {
        transform: perspective(600px) rotateY(45deg) translateZ(130px)
    }

    100% {
        transform: perspective(600px) rotateY(0deg) translateZ(130px)
    }
}

@keyframes img7_work_img4 {
    0% {
        opacity: 0;
        transform: perspective(600px) rotateY(135deg) translateZ(130px)
    }

    40% {
        opacity: 0;
        transform: perspective(600px) rotateY(135deg) translateZ(130px)
    }

    50% {
        opacity: .5;
        transform: perspective(600px) rotateY(90deg) translateZ(130px)
    }

    90% {
        opacity: .5;
        transform: perspective(600px) rotateY(90deg) translateZ(130px)
    }

    100% {
        opacity: .5;
        transform: perspective(600px) rotateY(45deg) translateZ(130px)
    }
}

@keyframes img7_work_img5 {
    0% {
        opacity: 0;
        transform: perspective(600px) rotateY(180deg) translateZ(130px)
    }

    40% {
        opacity: 0;
        transform: perspective(600px) rotateY(180deg) translateZ(130px)
    }

    50% {
        opacity: 0;
        transform: perspective(600px) rotateY(135deg) translateZ(130px)
    }

    90% {
        opacity: 0;
        transform: perspective(600px) rotateY(135deg) translateZ(130px)
    }

    100% {
        opacity: .5;
        transform: perspective(600px) rotateY(90deg) translateZ(130px)
    }
}

@keyframes img7_work_img6 {
    0% {
        opacity: 0;
        transform: perspective(600px) rotateY(225deg) translateZ(130px)
    }

    40% {
        opacity: 0;
        transform: perspective(600px) rotateY(225deg) translateZ(130px)
    }

    50% {
        opacity: 0;
        transform: perspective(600px) rotateY(180deg) translateZ(130px)
    }

    90% {
        opacity: 0;
        transform: perspective(600px) rotateY(180deg) translateZ(130px)
    }

    100% {
        opacity: 0;
        transform: perspective(600px) rotateY(135deg) translateZ(130px)
    }
}

@keyframes img7_work_img7 {
    0% {
        opacity: .5;
        transform: perspective(600px) rotateY(270deg) translateZ(130px)
    }

    40% {
        opacity: .5;
        transform: perspective(600px) rotateY(270deg) translateZ(130px)
    }

    50% {
        opacity: 0;
        transform: perspective(600px) rotateY(225deg) translateZ(130px)
    }

    90% {
        opacity: 0;
        transform: perspective(600px) rotateY(225deg) translateZ(130px)
    }

    100% {
        opacity: 0;
        transform: perspective(600px) rotateY(180deg) translateZ(130px)
    }
}

@keyframes img7_work_img8 {
    0% {
        opacity: .5;
        transform: perspective(600px) rotateY(315deg) translateZ(130px)
    }

    40% {
        opacity: .5;
        transform: perspective(600px) rotateY(315deg) translateZ(130px)
    }

    50% {
        opacity: .5;
        transform: perspective(600px) rotateY(270deg) translateZ(130px)
    }

    90% {
        opacity: .5;
        transform: perspective(600px) rotateY(270deg) translateZ(130px)
    }

    100% {
        opacity: 0;
        transform: perspective(600px) rotateY(225deg) translateZ(130px)
    }
}

.img8_bg {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 48.35886214442014%;
    margin: 0 auto
}

.img8_img_loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0
}

.img8_img_loading1 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/img8-img1.png")
}

.img8_img_loading2 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/img8-img2.png")
}

.img8_img_loading3 {
    background-image: url("../wpsweb/images/product/wps2019_animattion/img8-img3.png")
}

.img8_img {
    position: absolute;
    z-index: 1;
    top: 15%;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: no-repeat center top;
    background-size: 100% auto;
    animation: img8_img 9s 1s infinite;
    animation-fill-mode: forwards;
    opacity: 0;
    background-image: url("../wpsweb/images/product/wps2019_animattion/img8-img1.png")
}

.img8_dot {
    position: absolute;
    z-index: 2;
    bottom: .7541478129713424%;
    width: 100%;
    text-align: center
}

.img8_dot_blue {
    display: inline-block;
    width: 1.1670313639679066%;
    padding-top: 1.1670313639679066%;
    background: #769aed;
    border-radius: 3px;
    margin: 0 1.8234865061998542%;
    animation: img8_dot 9s 1s infinite linear;
    transform: scale(1, 1)
}

.img8_dot_block {
    display: inline-block;
    width: 1.1670313639679066%;
    padding-top: 1.1670313639679066%;
    background: #535353;
    border-radius: 3px;
    margin: 0 1.8234865061998542%;
    animation: img8_dot 9s 4s infinite linear;
    transform: scale(1, 1)
}

.img8_dot_red {
    display: inline-block;
    width: 1.1670313639679066%;
    padding-top: 1.1670313639679066%;
    background: #fb8f94;
    border-radius: 3px;
    margin: 0 1.8234865061998542%;
    animation: img8_dot 9s 7s infinite linear;
    transform: scale(1, 1)
}

@keyframes img8_img {
    0% {
        transform: translateY(0);
        opacity: 0;
        background-image: url("../wpsweb/images/product/wps2019_animattion/img8-img1.png")
    }

    8% {
        transform: translateY(-25%);
        opacity: 1
    }

    25% {
        transform: translateY(-25%);
        opacity: 1
    }

    32% {
        transform: translateY(0);
        opacity: 0;
        background-image: url("../wpsweb/images/product/wps2019_animattion/img8-img1.png")
    }

    33% {
        transform: translateY(0);
        opacity: 0;
        background-image: url("../wpsweb/images/product/wps2019_animattion/img8-img2.png")
    }

    40% {
        transform: translateY(-25%);
        opacity: 1
    }

    58% {
        transform: translateY(-25%);
        opacity: 1
    }

    65% {
        transform: translateY(0);
        opacity: 0;
        background-image: url("../wpsweb/images/product/wps2019_animattion/img8-img2.png")
    }

    66% {
        transform: translateY(0);
        opacity: 0;
        background-image: url("../wpsweb/images/product/wps2019_animattion/img8-img3.png")
    }

    74% {
        transform: translateY(-30%);
        opacity: 1
    }

    92% {
        transform: translateY(-30%);
        opacity: 1
    }

    99% {
        transform: translateY(0);
        opacity: 0;
        background-image: url("../wpsweb/images/product/wps2019_animattion/img8-img3.png")
    }

    100% {
        transform: translateY(0);
        opacity: 0;
        background-image: url("../wpsweb/images/product/wps2019_animattion/img8-img1.png")
    }
}

@keyframes img8_dot {
    0% {
        transform: scale(1, 1)
    }

    16.6% {
        transform: scale(1.3, 1.3)
    }

    33% {
        transform: scale(1, 1)
    }

    100% {
        transform: scale(1, 1)
    }
}

.bottom {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: url("../wpsweb/images/product/wps2019_animattion/bottom_bg.png") no-repeat top center;
    background-size: 100% auto;
    max-width: 1448px;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    transition: opacity 1s
}

.bottom .name {
    font-size: 3.4375em;
    line-height: 1.3818181818181818em
}

.bottom .txt {
    font-size: 1.875em;
    line-height: 1.7333333333333334em
}

.bottom_main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

a.footer_btn {
    position: absolute;
    top: 37%;
    left: 0;
    right: 0;
    width: 11.214285714285714em;
    height: 2.5em;
    line-height: 2.5em;
    border-radius: 2.5em;
    font-size: 1.75em;
    margin: 0 auto
}

.footer {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    padding: 2.8125em 0 2.8125em
}

/* 簡潔彈窗樣式 */
.simple-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

.popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    min-width: 320px;
    max-width: 500px;
    width: 90%;
    animation: slideIn 0.3s ease-out;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 0;
    border-bottom: none;
}

.popup-title {
    margin: 0;
    font-size: 1.4em;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

.popup-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.popup-close:hover {
    background: #f5f5f5;
    color: #666;
}

.popup-body {
    padding: 16px 24px 24px;
}

.popup-text {
    margin: 0;
    font-size: 1em;
    line-height: 1.6;
    color: #666;
}

.popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 0 24px 24px;
    border-top: 1px solid #f0f0f0;
    margin-top: 20px;
    padding-top: 20px;
}

.popup-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.popup-btn-cancel {
    background: #f5f5f5;
    color: #666;
}

.popup-btn-cancel:hover {
    background: #e8e8e8;
}

.popup-btn-confirm {
    background: #3c73ea;
    color: white;
}

.popup-btn-confirm:hover {
    background: #2562e8;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}