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

article, aside, figure, footer, header, nav, section, details, summary, li { display: block; }

video, iframe, embed { max-width: 100%; vertical-align: bottom; }

html { overflow-y: scroll; }

ul, ol { list-style: none; }

a { text-decoration: none; /*-webkit-tap-highlight-color:transparent*/ }

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

th { font-weight: bold; vertical-align: bottom; }

td { font-weight: normal; vertical-align: top; }

input, select { vertical-align: middle; }

input, input:focus { outline: none; -webkit-tap-highlight-color: transparent; }

input[type="radio"] { vertical-align: middle; }

input[type="checkbox"] { vertical-align: middle; }

strong { font-weight: bold; }

td, td img { vertical-align: top; }

label, input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }

button, input, select, textarea { margin: 0; border-radius: 0; }

button, input[type=button] { width: auto; overflow: visible; }

input:not([type]), input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="text"], input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button { padding: 0; margin: 0; }

.cl:before, .cl:after { content: ""; display: block; height: 0; overflow: hidden; }

.cl:after { clear: both; }

html { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important; }

.fl { float: left; }

.fr { float: right; }

.tac { text-align: center; }

.pr { position: relative; }

.pa { position: absolute; }

.fw7 { font-weight: 700; }

body, html { width: 100%; height: 100%; }

.pop { width: 100%; height: 100%; position: absolute; width: 100%; height: 100%; z-index: 100; left: 0; top: 0; overflow: hidden; }
.pop .box { position: absolute; top: 0; transform: translateX(14.8rem); width: 14.8rem; right: 0; background: url(../images/pop.png) 0 0 no-repeat; color: #77654e; font: 0.2rem/0.32rem "Microsoft Yahei"; height: 100%; box-sizing: border-box; background-size: 100% 100%; padding-top: .52rem; padding-left: .5rem; }
.pop .close { position: absolute; background: url(../images/close.png) 0 0 no-repeat; width: 1.3rem; height: 1.3rem; cursor: pointer; background-size: 2.87rem 1.29rem; right: 0; top: 0; z-index: 10; }
.pop .close:hover { background-position: -1.59rem 0; }
.pop .mark { color: #8459cb; }
.pop .inner { margin-left: .32rem; height: 11.12rem; margin-right: .32rem; overflow: auto; overscroll-behavior: contain; -ms-scroll-chaining: contain; }
.pop .inner::-webkit-scrollbar { width: 6px; background: #e0d8c9; border-radius: 6px; }
.pop .inner::-webkit-scrollbar-thumb { background: #FFF; border-radius: 6px; }
.pop .cnt { width: 12.8rem; margin: 0 auto; }
.pop .title { margin-bottom: .5rem; }
.pop .title img { width: 12.8rem; }
.pop .txt { width: 12.3rem; margin: 0 auto .4rem; }
.pop .qr { padding: .3rem 0 .5rem; }
.pop .qr img { width: 2.68rem; margin-top: .2rem; }
.pop .title2 img { width: 6.74rem; margin-bottom: .38rem; }
.pop .link { width: 10.53rem; margin: 0 auto .5rem; }
.pop .link img { width: 100%; }
.pop .link .link-pic { display: block; margin-bottom: .1rem; }
.pop .link .link-txt { color: #8459cb; }
.pop .link .link-txt::after { content: ''; background: url(../images/arrow.png); width: .16rem; height: .16rem; background-size: 100% 100%; display: inline-block; vertical-align: middle; margin-left: .1rem; }
.pop .pics { text-align: center; width: 11.64rem; margin: 0 auto .5rem; }
.pop .pics img { width: 100%; margin-top: .6rem; }
.pop .txt2 { width: 11.64rem; margin: 0 auto; }

.rule-list { counter-reset: term; margin-bottom: .2rem; }
.rule-list li { position: relative; padding-left: .5rem; }
.rule-list li::before { counter-increment: term; content: counter(term); background: url(../images/dot.png); background-size: 100% 100%; width: 0.3rem; height: .3rem; text-align: center; display: inline-block; position: absolute; left: 0; top: .01rem; line-height: .3rem; }

@-webkit-keyframes slide-in-right { 0% { -webkit-transform: translateX(14.8rem); transform: translateX(14.8rem); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transform-origin: 100%; transform-origin: 100%; opacity: 1; } }
@keyframes slide-in-right { 0% { -webkit-transform: translateX(14.8rem); transform: translateX(14.8rem); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transform-origin: 100%; transform-origin: 100%; opacity: 1; } }
@-webkit-keyframes slide-out-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  100% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0; } }
@keyframes slide-out-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  100% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0; } }
.slide-in-right { -webkit-animation: slide-in-right 0.6s cubic-bezier(0.23, 1, 0.32, 1) both; animation: slide-in-right 0.6s cubic-bezier(0.23, 1, 0.32, 1) both; }

.slide-out-right { -webkit-animation: slide-out-right 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; animation: slide-out-right 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; }

.container { width: 25.6rem; height: 14.4rem; background: url(../images/bg.jpg) 50% 0 no-repeat; background-size: 100% 100%; }

.act1, .act2, .act3, .act4 { position: absolute; cursor: pointer; background: url(../images/item.png) 0 0 no-repeat; background-size: 10.01rem 19.44rem; }
.act1 span, .act2 span, .act3 span, .act4 span { position: absolute; background: url(../images/tipbg.png); width: 6.28rem; height: 1.8rem; pointer-events: none; opacity: 0; transition: all .3s ease-in; box-sizing: border-box; padding: .5rem .5rem 0; font: 0.2rem/0.34rem "Microsoft Yahei"; background-size: 100% 100%; color: #FFF; }
.act1:hover span, .act2:hover span, .act3:hover span, .act4:hover span { opacity: 1; }

.act1 { left: 2.67rem; top: .68rem; background-position: 0 0; width: 4.77rem; height: 4.56rem; }
.act1 span { left: 4.41rem; top: 1.62rem; }
.act1:hover { background-position: -5rem .01rem; }

.act2 { left: 4.36rem; top: 5.03rem; background-position: 0 -4.8rem; width: 4.78rem; height: 4.586rem; }
.act2 span { left: 4.42rem; top: 1.52rem; }
.act2:hover { background-position: -5rem -4.8rem; }

.act3 { left: 8.16rem; top: 8.63rem; background-position: 0 -9.8rem; width: 5.01rem; height: 4.47rem; }
.act3 span { left: 1.94rem; top: -1.08rem; }
.act3:hover { background-position: -5rem -9.8rem; }

.act4 { left: 12.98rem; top: 9.07rem; background-position: 0 -14.8rem; width: 4.77rem; height: 4.56rem; }
.act4 span { left: 1.94rem; top: -.75rem; }
.act4:hover { background-position: -5rem -14.8rem; }

/*# sourceMappingURL=style.css.map */