/* @Description:
 * @Author: u
 * @Date: 2023-12-23 22:36:43
 * @LastEditor: u
 * @LastEditTime: 2023-12-24 14:55:26
*/
* {
	padding: 0;
	margin: 0;
	font-size: 0;
    position: relative;
}

html,
body {
	width: 100%;
	max-width: 1000px;
	height: 100%;
    margin: auto;
    background: url(../image/H5-2_02.jpg) center;
    background-size: 100%;
}


.background{
	width: 100%;
}
/* 首页 */
.home {
	position: absolute;
    width: 100%;
    top: 0;
    z-index: 1;
}

.home .logo {
	position: absolute;
	width: 33%;
	top: 2%;
	left: 2%;
}
.home .title-box{
    position: absolute;
    width: 30%;
    height: 4.6rem;
    right: 18%;
    top: 5%;
}
.home .title1 {
	position: absolute;
	width: 43%;
    top: 0%;
    right: 34%;
    opacity: 0;
	animation-name: fadeIn;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-fill-mode:forwards ;
}
.home .title2 {
	position: absolute;
	width: 35%;
    top: 6.5%;
    right: 2%;
    opacity: 0;
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-delay: 0.3s;
	animation-fill-mode:forwards ;
}
.home .title3 {
	position: absolute;
    width: 46%;
    top: 16%;
    right: 19%;
    opacity: 0;
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-delay: 0.6s;
	animation-fill-mode:forwards ;
}
.home .title4 {
	position: absolute;
    width: 40%;
    top: 29.5%;
    right: 49%;
    opacity: 0;
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-delay: 0.9s;
	animation-fill-mode:forwards ;
}
.home .title5 {
	position: absolute;
    width: 48%;
    top: 46%;
    right: 39%;
    opacity: 0;
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-delay: 1.2s;
	animation-fill-mode:forwards ;
}
.home .title6 {
	position: absolute;
    width: 40%;
    top: 55%;
    right: 0%;
    opacity: 0;
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-delay: 1.5s;
	animation-fill-mode:forwards ;
}
.home .title7 {
	position: absolute;
    width: 31%;
    top: 62%;
    right: 40%;
    opacity: 0;
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-delay: 1.8s;
	animation-fill-mode:forwards ;
}
.home .title8  {
	position: absolute;
    width: 41%;
    top: 71%;
    right: 17%;
    opacity: 0;
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-delay: 2.1s;
	animation-fill-mode:forwards ;
}
.home .subheading {
	position: absolute;
	width: 6%;
	top: 0;
	right: 10%;
	animation-name: fadeIn;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
}

.home .subtitle{
	position: absolute;
    opacity: 0;
}
.home .subtitle1{
    width: 31%;
    bottom: 24%;
    left: 22%;
}
.home .subtitle2{
    width: 30%;
    bottom: 21%;
    left: 40%;
}
.home .subtitle3{
	width: 31%;
    bottom: 17%;
    left: 25%;
}
.home .subtitle4{
    width: 31%;
    bottom: 15%;
    left: 60%;
}
.home .subtitle5{
    width: 31%;
    bottom: 11.5%;
    left: 36%;
}
.home .subtitle-fadeIn{
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-delay: 2.5s;
	animation-fill-mode:forwards ;
}
.home .subtitle-float-left{
	opacity: 1;
	animation-name: subtitleFloatL;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}
.home .subtitle-float-right{
	opacity: 1;
	animation-name: subtitleFloatR;
    animation-duration: 8s;
	animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.home .text {
	position: absolute;
    width: 4.5%;
    left: 5%;
    bottom: 11%;
	animation-name: fadeIn;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}

.home .downward{
    position: absolute;
	width: 30%;
    left: 35%;
    bottom: 3%;
    text-align: center;
    
}
.home .downward-img{
    width: 20%;
    margin-bottom: 0.05rem;
    top: 0rem;
	opacity: 0;
    position: relative;
    
    
	animation-name: downwardUp;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-delay: 3s;
}
.downward-text{
	width: 20%;
	left: 40%;
	opacity: 0;    
	top: 0.1rem;
    position: absolute;
    animation-name: flicker;
    animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-delay: 3s;
}
/* 对话列表 */

.list {
	position: absolute;
	width: 100%;
	height: auto;
	min-height: 100%;
	padding: 8% 0;
	box-sizing: border-box;
}

.list .item {
	width: 100%;
	margin: 0 0 0.4rem 0;
}

.head-rotate {
	transform: rotateY(0deg);
	animation-name: headRotate;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
}

.inline-fadeIn{
	animation-name: fadeIn;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-fill-mode:forwards ;
}

.inline {
	width: 100%;
	opacity: 0;    
    position: relative;
	
}
.inline img{
	width: 100%;
	margin: 0 0 0.2rem 0;
}
.inline .click{
    width: 0.4rem;
    height: 0.4rem;
    position: absolute;
    z-index: 1;
    margin: initial;
    right: 10%;
    bottom: 31%;
    opacity: 0;
    animation-name: flicker;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}
.list .title {
	width: 100%;
}

.list .intro {
	width: 100%;
}


.signature {
	width: 100%;
    margin-top: 0.5rem;
}

.signature img{
	width: 100%;
}

.click-link{
    position: absolute;
    width: 40%;
    right: 0%;
    top: 11%;
    opacity: 0;
}
.click-flicker{
    animation-name: flicker;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 3;
}
.click-link img{
    width: 25%;
    height: 100%;
    vertical-align: bottom;
}
.click-link p{
    width: 35%;
    display: inline-block;
	font-size: 0.12rem;
	text-align: center;
	margin: 0.05rem;
    color:#fff;
}

.bgm-wrap {
	transform-origin: center center;
    position: fixed;
    top: 2%;
    right: 2%;
    z-index: 99;
    width: 0.3rem;
    height: 0.3rem;
}
.music-control{
  width:100%;
  height:100%;
  background:url('../image/music.png') 0 0 no-repeat;
  border-radius:50%;
  border:1px solid #fff;
  background-size:auto 100%;
}
.music-control.close {
  background-position:100% 0;
}
/* 动画 */

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes downwardUp {
	from {
		top: 0;
		opacity: 0;
	}
	to {
		top: -0.1rem;
		opacity: 1;
	}
}

@keyframes flicker {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
    100% {
    	opacity: 0;
    }
}

@keyframes rightShift {
	from {
		left: -18%
	}
	to {
		left: 0
	}
}

@keyframes subtitleFloatL {
	0% {
		margin-left: 0%;
	}
	25% {
		margin-left: 1%;
	}
	50% {
		margin-left: -1%;
	}
	100% {
		margin-left: 0%;
	}
}
@keyframes subtitleFloatR {
	0% {
		margin-left: 0%;
	}
	25% {
		margin-left: -1%;
	}
	50% {
		margin-left: 1%;
	}
	100% {
		margin-left: 0%;
	}
}

@keyframes leftName {
	from {
		transform: rotateY(90deg);
	}
	to {
		transform: rotateY(0deg);
	}
}

@keyframes rightName {
	from {
		transform: rotateY(90deg);
	}
	to {
		transform: rotateY(0deg);
	}
}

@keyframes headRotate {
	from {
		transform: rotateY(360deg);
	}
	to {
		transform: rotateY(0deg);
	}
}