body, html {
    width: 100%;
    height: 100%;
    font-size: 1vw;
}

* {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

body {
    background: url(../images/bg1.jpg);
    background-size: 100%;
    
} 

.clock_bg {
    height: 100%;
    position: relative;
    width: 50%;
    /*overflow: hidden;*/
    /*margin-left: -50vh;*/
}

    /*时钟部分*/
    .clock_bg .yuandian {
        position: absolute;
        left: 364px;
        top: 455px;
        width: 35px;
        height: 35px;
        background: red;
        border-radius: 50%;
    }

        .clock_bg .yuandian .miaozhen {
            width: 310px;
            height: 5px;
            background: yellow;
            border: 1px solid #000;
            border-top-left-radius: 1rem;
            border-bottom-left-radius: 1rem;
            position: absolute;
            left: 14.87px;
            top: 14.87px;
        }



        .clock_bg .yuandian .shizhen {
            width: 216px;
            height: 8px;
            background: yellow;
            border: 1px solid #000;
            border-top-left-radius: 1rem;
            border-bottom-left-radius: 1rem;
            position: absolute;
            left: 14.87px;
            top: 14.87px;
        }



        .clock_bg .yuandian .fenzhen {
            width: 275px;
            height: 11px;
            background: yellow;
            border: 1px solid #000;
            border-top-left-radius: 1rem;
            border-bottom-left-radius: 1rem;
            position: absolute;
            left: 11.87px;
            top: 11.87px;
        }


    /*彩条部分*/
    .clock_bg .caitiao {
        width: 265px;
        height: 80px;
        position: absolute;
        z-index: 0;
        display: flex;
        justify-content: space-between;
        padding-left: 102px;
        overflow: hidden;
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px; 
z-index:11;
    }

    .clock_bg .c1 {
        left: 480px;
        top: 135px;
        padding-left: 146px;
        background: linear-gradient(to right,#ff7a45 0,#f5252e 100%);
    }

    .clock_bg .c2 {
        left: 649px;
        top: 270px;
        background: linear-gradient(to right,#3f9ff2 0,#325af5 100%);
    }

    .clock_bg .c3 {
        left: 689px;
        top: 409px;
        background: linear-gradient(to right,#73d13d 0,#1abf13 100%);
    }

    .clock_bg .c4 {
        left: 662px;
        top: 549px;
        background: linear-gradient(to right,#ffa940 0,#fa5a21 100%);
    }

    .clock_bg .c5 {
        left: 579px;
        top: 694px;
        background: linear-gradient(to right,#fea4ff 0,#f300a8 100%)
    }

    .clock_bg .caitiao:hover {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .clock_bg .chover {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }



    .clock_bg .caitiao .list-title-inner .inner1 {
        font-size: 24px;
        line-height: 24px;
        color: #fff;
        font-weight: 700;
        margin: 18px 0 7px 0;
    }



    .clock_bg .caitiao .list-title-inner .inner2 {
        font-size: 16px;
        color: #fff;
        font-weight: 400;
        line-height: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .clock_bg .caitiao img {
        width: 90px;
        height: 80px;
    }































    .clock_bg .clockimgclock {
        position: absolute;
        z-index: 11;
        width: 6%;
        height: 6%;
        transition: all 0.6s;
    }


        .clock_bg .clockimgclock:hover {
            transform: scale(1.1);
        }

        .clock_bg .clockimgclock img {
            width: 100%;
            position: relative;
        }

    .clock_bg .clockimg {
        height: 80%;
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -40vh;
    }



























































/*气泡*/
.send {
    position: absolute;
    border-radius: 30px; /* 圆角 */
    min-width: 100px;
    transform: rotate(-3deg);
    font-size: 10px;
    font-family: 微软雅黑;
    text-align: center;
    color: #fff;
    left: 120%;
    top: -110%;
    padding: 10px;
}

    .send span {
        font-size: 14px;
    }

    .send .arrow {
        position: absolute;
        bottom: 20px;
        left: -14px; /* 圆角的位置需要细心调试哦 */
        width: 0;
        height: 0;
        font-size: 0;
        border: solid 8px;
    }


.paly {
    position: fixed;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    border: 3px solid #edecec;
    border-radius: 10px;
    -webkit-animation: circle 20s infinite linear;
}

    .paly img {
        width: 100%;
    }