body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow-y: scroll;
    font-size: 12px;
    font-family: 微軟正黑體;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
    background: rgba(0,0,0,.9);
    position: relative;

}
html{text-align: center;margin: 0 auto;}
body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

}
ul li {list-style: none;}
ul li {list-style: none;}
input{background:none; outline:none;  border:none;}
body, h1, p, ul, ol, li,input{ margin: 0;padding: 0;list-style: none;}
html, body, div, span,h1, h2, h3, h4, h5, h6, p, a, ol, ul, li{margin: 0;padding: 0;border: 0; }

a{text-decoration-line: none;outline: none;appearance:none;-webkit-tap-highlight-color: transparent; }

* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none; 
    outline: none; 
    color: #000;   
}

section {
    display: block;
}

/*video {
mix-blend-mode: screen;

}*/
.bg{width: 100%;position: absolute;top: 0;left:0;z-index: 9;}
.bg img{width: 100%;display: block;}
.zz01{position: absolute; top: 58rem;left: 4rem;z-index: 10;}
.zz01 img{width: 60%;}
.zz02{position: absolute; top: 70rem;left: 4rem;z-index: 10;}
.zz02 img{width: 60%;}
.zz03{position: absolute; top: 83rem;left: 4rem;z-index: 10;}
.zz03 img{width: 60%;}
.zz04{position: absolute; top: 95rem;left: 4rem;z-index: 10;}
.zz04 img{width: 60%;}
.zz05{position: absolute; top: 73rem;left:8.5rem;z-index: 10;}
.zz05 a{text-indent: -999px;width: 9rem;height: 4rem;display: block;}
.zz06{position: absolute; top: 26.5rem;left: 13.5rem;z-index: 10;}
.zz06 a{text-indent: -999px;width: 6rem;height: 2rem;display: block;}
.scoll{position: absolute;top: 45rem;left: 45%;z-index: 10;}
.chevron {
    position: absolute;
    width: 20px;
    height: 8px;
    opacity: 0;
    transform: scale3d(0.8, 0.8, 0.8);
    animation: move 3s ease-out infinite;
}
.chevron:first-child {
    animation: move 3s ease-out 1s infinite;
}
.chevron:nth-child(2) {
    animation: move 3s ease-out 2s infinite;
}
.chevron:before,
.chevron:after {
    content: ' ';
    position: absolute;
    top: 0;
    height: 100%;
    width: 51%;
    background: #fff;
}
.chevron:before {
    left: 0;
    transform: skew(0deg, 30deg);
}
.chevron:after {
    right: 0;
    width: 50%;
    transform: skew(0deg, -30deg);
}
@keyframes move {
    25% {
        opacity: 1;
    }
    33% {
        opacity: 1;
        transform: translateY(30px);
    }
    67% {
        opacity: 1;
        transform: translateY(40px);
    }
    100% {
        opacity: 0;
        transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
    }
}
.text {
    display: block;
    margin-top: 63px;
    margin-left: -30px;
    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .25;
    animation: pulse 2s linear alternate infinite;
}
@keyframes pulse {
    to {
        opacity: 1;
    }
}
.index-con {
   /* background: url(../images/indbg.png) no-repeat 50% 50%;
    background-size: contain;*/
   /* background: #000;*/
    position: absolute;
    width: 100%;

    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
/*    transform: translateZ(0);*/
    
}


.index-con__char, .index-con__filter ,.index-con__char01{
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    height: 100%;
}
.index-con__char {
   /* background: url(../images/paper.png) no-repeat 50% 70%;
    background-size:100%; */

    height: 60%;
    position: relative;z-index: 10;
 /*   opacity: .5;*/
}

.index-con a{width: 100%;margin: 0 auto;height: 100%;position: absolute;top: 0; left: 0;}
.index-con a img{width: 100%;position: absolute;bottom: 5%;}



.index-con__char01 {
    background: url(../images/rebtn.png) no-repeat 50% 10%;
    background-size:100%; 
    z-index: 10;
   
    
 /*   opacity: .5;*/
}
.index-con__char01 img{width: 80%; position: absolute;z-index: 10;top: 30rem;left: 2rem;}

.index-con a{width: 100%;margin: 0 auto;height: 100%;position: absolute;top: 0; left: 0;}
.index-con a img{width: 100%;position: absolute;bottom: 5%;}


.toptitle{width: 80%;margin: 0 auto;text-align: center;margin-top: 120px;position: relative;z-index: 10;margin-bottom: 100px;}
.toptitle img{width: 100%;}






@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
    .ul01{
    height: 211px;
    background-size: 280px 221px;
    }
    .ul01 .li01{height: 42px;line-height: 42px;}
    .section-ul{margin-top: 10px;}
    .mine-nav{margin-top: 10px;}
    .toptitle{margin-bottom: 30px;}
    .index-con__char01{top: -40px;}
    .scoll{top: 31rem;left: 47%;}
    .zz01{top: 45rem;}
    .zz02{top: 55rem;}
     .zz03{top: 65rem;}
      .zz04{top: 75rem;}
     .zz05{top: 55.5rem;left: 6rem;}
     .zz05 a{width: 8rem;height:3.5rem;}
}

@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
    .ul01{
    height: 243px;
    background-size: 320px 253px;
    }
    .ul01 .li01{height: 52px;line-height: 52px;}
    .toptitle{margin-bottom: 40px;}
    .index-con__char01{top: 18px;}
    .scoll{top: 36rem;left: 46%;}
    .zz01{top: 53rem;}
    .zz02{top: 63rem;}
     .zz03{top: 75rem;}
      .zz04{top: 86rem;}
     .zz05{top: 65.5rem;left: 7.5rem;}
     .zz05 a{width: 8rem;height:3.5rem;}
}

@media only screen and (device-width: 360px) and (device-height: 640px) {/* 兼容Galaxy s5 */
    .ul01{
    height: 243px;
    background-size: 320px 253px;
    }
    .ul01 .li01{height: 52px;line-height: 52px;}
    .toptitle{margin-bottom: 40px;}
    
    .index-con__char01{top: 12px;}
    .scoll{top: 35rem;left: 46%;}
    .zz01{top: 51rem;}
    .zz02{top: 60rem;}
     .zz03{top: 72rem;}
      .zz04{top: 83rem;}
      .zz05{top: 62.5rem;left: 7rem;}
     .zz05 a{width: 8rem;height:3.5rem;}
}
@media only screen and (device-width: 360px) and (device-height: 740px) {/* 兼容Galaxy s8+ */
    .ul01{
    height: 243px;
    background-size: 320px 253px;
    }
    .ul01 .li01{height: 52px;line-height: 52px;}
    .toptitle{margin-bottom: 40px;}
    
    .index-con__char01{top: 12px;}
    .scoll{top: 35rem;left: 46%;}
    .zz01{top: 51rem;}
    .zz02{top: 60rem;}
     .zz03{top: 72rem;}
      .zz04{top: 83rem;}
      .zz05{top: 62.5rem;left: 7rem;}
     .zz05 a{width: 8rem;height:3.5rem;}
}

/* iPhoneX、iPhoneXS  11pro*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
   .ul01{
    height: 251px;
    background-size: 330px 261px;
    }
    .ul01 .li01{height: 52px;line-height: 52px;}
     .toptitle{margin-bottom: 60px;}

    .index-con__char01{top: 12px;}
     .scoll{top: 36rem;left: 46%;}
    .zz01{top: 53rem;}
    .zz02{top: 63rem;}
     .zz03{top: 75rem;}
      .zz04{top: 86rem;}
      .zz05{top: 65rem;left: 7.5rem;}
     .zz05 a{width: 8.5rem;height:3.5rem;}
}

/* Pixel*/
@media only screen and (device-width: 393px) and (device-height: 851px) {
    .index-con__char01{top: 12px;}
     .scoll{top: 36rem;left: 45.5%;}
    .zz01{top: 55rem;}
    .zz02{top: 66rem;}
     .zz03{top: 78rem;}
      .zz04{top: 90rem;}
  .zz05{top: 68.5rem;left: 7.8rem;}
     .zz05 a{width: 8.5rem;height:3.8rem;}
}


/*  iphone 12mini*/
@media only screen and (device-width: 360px) and (device-height: 780px)and (-webkit-device-pixel-ratio: 3){
   .zz05{top: 62.5rem;left: 7rem;}
     .zz05 a{width: 8.5rem;height:3.8rem;}
}
/*  iphone 12pro*/
@media only screen and (device-width: 390px) and (device-height: 844px)and (-webkit-device-pixel-ratio: 3){
    .zz05{top: 68rem;left: 8rem;}
     .zz05 a{width: 8.5rem;height:3.8rem;}
}

@media (min-width: 640px){
     

.index-con__char {
   
    background-size:60%; 
 /*   opacity: .5;*/
}

/*.index-con a{width: 80%;margin: 0 auto;}*/
.index-con a img{width: 40%;bottom: 2%;left: 30%;}




}


@media (min-width: 900px){
    body{max-width: 420px;margin-left: 40%;}
/*    .bg{margin-left: 50%;}*/
    .index-con{max-width: 420px;margin-left: 50%;}
    .index-con__char {
    height: 20%;}
     .scoll{top: 28rem;left: 45.5%;}

}