/* 自訂飄動 animate */
@-webkit-keyframes fluttering {
    from {
      transform: translateY(0);
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
    }
  
    to {
        transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -o-transform: translateY(-20px);
    }
}
@keyframes fluttering {
    from {
      transform: translateY(0);
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
    }
  
    to {
        transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -o-transform: translateY(-20px);
    }
}
.fluttering{
    -webkit-animation-name: fluttering;
    animation-name: fluttering;
    animation-delay: 1.8s;
    animation-duration: 2.25s;
    animation-timing-function: cubic-bezier(0.43, 0.05, 0.6, 0.99);
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: none;
    animation-play-state: running;
}
/* animate.css */
@-webkit-keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
}
  
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
/* reset */
.l-hd.header{
    display: none;
}
*{
    box-sizing: border-box;
    font-family: "Microsoft YaHei",PingFangSC-Medium,"PingFang SC",SimSun,'\5b8b\4f53',sans-serif !important;
}
.h_header,
.main_cont,
.footer{
    min-width: 1200px;
}
/* Header 區塊 */
.h_header{
    width: 100%;
    height: 860px;
    background-color: #7fcff0;
}
.h_header_bg{
    width: 100%;
    height: 100%;
    background: url(/images/event/20190508/app/head/bg@3x.png) center center no-repeat;
    background-size: cover;
    position: relative;
    overflow-y: hidden;
    overflow-x: hidden;
    opacity: 0;
    visibility: hidden;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
/* .h_header_bg_img{
    width: 100%;
    height: 100%;
} */
.h_header_wrap{
    width: 1200px;
    position: absolute;
    top: 83px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    z-index: 2;
    display: flex;
    opacity: 0;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.h_pri{
    width: 604px;
    margin-right: 71px;
}
.logo_link{
    display: block;
    width: 208px;
    height: 68px;
    margin-bottom: 64px;
}
.logo_img{
    display: block;
    width: 100%;
    height: 100%;
}
.title_1{
    width: 604px;
    height: 167px;
    background-image: url(/images/event/20190508/app/head/title_1.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    margin-bottom: 52px;
}
.title_bg{
    width: 595px;
    height: 52px;
    background-image: url(/images/event/20190508/app/head/title2_background.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    font-size: 32px;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 8px;
    margin-bottom: 48px;
}
.h_block{
    width: 100%;
}
.h_block_pri{
    width: 451px;
    margin: 0 auto;
    margin-bottom: 20px;
}
.h_block_pri_txtline{
    width: 100%;
    padding: 0 12px;
    display: flex;
    /* text-align: center; */
    /* overflow: hidden; */
}
.h_block_pri_txt{
    color: #FEFEFF;
    font-size: 24px;
    letter-spacing: 2px;
    margin-right: auto;
    line-height: 32px;
    margin-bottom: 12px;
}
.txt1{
    text-align: left;
    /* float: left; */
}
.txt2{
    text-align: center;
}
.txt3{
    margin-right: 0;
    /* float: right; */
}
.h_block_pri_sepline{
    width: 451px;
    height: 14px;
    background-image: url(/images/event/20190508/app/head/item_line.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
.h_block_sec{
    width: 100%;
    display: flex;
}
.h_block_sec_icon{
    width: 155px;
    height: 155px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    margin-right: auto;
}
.icon1{
    background-image: url(/images/event/20190508/app/head/item_1.png);
}
.icon2{
    background-image: url(/images/event/20190508/app/head/item_2.png);
}
.icon3{
    background-image: url(/images/event/20190508/app/head/item_3.png);
    margin-right: 0;
}
.h_sec{
    padding-top: 86px;
}
.h_img{
    width: 495px;
    height: 472px;
    background-image: url(/images/event/20190508/app/head/iphone.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    margin-left: 36px;
    margin-bottom: 55px;
}
.h_btn{
    display: inline-block;
    width: 239px;
    height: 69px;
}
.h_btn_ios{
    margin-right: 25px;
}
.h_btn_img{
    width: 100%;
    height: 100%;
}
/* @media screen and (min-width: 1921px) {
    .h_header_bg{
        background-size: contain;
    }
} */

/* Main 區塊 */
.main_cont{
    width: 100%;
}
.section{
    width: 100%;
    height: 640px;
    overflow-y: hidden;
    overflow-x: hidden;
}
.sec1{
    background-color: #e0f6ff;
    background-image: url(/images/event/20190508/app/content/page1_clip.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
}
@media screen and (max-width: 1100px) {
    .sec1{
        background-size: cover;
    }
}
.sec_wrap{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    opacity: 0;
    visibility: hidden;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.txt_block1{
    width: 358px;
    position: absolute;
    top: 156px;
    left: 164.5px;
    z-index: 2;
}
.txt_num{
    display: block;
    /* color: #222222;
    font-size: 68px;
    line-height: 60px;
    letter-spacing: 1px; */
    width: 100%;
    margin-bottom: 20px;
    width: 358px;
    height: 60px;
    background-image: url(/images/event/20190508/app/content/text_number.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
.plus_icon{
    vertical-align: -5px;
}
.colorChange{
    color: #1560AD;
}
.txt_title_wrap{
    width: 100%;
    margin-bottom: 20px;
}
.txt_title{
    display: block;
    width: 100%;
    font-size: 44px;
    line-height: 64px;
    letter-spacing: 6px;
}
.txt_cont_warp{
    width: 100%;
}
.txt_cont{
    display: block;
    width: 100%;
    line-height: 50px;
    font-size: 32px;
    color: #222222;
    letter-spacing: 6px;
}
.imgblock1{
    width: 372px;
    height: 777px;
    position: absolute;
    top: 78px;
    left: 655px;
    z-index: 2;
}
.sec2{
    background-image: url(/images/event/20190508/app/content/page2_clip.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-color: #EDF6F9;
}
.txt_block2 {
    width: 270px;
    position: absolute;
    top: 256px;
    left: 752.5px;
    z-index: 2;
}
.imgblock2{
    width: 424px;
    height: 888px;
    position: absolute;
    top: 123px;
    left: 120.5px;
    z-index: 2;
}
.sec3{
    background-image: url(/images/event/20190508/app/content/page3_clip.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-color: #EDF6F9;
}
.txt_block3 {
    width: 535px;
    position: absolute;
    top: 196px;
    left: 26.5px;
    z-index: 2;
}
.imgblock3 {
    width: 430px;
    height: 898px;
    position: absolute;
    top: 103px;
    left: 773.5px;
    z-index: 2;
    position: relative;
}
.imgblock_img3_1{
    display: block;
    width: 524px;
    height: 180px;
    position: absolute;
    top: 169.2px;
    left: -124px;
    z-index: 2;
}
.sec4{
    background-color: #EDF6F9;
}
.txt_block4 {
    width: 300px;
    position: absolute;
    top: 256px;
    left: 656.5px;
    z-index: 2;
}
.imgblock4 {
    width: 402px;
    height: 660px;
    position: absolute;
    top: 84px;
    left: 133.5px;
    z-index: 2;
}

/* Footer 區塊 */

.footer{
    width: 100%;
    background-color: #555555;
    padding: 22px 16px;
}
.footerline{
    width: 100%;
    text-align: center;
    margin-bottom: 16px;
    color: #FFFFFF;
    font-size: 16px;
}
.footerline:last-child{
    margin-bottom: 0;
}
.foot_txt{
    display: inline-block;
    margin-right: 12px;
}

.app_info {
    position: absolute;
    bottom: -80px;
    display: flex;
    justify-content: space-around;
    width: 100%;
    color: #FFFFFF;
    font-size: 20px;
}
.app_info a {
    color: #fff;
    font-weight: 800;
}