body,dl,dd,h1,h2,h3,h4,h5,h6,form,p{margin:0;}
h1,h2,h3,h4,h5,h6{font-weight: normal;font-size: 100%;}
ul,ol,input{margin: 0;padding: 0;list-style:none;}
img{border:0;}
article, aside, dialog, footer, header, section, footer, nav, figure, menu {display: block;}
i,em{font-style: normal;}
body{background-color: #401C1A;color: #000;font: 15px/1.5 \5FAE\8F6F\96C5\9ED1,\9ED1\4F53,Arial,sans-serif,Verdana,Tahoma,Helvetica;}
a{text-decoration: none;}
.btn-music::after,
.login-box a,
.login-dialog .btn-close,
.guanlian-dialog .btn-close,
.fenxiang-dialog .btn-close,
.fentip-dialog .btn-close,
.bind-dialog .btn-close,
.btn-home,
.buttons a::after,
.btn,
.role-dialog .btn-main,
.photo-dialog .btn-main,
.preview-dialog .btn-main,
.singlePhoto-dialog .btn-main,
.swiper-button-prev,
.swiper-button-next,
.save-tip,
.scene-li,
.effect-li
{
  background-image: url(../image/sprite1.png);
  background-repeat: no-repeat;
  background-size: 10rem 10.86rem;
}
html,body {
  height: 100%;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 0.2rem 0.3rem;
  background: transparent;
  z-index: 1000;
  gap: 0.3rem;
}

.btn-logout-header {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 0.28rem;
  cursor: pointer;
  background: transparent;
  flex-shrink: 0;
}

.btn-music{
  position: relative;
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  background: rgba(0,0,0,.5);
  border-radius: 50%;
  text-align: center;
  line-height: .8rem;
  flex-shrink: 0;
}

.btn-logout-header span:first-child {
  margin-right: 0.1rem;
  font-size: 0.32rem;
}

.btn-logout-header span:last-child {
  font-size: 0.28rem;
}
.btn-music::after{
  position: absolute;
  left: .18rem;
  top: .21rem;
  width: 0.45rem;
  height: 0.38rem;
  background-position: -5.94rem 0;
  content: '';
}
.btn-music.on::after{
  background-position: -5.47rem 0;
}
.login-box{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1001;
}
.login-box a{
  display: block;
  height: 1.03rem;
}
.login-box .btn-login{
  width: 2.45rem;
  margin-top: 0.04rem;
  background-position: 0 -.75rem;
}
.login-box .btn-logout{
  width: 3.24rem;
  height: .92rem;
  margin-top: 0.19rem;
  background-position: -2.56rem -.75rem;
}
.tel{
  position: absolute;
  left: 0.6rem;
  top: .39rem;
  z-index: 1007;
  width: 2.06rem;
  height: 0.58rem;
  color: #fff;
  font-size: .1rem;
  text-align: center;
  line-height: 0.58rem;
}
.btn-logout span{
  position: absolute;
  width: 0.6rem;
  height: 0.62rem;
  right: 0; 
  top: .38rem;
  z-index: 1002;
}

/* content */
.btn-home{
  position: fixed;
  left: 0;
  top: 5.87rem;
  z-index: 1001;
  width: 1.24rem;
  height: 1rem;
  background-position: -6.4rem  -6.47rem;
}
.content{
  padding-top: 3.3rem;
}
.content .photo-box{
  margin: 0 auto;
}
.photo-box{
  position: relative;
  width: 9rem;
  height: 10rem;
  overflow: hidden;
}
.preview-box .photo-box {
  height: 12rem;
}
.single-photo{
  height: 10rem;
  /*margin-left: 1.93rem;*/
  box-shadow: 0 0 0.25rem #fff;
}
.singlePhoto-dialog .inner{
  margin-top: -6rem;
}
.singlePhoto-dialog .inner .btn-main{
  left: 2.8rem;
}
.swiper-photos .photo-box img,
.swiper-photos .photo-box svg,
.single-photo img{
  width: 100%;
  max-width: 100%;
}

.single-photo-v {

}
.swiper-photos .swiper-slide,
.single-photo{
  background: url(../image/loading.gif) no-repeat center center;
  background-size: 1rem 1rem;
}
.photo-img{
  width: 9rem;
  height: 10rem;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.view-img {
  width: 4.8rem;
  height: 5.5rem;
}
.photo-img.scene1{
  background-image: url('https://h5-res.sjzt2020.com/见习/回忆录/20251124/giftPoster_main.png');
}
.effects{
  position: absolute;
  top: 0.29rem;
  left: 0;
  z-index: 100;
  width: 9rem;
  height: 10rem;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.effects.effect1{
  background-image: url(../image/effect_01.png);
}
.effects.effect2{
  background-image: url(../image/effect_02.png);
}
.effects.effect3{
  background-image: url(../image/effect_03.png);
}
.effects.effect4{
  background-image: url(../image/effect_04.png);
}
.characters{
  position: absolute;
  top: 0.29rem;
  left: 0;
  z-index: 105;
  width: 9rem;
  height: 10rem;
}
.content .characters{
  overflow: hidden;
}
.character,
.character img{
  position: absolute;
  top: 0.1rem;
}
.character {
  width: 2.5rem;
  height: 2.5rem;
}
.character .outer{
  position: relative;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  background: url(../image/tab2.png) no-repeat;
  background-size: 100% 100%;
}

.character2 .outer{
  position: relative;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  background: url(../image/tab4.png) no-repeat;
  background-size: 100% 100%;
}

.character2{
  top: 6.5rem;
  left: 1.5rem;
}

.single-img .character1,
.big-img-list .character1,
.content .character1,
.preview-box .character1,
.swiper-photos .character1{
  top: 6.5rem;
  right: 1.5rem;
}
.preview-dialog.single .character1{
  top: 4rem;
  right: 2.4rem;
}
.big-img-list .character2,
.swiper-photos {
  top: 2.5rem;
  left: 1.5rem;
}
.content .character1::after,
.preview-dialog .character1::after,
.big-img-list .character1::after,
.single-img .character1::after{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 4.37rem;
  height: 3.84rem;
  margin-left: -2.4rem;
  margin-top: -2.2rem;
}
.big-img-list .character1::after,
.single-img .character1::after{
  width: 5.5rem;
  height: 4.84rem;
  margin-left: -2.75rem;
  margin-top: -2.42rem;
}
.unactive{
  opacity: 0.5;
}
.content .character2::after,
.invite-character::after,
.big-img-list .character2::after{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 4.38rem;
  height: 3.31rem;
  margin-left: -2.2rem;
  margin-top: -2rem;
  background: url(../image/character_light2.png) no-repeat;
  background-size: 100% 100%;
  content: '';
}
.big-img-list .character2::after{
  width: 6rem;
  height: 5rem;
  margin-left: -3rem;
  margin-top: -3rem;
}
.preview-dialog .invite-character{
  position: absolute;
  top: 2rem;
  left: 1rem;
  width: 1.75rem;
  height: 1.55rem;
}
.invite-character img{
  position: relative;
  z-index: 2;
  width: 100%;
}
.character .faceMask{
  z-index: 14;
}
.character .hat{
  z-index: 13;
}
.character .hairTop{
  z-index: 12;
}
.character .eye{
  z-index: 11;
}
.character .headSkin{
  z-index: 10;
}
.character .clothes{
  z-index: 9;
}
.character .bodySkin{
  z-index: 8;
}
.character .hairBottom{
  z-index: 7;
}
.character .decoration{
  z-index: 6;
}
.character .hanging{
  z-index: 5;
}
.character .name{
  position: absolute;
  top: 1.7rem;
  left: 50%;
  z-index: 10;
  width: 4rem;
  margin-left: -2rem;
  color: #fff;
  font-size: .32rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 .05rem #000,  0 0 .05rem #000,  0 0 .05rem #000,  0 0 .05rem #000,  0 0 .05rem #000;
}

.qr-code{
  width: 0.98rem;
  height: 0.98rem;
  margin-top: 0.09rem;
  margin-left: 5.52rem;
  border: .01rem solid #b9aca2;
  background-color: #3e374b;
}
.qr-code img{
  width: 100%;
}
.buttons{
  position: relative;
  height: 2.46rem;
}
.buttons a{
  position: absolute;
}
.buttons a p{
  color: #fff;
  font-size: .28rem;
  font-weight: bold;
  margin-top: 0.2rem;
}
.btn-single{
  left: 1.2rem;
  top: 0.51rem;
  width: 5.9rem;
  height: 1rem;
  line-height: 1rem;
  color: #A6685D;
  font-size: .1rem;
  text-align: left;
  background-image: url("../image/btn_gb1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-focus: none;
  -moz-user-select: none;
}

.view-txt {
  display: inline-block;
  width: 6.9rem;
  height: 1rem;
  line-height: 1rem;
  color: #A6685D;
  font-size: .28rem;
  text-align: left;
  background-image: url("../image/btn_gb1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.btn-single p{
  margin-left: 1.95rem;
  margin-top: 1rem;

}
.btn-together{
  left: 6.9rem;
  top: 0.53rem;
  width: 2.7rem;
  height: 1rem;
  background-image: url("../image/fx.png");
  background-size: 100% 100%;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

.btn-together-txt {
  color: #fff;
  font-size: .28rem;
  text-align: center;
  line-height: 0.9rem;
  padding-left: 0.3rem;
  font-weight: bold;
}

.btn-together-fx1 {
  height: 0.5rem;
  position: absolute;
  top: 20%;
  right: 0.2rem;
}
.btn-together p{
  text-align: center;
}
.btn-together p img{
  width: 0.5rem;
  margin-right: 0.1rem;
  vertical-align: middle;
}
.btn-view{
  left: 3.48rem;
  top: 2.1rem;
  width: 3.78rem;
  height: 1.58rem;
  background-position: 0 -7.1rem;
}
.btn-view.active{
  background-position: 0 -5.46rem;
}

.rules{
  width: 9rem;
  margin: 0 auto;
  padding: 0 .28rem .28rem;
  color: #d5d5d5;
  font-size: .28rem;
  font-weight: bold;
  line-height: .54rem;
}
.single-dialog .rules {
  font-size: .2rem;
}
.rules h3{
  font-weight: bold;
  font-size: .32rem;
}

/* dialog */
.dialog-box{
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1009;
  background: rgba(0,0,0,.5);
}
.dialog-box .inner{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1010;
  width: 100%;
  margin-left: -5.4rem;
  font-size: .3rem;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
}
.fentip-dialog .inner,
.fenxiang-dialog .inner,
.guanlian-dialog .inner,
.login-dialog .inner,
.bind-dialog .inner{
  left: 50%;
  width: 5.74rem;
  margin-left: -2.87rem;
}
.guanlian-dialog .inner,
.login-dialog .inner,
.fenxiang-dialog .inner,
.fentip-dialog .inner {
  height: 9.84rem;
  margin-top: -3.92rem;
  background-image: url(../image/popup_bg_01.png);
}
.dialog-box .btn-close{
  position: absolute;
  z-index: 1001;
  top: 1.4rem;
  right: 2.04rem;
  width: 0.58rem;
  height: 0.6rem;
}
.confirm-dialog .btn-close{
  right: 1.45rem;
}
.guanlian-dialog .btn-close,
.login-dialog .btn-close,
.fentip-dialog .btn-close,
.fenxiang-dialog .btn-close,
.bind-dialog .btn-close{
  right: 0rem;
  top: 0.2rem;
  width: 0.6rem;
  height: 0.6rem;
  background-image:url("../image/clone.png");
  background-repeat: no-repeat;
  background-size: 100%;
}
.dialog-box .hd{
  height: 2.96rem;
  text-indent: -9999rem;
}
.dialog-box .bd{
  position: relative;
  width: 8.06rem;
  margin-left: 1.38rem;
  margin-top: .95rem;
}
.guanlian-dialog .bd,
.login-dialog .bd,
.fentip-dialog .bd,
.fenxiang-dialog .bd,
.bind-dialog .bd{
  width: 4.8rem;
  margin-left: .46rem;
  margin-top: 0;
}
.dialog-box .tips{
  position: absolute;
  bottom: .7rem;
  z-index: 1;
  width: 100%;
  color: #f00;
  text-align: center;
}
.fentip-dialog .input-box,
.fenxiang-dialog .input-box,
.guanlian-dialog .input-box,
.login-dialog .input-box,
.bind-dialog .input-box,
.bind-dialog .select-box{
  position: relative;
  width: 4.8rem;
}
.fentip-dialog .input-txt,
.fenxiang-dialog .input-txt,
.guanlian-dialog .input-txt,
.login-dialog .input-txt,
.bind-dialog .input-txt{
  width: 4.8rem;
  height: .68rem;
  margin-bottom: .5rem;
  padding: .1rem .15rem;
  border: .01rem solid #D9B997;
  border-radius: .04rem;
  background: #fff;
  box-sizing: border-box;
  outline: none;
  color: #000;
  font-size: .3rem;
  line-height: 0.48rem;
}
input::-webkit-input-placeholder{
  color:#8d8d8d;
}
input::-moz-placeholder{
  color:#8d8d8d;
}
input:-moz-placeholder{
  color:#8d8d8d;
}
input:-ms-input-placeholder{
  color:#8d8d8d;
}
.dialog-box .btn{
  display: block;
  width: 4.8rem;
  height: 0.7rem;
  background-color: #775036;
  background: linear-gradient(180deg, #D46D04, #D46D04);
  border-radius: .08rem;
  box-sizing: border-box;
  border: none;
  outline: none;
  line-height: .7rem;
  text-align: center;
  color: #fff;
  font-size: .3rem;
  font-weight: bold;
}
.bind-dialog .btn,
.fentip-dialog .btn,
.fenxiang-dialog .btn,
.guanlian-dialog .btn,
.login-dialog .btn{
  margin-top: .7rem;
}

/* login */
.fentip-dialog .btn-input,
.guanlian-dialog .btn-input,
.fenxiang-dialog .btn-input,
.login-dialog .btn-input,
.login-dialog .btn-input2{
  position: absolute;
  right: .2rem;
  top: 1.3rem;
  color: #000;
  text-decoration: underline;
}
.guanlian-dialog .btn-input2,
.fentip-dialog .btn-input2,
.login-dialog .btn-input2,
.fenxiang-dialog .btn-input2{
  margin-left: .4rem;
  text-decoration: none;
}

/* bind-dialog */
.bind-dialog .inner{
  height: 10.42rem;
  margin-top: -5.21rem;
  background-image: url(../image/popup_bg_021.png);
}
.bind-dialog .i-drop{
  position: absolute;
  top: 0.27rem;
  right: 0.38rem;
  z-index: 1;
  border-width: 0 .1rem .14rem .1rem;
  border-color: transparent transparent #6a4224  transparent;
  border-style: dashed dashed solid dashed;
}
.bind-dialog .select-list{
  position: absolute;
  top: .68rem;
  left: 0;
  z-index: 10;
  width: 4.74rem;
  height: 4.5rem;
  padding-top: .2rem;
  border: .01rem solid #000;
  border-top: .01rem solid #8d8d8d;
  border-bottom-left-radius: .04rem;
  border-bottom-right-radius: .04rem;
  background-color: #fff;
  overflow: scroll;
}
.bind-dialog .select-list li{
  height: 0.7rem;
  padding-left: .2rem;
  box-sizing: border-box;
  font-size: .3rem;
  line-height: .7rem;
}

/* choose role */
.role-dialog .btn-main,
.photo-dialog .btn-main,
.preview-dialog .btn-main,
.singlePhoto-dialog .btn-main{
  background-position: -3.96rem -7.55rem;
}
.role-dialog .inner{
  height: 7.49rem;
  margin-top: -3.75rem;
  background-image: url(../image/popup_bg_choose_role.png);
}
.role-dialog .bd{
  height: 6.12rem;
  margin-top: .75rem;
  font-weight: bold;
}
.role-dialog .select-list{
  position: absolute;
  top: .68rem;
  left: 0;
  z-index: 10;
  width: 4.74rem;
  height: 4.5rem;
  padding-top: .2rem;
  border: .01rem solid #000;
  border-top: .01rem solid #8d8d8d;
  border-bottom-left-radius: .04rem;
  border-bottom-right-radius: .04rem;
  background-color: #fff;
  overflow: scroll;
}
.role-dialog .select-list li{
  height: 0.7rem;
  padding-left: .2rem;
  box-sizing: border-box;
  font-size: .3rem;
  line-height: .7rem;
}
.dialog-box .btn-main{
  position: absolute;
  z-index: 1001;
  width: 3rem;
  height: 1.04rem;
  bottom: -1.5rem;
  left: 2.54rem;
  text-indent: -999rem;
}
.role-dialog .select-box{
  position: relative;
  z-index: 4000;
  width: 4.82rem;
  height: 0.72rem;
  margin-left: 1.5rem;
  padding-top: 2.38rem;
}
.input-character{
  border: none;
  outline: 0;
  background-color: transparent;
  box-sizing: border-box;
  color: #ffe0b4;
  font-size: .3rem;
  text-align: center;
  line-height: .72rem;
  font-weight: bold;
}
.role-dialog input::-webkit-input-placeholder{
  color:#ffe0b4;
}
.role-dialog input::-moz-placeholder{
  color:#ffe0b4;
}
.role-dialog input:-moz-placeholder{
  color:#ffe0b4;
}
.role-dialog input:-ms-input-placeholder{
  color:#ffe0b4;
}
.role-dialog .select-list{
  position: absolute;
  top: 3.05rem;
  left: 0;
  z-index: 1004;
  width: 4.82rem;
  height: 4rem;
  padding-top: .05rem;
  border: .01rem solid #f9db7b;
  border-radius: .2rem;
  background-color: #7d390c;
  overflow: scroll;
}
.role-dialog .select-list li{
  height: 0.8rem;
  padding-left: .5rem;
  box-sizing: border-box;
  color: #ffe0b4;
  font-size: .3rem;
  line-height: .8rem;
}
.role-tips{
  position: relative;
  z-index: 3;
  color: #7d390c;
  font-size: .24rem;
  text-align: center;
}
.view-role{
  margin-top: -.2rem;
}
.character3{
  z-index: 1;
  top: 4.2rem;
  left: 50%;
  margin-left: -.7rem;
  transform: scale(.8);
}
.character3 .role1{
  width: 1.1rem;
  height: .97rem;
  margin-top: .2rem;
}
.role-dialog .input-box{
  position: relative;
}
.role-dialog .input-txt{
  width: 100%;
  height: 0.68rem;
  background-color: #7d390c;
  border-radius: .15rem;
  border: 0.02rem solid #f6cf58;
  line-height: 0.68rem;
}
.role-dialog .i-drop{
  position: absolute;
  top: 0.22rem;
  right: 0.31rem;
  z-index: 1;
  border-width: .27rem .16rem 0 .15rem;
  border-color: #ffb852 transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}


/* alert */
.alert-dialog .inner{
  height: 5.45rem;
  margin-top: -2.75rem;
  background-image: url(../image/popup_bg_03.png);
}
.alert-dialog .message{
  display: table-cell;
  width: 8.05rem;
  height: 3.8rem;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
  vertical-align: middle;
  text-align: center;
}
.alert-dialog .message span{
  display: inline-block;
  line-height: .62rem;
  color: #5d2714;
  font-size: .36rem;
  font-weight: bold;
  text-align: center;
}

/* 复制链接 */
.copy-dialog .inner{
  height: 9.47rem;
  margin-top: -4.73rem;
  background-image: url(../image/popup_bg_copylink.png);
}
.copy-dialog .bd{
  height: 3.88rem;
  margin-top: 4.02rem;
  padding-left: .72rem;
}
.copy-box{
  display: table-cell;
  width: 6.54rem;
  height: 3.07rem;
  padding-left: .1rem;
  padding-right: .1rem;
  box-sizing: border-box;
  vertical-align: middle;
  color: #fff;
  font-size: .3rem;
  line-height: .5rem;
  text-align: center;
  word-break: break-all;
}

/* 确定合影 */
.confirm-dialog .inner{
  height: 8.25rem;
  margin-top: -4.12rem;
  background-image: url(../image/popup_bg_confirm.png);
}
.confirm-dialog .bd{
  width: 9.14rem;
  height: 5.7rem;
  margin-left: .83rem;
  margin-top: .78rem;
}
.confirm-txt{
  position: relative;
  z-index: 10;
  padding-top: 1.5rem;
  color: #5d2714;
  font-size: .32rem;
  font-weight: bold;
  text-align: center;
}
.confim-button{
  position: absolute;
  left: 0;
  width: 100%;
  bottom: -1.6rem;
  text-align: center;
}
.confim-button a{
  display: inline-block;
  width: 3rem;
  height: 1.04rem;
  margin-left: .25rem;
  margin-right: .25rem;
  text-indent: -999rem;
}
.confirm-box{
  position: relative;
  z-index: 8;
  width: 100%;
}
.confirm-box .character{
  position: absolute;
  top: .7rem;
  transform: scale(.8);
}
.confirm-box .character1{
  right: 1.7rem;
}
.confirm-box .character2{
  left: 1.7rem;
}

/* 生成照片 */
.large-dialog{
  display: flex;
  justify-content: center;
  align-items: center;
}
.photo-dialog .inner{
  left: 0;
  margin-top: -5.5rem;
  margin-left: 0;
}
.swiper-photos{
  width: 100%;
  overflow: unset;
}
.big-img-list .photo-box,
.single-img .photo-box{
  height: 9.97rem;
  background: url(../image/photo_bg_20251124.png) no-repeat;
  background-size: auto 100%;
}
.swiper-photos .photo-box{
  display: flex;
  justify-content: center;
  box-shadow: 0 0 0.25rem #fff;
  text-align: center;
}

.swiper-photos .swiper-slide{
  display: flex;
  justify-content: center;
}
.swiper-photos .qr-code{
  width: 1.14rem;
  height: 1.14rem;
  margin-left: 5.36rem;
}
.swiper-button-prev,
.swiper-button-next{
  position: absolute;
  /* top: 7.5rem; */
  top: 5rem;
  width: 0.88rem;
  height: 1.06rem;
}
.swiper-button-prev{
  left: 0.52rem;
  background-position: -5.94rem -.6rem;
}
.swiper-button-next{
  right: 0.52rem;
  background-position: -6.96rem -.6rem;
}
.photo-dialog .btn-main{
  left: 3.9rem;
  bottom: -2rem;
}
.save-tip{
  position: absolute;
  right: 0rem;
  bottom: -.85rem;
  width: 2.02rem;
  height: 0.62rem;
  background-position: -4.26rem -6.47rem;
}

/* 预览照片 */
.preview-dialog .inner,.singlePhoto-dialog .inner{
  width: 9rem;
  height: 16.22rem;
  margin-left: -4.5rem;
  margin-top: -9rem;
}
.preview-dialog .btn-close{
  top: 0.86rem;
  right: 0.81rem;
}
.preview-box,.single-photo{
  width: 9rem;
  height: 16.22rem;
  /*background-image: url(../image/popup_bg_view.png);*/
  background-image: url(../image/loading.gif);
  background-repeat: no-repeat;
  /*background-size: 100% 100%;*/
  overflow: hidden;
}
.preview-dialog .btn-main{
  bottom: -1.42rem;
}
.preview-dialog .photo-box{
  margin-top: 3.67rem;
  margin-left: 1rem;
}
.preview-dialog .swiper-button-prev,
.preview-dialog .swiper-button-next{
  top: 5.2rem;
}
.preview-dialog .swiper-button-prev{
  left: -0.95rem;
}
.preview-dialog .swiper-button-next{
  right: -0.95rem;
}
.tabs{
  position: absolute;
  top: -1.75rem;
  z-index: -1;
}
.tabs li{
  float: left;
  width: 3.72rem;
  height: 2.02rem;
  margin-top: .3rem;
}
.tabs .active{
  margin-top: 0;
}
.scene-li.active{
  width: 3.65rem;
  height: 2.42rem;
  background-position: -4.22rem -1.66rem;
}
.effect-li.active{
  width: 3.72rem;
  height: 2.3rem;
  background-position: -4.22rem -4.09rem;
}
.scene-li{
  margin-left: .3rem;
  margin-right: .33rem;
  background-position: -3.96rem -8.7rem;
}
.effect-li{
  background-position: 0 -8.7rem;
}
.photo-name{
  padding-top: .25rem;
  color: #4d3326;
  font-size: .41rem;
  font-weight: bold;
  text-align: center;
}
/* bg */
.index-main{
  background: url('https://h5-res.sjzt2020.com/见习/回忆录/20251124/yearH5_bigBar.png') no-repeat center top;
  background-size: auto 100% ;
  overflow: hidden;
}


/* 大图 */
.single-img,
.single-img .photo-box,
.big-img-list,
.big-img-list .photo-box{
  width: 10.80rem;
  height: 15.6rem;
}
.single-img .photo-img,
.big-img-list .photo-img{
  width: 9.64rem;
  height: 12.91rem;
  margin-top: .45rem;
}
.single-img .effects,
.big-img-list .characters,
.single-img .effects,
.big-img-list .characters {
  top: .45rem;
  width: 9.64rem;
  height: 10.91rem;
  margin-left: -4.82rem;
}
.single-img .character,
.big-img-list .character {
  width: 2.5rem;
  height: 2.5rem;
}
.big-img-list .character1 {
  top: 9.50rem;
  right: 2.20rem;
}
.single-img .character1 {
  top: 8.50rem;
  right: .5rem;
}
.big-img-list .character2{
  top: 5rem;
  left: 2.50rem;
}
.single-img .character .outer,
.big-img-list .character .outer {
  width: 2.5rem;
  height: 2.5rem;
}
.single-img .character .name,
.big-img-list .character .name {
  top: 2.6rem;
  width: 6.00rem;
  margin-left: -3.00rem;
  font-size: .4rem;
  text-shadow: 0 0 .08rem #000, 0 0 .08rem #000, 0 0 .08rem #000, 0 0 .08rem #000, 0 0 .08rem #000;
}

.single-img .photo-img,
.big-img-list .photo-img{
  z-index: 100;
}
.single-img .characters,
.big-img-list .characters{
  z-index: 110;
}
.single-img .effects,
.big-img-list .effects{
  z-index: 120;
}


/* 角色绑定确认弹窗 */
.login-txt-tip{
  font-size: .3rem;
  line-height: 0.5rem;
  padding: 0 .3rem;
  color: #7D715B;
}
.sureBind-dialog .inner{
  width: 5.88rem;
  height: 5.37rem;
  margin-left: -2.94rem;
  margin-top: -2.68rem;
}
.sureBind-dialog .btn-close{
  top: -.15rem;
}
.sureBind-dialog .btn-box{
  display: flex;
  justify-content: space-between;
  width: 4.8rem;
  margin: 4.23rem auto 0;
}
.sureBind-dialog .btn-box a{
  display: block;
  width: 2.2rem;
  height: 0.75rem;
  text-indent: -9999rem;
}
.sureBind-dialog .btn-check{
  display: inline-block;
  width: .28rem;
  height: .28rem;
  border-radius: 50%;
  border: 0.02rem solid #cb3155;
  vertical-align: -.05rem;
}
.sureBind-dialog .inner{
  background-image: url(../image/check_rolename.png);
}
.sureBind-dialog .checked .btn-check{
  background-image: url(../image/i_check.png);
  background-size: 100% 100%;
}
.sureBind-dialog .btn-box{
  margin-top: 0.33rem;
}
.fentip-dialog .tips,
.login-dialog .tips,
.fenxiang-dialog .tips{
  bottom: -.5rem;
}
.sure-bind-role{
  padding: 1.6rem .4rem 0;
  height: 1.6rem;
}
.sure-bind-role span{
  color: #f00;
}
.sureBind-dialog .sure-check{
  height: .5rem;
  padding-top: .1rem;
  margin-left: .7rem;
}

.bd_tab_top {
  position: absolute;
  bottom: 0.7rem;
  left: 1.7rem;
}
.bd_tab_but {
  color: #000;
}

.bd_tab_top .but_active {
  color: #82755F;
  text-decoration: underline;
}


.character_img img{
  width: 1.2rem;
  position: absolute;
  display: block;
  right: 1rem;
  top: 0.7rem;
}

.dialog-top-txt {
  position: absolute;
  font-size: 0.5rem;
  top: 0.8rem;
  left: 1.1rem;
}

.dialog-fx-top-txt {
  position: absolute;
  font-size: 0.5rem;
  top: 0.6rem;
  left: 1.1rem;
}

.dialog-top-txt img,.dialog-fx-top-txt img {
  width: 3.5rem;
}
.dialog-fx-tip-txt img {
  width: 2rem;
}
.dialog-fx-tip-txt{
  position: absolute;
  font-size: 0.5rem;
  top: 0.7rem;
  left: 1.8rem;
}
.bd .input-username,
.bd .input-pwd,
.bd .input-phone,
.bd .input-code {
  background-color: #FBEBDB;
}

.character_icon {
  background: url(../image/tab3.png) no-repeat;
}

.character_icon,.character1_icon2 {
  z-index: 3;
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  top: 0.35rem;
  right: 0.55rem;
  background-size: 100% 100%;
}

.character1_icon2 img {
  width: 100%;
}
.character_txt {
  z-index: 3;
  position: absolute;
  bottom: 0.3rem;
  font-size: .28rem;
  left: 0.3rem;
  color: #fff;
  width: 1.9rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
.btn-single-txt {
  padding-left: 0.2rem;
  width: 1.8rem;
  display: inline-block;
  font-size: .35rem;
  text-align: right;
}

.btn-single-txt2 {
  color: #fff;
  font-weight: bold;
  display: inline-block;
  width: 60%;
  text-align: center;
  font-size: .35rem;
}

.view-txt-box .btn-single-txt2 {
  width: 65%;
}
.character_tip {
  z-index: 3;
  position: absolute;
  width: 1.2rem;
  height: 0.5rem;
  top: -0.1rem;
  left: -0.4rem;
  background: url(../image/tab5.png) no-repeat;
  background-size: 100% 100%;
  transform: scale(0.5);
  transform: rotate(330deg);
}

.character_icon2 {
  z-index: 3;
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  top: 0.35rem;
  right: 0.55rem;
  background-size: 100% 100%;
}
.character_icon2 img {
  position: absolute;
}

.character_icon3 {
  z-index: 3;
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  top: 0.45rem;
  right: 0.65rem;
  background: url(../image/img1.png) no-repeat;
  background-size: 100% 100%;
}

.character_logo img{
  width: 3.8rem;
  position: absolute;
  display: block;
  top: 47%;
  left: 28%;
}
.fenxiang-dialog-bd .input-txt img {
  height: 100%;
}
.fenxiang-dialog-bd .input-txt a {
  display: flex;
  width: 100%;
  height: 100%;
}
.fenxiang-dialog-bd .input-txt {
  width: 4.8rem;
  height: 1.1rem;
  margin-bottom: 0.2rem;
  padding: 0.1rem 0.15rem;
  border: 0.01rem solid #D9B997;
  border-radius: 0.2rem;
  background: #FFE8D0;
  box-sizing: border-box;
  outline: none;
  color: #000;
  font-size: .3rem;
  line-height: 0.48rem;
}

.fenxiang-link-txt {
  margin-left: 0.1rem;
  color: #AA8067;
}

.fenxiang-bottom-txt1,.fenxiang-bottom-txt2,.fenxiang-bottom-txt3 {
  color: #7E5E4B;
  text-align: center;
  font-size: .28rem;
  margin-top: 0.15rem;
}
.fenxiang-bottom-txt1 img,.fenxiang-bottom-txt2 img {
  width: 0.5rem;
  vertical-align: middle;
}
.tip-center {
  text-align: center;
  color: #6E4D3B;
}

.fentip-dialog .inner,.bind-dialog .inner {
  background-image: url(../image/tip-bg.png);
}

.gl-top {
  width: 2.2rem;
  height: 2.4rem;
  margin: 0 auto;
}
.gl-top img {
  width: 100%;
  height: 100%;
}

.guanlian-dialog .hd {
  height: 2.6rem;
}

.gl-img{
  z-index: 3;
  position: absolute;
  width: 1.3rem;
  height: 1.3rem;
  top: 0.35rem;
  right: 1.7rem;
  background-size: 100% 100%;
}

.gl-img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0rem;
}

.gl-box {
  position: relative;
}

.gl-txt-box {
  position: absolute;
  width: 1.6rem;
  bottom: 0.25rem;
  left: 1.6rem;
  text-align: center;
  font-size: .28rem;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gl-yqm {
  margin-top: 0.5rem;
}

.dialog-box .gl-tips {
  bottom: -1rem;
}

.ui-buttons {
  text-align: center;
}

.ui-but {
  display: inline-block;
  left: 6rem;
  top: 0.53rem;
  width: 2.8rem;
  height: 1rem;
  background-image: url(../image/fx.png);
  background-size: 100% 100%;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

.view-character {
  top: 6.1rem;
  left: 4rem;
}
.view-character .outer {
  width: 1.3rem;
  height: 1.5rem;
}

.view-character .character_icon2 {
  z-index: 3;
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  top: 0.3rem;
  right: 0.5rem;
  background-size: 100% 100%;
}
.view-character .character_txt {
  bottom: 0.05rem;
  left: -0.4rem;
  font-size: .28rem;
}

.preview-box .character_logo img{
  width: 3.8rem;
  left: 37%;
  top: 43%;
}
.view-txt-box {
  text-align: center;
}

.preview-box .character_img img{
  width: 0.6rem;
  position: absolute;
  display: block;
  right: 1.25rem;
  top: 0.55rem;
}

.single-img .photo-box {
padding-top: 3.3rem;
}

.single-img .photo-img{
  width: 9rem;
  height: 10rem;
  margin: 0.29rem auto 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.single-img .characters{
  top: 6.7rem;
}

.single-img .character2_txt,.view-character .show_character2_txt{
  z-index: 3;
  position: absolute;
  bottom: 0.3rem;
  font-size: .28rem;
  left: 0.4rem;
  color: #fff;
  width: 1.8rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  display: block;
}

.single-img .character_img img {
  width: 1.2rem;
  position: absolute;
  display: block;
  right: 0.1rem;
  top: 0.45rem;
}

.single-img {
  height: 100%;
}

.single-img .character_logo img{
  top: 45%;
}

.single-photo img {
  height: 100%;
}
.ui-buttons .btn-together-txt {
  padding-left: 0;
}

.character1,.character2 {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-focus: none;
  -moz-user-select: none;
}

.single-img .preview-box {
  height: 100%;
}

.top_img_box {
  position: relative;
  width: 9rem;
  overflow: hidden;
  margin: 0 auto;
}
.img_box_ico1 img {
  width: 100%;
}

.character1_icon2  {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.bind-dialog .bind-clone {
  background: #D46D04;
  color: #fff;
}

.copy_tip {
  color: #af6f68;
  text-align: center;
  font-size: .28rem;
  position: absolute;
  top: 1.6rem;
  left: 36%;
}

.view-btn-box {
  text-align: center;
}
.view-btn-box .btn-together-txt {
    padding-left: 0;
}

.self_img_box .self_img,.bind_img_box .bind_head_img{
  top: -0.1rem;
  width: 100%;
}

.single-photo-v img {
  vertical-align: text-top;
}

/* 退出登录弹窗样式 */
.logout-dialog {
  background: rgba(0, 0, 0, 0.5);
}

.logout-dialog .inner {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: auto;
  margin: 0;
  width: 100%;
  background: #fff;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0;
  transform: translateY(0);
  max-width: 100%;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.logout-dialog .bd {
  padding: 0;
}

.btn-logout-confirm,
.btn-cancel-logout {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background: transparent;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  position: relative;
}

.btn-logout-confirm {
  color: #ff3b30;
  font-size: 0.4rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 0.5rem 0;
  padding-bottom: 0.45rem;
}

.btn-logout-confirm::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.5px;
  background: #e5e5e5;
  transform: scaleY(1);
}

.btn-cancel-logout {
  color: #666;
  font-size: 0.36rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.45rem 0;
  padding-top: 0.5rem;
}