book_admin/public/assets/css/frontend/ad/image.css

.ad_image_warp{
    margin: 0 .15rem;
}
.ad-image-small{
    position: fixed;
    top: .45rem;
    left: 0;
    width: 100%;
    /*height: .6rem;*/
    z-index: 10000;
}
.ad-image{
    overflow: hidden;
}
.ad-image-primary{
    margin: .12rem 0;
    position: relative;
    overflow: initial;
    /*height: .9rem;*/
}
.ad-image-large{
    margin: .12rem 0;
    position: relative;
    overflow: initial;
    /*height: 1.24rem;*/
}
.ad-image-small img,.ad-image-primary img,.ad-image-large img{
    width: 100%;
    border-radius: 0;
    /*height: 100%;*/
}
img.ad-image-tip, .i_slide_box img.ad-image-tip{
    display: block;
    position: absolute;
    width: 10%;
    height: auto;
    top: 0;
    right: 0;
}

.ad-recharge-alert{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: rgba(0,0,0,.8);
}
.ad-recharge-alert-contain{
    width: 70%;
    margin: 1.15rem auto;
    position: relative;
}
.close{
    position: absolute;
    width: 0.22rem;
    height: 0.22rem;
    background:url('../../../img/close.png') no-repeat center center;
    background-size: 100% 100%;
    right: 0;
    top: -0.3rem;
}
.ad-read-alert{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10001;
    background-color: rgba(0,0,0,.8);
}
.ad-read-alert-contain{
    width: 70%;
    margin: 80px auto;
    position: relative;
    background:rgba(255,255,255,1);
    border-radius:.06rem;
    padding: 15px;
    box-sizing: border-box;
}
.close{
    position: absolute;
    width: 0.22rem;
    height: 0.22rem;
    background:url('../../../img/close.png') no-repeat center center;
    background-size: 100% 100%;
    right: 0;
    top: -0.3rem;
}
.ad-read-alert-content-title{
    text-align: center;
    font-size:.17rem;
    font-weight:500;
    color:rgba(47,47,47,1);
    line-height:.24rem;
    margin-bottom: .1rem;
}
.ad-read-alert-content-text{
    padding: .075rem .13rem;
    font-size:.13rem;
    color:rgba(47,47,47,1);
    border: 3px solid transparent;
    border-image: url(../../../img/frontend/ad/ad_squre.png) 4 round;
    -webkit-border-image: url(../../../img/frontend/ad/ad_squre.png) 4 round;
    line-height:.27rem;
    max-height: 160px;
    overflow: auto;
}
.ad-read-alert-content-line{
    display: inline-block;
    border-bottom: 1px solid #efefef;
}
.ad-mask{
    position: absolute;
    width:  100%;
    height: 300%;
    left: 0;
    top: -100%;
    z-index: 1000;
}
/* 三期天降福利广告 */
.ad_welfare_banner{
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 998;
    display: none;
}
.ad_welfare_banner img:nth-child(1){
    width: 100%;
}
.ad_welfareBtn{
    width: 27.2%;
    position: absolute;
    top:6%;
    right: 2.4%;
}
.ad_welfare_sign{
    width: 100%;
    display: none;
}
.ad_welfare_icon{
    width: 16%;
    position: fixed;
    z-index: 999;
    right: 4%;
    bottom: 101px;
    transform-origin: right bottom;
    -webkit-transform-origin: right bottom;
    display: none;
    animation: ScaleRun 3S 1s infinite;
    -webkit-animation: ScaleRun 3s 1s infinite;
}
@keyframes ScaleRun{
    0% {transform: rotateZ(0) scale(1)}
    25% {transform: rotateZ(-3deg)}
    50% {transform: rotateZ(3deg) scale(1.2)}
    75% {transform: rotateZ(-3deg)}
    100% {transform: rotateZ(0deg) scale(1)} 
}
@-webkit-keyframes ScaleRun{
    0% {transform: rotateZ(0) scale(1)}
    25% {transform: rotateZ(-3deg)}
    50% {transform: rotateZ(3deg) scale(1.2)}
    75% {transform: rotateZ(-3deg)}
    100% {transform: rotateZ(0deg) scale(1)} 
}

.ad_welfare_icon img:nth-child(1){
    width: 100%;
}
.ad_welfare_sign>img{
    width: 100%;
}
.ad_welfare_sign>img{
    transform-origin: center center;
    -webkit-transform-origin: center center;
    animation: RotateRun 1s 4s infinite;
    -webkit-animation: RotateRun 2s infinite;
}
@keyframes RotateRun{
    0% {transform: scale(1);}
    50% {transform: scale(0.9);}
    100% {transform: scale(1);}
}
@-webkit-keyframes RotateRun{
    0% {transform: scale(1);}
    50% {transform: scale(0.9);}
    100% {transform: scale(1);}
}
.ad_welfare_toast{
    position: fixed;
    top: 45%;
    left: 16%;
    z-index: 999;
    width: 68%;
    height: .4rem;
    background:rgba(0,0,0,.5);
    text-align: center;
    line-height: .4rem;
    text-align: center;
    color:wheat;
    display: none;
}

.ad_position_18{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    display: none;
}
.ad_position_18 .ad-image-tip{
    left: 0;
}
.ad_position_18_close{
    position: absolute;
    width: 0.26rem;
    height: 0.26rem;
    background:url('../../../img/close.png') no-repeat center center;
    background-size: 100% 100%;
    right: 5%;
    top: 8%;
    z-index: 100;
}

.ad_position_22,.ad_position_21{
    position: fixed;
    right: 24px;
    bottom: 174px;
    width: 16%;
    z-index: 1000;
    transform-origin: right bottom;
    -webkit-transform-origin: right bottom;
    animation: ScaleRun 3S 1s infinite;
    -webkit-animation: ScaleRun 3s 1s infinite;
}
/* 充值弹窗 */
.ad_welfaregload{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 990;
    background: rgba(0,0,0,0.7);
    display: none;
}
.ad_welfaregload>div{
    width: 100%;
}
.ad_welfaregload img:nth-child(2){
    width: 90%;
    position: absolute;
    top: 20%;
    right: 5%;
}
.ad_welfaregload img:nth-child(1){
    width: 6%;
    position: absolute;
    right: 10%;
    top: 15%;
}