/* 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;}

body{  background-color:#136686; padding: 0; margin: 0;   background-size: 100% auto; font-size:16px;}
.main{ overflow:hidden; position: relative;  }
.main-content{ position: absolute; width:100%; z-index:10; top:0; padding:10 0.5rem;}
.top{ width:90%; justify-content:space-between; margin:0 auto; padding:0.1rem 0 0; }
.top-fixed{ position:absolute; top:0; right:0; z-index:11; width:100vw;
.fixed{ position: fixed;}
}

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

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

.btn-box{ width:100%; justify-content:space-between; margin:0 auto;}
.btn-li{ width:46%;}


.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;
}

.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;
}

/* 横屏 */
@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;}
}

/* Responsive landing layout */
:root{
	--creative-ratio: 0.5669291339;
	--viewport-height: 100svh;
}

html,
body{
	width:100%;
	min-height:100%;
	background:#07133d;
}

body{
	overflow:hidden;
	overscroll-behavior:none;
}

.landing-page{
	position:fixed;
	inset:0;
	display:grid;
	place-items:center;
	width:100%;
	height:var(--viewport-height);
	min-height:var(--viewport-height);
	overflow:hidden;
	isolation:isolate;
}

.ambient-bg{
	position:absolute;
	inset:-2rem;
	background:
		linear-gradient(rgba(3, 10, 42, 0.44), rgba(3, 8, 31, 0.8)),
		url("../img/bg.jpg") center / cover no-repeat;
	filter:blur(1rem);
	transform:scale(1.06);
	opacity:0.86;
	z-index:-1;
}

.landing-canvas{
	position:relative;
	width:min(100vw, calc(var(--viewport-height) * var(--creative-ratio)), 720px);
	aspect-ratio:720 / 1270;
	overflow:hidden;
	box-shadow:0 0 2rem rgba(0, 0, 0, 0.28);
}

.page-background,
.hero-art,
.brand-mark,
.gift-banner{
	position:absolute;
	display:block;
	height:auto;
}

.page-background{
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
}

.hero-art{
	top:7.56%;
	left:50%;
	width:100%;
	transform:translateX(-50%);
	pointer-events:none;
}

.brand-mark{
	top:0;
	left:50%;
	width:min(100vw, 710px);
	transform:translateX(-50%);
	filter:drop-shadow(0 0.25rem 0.4rem rgba(0, 0, 0, 0.45));
	z-index:4;
	pointer-events:none;
}

.download-panel{
	position:absolute;
	top:54.88%;
	left:50%;
	width:84%;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:clamp(0.4rem, 1.5vw, 0.75rem);
	transform:translateX(-50%);
	z-index:3;
}

.download-row{
	display:flex;
	justify-content:center;
	width:100%;
	gap:2.5%;
}

.download-panel .btn-li{
	display:block;
	line-height:0;
}

.download-row .btn-li{
	flex:1 1 0;
	min-width:0;
}

.download-panel .btn-li img{
	display:block;
	width:100%;
	height:auto;
	-webkit-user-drag:none;
	user-select:none;
}

.download-panel .btn-h5{
	width:61%;
}

.gift-banner{
	top:77.5%;
	left:0;
	right:0;
	width:78%;
	margin:0 auto;
	z-index:2;
	-webkit-user-drag:none;
	user-select:none;
}

@supports (height:100dvh){
	:root{
		--viewport-height:100dvh;
	}
}

@media screen and (max-width:480px){
	.landing-canvas{
		box-shadow:none;
	}
}

@media screen and (orientation:landscape){
	.download-panel{
		width:86%;
		gap:0.25rem;
	}

	.download-panel .btn-h5{
		width:64%;
	}
}