/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333; outline:none;}

/* function */
.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
.f-cb,.f-cbli li{zoom:1;}
.f-ib{display:inline-block;*display:inline;*zoom:1;}
.f-dn{display:none;}
.f-db{display:block;}
.f-fl{float:left;}
.f-fr{float:right;}
.f-pr{position:relative;}
.f-prz{position:relative;zoom:1;}
.f-oh{overflow:hidden;}
.f-ff0{font-family:arial,\5b8b\4f53;}
.f-ff1{font-family:"Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53;}
.f-fs1{font-size:12px;}
.f-fs2{font-size:14px;}
.f-fwn{font-weight:normal;}
.f-fwb{font-weight:bold;}
.f-tal{text-align:left;}
.f-tac{text-align:center;}
.f-tar{text-align:right;}
.f-taj{text-align:justify;text-justify:inter-ideograph;}
.f-vam,.f-vama *{vertical-align:middle;}
.f-wsn{word-wrap:normal;white-space:nowrap;}
.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}
.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}
.f-ti{overflow:hidden;text-indent:-30000px;}
.f-ti2{text-indent:2em;}
.f-lhn{line-height:normal;}
.f-tdu,.f-tdu:hover{text-decoration:underline;}
.f-tdn,.f-tdn:hover{text-decoration:none;}
.f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}
.f-csp{cursor:pointer;}
.f-csd{cursor:default;}
.f-csh{cursor:help;}
.f-csm{cursor:move;}
.f-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
.f-flex{display: flex; }
.f-flex-center{justify-content: center;}
.f-bg-green{ background:#33c337 !important;;}
.f-bg-red{ background:#ec5851 !important;;}
.f-bg-blue{ background:#4d88e9 !important;;}
.f-f-red{color: #c51138 !important;}
.f-f-blue{ color:#016fd0 !important;}
.f-f-green,.f-f-green a{ color:#33c337 !important; }
.f-mlr10{ margin-left:10px; margin-right: 10px;}
.f-mlr20{ margin-left:20px; margin-right: 20px;}
.f-mlr30{ margin-left:30px; margin-right: 30px;}
.f-ptb10{ padding-top:10px; padding-bottom: 10px;}
.f-plr10{ padding-left:10px; padding-right: 10px;}
.f-mauto{ margin: 0 auto;}
.f-pr15{ padding-right: 15px;}

.g-w15{ width:15%;}
.g-w20{ width:20%;}
.g-w22{ width:22%;}
.g-w25{ width:25%;}
.g-w26{ width:26%;}
.g-w30{ width: 30%;}
.g-w33{ width: 33.333%;}
.g-w35{ width: 35%;}
.g-w40{ width:40%;}
.g-w45{ width:45%;}
.g-w50{ width:50%;}
.g-w65{ width:65%;}
.g-w75{ width: 75%;}

.f-flex-jcc{justify-content:center !important;}

/*
 * The artwork was designed on a 720 x 1270 canvas. Keep every foreground
 * layer on the same responsive canvas so that phones and desktop browsers
 * retain the intended visual order without horizontal overflow.
 */
:root{
	--stage-width:min(100vw, 56.6929vh, 720px);
}

@supports (height:100svh){
	:root{
		--stage-width:min(100vw, 56.6929svh, 720px);
	}
}

html{
	width:100%;
	min-height:100%;
	height:-webkit-fill-available;
	overflow:hidden;
	background:#03102e;
}

body{
	position:relative;
	width:100%;
	min-height:100vh;
	min-height:-webkit-fill-available;
	min-height:100svh;
	height:100vh;
	height:-webkit-fill-available;
	height:100dvh;
	overflow:hidden;
	background:#03102e;
	font-size:16px;
}

.main{ overflow:hidden; position:relative; }
.main-content{ position:absolute; width:100%; z-index:10; top:0; padding:10px 0.5rem; box-sizing:border-box; }

.fixed{
	position:fixed;
	inset:0;
	z-index:0;
	overflow:hidden;
	pointer-events:none;
}

.fixed img{
	display:block;
	width:100% !important;
	height:100% !important;
	object-fit:cover;
	object-position:center;
}

.top{
	display:flex;
	justify-content:center;
	margin:0;
	padding:0;
}

.stage{
	position:absolute;
	left:50%;
	top:0;
	width:var(--stage-width);
	height:100%;
	transform:translateX(-50%);
	z-index:10;
	overflow:visible;
}

.top-fixed{
	position:absolute;
	left:50%;
	right:auto;
	width:100% !important;
	margin:0 !important;
	transform:translateX(-50%);
}

/* Logo */
.logo-layer{
	top:3% !important;
	z-index:40;
	pointer-events:none;
}

.logo-layer img{
	display:block;
	width:92% !important;
	height:auto;
	margin:0 auto;
}

/* Woman layer */
.character-layer{
	top:0 !important;
	z-index:20;
	pointer-events:none;
}

.character-layer img{
	display:block;
	width:100% !important;
	height:auto;
	margin:0 auto;
}

/* Animated 12666 reward layer */
.reward-layer{
	position:relative;
	width:74%;
	aspect-ratio:581 / 347;
	overflow:hidden;
	z-index:60;
	pointer-events:none;
	transform-origin:center;
}

.reward-layer img{
	position:absolute;
	left:0;
	bottom:0;
	display:block;
	width:100% !important;
	height:auto;
	margin:0 !important;
	transform:translateY(5.34%);
}

.a-box{ padding:0rem; text-align: center; margin:0 auto;}
.a-box2{ padding:0; text-align: center; margin:0 auto;}

.cta-stack{
	position:absolute;
	left:0;
	bottom:max(5%, env(safe-area-inset-bottom));
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:clamp(2px, 0.35vw, 4px);
	z-index:60;
}

.download-actions{
	position:relative;
	z-index:99;
	width:100%;
	margin:0 !important;
	padding:0;
	text-align:center;
}

.download-actions .download-row{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:2.5%;
}

.btn-box{ width:100%; justify-content:space-between; margin:0 auto;}
.btn-li{
	display:block;
	width:44%;
	line-height:0;
	-webkit-tap-highlight-color:transparent;
}

.btn-li img{
	display:block;
	width:100% !important;
	height:auto;
}


.policy{ display:block; background:rgba(0,0,0,0.8);  padding: 1rem 0;text-align: center; color:#fff;position: fixed;z-index: 1000;width: 50vw; bottom:10px; left:50%; transform: translateX(-50%);border-radius: 10px; cursor:point;}
.policy:hover,.policy:link,.policy:active,.policy:visited{ color:#fff;}

.policy-t{ font-size:14px; color:#fff; display:block; padding:20px 20px 0 20px; }
.policy-t:hover,.policy-t:link,.policy-t:active,.policy-t:visited{ color:#fff;}
.policy-con{ padding:2rem; font-size:1rem; color:#fff; line-height:1.6rem;}
.policy-con p{ padding:0.8rem 0;}

@keyframes scaleDraw { 
    0%{
        transform: scale(1);  /*开始为原始大小*/
    }
    25%{
        transform: scale(1.2); /*放大1.1倍*/
    }
	30%{
	    transform: scale(1.2); /*放大1.1倍*/
	}
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(1.2);
    }
	80%{
	    transform: scale(1.2);
	}
}

@keyframes radiusDraw { 
    0%{
        transform: rotate(0deg);  /*开始为原始大小*/
    }
	100%{
	   transform: rotate(360deg);
	}
}

@keyframes upDownDraw { 
    0%{
        transform: translateY(1.5rem);  /*开始为原始大小*/
    }
	50%{
	   transform: translateY(0rem);
	}
	100%{
	   transform: translateY(1.5rem);
	}
}

@keyframes leftRightDraw { 
    0%{
        transform: translateX(-1.5rem);  /*开始为原始大小*/
    }
	50%{
	   transform: translateX(0rem);
	}
	100%{
	   transform: translateX(-1.5rem);
	}
}

.ani-big-small {
  animation: scaleDraw 4s ease-in-out infinite;
  will-change: transform;
}

.ani-radius {
  animation: radiusDraw 10s linear infinite;
}

.ani-upDown {
  animation: upDownDraw 3s ease-in-out infinite;
}

.ani-leftRight {
  animation: leftRightDraw 2s ease-in-out infinite;
}

/* Short landscape screens: keep the buttons clear of browser chrome. */
@media screen and (orientation:landscape) and (max-height:520px){
	.cta-stack{ bottom:max(3%, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion:reduce){
	.ani-big-small{ animation:none; }
}

/* 横屏 */
@media screen and (orientation:landscape){}
/* 竖屏 */
@media screen and (orientation:portrait){}
/* 窗口宽度<1485,设计宽度=768 */
@media screen and (max-width:1734px){
}
@media screen and (max-width:1485px){
}
@media screen and (max-width:1370px){
}
@media screen and (max-width:1245px){
}
/* 窗口宽度<960,设计宽度=768 */
@media screen and (max-width:959px){
}
/* 窗口宽度<768,设计宽度=640 */
@media screen and (max-width:767px){
}
/* 窗口宽度<640,设计宽度=480 */
@media screen and (max-width:639px){
}
/* 窗口宽度<480,设计宽度=320 */
@media screen and (max-width:479px){
}
/* windows UI 贴靠 */
@media screen and (-ms-view-state:snapped){
}

/*检测高度*/
@media only screen and (max-height:640px){ /*当屏幕小于640*/
	.main{ overflow-y:auto;}
}

@media only screen and (min-height:640px){
}

@media only screen and (min-width:539px){ /*当屏幕小于640*/
	.main{ overflow-y:auto;}
}