@charset "utf-8";

.content-wrapper {
    position: relative;
    /* width:1656px;
    height:934px; */
    /* background: url(../image/secondbg.png) no-repeat; */
    /* background-size: 100% 100%; */
    margin: 0 auto;
}

.content-wrapper .title {
    font-size: 40px;
    color: #F35D2E;
    text-align: center;
    height: 134px;
    line-height: 134px;
}

#music {
    display: none;
}

#canvas {
    /* margin-left: 25%; */
}

.content-wrapper .title span {
    position: relative;
}

.content-wrapper .title span:before {
    content: '';
    position: absolute;
    width: 42px;
    height: 30px;
    left: -60px;
    top: 15px;
    /* background: url(../image/title-icon-left.png) no-repeat; */
    /* background-size: 100% 100%; */
}

.content-wrapper .title span:after {
    content: '';
    position: absolute;
    width: 42px;
    height: 30px;
    right: -60px;
    top: 15px;
    /* background: url(../image/title-icon-right.png) no-repeat; */
    /* background-size: 100% 100%; */
}

.content-wrapper .content {
    width: 1350px;
    height: 760px;
    margin: 0 auto;
}

.videoBox {
    position: relative;
    width: 100%;
    height: 100%;
}

.browse-times {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    z-index: 999;
    font-size: 32px;
}

.content-wrapper .type_label {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 150px;
    height: 75px;
    line-height: 65px;
    /* background: url(../image/label-bg.png) no-repeat; */
    /* background-size: 100% 100%; */
    color: #fff;
    text-align: center;
    font-size: 40px;
}

.content {
    width: 100%;
    height: 100%;
}

.audioBox {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../image/audiobg.png) no-repeat;
    background-size: 100% 100%;
}

.content-wrapper {
    text-align: center;
    font-size: 24px;
    color: #666;
}

.audioplay {
    width: 100%;
    height: 90%;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn {
    width: 160px;
    height: 160px;
    background: url(../image/btnplay.png);
    position: absolute;
    background-size: 100%;
    /* left: 44%;
    top: 35%; */
}

.pause {
    background: url(../image/btnpause.png);
    background-size: 100%;
}

/*.content-wrapper .content{height:auto;}*/
.bottom {
    display: flex;
    justify-content: center;
    width: 533px;
    margin: 0 auto;
    color: #E44F0F;
    font-size: 30px;
    margin-top: 1vw;
}

.indAudio .btn {
    width: 120px;
    height: 120px;
    left: 140px;
    top: 140px;
}

#canvas {
    width: 55%;
    height: 100%;
}