<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">* {
    -webkit-tap-highlight-color: transparent
}

body,
dd,
div,
dl,
dt,
h1,
h2,
h3,
h4,
h5,
html,
li,
ol,
p,
ul {
    padding: 0;
    margin: 0
}

html {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, "Microsoft YaHei", sans-serif;
    -webkit-text-size-adjust: 100%;
    font-size: 62.5%;
}

body {
    font-size: 14px;
    background: #1f0f01;
    line-height: 1.5;
    font-family: "å¾®è½¯é›…é»‘";
    overflow: hidden;
}

img {
    vertical-align: middle;
    border: 0
}

ol,
ul {
    list-style: none
}

a {
    text-decoration: none;
    color: #000
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}




#app,
body,
html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

#app {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    background: #19100b;
}

#pg0 {
    width: 100%;
    height: 208vw;
    opacity: 0;
    transition: opacity .3s ease;
    position: absolute;
    overflow: hidden;
    background: url(https://h2.huatianzitie.com/image/page1/1.jpg) no-repeat top;
    background-size: 100%;
}

@keyframes opacityChange{
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#pg0 {
  --anim-time: 2s;
  --dalay-time: 0.5s;
}
#pg0 &gt; .fir, #pg0 &gt; .sec, #pg0 &gt; .thr ,#pg0 &gt; .four {
  width: 92%;
  position: absolute;
  top: 58vw;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}
#pg0 &gt; .anim {
  animation: opacityChange var(--anim-time) ease-in-out alternate forwards;
}
#pg0 &gt; .fir {
  top: 57.2vw;
}
#pg0 &gt; .sec {
  top: 67.2vw;
  animation-delay: calc(var(--dalay-time));
}
#pg0 &gt; .thr {
  top: 77.5vw;
  animation-delay: calc(var(--dalay-time) * 2);
}
#pg0 &gt; .four {
  top: 87.2vw;
  animation-delay: calc(var(--dalay-time) * 3);
}

#pg2 {
  --anim-time: 2s;
  --dalay-time: 0.5s;
}
#pg2 &gt; .fir, #pg2 &gt; .sec, #pg2 &gt; .thr ,#pg2 &gt; .four,#pg2 &gt; .five {
  position: absolute;
  top: 58vw;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  opacity: 0;
  z-index: 99;
}
#pg2 &gt; .anim {
  animation: opacityChange var(--anim-time) ease-in-out alternate forwards;
}

#pg2 &gt; .fir {
  top: 33vw;
}
#pg2 &gt; .sec {
  top: 44vw;
  animation-delay: calc(var(--dalay-time));
}
#pg2 &gt; .thr {
  top: 54vw;
  animation-delay: calc(var(--dalay-time) * 2);
}
#pg2 &gt; .four {
  top: 64vw;
  animation-delay: calc(var(--dalay-time) * 3);
}
#pg2 &gt; .five {
  top: 107.3vw;
  width: 91%;
  margin-left: -1.2vw;
  animation-delay: calc(var(--dalay-time) * 4);
}

#sign_name_box {
    width: 100%;
    /* margin:9vw 30% 0px; */
    margin-top: 9vw;
    height:14vw;
    line-height:10vw;
    position: absolute;
    left: 51.5%;
    transform: translateX(-50%);
    animation: opacityChange var(--anim-time) ease-in-out calc(var(--dalay-time) * 5) alternate forwards;
    opacity: 0;
    background: url(https://h2.huatianzitie.com/image/page1/5.png) no-repeat;
    background-size: contain;
}

#sign_name {
    margin: 0 auto;
    overflow: hidden;
    color: #f1dd98;
    text-align: center;
    font-size: 6vw;
    line-height: 13vw;
    transform: translate(-1%);
    font-family: HYYAKUHEI-85J;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: breathe;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}

@-webkit-keyframes breathe {
    0% {
        opacity: .4;
        /* box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset; */
    }
}

#pg0_2,
#pg1_2,
#pg2_1,
#pg3_1 {
    width: 60%;
    height: 12vw;
    left: 20%;
    top: 166vw;
    text-align: center;
    position: absolute;
    /* z-index: 99; */
}
#pg0_2 img,
#pg1_2 img,
#pg2_1 img,
#pg3_1  img{
    width: 80%;
    margin:0px auto;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: breathe;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}
#pg0_1 {
    width: 90vw;
    margin:0px 5vw;
    position: absolute;
}

/* è‡ªåŠ¨è½®æ’­æ&nbsp;·å¼ */
.banner-container {
    width: 90vw;
    height: 44vw;
    margin: 0 auto;
    top: 20vw;
    overflow: hidden;
    position: relative;
}

.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 1;
    position: absolute;
}


.box1 {
    width: 30vw;
    height: 12vw;
    left: 10vw;
    top: 4vw;
    background: url(https://h2.huatianzitie.com/image/sign3/35.png);
    animation: fateimg1 calc((var(--anim-time) + var(--dalay-time) * 4) * 5) linear infinite;
}

.box2 {
    width: 30vw;
    height: 12vw;
    left: 40vw;
    top: 5vw;
    background: url(https://h2.huatianzitie.com/image/sign3/34.png);
    animation: fateimg2 calc((var(--anim-time) + var(--dalay-time) * 4 + 0.7s) * 6) linear infinite;
}

.box3 {
    width: 30vw;
    height: 12vw;
    left: 58vw;
    top: 14vw;
    background: url(https://h2.huatianzitie.com/image/sign3/33.png);
    animation: fateimg3 calc((var(--anim-time) + var(--dalay-time) * 4 + 1.4s) * 5) linear infinite;
}

.box4 {
    width: 30vw;
    height: 12vw;
    left: 1vw;
    top: 18vw;
    background: url(https://h2.huatianzitie.com/image/sign3/19.png);
    animation: fateimg4 calc((var(--anim-time) + var(--dalay-time) * 4 + 2.1s) * 6) linear infinite;
}

.box5 {
    width: 30vw;
    height: 12vw;
    left: 29vw;
    top: 18vw;
    background: url(https://h2.huatianzitie.com/image/sign3/39.png);
    animation: fateimg5 calc((var(--anim-time) + var(--dalay-time) * 4 + 2.8s) * 5) linear infinite;
}

.box6 {
    width: 30vw;
    height: 12vw;
    left: 3vw;
    top: 30vw;
    background: url(https://h2.huatianzitie.com/image/sign3/24.png);
    animation: fateimg6 calc((var(--anim-time) + var(--dalay-time) * 4 + 3.5s) * 6) linear infinite;
}

.box7 {
    width: 30vw;
    height: 12vw;
    left: 30vw;
    top: 31vw;
    background: url(https://h2.huatianzitie.com/image/sign3/37.png);
    animation: fateimg7 calc((var(--anim-time) + var(--dalay-time) * 4 + 4.2s) * 5) linear infinite;
}

.box8 {
    width: 27vw;
    height: 10vw;
    left: 56vw;
    top: 28vw;
    background: url(https://h2.huatianzitie.com/image/sign3/2.png);
    animation: fateimg8 calc((var(--anim-time) + var(--dalay-time) * 4 + 4.9s) * 5) linear infinite;
}

@keyframes fateimg1 {
    0% {
        background: url(https://h2.huatianzitie.com/image/sign3/35.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    15% {
        background: url(https://h2.huatianzitie.com/image/sign3/35.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    16% {
        background: url(https://h2.huatianzitie.com/image/sign3/35.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    17% {
        background: url(https://h2.huatianzitie.com/image/sign3/43.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    34% {
        background: url(https://h2.huatianzitie.com/image/sign3/43.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    35% {
        background: url(https://h2.huatianzitie.com/image/sign3/43.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    36% {
        background: url(https://h2.huatianzitie.com/image/sign3/27.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    52% {
        background: url(https://h2.huatianzitie.com/image/sign3/27.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    53% {
        background: url(https://h2.huatianzitie.com/image/sign3/27.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    54% {
        background: url(https://h2.huatianzitie.com/image/sign3/21.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    70% {
        background: url(https://h2.huatianzitie.com/image/sign3/21.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    71% {
        background: url(https://h2.huatianzitie.com/image/sign3/21.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    72% {
        background: url(https://h2.huatianzitie.com/image/sign3/4.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    88% {
        background: url(https://h2.huatianzitie.com/image/sign3/4.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    89% {
        background: url(https://h2.huatianzitie.com/image/sign3/4.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    100% {
        background: url(https://h2.huatianzitie.com/image/sign3/35.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
}
@keyframes fateimg2 {
    0% {
        background: url(https://h2.huatianzitie.com/image/sign3/34.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    13% {
        background: url(https://h2.huatianzitie.com/image/sign3/34.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    14% {
        background: url(https://h2.huatianzitie.com/image/sign3/34.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    15% {
        background: url(https://h2.huatianzitie.com/image/sign3/42.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    30% {
        background: url(https://h2.huatianzitie.com/image/sign3/42.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    31% {
        background: url(https://h2.huatianzitie.com/image/sign3/42.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    32% {
        background: url(https://h2.huatianzitie.com/image/sign3/26.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    46% {
        background: url(https://h2.huatianzitie.com/image/sign3/26.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    47% {
        background: url(https://h2.huatianzitie.com/image/sign3/26.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    48% {
        background: url(https://h2.huatianzitie.com/image/sign3/20.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    62% {
        background: url(https://h2.huatianzitie.com/image/sign3/20.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    63% {
        background: url(https://h2.huatianzitie.com/image/sign3/20.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    64% {
        background: url(https://h2.huatianzitie.com/image/sign3/14.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    77% {
        background: url(https://h2.huatianzitie.com/image/sign3/14.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    78% {
        background: url(https://h2.huatianzitie.com/image/sign3/14.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    79% {
        background: url(https://h2.huatianzitie.com/image/sign3/12.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    88% {
        background: url(https://h2.huatianzitie.com/image/sign3/12.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    89% {
        background: url(https://h2.huatianzitie.com/image/sign3/12.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    100% {
        background: url(https://h2.huatianzitie.com/image/sign3/34.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
}
@keyframes fateimg3 {
    0% {
        background: url(https://h2.huatianzitie.com/image/sign3/33.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    15% {
        background: url(https://h2.huatianzitie.com/image/sign3/33.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    16% {
        background: url(https://h2.huatianzitie.com/image/sign3/33.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    17% {
        background: url(https://h2.huatianzitie.com/image/sign3/41.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    34% {
        background: url(https://h2.huatianzitie.com/image/sign3/41.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    35% {
        background: url(https://h2.huatianzitie.com/image/sign3/41.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    36% {
        background: url(https://h2.huatianzitie.com/image/sign3/1.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    52% {
        background: url(https://h2.huatianzitie.com/image/sign3/1.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    53% {
        background: url(https://h2.huatianzitie.com/image/sign3/1.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    54% {
        background: url(https://h2.huatianzitie.com/image/sign3/3.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    70% {
        background: url(https://h2.huatianzitie.com/image/sign3/3.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    71% {
        background: url(https://h2.huatianzitie.com/image/sign3/3.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    72% {
        background: url(https://h2.huatianzitie.com/image/sign3/13.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    88% {
        background: url(https://h2.huatianzitie.com/image/sign3/13.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    89% {
        background: url(https://h2.huatianzitie.com/image/sign3/13.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    100% {
        background: url(https://h2.huatianzitie.com/image/sign3/33.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
}
@keyframes fateimg4 {
    0% {
        background: url(https://h2.huatianzitie.com/image/sign3/19.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    13% {
        background: url(https://h2.huatianzitie.com/image/sign3/19.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    14% {
        background: url(https://h2.huatianzitie.com/image/sign3/19.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    15% {
        background: url(https://h2.huatianzitie.com/image/sign3/32.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    30% {
        background: url(https://h2.huatianzitie.com/image/sign3/32.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    31% {
        background: url(https://h2.huatianzitie.com/image/sign3/32.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    32% {
        background: url(https://h2.huatianzitie.com/image/sign3/25.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    46% {
        background: url(https://h2.huatianzitie.com/image/sign3/25.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    47% {
        background: url(https://h2.huatianzitie.com/image/sign3/25.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    48% {
        background: url(https://h2.huatianzitie.com/image/sign3/40.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    62% {
        background: url(https://h2.huatianzitie.com/image/sign3/40.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    63% {
        background: url(https://h2.huatianzitie.com/image/sign3/40.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    64% {
        background: url(https://h2.huatianzitie.com/image/sign3/11.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    77% {
        background: url(https://h2.huatianzitie.com/image/sign3/11.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    78% {
        background: url(https://h2.huatianzitie.com/image/sign3/11.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    79% {
        background: url(https://h2.huatianzitie.com/image/sign3/5.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    88% {
        background: url(https://h2.huatianzitie.com/image/sign3/5.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    89% {
        background: url(https://h2.huatianzitie.com/image/sign3/5.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    100% {
        background: url(https://h2.huatianzitie.com/image/sign3/19.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
}
@keyframes fateimg5 {
    0% {
        background: url(https://h2.huatianzitie.com/image/sign3/39.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    15% {
        background: url(https://h2.huatianzitie.com/image/sign3/39.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    16% {
        background: url(https://h2.huatianzitie.com/image/sign3/39.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    17% {
        background: url(https://h2.huatianzitie.com/image/sign3/31.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    34% {
        background: url(https://h2.huatianzitie.com/image/sign3/31.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    35% {
        background: url(https://h2.huatianzitie.com/image/sign3/31.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    36% {
        background: url(https://h2.huatianzitie.com/image/sign3/17.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    52% {
        background: url(https://h2.huatianzitie.com/image/sign3/17.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    53% {
        background: url(https://h2.huatianzitie.com/image/sign3/17.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    54% {
        background: url(https://h2.huatianzitie.com/image/sign3/18.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    70% {
        background: url(https://h2.huatianzitie.com/image/sign3/18.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    71% {
        background: url(https://h2.huatianzitie.com/image/sign3/18.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    72% {
        background: url(https://h2.huatianzitie.com/image/sign3/10.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    88% {
        background: url(https://h2.huatianzitie.com/image/sign3/10.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    89% {
        background: url(https://h2.huatianzitie.com/image/sign3/10.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    100% {
        background: url(https://h2.huatianzitie.com/image/sign3/39.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
}
@keyframes fateimg6 {
    0% {
        background: url(https://h2.huatianzitie.com/image/sign3/24.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    13% {
        background: url(https://h2.huatianzitie.com/image/sign3/24.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    14% {
        background: url(https://h2.huatianzitie.com/image/sign3/24.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    15% {
        background: url(https://h2.huatianzitie.com/image/sign3/30.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    30% {
        background: url(https://h2.huatianzitie.com/image/sign3/30.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    31% {
        background: url(https://h2.huatianzitie.com/image/sign3/30.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    32% {
        background: url(https://h2.huatianzitie.com/image/sign3/23.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    46% {
        background: url(https://h2.huatianzitie.com/image/sign3/23.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    47% {
        background: url(https://h2.huatianzitie.com/image/sign3/23.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    48% {
        background: url(https://h2.huatianzitie.com/image/sign3/38.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    62% {
        background: url(https://h2.huatianzitie.com/image/sign3/38.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    63% {
        background: url(https://h2.huatianzitie.com/image/sign3/38.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    64% {
        background: url(https://h2.huatianzitie.com/image/sign3/8.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    77% {
        background: url(https://h2.huatianzitie.com/image/sign3/8.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    78% {
        background: url(https://h2.huatianzitie.com/image/sign3/8.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    79% {
        background: url(https://h2.huatianzitie.com/image/sign3/9.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    88% {
        background: url(https://h2.huatianzitie.com/image/sign3/9.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    89% {
        background: url(https://h2.huatianzitie.com/image/sign3/9.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    100% {
        background: url(https://h2.huatianzitie.com/image/sign3/24.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
}
@keyframes fateimg7 {
    0% {
        background: url(https://h2.huatianzitie.com/image/sign3/37.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    15% {
        background: url(https://h2.huatianzitie.com/image/sign3/37.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    16% {
        background: url(https://h2.huatianzitie.com/image/sign3/37.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    17% {
        background: url(https://h2.huatianzitie.com/image/sign3/22.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    34% {
        background: url(https://h2.huatianzitie.com/image/sign3/22.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    35% {
        background: url(https://h2.huatianzitie.com/image/sign3/22.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    36% {
        background: url(https://h2.huatianzitie.com/image/sign3/29.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    52% {
        background: url(https://h2.huatianzitie.com/image/sign3/29.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    53% {
        background: url(https://h2.huatianzitie.com/image/sign3/29.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    54% {
        background: url(https://h2.huatianzitie.com/image/sign3/16.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    70% {
        background: url(https://h2.huatianzitie.com/image/sign3/16.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    71% {
        background: url(https://h2.huatianzitie.com/image/sign3/16.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    72% {
        background: url(https://h2.huatianzitie.com/image/sign3/7.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    88% {
        background: url(https://h2.huatianzitie.com/image/sign3/7.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    89% {
        background: url(https://h2.huatianzitie.com/image/sign3/7.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    100% {
        background: url(https://h2.huatianzitie.com/image/sign3/37.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
}
@keyframes fateimg8 {
    0% {
        background: url(https://h2.huatianzitie.com/image/sign3/2.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    15% {
        background: url(https://h2.huatianzitie.com/image/sign3/2.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    16% {
        background: url(https://h2.huatianzitie.com/image/sign3/2.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    17% {
        background: url(https://h2.huatianzitie.com/image/sign3/28.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    34% {
        background: url(https://h2.huatianzitie.com/image/sign3/28.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    35% {
        background: url(https://h2.huatianzitie.com/image/sign3/28.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    36% {
        background: url(https://h2.huatianzitie.com/image/sign3/36.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    52% {
        background: url(https://h2.huatianzitie.com/image/sign3/36.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    53% {
        background: url(https://h2.huatianzitie.com/image/sign3/36.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    54% {
        background: url(https://h2.huatianzitie.com/image/sign3/15.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    70% {
        background: url(https://h2.huatianzitie.com/image/sign3/15.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    71% {
        background: url(https://h2.huatianzitie.com/image/sign3/15.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    72% {
        background: url(https://h2.huatianzitie.com/image/sign3/6.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    88% {
        background: url(https://h2.huatianzitie.com/image/sign3/6.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    89% {
        background: url(https://h2.huatianzitie.com/image/sign3/6.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    100% {
        background: url(https://h2.huatianzitie.com/image/sign3/2.png);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
}

.banner-container .banner-img-container {
    width: 3000px;
    height: 200px;
    overflow: hidden;
    position: absolute;
    /* å¼€å¯å¼¹æ€§ç›’ï¼Œè®©å›¾ç‰‡æ¨ªå‘æŽ’åˆ— */
    display: flex;
    animation: run 10s ease infinite;
}

.banner-container .banner-img-container img {
    width: 600px;
    height: 100%;
}

/* åŠ¨ç”»å…³é”®å¸§ */
@keyframes run {

    0%,
    10% {
        /* margin-left: 0; */
        transform: translateX(0);
    }

    20%,
    30% {
        /* margin-left: -1200px;; */
        transform: translateX(-600px);
    }

    40%,
    50% {
        /* margin-left: -2400px; */
        transform: translateX(-1200px);
    }

    60%,
    70% {
        /* margin-left: -3600px; */
        transform: translateX(-1800px);
    }

    80%,
    90% {
        /* margin-left: -4800px; */
        transform: translateX(-2400px);
    }

    100% {
        /* margin-left: 0; */
        transform: translateX(0);
    }
}

#pg1 {
    width: 100%;
    height: 208vw;
    position: absolute;
    overflow: hidden;
    /* background: url(https://h2.huatianzitie.com/image/p2-2.jpg) no-repeat top; */
    background-size: 100%;
}

/* æ‰‹åŠ¨è½®æ’­æ&nbsp;·å¼ */
.banner-container1 {
    width: 80%;
    height: 100vw;
    margin: 0 auto 0;
    overflow: hidden;
    position: relative;
}

/* è½®æ’­å›¾åœ†ç‚¹æ&nbsp;·å¼ */
.banner-container1 .banner-nav-a {
    /* width: 10px;
    height: 10px; */
    width: 3px;
    height: 3px;
    background: transparent;
    position: absolute;
    border: 1px solid #654b3d;
    box-shadow: 0 1px 2px #654b3d;
    bottom: 1vw;
    transform: rotate(45deg);
    margin: 0;
}

.banner-container1 input {
    width: 12px;
    height: 12px;
    position: absolute;
    bottom: 1rem;
    margin: 0;
    cursor: pointer;
    transform: rotate(45deg);
    z-index: 2;
    opacity: 0;
    display:none;
}

/* è®¾ç½®å¯¼èˆªåœ†ç‚¹åç§»é‡ï¼ˆå±…ä¸­å¸ƒå±€ï¼‰*/
#banner-control-1,
#banner-control-1+.banner-nav-a {
    /* left: 35%; */
    left: calc(50% - 12.5px);
}

#banner-control-2,
#banner-control-2+.banner-nav-a {
  /* left: 45%; */
    left: calc(50% - 1.5px);
}

#banner-control-3,
#banner-control-3+.banner-nav-a {
    /* left: 55%; */
    left: calc(50% + 9.5px);
}
/* é€‰ä¸­æ&nbsp;·å¼ */
.banner-nav-a.active {
    transform: rotate(45deg) scale(1.2);
    background-color: #dfb68d;
}
/* è®¾ç½®é«˜äº® */
/*å½“ input è¢«é€‰ä¸­æ—¶ ä»–çš„å…„å¼Ÿçº§aæ&nbsp;‡ç­¾é«˜äº®å±•ç¤º*/
/* input:checked+.banner-nav-a {
    width: 10px;
    height: 10px;
    background-color: #dfb68d;
} */



/* è®¾ç½®è½®æ’­å›¾åŠ¨ç”» */
#banner-control-1:checked~.item-container {
    transform: translateX(0%);
}

#banner-control-2:checked~.item-container {
    transform: translateX(-25%);
}

#banner-control-3:checked~.item-container {
    transform: translateX(-50%);
}

#banner-control-4:checked~.item-container {
    transform: translateX(-75%);
}

#banner-control-5:checked~.item-container {
    transform: translateX(-100%);
}

.banner-container1 .item-container {
    width: 300%;
    /* width: 400%; */
    height: 100vw;
    overflow: auto;
    position: absolute;
    display: flex;
    transition: transform 0.6s ease;
}

.banner-container1 .item-container ul {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 6px;
}

.banner-container1 .item-container ul li {
    width: 50%;
    float: left;
    /* margin: 3px 0; */
    margin-top: -3px;
    display: inline;
}

.banner-container1 .item-container ul li .item {
    width: 100%;
    float: left;
    display: inline;
    cursor: pointer;
}

.banner-container1 .item-container ul li img {
    width: 100%;
}

.banner-container1 .item-container ul li input {
    width: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 3;
    opacity: 0.5;
    background: #dfb68d;
}
#leftcircle{
    width:14vw;
    height:40vw;
    left: 0;
    top: 30%;
    position: absolute;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    background: url(https://h2.huatianzitie.com/image/arr_left.png) no-repeat 20% 50% rgba(255, 255, 255, .1);
}
#rightcircle{
    width:14vw;
    height:40vw;
    right:0;
    top:30%;
    position: absolute;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    background:url(https://h2.huatianzitie.com/image/arr_right.png) no-repeat 80% 50%  rgba(255, 255, 255, .1);
}
/*å½“ input è¢«é€‰ä¸­æ—¶ ä»–çš„å…„å¼Ÿçº§imgæ&nbsp;‡ç­¾é«˜äº®å±•ç¤º*/
input:checked+.item {
    border: 1px solid #a99281;
    box-shadow: 0 0px 2px #a99281;
}

#pg2 {
    width: 100%;
    height: 208vw;
    position: absolute;
    overflow: hidden;
    /* background: url(https://h2.huatianzitie.com/image/p3-2.jpg) no-repeat top; */
    background-size: 100%;
}

#pg2_ticket {
    width: 75%;
    height: 36vw;
    margin: 0px 12.5%;
    position: absolute;
    overflow: hidden;
}

#pg2_ticket img {
    width: 100%;
    top: -30vw;
    position: relative;
}

#pg2_ticket .move {
    transform: translateY(30vw);
    transition: transform 3.2s ease calc(var(--dalay-time) * 5);
}

#pg3 {
    width: 100%;
    height: 208vw;
    position: absolute;
    overflow: hidden;
    background-size: 100%;
}

#pg3_ticket {
    width: 84vw;
    height: 150vw;
    left: 8vw;
    top: 10vw;
    position: absolute;
    overflow: hidden;
}

#pg3_ticket .bg {
    width: 100%;
    top: 0px;
    position: absolute;
}


#idol {
    width: 100%;
    right: 0.035vw;
    top: 30vw;
    height: 55.4vw;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
    position: absolute;
    overflow: hidden;
}

#name {
    font-family: HYYAKUHEI-85J;
    color: #171717;
    font-size: 4.5vw;
    text-shadow: 0 1px 2px #47fcd6;
    left: 4.5vw;
    top: 43vw;
    position: absolute;
}

#groupname {
    font-family: HYYAKUHEI-85J;
    color: #171717;
    font-size: 4.5vw;
    text-shadow: 0 1px 2px #47fcd6;
    left: 4.5vw;
    top: 56vw;
    position: absolute;
}

#seat {
    font-family: HYYAKUHEI-85J;
    color: #171717;
    font-size: 4.5vw;
    text-shadow: 0 1px 2px #47fcd6;
    left: 4.5vw;
    top: 61vw;
    position: absolute;
}

#seat span {
    font-family: DIN-BOLD;
    color: #171717;
    font-style: italic;
    text-shadow: 0 1px 2px #47fcd6;
    font-size: 8vw;
}

#neighbor {
    font-family: HYYAKUHEI-85J;
    color: #171717;
    font-size: 4.5vw;
    text-shadow: 0 1px 2px #47fcd6;
    left: 4.5vw;
    top: 77vw;
    position: absolute;
}

#slogan {
    font-family: DZCFZJ;
    color: rgb(131, 255, 229);
    font-size: 5vw;
    line-height: normal;
    text-shadow: 0 1px 10px rgba(131, 255, 228, 0.644);
    left: 7.7vw;
    top: 89vw;
    white-space: nowrap;
    width: 68vw;
    height: 17vw;
    justify-content: center;
    align-items: center;
    display: flex;
    letter-spacing: -0.1vw;
    text-align: center;
    position: absolute;
}

#pg3_1 {
    width: 90%;
    height: 60px;
    left: 5%;
    top: 168vw;
    position: absolute;
    justify-content: space-between;
}

#pg3_1 img {
    width: 46%;
}

@font-face {
    font-family: DZCFZJ;
    src: url(./DZCFZJ.TTF);
}

/**number*/
@font-face {
    font-family: DIN-BOLD;
    src: url(./DIN-BOLD.OTF);
}

@font-face {
    font-family: HYYAKUHEI-85J;
    src: url(./HYYAKUHEI-85J.TTF);
}

@font-face {
    font-family: HYYAKUHEI-55J;
    src: url(./HYYAKUHEI-55J.TTF);
}

#pg4 {
    width: 100%;
    height: 208vw;
    position: absolute;
    overflow: hidden;
    /* background: url(https://h2.huatianzitie.com/image/p5.jpg) no-repeat top; */
    background-size: 100%;
    z-index: 1000;
}

#pg4_container {
    position: absolute;
    transform: scale(1.03);
}</pre></body></html>