* {
    margin: 0;
    padding: 0;
}

img {
    display: block;
}

html, body {
    height: 100%;
    max-width: 750px;
    margin: 0 auto;
}

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-size: 50px;
}

body {
    margin: 0;
    font-family: 'Microsoft Yahei', Helvetica, 'simhei', sans-serif;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    overflow: hidden;
}

audio {
    height: 0;
    width: 0;
    display: none;
}

/*背景swiper的颜色在这里*/
.swiper-container {
    width: 100%;
    height: 100%;
    background: #f5eed5;
}

.swiper-slide {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* 必备 */
.ani {
    position: absolute;
}

/* 分页中的小点 */
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #f00;
    opacity: .4;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}


/*向上提示的箭头↑*/
.arrar {
    position: absolute;
    bottom: 10%;
    left: 50%;
    margin-left: -23px;
    z-index: 888;
    animation: upDownBtn 1.5s infinite;
    animation: upDownBtn 1.5s infinite;
    -webkit-animation: upDownBtn 1.5s infinite;
    animation: upDownBtn 1.5s infinite;
}

@-webkit-keyframes upDownBtn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(15px);
        transform: translateY(15px)
    }
    50% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

@keyframes upDownBtn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(15px);
        -ms-transform: translateY(15px);
        transform: translateY(15px)
    }
    50% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

/*loading载入样式*/
/*#loading{position: fixed;top:0;left:0; width:100%;height:100%;z-index: 999;background: url(../images/loading.gif) no-repeat center center #FFF;background-size: 10%;}
*/
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: url(../images/loading.gif) no-repeat center center #FFF;
    background-size: 50%;
    background-color: #FFFFFF;

}


.music {
    position: fixed;
    z-index: 99;
    top: 2%;
    right: 2%;
    width: 0.8rem;
}

.add {
    -webkit-animation: music 2s linear infinite;
}

.Musicpaused {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

@-webkit-keyframes music {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}

/* 第一页 */
.page1 {
    background: url(../images/bg/first.png) top center no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

.dingzhi {
    width: 40%;
    left: 30.3%;
    bottom: 14%;
}

.lqzshk {
    width: 56%;
    left: 22.5%;
    bottom: 9%;
}

/*无用*/
.page1_tit1 {
    width: 90%;
    left: 5%;
    top: 20%
}

.page1_tit2 {
    width: 80%;
    left: 10%;
    top: 56%;

}

.page1_bird {
    width: 30%;
    left: 30%;
    top: 45%
}

.page1_hs {
    width: 40%;
    left: 30%;
    top: 65%
}

/*无用*/

/* 第二页 */
.page2 {
    background: url(../images/bg/second.png) no-repeat top center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

.second_text {
    font-size: 0.35rem;
    line-height: 0.5rem;
    font-family: 'simhei';
    color: #490505;
    text-align: center;
}

.second_text_one {
    width: 100%;
    left: 0;
    top: 30%;
}

.second_text_two {
    width: 100%;
    left: 0;
    top: 38%;
}

.second_text_three {
    width: 100%;
    left: 0;
    top: 46.3%;
}

.second_text_four {
    width: 100%;
    left: 0;
    top: 54.3%;
}

.second_text_five {
    width: 100%;
    left: 0;
    top: 62.6%;
}

.second_text_six {
    width: 100%;
    left: 0;
    top: 70.9%;
    font-size: 0.35rem;
}

/*无用*/
.ptit {
    width: 55%;
    left: 0;
    top: 2%;
    z-index: 9999;
}

.p_main {
    width: 100%;
    left: 0;
    top: 0;

}

.p_t1 {
    width: 85%;
    left: 10%;
    bottom: 20%;

}

.p_t2 {
    width: 70%;
    right: 5%;
    bottom: 10%;

}

.p_t2_1 {
    width: 50%;
    right: 5%;
    bottom: 10%;

}

/*无用*/
/*第三页*/
.page3 {
    background: url(../images/bg/third.png) no-repeat top center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}
.font_type {
    width: 22.2%;
}
.font_type img {
    width: 100%;
    height: auto;
}
.font_type_one {
    top: 17%;
    left: 20%;
}
.font_type_two {
    top: 17%;
    right: 20%;
}
.font_type_three {
    top: 27%;
    left: 20%;
}
.font_type_four {
    top: 27%;
    right: 20%;
}


/*第3页中的笔触部分*/
.bichu-wrapper img,.shuxie-title img {
    width: 100%;
}
.bichu-wrapper {
    width: 100%;
    height: auto;
}
.bichu_bg {
    top: 35%;
    left: 21%;
    width: 59%;
}
.bichu_1 {
    top: 39%;
    left: 34%;
    width: 5%;
}
.bichu_2 {
    top: 38.5%;
    right: 31%;
    width: 4.6%;
}
/*第3页中的笔触部分*/
.shuxie-title {
    width: 52%;
    top: 48%;
    left: 23.6%;
}

/*第3页中的写字部分*/
.write_content-wrapper{
    margin: 0 auto;
    background-image: url(../images/write/mizige.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: 93%;
}
#graffiti{
    /*width: 15.1rem;*/
    /*height: 15.1rem;*/
}
.brush{
    margin: 0 auto;
    text-align: center;
}
#pen1,#pen2{
    width: 25px;
    height: 25px;
    cursor: pointer;
}
#pen1{
    margin-left: 100px;
}
.active{
    width: 35px;
    height: 35px;
    filter: opacity(0.6);
}
.clear{
    background-color: beige;
    padding: 0.5%;
    border-radius: 5px;
    width: 45px;
    margin: 0 auto;
    cursor: pointer;
}
/*第3页中的写字部分*/
.clearfix:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: ''
}

.clearfix {
    *zoom: 1
}
.buttons {
    margin-top: 3%;
    width: 60%;
    text-align: center;
    margin-left: 22%;
}
.buttons div {
    float: left;
    width: 32%;
    font-size: 0.35rem;
    color: #000;
    background: #fff3e3;
    padding: 0.2rem 0.2rem;
    border-radius: 0.35rem;
    font-weight: bold;
    font-family: simhei;

}
.buttons div:nth-of-type(1) {
    margin-right: 13%;
}
/*百字*/
.font_content {
    z-index: -1;
}
.font_content_xingshu {
    top: 57%;
    left: 30%;
    width: 40%;
}
.font_content_caoshu {
    top: 54%;
    left: 33.8%;
    width: 32%;
}
.font_content_lishu {
    top: 59%;
    left: 29%;
    width: 42%;
}
.font_content_shuzi {
    top: 60%;
    left: 28%;
    width: 45%;
}
.font_content img {
    width: 100%;
}
/*第4页*/
.page4 {
    background: url(../images/bg/fourth.png) no-repeat top center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

.shici {
    font-size: 0.35rem;
    line-height: 0.5rem;
    font-family: 'simhei';
    color: #534e4a;
    text-align: left;
    width: 80%;
    left: 17%;
}

.shici_one {
    top: 23%;
}
.shici_two {
    top: 28%;
}
.shici_three {
    top: 33%;
}
.shici_four {
    top: 38%;
}
.shici_five {
    top: 43%;
}
.shici_six {
    top: 48%;
}
.shici_seven {
    top: 53%;
}
.shici_eight {
    top: 58%;
}
.shici_nine {
    top: 66%;
}
.shici_nine input {
    background: none;
    border: none;
    outline: none;
    border-bottom: 1px solid #534e4a;
    padding-left: 5px;
    font-size: 0.3rem;
    line-height: 0;
    width: 56%;
    color: #646464;
}

.shici_ten {
    width: 54%;
    top: 77%;
    left: 25%;
}
.shici img {
    width: 100%;
    height: auto;
}

/*第5页*/
.page5 {
    background: url(../images/bg/fifth.png) no-repeat top center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}
.persional_card {
    top: 65.6%;
    width: 70%;
    left: 16%;
}
.persional_card img, .mizige img,.persional_card_code img{
    width: 100%;
    height: auto;
}
.mizige {
    top: 74.6%;
    width: 30%;
    left: 8%;
    background: url(../images/content/mizige.png) no-repeat top center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}
.name {
    font-size: 0.35rem;
    color: #fff;
    line-height: 0.4rem;
    top: 74.6%;
    left: 44%;
}
.persional_card_no_title {
    font-size: 0.25rem;
    color: #fff;
    line-height: 0.3rem;
    top: 80.6%;
    left: 44%;
}
.persional_card_no {
    font-size: 0.3rem;
    color: #fff;
    line-height: 0.3rem;
    top: 83.5%;
    left: 44%;
}
.persional_card_code {
    bottom: 7%;
    right: 3.5%;
    width: 16%;
}


/* 自定义动画效果的步骤:
   1:先确定元素用什么动画效果
   2:定义@keyframes 动画名称;
   3:开始定义动画的class类名; .class{animation-name:动画名称;}
   4:将class的名字加到,需要该动画效果的swiper-animate-effect;
   5:该元素需要有动画的时候,会自动把swiper-animate-effect的
   属性值作为一个类名加给该元素;
; */

/* .box{
	-webkit-animation: 名称  所用时间  过渡形式 延迟时间;
	-o-animation: 名称  所用时间  过渡形式 延迟时间;
	animation: 名称  所用时间  过渡形式 延迟时间;
} */
.abutton {
    width: 80%;
    -webkit-animation: abutton forwards;
    animation: abutton forwards;
}

.cloud1 {
    width: 60%;
    position: fixed;
    left: 20%;
    top: 40%;
}

.cloud2 {
    width: 30%;
    position: fixed;
    left: 50%;
    top: 10%;
}

@-webkit-keyframes abutton {
    from {
        left: 0%;
        opacity: 0;
    }
    to {
        left: -30%;
        opacity: 1;
    }
}

@keyframes abutton {
    from {
        left: 0%;
        opacity: 0;
    }
    to {
        left: -30%;
        opacity: 1;
    }
}

@keyframes a1 {
    0% {
        opacity: 0
    }
    50% {
        transform: translateY(100%);
        opacity: 1
    }
    50%, 60%, 70%, 80%, 90% {
        opacity: 0.5;
        left: 10px;
    }
    55%, 65%, 75%, 85%, 95% {
        opacity: 1;
        left: -10px;
    }
}


@media screen and (max-height: 480px) {
    .page1-light {
        width: 15%;
    }
}


.text_bg a {
    text-decoration: none;
    color: #000000;
}
/*ztf canvas 转图片 20210630*/
.imgtip{
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
z-index:20;
font-size: 14px;
color: #fff;
}<!--ecms sync check [sync_thread_id="3bcee7cc5a424330844ab778a62d31c1" sync_date="2021-06-30 11:28:23" check_sum="3bcee7cc5a424330844ab778a62d31c1]-->