.adbro-oppo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
}

.adbro-oppo * {
    box-sizing: border-box;
}

.adbro-oppo__bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 82px;
    background: linear-gradient(360deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-animation: fadeIn24 1s 1s both;
    animation: fadeIn24 1s 1s both;
}

.adbro-oppo__bg:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -255px;
    background: url(../images/oppo-bg.png) no-repeat bottom center;
    width: 510px;
    height: 199px;
}

.adbro-oppo__image {
    position: absolute;
    bottom: 0;
    left: 10px;
    background: url(../images/oppo-img.png) no-repeat;
    background-size: 100% 100%;
    width: 172px;
    height: 112px;
    -webkit-animation: fadeInLeft24 1s .9s both;
    animation: fadeInLeft24 1s .9s both;
}

.adbro-oppo__text {
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: -105px;
    background: url(../images/oppo-text.svg) no-repeat;
    background-size: 100% 100%;
    width: 155px;
    height: 55px;
    -webkit-animation: fadeInLeft24 1s .7s both;
    animation: fadeInLeft24 1s .7s both;
}

.adbro-oppo__btn {
    display: block;
    position: absolute;
    bottom: 10px;
    right: 40px;
    margin-left: -47px;
    background: url(../images/oppo-btn.svg) no-repeat;
    background-size: 100% 100%;
    width: 146px;
    height: 19px;
    -webkit-animation: fadeInRight24 1s 1s both;
    animation: fadeInRight24 1s 1s both;
    z-index: 1;
}

.adbro-oppo__video {
    background: url(../images/oppo-video.jpg) no-repeat;
    background-size: 100% 100%;
    width: 146px;
    height: 101px;
    position: absolute;
    bottom: 12px;
    right: 40px;
    overflow: hidden;
    cursor: pointer;
    -webkit-animation: fadeInRight24 1s 1s both;
    animation: fadeInRight24 1s 1s both;
    z-index: 1;
}

.adbro-oppo__video:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -17px;
    margin-top: -17px;
    background: url(../images/adbro-ico-play.svg) no-repeat;
    background-size: 100% 100%;
    width: 34px;
    height: 34px;
    z-index: 10;
}

.adbro-oppo__video video {
    position: absolute;
    top: -15px;
    left: -26px;
    right: -10px;
    bottom: -10px;
    background-size: cover;
    background-position: 50% 50%;
}

.adbro-oppo__close {
    position: absolute;
    bottom: 85px;
    right: 10px;
    background: url(../images/adbro-demo-close2.svg) no-repeat;
    background-size: 100% 100%;
    width: 22px;
    height: 22px;
    -webkit-animation: fadeIn24 1s .4s both;
    animation: fadeIn24 1s .4s both;
    cursor: pointer;
    z-index: 1;
}

.adbro-oppo__link {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 208px;
}

.adbro-sm .adbro-oppo__image {
    width: 143px;
    height: 93px;
    left: 0;
}

.adbro-xs .adbro-oppo__text,
.adbro-sm .adbro-oppo__text {
    width: 125px;
    height: 42px;
}

.adbro-sm .adbro-oppo__video {
    width: 118px;
    height: 78px;
}

.adbro-sm .adbro-oppo__btn {
    width: 118px;
    height: 16px;
}

.adbro-xs .adbro-oppo__btn,
.adbro-xs .adbro-oppo__text {
    margin-left: 0;
    left: auto;
    right: 30px;
}

.adbro-xs .adbro-oppo__text {
    bottom: 30px;
}

.adbro-xs .adbro-oppo__btn {
    bottom: 5px;
    right: 11px;
}

.adbro-xs .adbro-oppo__video {
    display: none;
}

@-webkit-keyframes fadeIn24 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn24 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeInLeft24 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft24 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes fadeInRight24 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight24 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}