html, body{
    width: 100%;
    height: 100%;
}
body{
    background: url(//game.gtimg.cn/images/yxzj/ingame/cp/a20190425recallig/bg.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
    position: relative;
    /* top: 0; */
    /* left: 0; */
    background-color: #264a7b;
}

.back-btn{
    width: 1.98rem;
    height: .6rem;
    position: fixed;
    left: 0;
    top: 0;
    background-position: 0 -1rem;
    z-index: 99;;
}
.logo{
    width: .82rem;
    height: .56rem;
    background-position: -6.3rem 0;
    position: absolute;
    right: 1rem;
    top: .2rem;
}
.rules-btn{
    display: block;
    width: 1.34rem;
    height: .45rem;
    position: absolute;
    right: .7rem;
    top: .85rem;
    background-position: -2.1rem -1rem;
    text-align: center;
    font-size: .18rem;
    color: #fff;
    line-height: .45rem;
    text-indent: -.15rem;
}

.top-title{
    width: 6.09rem;
    height: .87rem;
    margin: 0 auto;
    position: relative;
    top: .16rem;
    left: 0;
}
.top-tips{
    text-align: center;
    margin: 0 auto 0;
}
.top-tips p{
    display: inline-block;
    color: #7c9bc4;
    font-size: .2rem;
    line-height: .4rem;
    vertical-align: top;
    background: url(//game.gtimg.cn/images/yxzj/ingame/cp/a20190425recallig/t-bg.png) no-repeat;
    background-size: 100% 100%;
    padding: 0 .3rem;
    box-sizing: border-box;
}

.main{
    position: relative;
    width: 13.19rem;
    height: 5.33rem;
    background: url(//game.gtimg.cn/images/yxzj/ingame/cp/a20190425recallig/m-bg.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    top: 50%;
    margin-top: -3.4rem;
}
.main::before{
    content: "";
    display: block;
    width: 7.78rem;
    height: 5.8rem;
    background: url(//game.gtimg.cn/images/yxzj/ingame/cp/a20190425recallig/lb.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: -3.2rem;
    top: -1.3rem;
}
.main-tips{
    width: 2.88rem;
    height: .55rem;
    background-position: 0 -4.3rem;
    position: absolute;
    top: 3.5rem;
    left: 1rem;
}
.main-btns{
    position: absolute;
    left: .7rem;
    top: 4.3rem;
}
.main-btns a{
    display: block;
    float: left;
    width: 1.48rem;
    height: .68rem;
}
.share-btn{
    background-position: -2.5rem -2.7rem;
    position: relative;
    overflow: visible;
}
.share-btn::after{
    content:"通过此按钮分享才有效哦~";
    display: block;
    font-size: .16rem;
    color: #526786;
    width: 3rem;
    position: absolute;
    left: 50%;
    line-height: .2rem;
    bottom: -.2rem;
    text-indent: 0;
    margin-left: -1.5rem;
    text-align: center;
}
.publish-btn{
    background-position: -4.1rem -2.7rem;
    margin-left: .4rem;
}
.comment-wrap{
    width: 7.3rem;
    height: 4.85rem;
    float: right;
    /* background: #f00; */
    margin: 0.35rem 0.65rem 0 0;
    overflow: auto;
    /* -webkit-overflow-scrolling: touch; */
}
.comment-add-bar{
    display: none;
}

.d-dia{
    width: 8.92rem;
    height: 5.92rem;
    background: url(//game.gtimg.cn/images/yxzj/ingame/cp/a20190425recallig/dia-bg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.dia-close{
    display: block;
    width: .57rem;
    height: .57rem;
    background-position: -5.5rem -1rem;
    position: absolute;
    right: -.8rem;
    top: 0;
}
.dia-t-hdgz{
    display: block;
    width: 1.57rem;
    height: .54rem;
    background-position: -1.7rem -3.6rem;
    margin: .25rem auto 0;
    transform: translateX(-0.11rem);
}
.dia-t-fxcg{
    display: block;
    width: 1.71rem;
    height: .55rem;
    background-position: 0 -3.6rem;
    margin: .25rem auto 0;
    transform: translateX(-0.11rem);
}
.ok-btn{
    display: block;
    width: 1.75rem;
    height: .68rem;
    background-position: -5.6rem -2.7rem;
    margin: .3rem auto 0;
}

#dia-1 ol{
    width: 7rem;
    margin: .7rem auto 0;
    font-size: .23rem;
    color: #cedfff;
    line-height: .36rem;
}

#dia-2{
    text-align: center;
}
#dia-2 p{
    text-align: center;
    font-size: .25rem;
    color: #cedfff;
}
#dia-2 .p1{
    font-size: .25rem;
    margin-top: .5rem;
}
#dia-2 .p2{
    font-size: .26rem;
    color: #f3dca1;
    margin-top: .1rem;
}
#dia-2 .p3{
    font-size: .22rem;
    margin-top: .25rem;
}
#dia-2 .g-img{
    width: auto;
    height: 1rem;
    margin-top: .3rem
}
#dia-3{
    width: 7.92rem;
    height: 4.42rem;
    background: url(//game.gtimg.cn/images/yxzj/ingame/cp/a20190425recallig/dia-bg-2.png) no-repeat;
    background-size: 100% 100%;
}
#dia-3 p{
    width: 7rem;
    margin: .7rem auto 0;
    font-size: .3rem;
    color: #cedfff;
    line-height: .48rem;
    text-align: center;
}
#dia-3 .ok-btn{
    margin-top: .5rem;
}

.letter-dia{
    /* width: 100%; */
    /* height: 100%; */
    /* top: -74px !important; */
    width: 100vw;
    height: 100vh;
    top: 0!important;
    margin-top: -1.3rem!important;
}
.letter-swiper{
    width: 100%;
    height: 5.7rem;
}
.letter-dia .dia-close{
    left: 50%;
    margin-left: 5.6rem;
    top: 0.5rem;
    z-index: 10000;
}
.letter-wrap{
    width: 10.51rem;
    height: 5.4rem;
    background: url(//game.gtimg.cn/images/yxzj/ingame/cp/a20190425recallig/l-bg.png) no-repeat;
    background-size: contain;
    margin: .3rem auto 0;
    box-sizing: border-box;
    padding: 1.5rem .6rem;
    font-size: .3rem;
    color: #cedfff;
    line-height: 1.5;
}
.letter-wrap p{
    text-indent: 2em;
}
.letter-wrap p.letter-dear{
    text-indent: 0;
    margin-bottom: .1rem;
}
.letter-dear input{
    background-color: transparent;
    border-bottom: 1px solid #cedfff;
    color: #cedfff;
    border-radius: 0;
    max-width: 5rem;
    width: 1rem;
    min-width: 1rem;
    margin-left: .1rem;
    outline: none;
}
.letter-dear span{
    font-size: .23rem;
    color: #f3dca1;
}

.pre{
    font-size: .3rem;
}
.letter-share-btns{
    text-align: center;
    margin-top: .2rem;
}
.letter-share-btns a{
    display: inline-block;
    width: 2.46rem;
    height: .77rem;
    margin: 0 .06rem;
}
.s-btn-qq{
    background-position: -5rem -1.8rem;
}
.s-btn-qz{
    background-position: -2.5rem -1.8rem;
}
.s-btn-wx{
    background-position: 0 -1.8rem;
}
.s-btn-pyq{
    background-position: 0 -2.7rem;
}

.swiper-button-next, .swiper-button-prev{
    width: .51rem;
    height: .88rem;
    margin-top: -.44rem;
    background-image: url(//game.gtimg.cn/images/yxzj/ingame/cp/a20190425recallig/spr.png);
    background-size: 7.5rem 5.8rem;
    background-repeat: no-repeat;
}
.swiper-button-next{
    background-position: -6.9rem -.85rem;
    right: 50%;
    margin-right: -6.5rem
}
.swiper-button-prev{
    background-position: -6.2rem -.85rem;
    left: 50%;
    margin-left: -6.5rem;
}

/* 覆盖评论组件样式 */
.comment-main{
    font-size: .2rem
}
.comment-main--header-prompt{
    display: none;
}
.comment--highlight{
    color: #f3dca1;
}
.comment-main--title{
    font-size: .16rem;
    border:none;
}
.comment-item--user {
    display: flex;
    align-items: center;
}
.comment-item--name{
    font-size: .2rem;
    color: #7893b7;
}
.comment-item--time {
    font-size: .16rem;
    color: #526786;
    margin-left: .2rem;
}
.comment-item--content{
    font-size: .22rem;
    color: #98c4ff;
}
.comment-item--avatar{
    width: .5rem;
    height: .5rem;
    margin-right: .1rem;
}
.comment-item {
    padding: .1rem;
    background: linear-gradient(180deg,#2c4e89,#285591 100%,transparent 0) no-repeat top/100% .01rem;
}
.comment-item .comment-item {
    background: rgba(0,0,0,.1);
}
.comment-item--reply{
    margin-top: .1rem;
}
.comment-item--reply-item{
    font-size: .2rem;
}
.comment-main--tips{
    height: 1rem;
    color: #526786;
}
.comment-input{
    background-color: #152236;
}
.comment-input::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(//game.gtimg.cn/images/yxzj/ingame/cp/a20190425recallig/bg.jpg);
    opacity: .2;
}
.comment-input--header, .comment-input--reply{
    position: relative;
    z-index: 2;
}
.sl-reply-btn{
    position: absolute;
    right: 0;
    top: -1rem;
}
.comment-input--header{
    display: block;
    margin: .5rem;
    font-size: .22rem;
    line-height: 1;
    margin-left: .7rem;
}
.comment-input--header .comment--highlight{
    color: #c3e2ff;
}
.comment-input--header div:first-child{
    display: none;
}
.comment-reply{
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#162840), to(#193b5c));
    border: 1px solid #2b588a;
    border-radius: .1rem;
    margin: 0px 0.7rem 12px!important;
}
.comment-reply--textarea{
    color: #cedfff;
}
.sl-reply-submit{
    background-image: url(//game.gtimg.cn/images/yxzj/ingame/cp/a20190425recallig/spr.png);
    background-size: 7.5rem 5.8rem;
    background-repeat: no-repeat;
    width: 1.75rem;
    height: .68rem;
    background-position:-3.6rem -1rem;
    background-color: transparent;
    text-indent: -9999px;
    overflow: hidden;
}
[class|=comment-item--like-heart]{
    width: .27rem;
    height: .29rem;
    background: url(//game.gtimg.cn/images/yxzj/ingame/cp/a20190425recallig/spr.png) no-repeat -4.6rem -3.6rem/7.5rem 5.8rem;
}
.comment-item--like-heart-full{
    background-position:-4.2rem -3.6rem;
}
.comment-item--like{
    font-size: .18rem;
    color: #b4c4e4;
    line-height: .32rem;
}
.comment-item--operate-icon{
    width: .25rem;
    height: .23rem;
    background: url(//game.gtimg.cn/images/yxzj/ingame/cp/a20190425recallig/spr.png) no-repeat -5rem -3.6rem/7.5rem 5.8rem;
    margin-top: .08rem;
}
.comment-main--header{
    display: none;
}
.comment-total{
    text-align: right;
    font-size: .16rem;
    color: #fffceb;
    margin-top: .2rem;
    line-height: .2rem;
    text-shadow: 0 0 5px #ffffff;
    position: relative;
    z-index: 2;
    padding-right: .05rem;
}
.comment-main--header+.comment-main--title{
    height: .2rem;
    margin-top: -.2rem;
    margin-bottom: .2rem;
}
.comment-item--body{
     margin: 0 0 0 .6rem;
}
.comment-update-btn{
    display: inline-block;
    width: .34rem;
    height: .34rem;
    background-position: -5.4rem -3.6rem;
    vertical-align: top;
    margin-top: -.07rem;
}

.rotate:after{
    width: 7.5rem;
    text-align: center;
}