@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: #242f44;
    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: #242f44;
    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) {
    html {
        font-size:8px
    }
}

@media screen and (min-width: 381px) and (max-width:750px) {
    html {
        font-size:9px
    }
}

@media screen and (min-width: 751px) and (max-width:900px) {
    html {
        font-size:10px
    }
}

@media screen and (min-width: 901px) and (max-width:1090px) {
    html {
        font-size:12px
    }
}

@media screen and (min-width: 1091px) {
    html {
        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)
}

.red_btn,a.red_btn,a.red_btn:link,a.red_btn:visited {
    color: #fff;
    text-align: center;
    box-sizing: content-box;
    background: #eb4642;
    background-image: -moz-linear-gradient(top, #f76b55, #eb4642);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f76b55), color-stop(1, #eb4642));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F76B55', endColorstr='#EB4642', GradientType='0')
}

a.red_btn:hover {
    background-color: #ed5d59;
    background-image: -moz-linear-gradient(top, #ff7a65, #fc5f5b);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ff7a65), color-stop(1, #fc5f5b));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF7A65', endColorstr='#FC5F5B', GradientType='0')
}

a.red_btn:active {
    background-color: #e92f2b;
    background-image: -moz-linear-gradient(top, #f35c45, #e33a36);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f35c45), color-stop(1, #e33a36));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F35C45', endColorstr='#E33A36', GradientType='0')
}

.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.55555556%;
    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
}

.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;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    margin-left: 15px;
    color: #36425a;
    margin-top: 5px
}

.logo::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 30px;
    background: url("../image/logo.svg?v=4-22-15-6") no-repeat;
    background-size: auto 100%
}

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

.top_right a {
    padding: 0 1.3125em;
    opacity: .5
}

.top_right a:hover {
    color: #eb5451;
    opacity: 1
}

.top_right a:active {
    color: #e13f3b;
    opacity: 1
}

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

.section_title1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    font-size: 3.42857143rem;
    height: 4.28571429rem;
    line-height: 4.28571429rem;
    margin: 0 auto;
    transition: opacity 1s;
    white-space: nowrap
}

.section_title1_txt {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    width: 100%;
    font-size: 1.85714286rem;
    height: 2.14285714rem;
    line-height: 2.14285714rem;
    font-weight: 100;
    margin: 0 auto;
    transition: opacity 1s;
    letter-spacing: 5px;
    white-space: nowrap;
    opacity: .6
}

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

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

.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 {
    position: absolute;
    z-index: 11;
    top: 50%;
    right: 30px;
    margin-top: -139.5px;
    height: 279px
}

.box_dot li {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: #f1f2f4;
    margin: 20px 0;
    cursor: pointer;
    transition: height .5s,background-color .5s
}

.box_dot li.active {
    height: 20px;
    background-color: #eb5451
}

.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.59766764%;
    max-height: 100%;
    box-sizing: border-box
}

.img1 {
    position: absolute;
    bottom: -100px;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 56.36363636%;
    animation: img1 .5s .8s forwards;
    opacity: 0
}

.img1_bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: url("../image/1_center.svg?v=4-22-15-6") no-repeat;
    background-size: 100% auto
}

.img1_word {
    position: absolute;
    z-index: 1;
    top: 16.29032258%;
    left: 8.63636364%;
    width: 31.81818182%;
    height: 56.4516129%;
    background: url("../image/1_img_left.svg?v=4-22-15-6") no-repeat;
    background-size: 100% auto;
    animation: img1_word 1s 1s forwards;
    opacity: 0
}

.img1_ppt {
    position: absolute;
    z-index: 1;
    top: 22.74193548%;
    right: 34.54545455%;
    width: 22.72727273%;
    height: 40.32258065%;
    background: url("../image/1_img_right.svg?v=4-22-15-6") no-repeat;
    background-size: 100% auto;
    animation: img1_ppt 1s 1s forwards;
    opacity: 0
}

.img1_girl {
    position: absolute;
    z-index: 3;
    width: 12.18181818%;
    height: 33.22580645%;
    bottom: 80px;
    left: 11.54545455%
}

.girl_body,.left_foot,.right_foot,.girl_hand,.img1_pad {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    background-repeat: no-repeat
}

.girl_body {
    position: absolute;
    z-index: 1;
    background-image: url("../image/1_person_body.svg?v=4-22-15-6")
}

.girl_hand {
    position: absolute;
    z-index: 4;
    background-image: url("../image/1_person_hand.svg?v=4-22-15-6");
    animation: girl_hand 4s infinite linear;
    transform-origin: 5.97014925% 46.60194175%
}

.left_foot {
    position: absolute;
    z-index: 3;
    background-image: url("../image/1_person_left_foot.svg?v=4-22-15-6");
    animation: left_foot 1s alternate infinite ease-in-out;
    transform-origin: 66.41791045% 60.67961165%
}

.right_foot {
    position: absolute;
    z-index: 2;
    background-image: url("../image/1_person_right_foot.svg?v=4-22-15-6");
    animation: right_foot 1s alternate infinite ease-in-out;
    transform-origin: 75.37313433% 59.70873786%
}

.img1_pad {
    position: absolute;
    z-index: 4;
    background-image: url("../image/1_pad.svg?v=4-22-15-6")
}

.img1_book {
    position: absolute;
    z-index: 3;
    bottom: 80px;
    z-index: 2;
    width: 17.27272727%;
    height: 18.06451613%;
    background: url("../image/1_book.svg?v=4-22-15-6") no-repeat;
    background-size: 100% auto;
    left: 1%
}

.img1_tree {
    position: absolute;
    z-index: 3;
    width: 11.09090909%;
    height: 29.67741935%;
    bottom: 80px;
    right: -1.54545455%
}

.img1_tree_bg,.tree_2leap,.tree_1leap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    background-repeat: no-repeat
}

.img1_tree_bg {
    position: absolute;
    z-index: 3;
    background-image: url("../image/1_flower_bottom.svg?v=4-22-15-6")
}

.tree_1leap {
    position: absolute;
    z-index: 2;
    background-image: url("../image/1_flower_1leaf.svg?v=4-22-15-6");
    animation: tree_1leap 1.5s alternate infinite linear;
    transform-origin: 43.44262295% 59.7826087%
}

.tree_2leap {
    position: absolute;
    z-index: 1;
    background-image: url("../image/1_flower_2leaf.svg?v=4-22-15-6")
}

@keyframes top_center {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

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

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

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

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

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

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

@keyframes banner_btn {
    from {
        top: 60%;
        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%)
    }

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

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

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

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

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

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

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

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

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

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

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

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

    33% {
        transform: rotate(-6deg)
    }

    66% {
        transform: rotate(0deg)
    }

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

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

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

    100% {
        transform: translateY(0)
    }
}

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

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

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

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

.section_title {
    position: absolute;
    z-index: 2;
    top: 11%;
    left: 0;
    right: 0;
    width: 100%;
    font-size: 3.42857143rem;
    height: 60px;
    line-height: 60px;
    text-align: center
}

.section_title_txt {
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    width: 100%;
    font-size: 1.42857143rem;
    height: 30px;
    line-height: 30px;
    font-weight: 100;
    text-align: center;
    opacity: .6
}

.img2 {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 50.08333333%;
    background: url("../image/2_bg.svg?v=4-22-15-6") no-repeat;
    background-size: 100% auto
}

.img2_top {
    position: absolute;
    top: 7.65391015%;
    left: 0;
    right: 0;
    width: 49.16666667%;
    margin: 0 auto;
    height: 30px;
    text-align: left
}

.img2_logo1,.img2_logo2,.img2_logo3 {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin-left: 4px
}

.img2_logo1_active,.img2_logo2_active,.img2_logo3_active {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    opacity: 0
}

.img2_logo1 {
    background-image: url("../image/2_logo1.svg?v=4-22-15-6")
}

.img2_logo2 {
    background-image: url("../image/2_logo2.svg?v=4-22-15-6")
}

.img2_logo3 {
    background-image: url("../image/2_logo3.svg?v=4-22-15-6")
}

.img2_logo1_active {
    background-image: url("../image/2_logo1_active.svg?v=4-22-15-6");
    animation: img2_logo1 18s -1s infinite
}

.img2_logo2_active {
    background-image: url("../image/2_logo2_active.svg?v=4-22-15-6");
    animation: img2_logo1 18s 5s infinite
}

.img2_logo3_active {
    background-image: url("../image/2_logo3_active.svg?v=4-22-15-6");
    animation: img2_logo1 18s 11s infinite
}

.img2_main {
    position: absolute;
    width: 44%;
    height: 53.7437604%;
    top: 19.80033278%;
    left: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden
}

.img2_ul {
    position: absolute;
    width: 300%;
    height: 100%;
    top: 0;
    left: 0;
    animation: img2_change 18s infinite
}

.img2_1,.img2_2,.img2_3 {
    position: relative;
    width: 33.33%;
    height: 100%;
    float: left;
    background-size: contain
}

.img2_1 {
    background-image: url("../image/2_img1.svg?v=4-22-15-6")
}

.img2_2 {
    background-image: url("../image/2_img2.svg?v=4-22-15-6")
}

.img2_3 {
    background-image: url("../image/2_img3_bg.svg?v=4-22-15-6")
}

.img2_title {
    position: absolute;
    top: 42.7244582%;
    left: 35.17110266%;
    color: #242f44;
    font-size: 24px;
    height: 33px;
    line-height: 33px;
    padding: 2px
}

.img2_title .txt {
    position: relative;
    display: block;
    top: 0;
    left: 0;
    z-index: 2
}

.img2_select {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    bottom: 60px;
    width: 0;
    height: 100%;
    animation: img2_select 18s 1s infinite forwards;
    background: rgba(235,84,81,0.6);
    border-radius: 2px
}

.img2_text_mouth {
    position: absolute;
    top: -20%;
    left: -30px;
    bottom: 0;
    width: 40px;
    height: 140%;
    background: url("../image/2_text_mouth.svg?v=4-22-15-6") no-repeat center center;
    background-size: contain;
    animation: img2_text_mouth 18s 1s infinite forwards
}

.img2_pop {
    position: absolute;
    width: 39.1634981%;
    height: 34.6749226%;
    top: 51.39318885%;
    left: 53.0418251%;
    background: url("../image/2_img1_pop.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    animation: img2_pop 18s 2s infinite forwards ease-out;
    opacity: 0;
    transform: translateY(10px)
}

.img2_2_change {
    z-index: 2;
    width: 100%;
    height: 100%;
    background: url("../image/2_img2_change.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    animation: img2_2_change 18s 7s infinite forwards;
    opacity: 0
}

.img2_2_night_bg {
    position: absolute;
    z-index: 3;
    width: 6.08365019%;
    height: 9.90712074%;
    top: 17.64705882%;
    left: 71.1026616%;
    background: url("../image/2_img2_night_bg.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    opacity: .7;
    animation: img2_2_night_bg 18s 6s infinite forwards
}

.img2_2_mouth {
    position: absolute;
    z-index: 4;
    width: 7.60456274%;
    height: 12.38390093%;
    top: 19.19504644%;
    left: 71.86311787%;
    background: url("../image/2_img2_mouth.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    opacity: 0;
    animation: img2_2_mouth 18s 6s infinite forwards
}

.img2_2_pop {
    position: absolute;
    z-index: 3;
    width: 21.29277567%;
    height: 46.43962848%;
    top: 25.07739938%;
    left: 67.4904943%;
    background: url("../image/2_img2_pop.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    opacity: 0;
    animation: img2_2_pop 18s 6s infinite forwards;
    transform: translate(0, -6.66666667%)
}

.img2_2_select_bg {
    position: absolute;
    z-index: 3;
    width: 13.68821293%;
    height: 6.50154799%;
    top: 43.34365325%;
    left: 71.29277567%;
    background: url("../image/2_img2_select_bg.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    opacity: 0;
    animation: img2_2_select_bg 18s 6s infinite forwards
}

.img2_3_mouth {
    position: absolute;
    z-index: 4;
    width: 7.60456274%;
    height: 12.38390093%;
    top: 38.39009288%;
    left: 36.121673%;
    background: url("../image/2_img2_mouth.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    opacity: 0;
    animation: img2_3_mouth 18s 12s infinite forwards
}

.img2_3_night_bg {
    position: absolute;
    z-index: 3;
    width: 6.08365019%;
    height: 9.90712074%;
    top: 17.3374613%;
    left: 29.08745247%;
    background: url("../image/2_img2_night_bg.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    opacity: 0;
    animation: img2_3_night_bg 18s 12s infinite forwards
}

.img2_3_gray {
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: img2_3_gray 18s 12s infinite forwards;
    background: #000
}

.img2_3_change {
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 100%;
    background: url("../image/2_img3_change_bg.svg?v=4-22-15-6") no-repeat #fff;
    background-size: contain;
    animation: img2_3_change 18s 12s infinite forwards;
    opacity: 0
}

.img2_3_control {
    position: absolute;
    z-index: 5;
    width: 28.51711027%;
    height: 4.95356037%;
    top: 0;
    right: 1.90114068%;
    background: url("../image/2_img3_control.png?v=4-22-15-6") no-repeat;
    background-size: contain;
    animation: img2_3_control 18s 12s infinite forwards;
    opacity: 0
}

.img2_circle {
    position: absolute;
    width: 7.5%;
    height: 14.9750416%;
    top: -7.4875208%;
    left: 0;
    background: url("../image/2_circle.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    animation: img2_circle 2s ease-in-out alternate infinite;
    transform: translateY(15px)
}

.img2_clock {
    position: absolute;
    width: 13.66666667%;
    height: 27.28785358%;
    top: -10.31613977%;
    right: -3.99334443%;
    background: url("../image/2_clock.svg?v=4-22-15-6") no-repeat;
    background-size: contain
}

@keyframes img2_logo1 {
    0% {
        opacity: 0
    }

    3% {
        opacity: 1
    }

    33% {
        opacity: 1
    }

    36% {
        opacity: 0
    }
}

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

    27.8% {
        transform: translateX(0)
    }

    33.3% {
        transform: translateX(-33.33%)
    }

    61.1% {
        transform: translateX(-33.33%)
    }

    66.6% {
        transform: translateX(-66.66%)
    }

    94.4% {
        transform: translateX(-66.66%)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes img2_select {
    0% {
        width: 0
    }

    6% {
        width: 100%
    }

    50% {
        width: 100%
    }

    51% {
        width: 0
    }
}

@keyframes img2_text_mouth {
    0% {
        left: -30px
    }

    6% {
        left: 135px;
        opacity: 1
    }

    7% {
        left: 135px;
        opacity: 0
    }

    50% {
        left: 135px;
        opacity: 0
    }

    51% {
        left: -30px;
        opacity: 1
    }
}

@keyframes img2_pop {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

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

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

    35% {
        opacity: 0;
        transform: translateY(10px)
    }
}

@keyframes img2_2_change {
    0% {
        opacity: 0
    }

    14.8% {
        opacity: 0
    }

    18.5% {
        opacity: 1
    }
}

@keyframes img2_2_night_bg {
    0% {
        opacity: .7
    }

    1.85% {
        opacity: .7
    }

    3.7% {
        opacity: 1
    }

    5.55% {
        opacity: .7
    }

    100% {
        opacity: .7
    }
}

@keyframes img2_2_mouth {
    0% {
        opacity: 0
    }

    1.85% {
        opacity: 1;
        transform: scale(1)
    }

    3.7% {
        opacity: .8;
        transform: scale(.9)
    }

    5.55% {
        opacity: 1;
        transform: scale(1)
    }

    7.4% {
        opacity: 1;
        transform: scale(1) translate(0, 0)
    }

    11.1% {
        opacity: 1;
        transform: scale(1) translate(75%, 215%)
    }

    12.95% {
        opacity: .8;
        transform: scale(.9) translate(75%, 215%)
    }

    14.8% {
        opacity: 1;
        transform: scale(1) translate(75%, 215%)
    }

    18.5% {
        opacity: 0;
        transform: translate(75%, 215%)
    }
}

@keyframes img2_2_pop {
    0% {
        opacity: 0
    }

    5.55% {
        opacity: 0
    }

    8.32% {
        opacity: 1;
        transform: translate(0)
    }

    14.8% {
        opacity: 1;
        transform: translate(0)
    }

    18.5% {
        opacity: 0;
        transform: translate(0)
    }
}

@keyframes img2_2_select_bg {
    0% {
        opacity: 0
    }

    12.95% {
        opacity: 0
    }

    14.8% {
        opacity: 1
    }

    18.5% {
        opacity: 0
    }
}

@keyframes img2_3_night_bg {
    0% {
        opacity: 0
    }

    7.4% {
        opacity: .7
    }

    9.25% {
        opacity: 1
    }

    11.1% {
        opacity: .7
    }

    14.8% {
        opacity: 0
    }
}

@keyframes img2_3_mouth {
    0% {
        opacity: 0
    }

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

    5.55% {
        transform: translate(-75%, -150%)
    }

    7.4% {
        transform: scale(1) translate(-75%, -150%)
    }

    9.25% {
        opacity: .8;
        transform: scale(.9) translate(-75%, -150%)
    }

    11.1% {
        opacity: 1;
        transform: scale(1) translate(-75%, -150%)
    }

    14.8% {
        opacity: 0
    }
}

@keyframes img2_3_gray {
    0% {
        opacity: 0
    }

    11.1% {
        opacity: 0
    }

    13.8% {
        opacity: 1
    }

    16.65% {
        opacity: 0
    }
}

@keyframes img2_3_change {
    0% {
        opacity: 0
    }

    13.8% {
        opacity: 0
    }

    16.65% {
        opacity: 1
    }

    33% {
        opacity: 1
    }
}

@keyframes img2_3_control {
    0% {
        opacity: 0
    }

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

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

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

@keyframes img2_circle {
    0% {
        transform: translateY(15px)
    }

    100% {
        transform: translateY(0)
    }
}

.img3 {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 50.08333333%;
    background: url("../image/3_bg.svg?v=4-22-15-6") no-repeat;
    background-size: 100% auto
}

.img3_decorate_big {
    position: absolute;
    width: 15%;
    height: 29.95008319%;
    top: -22.62895175%;
    left: 2.75%;
    background: url("../image/3_decorate_big.svg?v=4-22-15-6") no-repeat;
    background-size: contain
}

.img3_decorate_small {
    position: absolute;
    width: 8.33333333%;
    height: 16.63893511%;
    top: -6.48918469%;
    right: 2.75%;
    background: url("../image/3_decorate_small.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    animation: img2_circle 2s ease-in-out alternate infinite;
    transform: translateY(15px)
}

.img3_user1,.img3_user2,.img3_user3 {
    position: absolute;
    width: 6%;
    height: 11.98003328%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    transform: scale(0)
}

.img3_user1 {
    top: 31.61397671%;
    left: 10.33333333%;
    background-image: url("../image/3_user1.svg?v=4-22-15-6");
    animation: img3_user .5s 1s forwards
}

.img3_user2 {
    top: 31.44758735%;
    right: 10.33333333%;
    background-image: url("../image/3_user2.svg?v=4-22-15-6");
    animation: img3_user .5s 2.5s forwards
}

.img3_user3 {
    top: 56.73876872%;
    right: 16.41666667%;
    background-image: url("../image/3_user3.svg?v=4-22-15-6");
    animation: img3_user .5s 4s forwards
}

.img3_pop1,.img3_pop2,.img3_pop3 {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% auto;
    opacity: 0
}

.img3_pop1 {
    width: 22.5%;
    height: 24.29284526%;
    top: 31.61397671%;
    left: 13.83333333%;
    background-image: url("../image/3_pop1.svg?v=4-22-15-6");
    transform: translateY(10px);
    animation: img3_pop1 .5s 1.5s forwards
}

.img3_pop2 {
    width: 22%;
    height: 21.63061564%;
    top: 21.79700499%;
    right: 14.16666667%;
    background-image: url("../image/3_pop2.svg?v=4-22-15-6");
    transform: translateY(-10px);
    animation: img3_pop2 .5s 3s forwards
}

.img3_pop3 {
    width: 24.16666667%;
    height: 24.95840266%;
    top: 56.73876872%;
    right: 20.08333333%;
    background-image: url("../image/3_pop3.svg?v=4-22-15-6");
    transform: translateY(10px);
    animation: img3_pop1 .5s 4.5s forwards
}

.img3_main {
    position: absolute;
    width: 25.16666667%;
    height: 26.62229617%;
    top: 38.60232945%;
    left: 42.58333333%
}

.img3_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    background-image: url("../image/3_main_text.svg?v=4-22-15-6");
    background-size: contain
}

.img3_yellow_bg {
    position: absolute;
    z-index: 1;
    width: 0;
    height: 15.625%;
    background: #fb0;
    opacity: .4;
    top: 6.875%;
    left: 3.64238411%;
    animation: img3_yellow_bg .5s 1s forwards
}

.img3_underline {
    position: absolute;
    z-index: 1;
    width: 87.74834437%;
    height: 2.5%;
    background: #fb0;
    opacity: .4;
    top: 56.875%;
    left: 4.63576159%;
    background: url("../image/3_underline.svg?v=4-22-15-6") no-repeat;
    background-size: 100% auto;
    opacity: 0;
    transform: translateY(5px);
    animation: img3_underline .5s 2.5s forwards
}

.img3_sign {
    position: absolute;
    z-index: 1;
    width: 6.62251656%;
    height: 11.25%;
    background: #fb0;
    opacity: .4;
    top: 80.625%;
    left: 54.96688742%;
    background: url("../image/3_sign.svg?v=4-22-15-6") no-repeat;
    background-size: 100% auto;
    opacity: 0;
    transform: translateY(20px);
    animation: img3_sign .5s 4s forwards
}

@keyframes img3_user {
    0% {
        transform: scale(0)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes img3_pop1 {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

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

@keyframes img3_pop2 {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

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

@keyframes img3_yellow_bg {
    0% {
        width: 0
    }

    100% {
        width: 56.62251656%
    }
}

@keyframes img3_underline {
    0% {
        opacity: 0;
        transform: translateY(5px)
    }

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

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

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

.img4 {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 50.08333333%;
    background: url("../image/4_bg.svg?v=4-22-15-6") no-repeat;
    background-size: 100% auto
}

.img4_decorate_big {
    position: absolute;
    width: 15%;
    height: 29.95008319%;
    top: -20.29950083%;
    right: -0.91666667%;
    background: url("../image/4_decorate_big.svg?v=4-22-15-6") no-repeat;
    background-size: contain
}

.img4_decorate_small {
    position: absolute;
    width: 8.33333333%;
    height: 16.63893511%;
    top: -3.66056572%;
    left: 3.41666667%;
    background: url("../image/4_decorate_small.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    animation: img2_circle 2s ease-in-out alternate infinite;
    transform: translateY(15px)
}

.img4_logo_pdf {
    position: absolute;
    z-index: 2;
    width: 30%;
    height: 59.90016639%;
    right: 17.08333333%;
    top: 23.7936772%;
    opacity: 0;
    background-image: url("../image/4_logo_pdf.svg?v=4-22-15-6");
    animation: img4_main .3s 1s forwards,img4_logo_pdf .5s 1s forwards
}

.img4_main {
    position: absolute;
    z-index: 1;
    width: 30%;
    height: 59.90016639%;
    right: 17.08333333%;
    top: 23.7936772%;
    opacity: 0;
    animation: img4_main 1s 1s forwards,img4_main_rotate 5s 1s infinite linear
}

.img4_main_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto
}

.img4_logo_et,.img4_logo_img,.img4_logo_cad,.img4_logo_ppt,.img4_logo_doc {
    position: absolute;
    width: 38.88888889%;
    height: 38.88888889%;
    background-repeat: no-repeat;
    background-size: contain;
    animation: img4_logo 5s 1s infinite linear
}

.img4_main_bg {
    background-image: url("../image/4_circle.svg?v=4-22-15-6")
}

.img4_logo_et {
    top: 34.72222222%;
    left: -6.38888889%;
    background-image: url("../image/4_logo_et.svg?v=4-22-15-6")
}

.img4_logo_img {
    top: 5.83333333%;
    left: 36.94444444%;
    background-image: url("../image/4_logo_img.svg?v=4-22-15-6")
}

.img4_logo_cad {
    top: 11.38888889%;
    left: 65.83333333%;
    background-image: url("../image/4_logo_cad.svg?v=4-22-15-6")
}

.img4_logo_ppt {
    top: 51.11111111%;
    left: 47.77777778%;
    background-image: url("../image/4_logo_ppt.svg?v=4-22-15-6")
}

.img4_logo_doc {
    top: 62.77777778%;
    left: 11.66666667%;
    background-image: url("../image/4_logo_doc.svg?v=4-22-15-6")
}

@keyframes img4_main {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes img4_main_rotate {
    0% {
        transform: rotate(0)
    }

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

@keyframes img4_logo_pdf {
    0% {
        transform: scale(0)
    }

    60% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1)
    }
}

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

    100% {
        transform: rotate(0)
    }
}

@keyframes img4_logo_img {
    0% {
        opacity: 0;
        transform: translate(-14px, 8px)
    }

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

@keyframes img4_logo_cad {
    0% {
        opacity: 0;
        transform: translate(-16px, -8px)
    }

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

@keyframes img4_logo_ppt {
    0% {
        opacity: 0;
        transform: translate(-16px, -16px)
    }

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

@keyframes img4_logo_doc {
    0% {
        opacity: 0;
        transform: translate(-6px, -20px)
    }

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

.img5 {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 50.08333333%;
    background: url("../image/5_bg.svg?v=4-22-15-6") no-repeat;
    background-size: 100% auto
}

.img5_decorate_big {
    position: absolute;
    width: 15%;
    height: 29.95008319%;
    top: -17.13810316%;
    right: 6.25%;
    background: url("../image/5_decorate_big.svg?v=4-22-15-6") no-repeat;
    background-size: contain
}

.img5_decorate_small {
    position: absolute;
    width: 8.33333333%;
    height: 16.63893511%;
    top: -8.31946755%;
    left: 4.16666667%;
    background: url("../image/5_decorate_small.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    animation: img2_circle 2s ease-in-out alternate infinite;
    transform: translateY(15px)
}

.img5_txt_all {
    position: absolute;
    line-height: 2em;
    width: 23.5%;
    height: 27.95341098%;
    top: 41.41%;
    left: 43.33%;
    text-align: left;
    color: #727a8b;
    padding: 10px;
    box-sizing: border-box
}

.img5_input_all {
    position: relative;
    display: inline-block;
    vertical-align: middle
}

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

.img5_txt1,.img5_txt2,.img5_txt {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 0;
    overflow: hidden;
    text-align: left;
    white-space: nowrap
}

.img5_txt1 {
    animation: img5_txt1 .7s 1s forwards
}

.img5_txt2 {
    animation: img5_txt2 .7s 2.5s forwards
}

.img5_txt {
    width: auto;
    animation: img5_txt .1s 2s forwards;
    opacity: 0
}

.img5_cursor {
    display: inline-block;
    vertical-align: middle;
    animation: img5_cursor .5s infinite alternate;
    opacity: 1
}

.img5_input1 {
    position: absolute;
    width: 302px;
    height: 88px;
    top: 2em;
    left: -14px;
    background: url("../image/5_input1.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    animation: img5_input1 .8s 1.5s;
    opacity: 0;
    transform: translateY(10px)
}

.img5_input2 {
    position: absolute;
    width: 333px;
    height: 88px;
    top: 2em;
    left: -14px;
    background: url("../image/5_input2.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    animation: img5_input2 .4s 3s forwards;
    opacity: 0;
    transform: translateY(10px)
}

.img5_pen {
    position: absolute;
    width: 6.66666667%;
    height: 19.96672213%;
    top: 51.74708819%;
    left: 19.08333333%;
    background: url("../image/5_pen.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    animation: img5_pen 2s alternate infinite ease-in-out;
    transform-origin: 8.75% 89.16666667%
}

@keyframes img5_txt1 {
    0% {
        width: 0
    }

    99.99% {
        width: 3.5em
    }

    100% {
        width: 0
    }
}

@keyframes img5_txt2 {
    0% {
        width: 0
    }

    100% {
        width: 3em
    }
}

@keyframes img5_txt {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes img5_cursor {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes img5_input1 {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

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

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

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

@keyframes img5_input2 {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

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

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

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

.img6 {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 50.08333333%;
    background: url("../image/6_bg.svg?v=4-22-15-6") no-repeat;
    background-size: 100% auto
}

.img6_decorate_big {
    position: absolute;
    width: 15%;
    height: 25.45757072%;
    top: -8.81863561%;
    left: 2.91666667%;
    background: url("../image/6_decorate_big.svg?v=4-22-15-6") no-repeat;
    background-size: contain
}

.img6_decorate_small {
    position: absolute;
    width: 8.33333333%;
    height: 16.63893511%;
    top: -1.83028286%;
    right: 5.08333333%;
    background: url("../image/6_decorate_small.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    animation: img2_circle 2s ease-in-out alternate infinite;
    transform: translateY(15px)
}

.img6_img {
    position: absolute;
    width: 18.33333333%;
    height: 26.62229617%;
    top: 38.93510815%;
    left: 45.41666667%;
    background: url("../image/6_img1.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    animation: img6_img_rotate 1s 4.6s forwards
}

.img6_img2,.img6_img3 {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: url("../image/6_img2.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    animation: img6_img .4s 1.6s forwards,img6_img_hide .3s 3.3s forwards;
    opacity: 0
}

.img6_img3 {
    z-index: 1;
    background-image: url("../image/6_img3.svg?v=4-22-15-6");
    animation: img6_img .3s 3.3s forwards
}

.img6_mouth {
    position: absolute;
    z-index: 3;
    width: 18.18181818%;
    height: 25%;
    top: 46.25%;
    left: 60.45454545%;
    background: url("../image/2_img2_mouth.svg?v=4-22-15-6") no-repeat center center;
    opacity: 0;
    animation: img6_mouth 1s 1s forwards,img6_mouth_move .7s 2.3s forwards,img6_mouth_click .6s 3s forwards,img6_mouth_move2 .7s 3.6s forwards,img6_mouth_click2 .3s 4.3s forwards,img6_mouth_rotate 1s 4.6s forwards,img6_mouth_hide .9s 5.6s forwards
}

.img6_cursor {
    position: absolute;
    background: #b7bfd0;
    width: 1.83333333%;
    height: 3.66056572%;
    top: 56.07321131%;
    left: 57.75%;
    border-radius: 50%;
    animation: img6_cursor 2s 1s forwards;
    opacity: 0;
    transform: translate(0, 0)
}

.img6_botany {
    position: absolute;
    width: 13.66666667%;
    height: 32.61231281%;
    top: 41.76372712%;
    right: 13.08333333%
}

.img6_botany_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: url("../image/6_botany.svg?v=4-22-15-6") no-repeat;
    background-size: contain
}

.img6_leap {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: url("../image/6_leap.svg?v=4-22-15-6") no-repeat;
    background-size: contain;
    animation: img5_pen 1.5s alternate infinite ease-in-out;
    transform-origin: 51.02040816% 89.02439024%;
    transform: rotate(6deg)
}

@keyframes img6_img {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes img6_img_hide {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes img6_img_rotate {
    0% {
        transform: rotate(0)
    }

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

@keyframes img6_mouth {
    0% {
        opacity: 0
    }

    33.33% {
        opacity: 1;
        transform: scale(1)
    }

    66.66% {
        opacity: .8;
        transform: scale(.9)
    }

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

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

    100% {
        transform: translate(132.5%, -107.5%)
    }
}

@keyframes img6_mouth_move2 {
    0% {
        transform: translate(132.5%, -107.5%)
    }

    100% {
        transform: translate(-90%, -170%)
    }
}

@keyframes img6_mouth_click {
    0% {
        opacity: 1;
        transform: translate(132.5%, -107.5%) scale(1)
    }

    50% {
        opacity: .8;
        transform: translate(132.5%, -107.5%) scale(.9)
    }

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

@keyframes img6_mouth_click2 {
    0% {
        opacity: 1
    }

    100% {
        opacity: .8
    }
}

@keyframes img6_mouth_rotate {
    0% {
        transform: translate(-90%, -170%) rotate(0)
    }

    100% {
        transform: translate(-100%, -216%) rotate(-135deg)
    }
}

@keyframes img6_mouth_hide {
    0% {
        opacity: .8
    }

    40% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes img6_cursor {
    0% {
        opacity: 0
    }

    25% {
        opacity: .5;
        transform: translate(0, 0)
    }

    75% {
        opacity: .5;
        transform: translate(340.90909091%, 222.72727273%)
    }

    100% {
        opacity: 0;
        transform: translate(340.90909091%, 222.72727273%)
    }
}

.section_title7 {
    top: 20%
}

.img7 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 45.01633987%
}

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

.img7_list {
    float: left;
    width: 31.37254902%;
    height: 33.3938294%;
    margin: 2.17785844% .98039216%;
    box-shadow: 0 4px 14px 0 rgba(36,47,68,0.08);
    font-size: 0
}

.img7_logo {
    display: inline-block;
    vertical-align: middle;
    width: 20.83333333%;
    height: 43.47826087%;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 13.5% 6.25% 13.5% 8.33333333%
}

.img7_logo1 {
    background-image: url("../image/7_logo1.svg?v=4-22-15-6")
}

.img7_logo2 {
    background-image: url("../image/7_logo2.svg?v=4-22-15-6")
}

.img7_logo3 {
    background-image: url("../image/7_logo3.svg?v=4-22-15-6")
}

.img7_logo4 {
    background-image: url("../image/7_logo4.svg?v=4-22-15-6")
}

.img7_logo5 {
    background-image: url("../image/7_logo5.svg?v=4-22-15-6")
}

.img7_logo6 {
    background-image: url("../image/7_logo6.svg?v=4-22-15-6")
}

.img7_info {
    display: inline-block;
    vertical-align: middle;
    width: 55.20833333%;
    text-align: left;
    line-height: 24px
}

.img7_info .title {
    font-size: 18px;
    color: #36425a;
    margin-bottom: 5px
}

.img7_info .txt {
    font-size: 14px;
    color: #8b97af
}

.bottom {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: url("../image/8_bg.png?v=4-22-15-6") no-repeat top center;
    background-size: 100% auto;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    transition: opacity 1s
}

.section_title8 {
    top: 17.33333333%
}

.section_title_txt8 {
    top: 25%;
    letter-spacing: 4px
}

.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.21428571em;
    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;
    color: #999ca6
}

.footer a,.footer a:link,.footer a:hover {
    color: #999ca6
}

.footer img {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 4px
}

.footer_txt {
    position: absolute;
    top: 46%;
    left: 0;
    right: 0;
    text-align: center;
    color: #999ca6;
    font-size: 14px;
    opacity: .5
}

/* 下載彈窗樣式 */
.download-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    animation: modalFadeIn 0.3s ease-in-out;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn 0.3s ease-out;
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #242f44;
}

.close-btn {
    cursor: pointer;
    font-size: 24px;
    color: #999;
    line-height: 1;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #eb4642;
}

.modal-body {
    padding: 20px 24px;
    text-align: center;
}

.modal-body p {
    margin: 0 0 12px;
    font-size: 16px;
    color: #242f44;
    line-height: 1.5;
}

.version-info {
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 0 !important;
}

.modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px 24px;
    justify-content: center;
}

.download-btn {
    flex: 1;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    max-width: 140px;
}

.cancel-btn {
    flex: 1;
    padding: 12px 24px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #666;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    max-width: 140px;
}

.cancel-btn:hover {
    background: #f8f8f8;
    border-color: #ccc;
}

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

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 響應式設計 */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 0 auto;
    }
    
    .modal-header h2 {
        font-size: 18px;
    }
    
    .modal-body p {
        font-size: 14px;
    }
    
    .download-btn, .cancel-btn {
        font-size: 14px;
        padding: 10px 20px;
    }
}