.mytooltip {
    display: inline;
    position: relative;
    z-index: 999
}

    .mytooltip .tooltip-item {
        cursor: pointer;
        display: inline-block;
        font-weight: 500;
        padding: 0;
        font-size: 16px;
        color: #36a9ff;
    }

    .mytooltip .tooltip-content {
        height: 200px;
        position: absolute;
        z-index: 9999;
        width: 200px;
        left: -157px;
        margin: 0;
        bottom: 100%;
        opacity: 0;
        cursor: default;
        pointer-events: none;
        top: 28px;
    }


@media (max-width:768px) {
    .mytooltip .tooltip-content {
        margin: 0 0 20px 0;
    }

        .mytooltip .tooltip-content::after {
            left: 5%;
        }
}

.mytooltip .tooltip-content img {
    position: relative;
    width: 100%;
    display: block;
    float: left;
    margin-right: 1em
}

.mytooltip .tooltip-item::after {
    content: '';
    position: absolute;
    /* width: 250px;*/
    height: 20px;
    bottom: 100%;
    left: 0;
    pointer-events: none;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.mytooltip:hover .tooltip-item::after {
    pointer-events: auto
}

.mytooltip:hover .tooltip-content {
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg)
}

.mytooltip:hover .tooltip-content2 {
    opacity: 1;
    font-size: 18px
}

.mytooltip .tooltip-text {
    font-size: 14px;
    line-height: 24px;
    display: block;
    padding: 1.31em 1.21em 1.21em 0;
    color: #fff
}