html,body{
    margin:0;
    padding:0;
    height: 100%;
    overflow: hidden;
}
#app{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .5s;
    left: 0;
    right:0;
    top:0;
    bottom: 0;
    margin: auto;
    overflow: visible;
}
#app.in{
    opacity: 1;
}
.z1{
    z-index: 1;
}
.pos{
    position: absolute;
    overflow: visible;
}
.abs{
    position: absolute;
}
.rlt{
    position: relative;
}
.pos.point{
    width: 0;
    height: 0;
}
.pos.line-x{
    width: 100%;
    height: 0;
}
.pos.line-y{
    width: 0;
    height: 100%;
}
.pos.top{
    top:0;
    left: 0;
    right: 0;
    margin: auto;
}
.pos.bottom{
    bottom:0;
    left: 0;
    right: 0;
    margin: auto;
}
.pos.left{
    left:0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.pos.right{
    right:0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.pos.center{
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin: auto;
}
.pos.left-top{
    left:0;
    top:0;
}
.pos.right-top{
    right:0;
    top: 0;
}
.pos.left-bottom{
    left:0;
    bottom:0;
}
.pos.right-bottom{
    right:0;
    bottom:0;
}
.pos.left .scale{
    transform-origin: left center;
}
.pos.right .scale{
    transform-origin: right center;
}
.pos.top .scale{
    transform-origin: center top;
}
.pos.bottom .scale{
    transform-origin: center bottom;
}
.pos.center .scale{
    transform-origin: center center;
}
.pos.left-top .scale{
    transform-origin: left top;
}
.pos.right-top .scale{
    transform-origin: right top;
}
.pos.left-bottom .scale{
    transform-origin: left bottom;
}
.pos.right-bottom .scale{
    transform-origin: right bottom;
}
.flex{
    display: flex;
}
.flex-column{
    flex-direction: column;
}
.flex-shrink{
    flex-shrink: 1;
}
.flex-grow{
    flex-grow: 1;
}
.max-box{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.bg{
    width: 100%;
    height: 100%;
}
.btn{
    position: relative;
}
.btn.abs{
    position: absolute;
}
.btn .bg{
    position: absolute;
    transition: transform .1s;
}
.btn .bg:active{
    transition: transform 0s;
    transform: scale(.95);
}
.btn .img {
    width: 100%;
    height: 100%;
}
 .content-center{ 
    display: flex;
    align-items: center;
    justify-content: center;
}
.content-right{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
[data-text]::after{
    content: attr(data-text);
}

#app{
    background-image: url("../image/pc_bg.webp?v=1762332566");
    background-position: center;
    background-size: cover;
}
#content{
    width: 3056px;
    height: 1668px;
    border: 2px solid rgba(0,0,0,0);
    box-sizing: border-box;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: row;
}
#content .half{
    width: 50%;
    height: 100%;
    position: relative;
    text-align: center;
}
#content .phone{
    position: absolute;
    width: 1546px;
    height: 2072px;
    background-image: url("../image/pc_phone.webp?v=1762332566");
    transform: translate(-50%,-50%) translate(-128px, 336px);
}
.logo{
    width: 115px;
    height: 115px;
    background-image: url("../image/pc_logo.webp?v=1762332566");
    left: 85px;
    top: 85px;
}
.titles{
    color: #fff;
}
.event-name{
    font-size: 48px;
    margin-bottom: 26px;
}
.title{
    font-size: 120px;
    line-height: 120px;
    text-shadow: 0 0 2px rgba(194, 160, 138, 1), 0 0 2px rgba(194, 160, 138, 1), 0 0 2px rgba(194, 160, 138, 1);
}
.subtitle{
    font-size: 48px;
    margin-top: 45px;
}
.subtitle .highlight{
    color: #573a2d;
}
.qr-box{
    width: 310px;
    height: 310px;
    margin: auto;
    background-color: #fff;
    padding: 22px;
    margin-top: 120px;
}