* {
    margin: 0;
    padding: 0;
}

body,
html {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    position:fixed;
    /*overflow: hidden;*/
}

ul,
ol {
    list-style: none;
}
.scan{
           width:100vw;
	   		height:100vh;
	   		background:#FF4C7C;
	   		position:relative;
	   		display:none;
		}
		.scan img{
			width:47.6vw;
			position:absolute;
	   		left:30%;
	   		top:15%;
			}

@media (min-width: 200px) and (max-width: 374px) {
    html {
        font-size: 10px;
    }
}

@media (min-width: 375px) and (max-width: 414px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 420px) and (max-width: 1024px) {
    html {
        font-size: 24px;
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 24px;
    }
}

.content {
    width: 100vw;
    height: 100vh;
    /*background: pink;*/
}
/*检测用户横屏竖屏*/
.hint{
	position:absolute;
	left: 50%;
    top: 50%;
    margin-left: -130px;
    margin-top: -98px;
	width: 260px;
}
.first_page_logo{
	position:absolute;
	left: 50%;
    top: 50%;
    margin-left: -73px;
    margin-top: -32px;
	width: 146px;
}

/*ios用户提示*/

.userPrompts {
    width: 100vw;
    height: 100vh;
    background: #FF4C7C;
    position: relative;
    display: none;
}

.user_img {
    position: absolute;
    top: 40.2%;
    left: 50%;
    margin-left: -73px;
}

.userPrompts_right {
    width: 53.3%;
    height: 25.4%;
    /*background: blue;*/
    margin-left: 46.7%;
}

/*安卓手机用户*/

.page_1 {
    width: 100vw;
    height: 100vh;
    background: #FF4C7C;
    position: relative;
    align-items: center;
    justify-content: center;
}

.page_0 {
    width: 100vw;
    height: 100vh;
    background: #FF4C7C;
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
}

.page_1 img:last-child {
    width: 146px;
}

.page_2 {
    width: 100vw;
    height: 100vh;
    display: none;
}

.pa_top {
    width: 100%;
    height: 87.8%;
    background: #FF4C7C;
}

.page_2_top {
    width: 100%;
    overflow: hidden;
}
.page_2_top_left{
	width: 45vw;
	float: left;
}

.page_2_top_right {
	float: right;
	width: 19vw;
	margin-right: 4.8vw;
	margin-top: 4.8vw;
}

.page_2_center {
    width: 100%;
    height: 55%;
    /*background: skyblue;*/
    position: relative;
}

.page_2_center_left {
    width: 30.1%;
    /*height: 100%;*/
    /*background: red;*/
    float: left;
    margin-left: 11.4%;
}

.page_2_center_right {
    width: 35%;
    /*height: 100%;*/
    /*background: blue;*/
    float: left;
    margin-left: 20%;
}

.intro {
    -webkit-writing-mode: vertical-rl;
    writing-mode: tb-rl;
    padding-top: 1.5rem;
}

/*.tb-rl {
    width: 3rem;
}*/

.r2 {
    font-size: 0.8rem;
    color: #FFDBE4;
    position: absolute;
    bottom: 32px;
    left: 24%;
    /*padding-top: 2.3rem;
	padding-left: 3%;*/
    animation: a1 0.7s;
}

.r3 {
    font-size: 0.8rem;
    color: #FFDBE4;
    /*padding-top: 9.5rem;
	padding-left: 3%;*/
    position: absolute;
    bottom: 32px;
    left: 32%;
    animation: a2 0.7s;
}

@keyframes a1 {
    from {
        bottom: 150px;
        left: 24%;
    }
    to {
        bottom: 10px;
        left: 24%;
    }
}

@keyframes a2 {
    from {
        bottom: 150px;
        left: 32%;
    }
    to {
        bottom: 10px;
        left: 32%;
    }
}

@keyframes a3 {
    from {
        bottom: 150px;
        left: 12%;
    }
    to {
        bottom: 7px;
        left: 12%;
    }
}

.tb-rl h2 {
    font-size: 1.4rem;
    font-weight: normal;
    color: #fff;
    position: absolute;
    bottom: 29px;
    left: 12%;
    animation: a3 0.7s;
}

.page_2_center_right_top {
    width: 100%;
    /*height: 33%;*/
    /*background: skyblue;*/
    margin-top: 25%;
}

.page_2_center_right_top img {
    /*width:auto;*/
    /* height:auto;*/
    max-width: 100%;
    max-height: 100%;
}

.page_2_center_right_bottom {
    width: 8rem;
    height: 3rem;
    background: #fff;
    position: absolute;
    bottom: 35px;
    border-radius: 2.5rem;
    text-align: center;
    line-height: 3rem;
    margin-left: 3%;
    z-index: 3;
}

.page_2_center_right_bottom b {
    font-size: 1.2rem;
    color: red;
    font-family: "宋体";
}

.pa_bottom {
    width: 100%;
    height: 12.2%;
    background: #FF6A90;
    position: relative;
}

.pa_bottom img {
    width: 19.6rem;
    /*height: 12.87rem;*/
    position: fixed;
    bottom: 1%;
    left: 11.2%;
    zoom: 0.5;
    z-index: 2;
}

/*#__vconsole .vc-switch {
	opacity: 0;
}*/

.page_3 {
    width: 100vw;
    height: 100vh;
    background: #FF4C7C;
    display: none;
}

.page_3_top {
    width: 100%;
    height: 15%;
    /*background: red;*/
}

.page_3_top_left {
    width: 45.9%;
    height: 100%;
    /*background: red;*/
    float: left;
}

.page_3_top_right {
    width: 54.1%;
    height: 100%;
    /*background: blue;*/
    float: left;
}

.page_3_top_right img {
    margin-left: 58%;
    margin-top: 13%;
}

.page_3_center {
    width: 100%;
    height: 50%;
    /*background:red;*/
    text-align: center;
    font-size: 1.13rem;
}

.page_3_center p {
    padding-top: 40%;
    color: #fff;
}

.page_3_center img {
    zoom: 0.5;
    margin-top: 7%;
}

/*系统提示*/

.Popout {
    width: 100%;
    height: 100%;
    background: #992D4A;
    position: relative;
    display: none;
}

.Popout_top {
    width: 100%;
    height: 15%;
    /*background: red;*/
}

.Popout_top_left {
    width: 45.9%;
    height: 100%;
    /*background: red;*/
    float: left;
}

.Popout_top_right {
    width: 54.1%;
    height: 100%;
    /*background: blue;*/
    float: left;
}

.Popout_top_right img {
    margin-left: 58%;
    margin-top: 13%;
}

.Popout_center {
    width: 79.2%;
    height: 23.6%;
    background: #fff;
    text-align: center;
    line-height: 194px;
    font-size: 1.13rem;
    margin-top: 27.8%;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    border-radius: 1rem;
    font-size: 1.5rem;
}

.Popout_center p {
    padding-top: 40%;
    color: #fff;
}

.Popout_center img {
    zoom: 0.5;
    margin-top: 7%;
}

/*未获取系统权限*/

.limitedAuthority {
    width: 100%;
    height: 100%;
    background: #FF4C7C;
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.limitedAuthority_top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.limitedAuthority_top .left{
    width: 45vw;
    float: left;
}
.limitedAuthority_top .right{
    width: 19vw;
    float: right;
    margin-top: 12px;
    margin-right: 12px;
}
.limitedAuthority_center{
    text-align: center;
}

.limitedAuthority_center p {
    color: #fff;
    font-size: 1.15rem;
    text-align: center;
    width: 76vw;
}

.limitedAuthority_center img {
    margin-top: 6vw;
    width: 33vw;
}

.info {
    width: 100%;
    height: 75%;
}

.action_botton {
    width: 12rem;
    height: 3rem;
    background: #fff;
    text-align: center;
    line-height: 3rem;
    font-size: 1.2rem;
    color: red;
    border-radius: 1.7rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -6rem;
    margin-top: -3.5rem;
}

.page_5_top {
    width: 100%;
}

.page_5_top_right {
	position: absolute;
	right: 0;
	top: 0;
	padding-right: 12px;
	padding-top: 12px;
	width: 112px;
	z-index: 7;
}

.page_5_top_left{
	width: 49vw;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.page_5_top_right div {
	width: 44px;
	height: 44px;
	float: left;
}

.page_5_top_right #refresh{
	background: url(../img/refresh2@3x.png) no-repeat;
	background-size: cover;
}
.page_5_top_right #refresh:active{
	background: url(../img/refreshSelection.png) no-repeat;
	background-size: cover;
}
.page_5_top_right #introduce{
	background: url(../img/specification@3x.png) no-repeat;
	background-size: cover;
	margin-left: 12px;
}
.page_5_top_right #introduce:active{
	background: url(../img/checked@3x.png) no-repeat;
	background-size: cover;
}

.page_5_center_before {
	position: absolute;
	top: 40%;
	left: 50%;
	z-index: 9;
	background: url(../img/bg@3x.png) no-repeat;
	background-size: 100% 100%;
	width: 84vw;
	height: 84vw;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column
}

.page_5_center_before h3 {
    width: 100%;
    text-align: center;
    top: 12%;
    font-size: 18px;
	color: #F9376B;
	position: absolute;
	left: 0;
}
.page_5_center_before p{
	font-size: 14px;
	color: #F9376B;
	line-height: 24px;
	width: 85%;
	margin: 0 auto;
	padding-top: 6vw;
}

.page_5_center_before small{
	font-size: 12px;
	color: #F9376B;
	line-height: 20px;
	padding-top: 3vw;
	width: 85%;
	margin: 0 auto;
	display: block;
}


.page_5_center_before .bgPic_botton {
    width: 44px;
    height: 44px;
    background: url(../img/closeButton@3x.png) no-repeat;
    position: absolute;
    right: 12px;
	top:12px;
	background-size: contain;
	z-index: 3;
}

.page_5 {
    width: 100%;
    height: 100%;
    /*background: pink;*/
    display: none;
}

.page_5_center {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    display: none;
    z-index: 4;
}

.page_5_center .focusing {
	width: 74vw;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
    z-index: 1;
}

.page_5_center .girl {
	width: 64vw;
	position: absolute;
	top: 50%;
	left: 0;
    transform: translate(-16vw,-50%);
    z-index: 5;
}

.page_5_center .boy {
	width: 64vw;
	position: absolute;
	top: 50%;
	right: 0;
    transform: translate(16vw,-50%);
    z-index: 5;
}
.page_5_center .girl img,
.page_5_center .boy img{
	width: 64vw;
	height: 64vw;
}
.page_5_center .girl img.xian,
.page_5_center .boy img.xian{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.page_5_center .girl .tian,
.page_5_center .boy .tian{
	position: relative;
    transition: all 1s;
	top: 0;
	left: 0;
	z-index: 3;
	overflow: hidden;
	width: 64vw;
	height: 64vw;
	transition: all 0.4s;
	-webkit-mask-size: 10000px 10000px;
    -webkit-mask-position-x: 320px;
    -webkit-mask-position-y: 64vw;
	-webkit-mask-image: -webkit-gradient(linear, left bottom, left top,
		color-stop(0.00,  rgba(0,0,0,0)),
		color-stop(0.25,  rgba(0,0,0,0)),
		color-stop(0.27,  rgba(0,0,0,1)),
		color-stop(0.80,  rgba(0,0,0,1)),
		color-stop(1.00,  rgba(0,0,0,1)));
}

.page_5_bottom {
    position: absolute;
    bottom: 0;
    left: 0;
	width: 100%;
	overflow: hidden;
}

.page_5_bottom_left{
	position: absolute;
	bottom: 8vw;
	left: 8vw;
	width: 72px;
	z-index: 2;
}

.page_5_bottom_right {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 49vw;
}


			.page_6 {
	width: 100%;
	height: 100%;
	/*background: pink;*/
	display: none;
	position: fixed;
	top: 0;
	    z-index: 5;
}

.page_6 .containerCanvas {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
}
/*.page_6 .containerCanvas .modelBtn{
	width: 90px;
	height: 39px;
	position: absolute;
	background: url(../img/loadModel/modelBtn.png) no-repeat;
	background-size: 100% 100%;
	display: none;
	z-index: 9;
}*/

.page_6 .containerCanvas canvas {
	position: absolute;
	top: 200px;
	left: 300px;
	transition: all 4s;
	-moz-transition: all 4s;
	/* Firefox 4 */
	-webkit-transition: all 4s;
	/* Safari 和 Chrome */
	-o-transition: all 4s;
	pointer-events: none;
}


/*刮奖*/

.page_6 .scratch-container {
	/*display: none;*/
	position: relative;
	/*left: 200px;
	top: 100px;*/
	width: 100vw;
	height: 100vh;
	/*background: #dfdfdf;*/
	text-align: center;
	display: flex;
    justify-content: center;
    /*align-items: center;*/
   margin-top: 14vh;
}
/*.page_6 .scratch-container .scratch-infoBtn{
	width: 96px;
	height: 48px;
	background: url(../img/loadModel/scratchBtn.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: -64px;
	display: none;
}*/
.page_6 .scratch-container .scratch-text {
	font-size: 20px;
color: #F9376B;
line-height: 28px;
background: url('../img/loadModel/textBg.png');
	background-size: 100% 100%;
	width: 300px;
	height: 300px;
	position: absolute;
}
/*.page_6 .scratch-text .scratch-close{
	position: absolute;
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	background: url(../img/closeButton@3x.png);
	background-size: 100% 100%;
}*/
.page_6 .scratch-text p{
	margin-left: 28px;
	margin-right: 28px;
	margin-top: 60px;
	text-align: left;
}
.page_6 .scratch-container #scratch-canvas {
	width: 300px;
	height: 300px;
	z-index: 2;
}

/*.page_6 #scratchKeyFrames {
	width: 300px;
	height: 300px;
	background-size: 100% 100%;
	position: absolute;
	z-index: 3;
}*/

/* .heart {
    font-size: 1vw;
    opacity: 0.9;
    transition: all 1s ease-in-out;
    animation: flash 1s ease-in-out ;
    position: absolute;
    z-index: 99;
    color: #ff65f2;
}
@keyframes flash {
    10% {
        opacity: 1;
        font-size: 2vw;
        color: #fffd71;
        transform:rotate(67deg);
    }
    30% {
        opacity: 1;
        font-size: 3vw;
        color: #f9749a;
        transform:rotate(37deg);
    }
    34% {
        opacity: 1;
        font-size: 3vw;
        color: #57031b;
        transform:rotate(17deg);
    }
    38% {
        opacity: 1;
        font-size: 3vw;
        color: #f9749a;
        transform:rotate(187deg);
    }
    50% {
        opacity: 1;
        font-size: 4vw;
        color: #ff80f4;
        transform:rotate(127deg);
    }
    60% {
        opacity: 1;
        font-size: 5vw;
        color: #e6134b;
        transform:rotate(17deg);
    }
    63% {
        opacity: 1;
        font-size: 8vw;   
        color: #ffcc3e;
        transform:rotate(97deg);
    }
    66% {
        opacity: 1;
        font-size: 5vw;
        color: #fa5581;
        transform:rotate(47deg);
    }
    90% {
        opacity: 1;
        font-size: 7vw;
        color: #db0941;
        transform:rotate(77deg);
    }
    100% {
        opacity: 1;
        font-size: 2vw;
        color: #d44269;
        transform:rotate(0deg);
    }
} */


.iosTip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }
  
  .iosTip img {
    width: 90%;
    float: right;
  }
  
  #capture_video {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 1;
    object-fit: cover;
  }
  #capture_input{
    position: fixed;
    top: 0;
    left: 0;
    /* width: 100%; */
    height: 100%;
    z-index: -1;
  }
  #capture_input canvas {
    /* display: none; */

  }