.box {
    height: 100vh;
    background: #343434;
    display: flex;
    overflow: hidden
}

.main {
    flex: 1;
    padding: 20px
}

.main-top {
    justify-content: space-between
}

.main-top-left,
.main-top {
    display: flex;
    align-items: center
}

.main-top-left img {
    width: 20px;
    height: 20px;
    margin-right: 20px;
    cursor: pointer
}

.main-top-left p {
    color: #fff;
    font-size: 20px
}

.main-top-right {
    width: 188px;
    height: 50px
}

.main-video {
    margin-top: 20px;
    background: #000;
    width: 100%;
    height: 760px
}

.main-end {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.main-end-left img {
    height: 38px;
    cursor: pointer
}

.main-end-left img:first-child {
    width: 190px
}

.main-end-left img:nth-child(2),
.main-end-left img:nth-child(3) {
    width: 125px;
    margin-left: 20px
}

.main-end-right img {
    width: 104px;
    height: 38px;
    margin-left: 20px;
    cursor: pointer
}

.strip {
    width: 400px;
    height: 100vh;
    background: #444;
    overflow-y: auto
}

.strip-top {
    position: sticky;
    top: 0;
    padding: 30px 20px;
    border-bottom: 1px solid #5c5c5c;
    background: #444;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.strip-top p {
    font-size: 20px;
    color: #fff
}

.strip-top img {
    width: 51px;
    height: auto;
    cursor: pointer
}

.cou-fir {
    padding: 15px 20px;
    border-bottom: 1px solid #5c5c5c
}

.cou-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer
}

.cou-item p {
    color: #fff;
    line-height: normal;
    flex: 1
}

.cou-item img {
    width: 20px;
    height: 20px
}

.cou-sec-li {
    padding: 0 0 15px 20px;
    border-bottom: 1px solid #5c5c5c
}

.cou-sec-item {
    margin-top: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer
}

.cou-sec-item p {
    font-size: 14px;
    color: #fff;
    line-height: normal;
    flex: 1
}

.cou-sec-item img {
    width: 20px;
    height: 20px
}

.cou-thi {
    padding-left: 10px
}

.cou-thi-col {
    flex: 1
}

.cou-thi-item {
    margin-top: 17px;
    justify-content: space-between;
    cursor: pointer
}

.cou-thi-item,
.cou-thi-title {
    display: flex;
    align-items: center
}

.cou-thi-title div {
    width: 11px;
    height: 11px;
    border: 1px solid #fff;
    border-radius: 50%
}

.cou-thi-title p {
    color: #fff;
    margin-left: 10px;
    font-size: 12px;
    line-height: normal;
    flex: 1
}

.cou-thi-time {
    color: #9d9d9d;
    font-size: 12px;
    margin-top: 8px;
    padding-left: 22px
}

.cou-thi-play {
    width: 64px;
    height: 28px;
    border: 1px solid #fff;
    border-radius: 14px;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center
}

.cou-thi-play-select {
    background: linear-gradient(0deg, #58a3ff, #3891ff);
    box-shadow: 1px 2px 4px 0 rgba(56, 145, 255, .2);
    color: #fff;
    border: unset
}

.submit {
    text-align: center;
    margin-top: 20px
}

p {
    margin-bottom: 0;
}

body {
    line-height: normal;
    padding: 0;
}



/* .cou-item.active img {
    display: block;
}

.cou-item.active img:last-child {
    display: none;

} */

.cou-item img {
    display: block;
}

.cou-item img:last-child {
    display: none;
}

.cou-sec-item img {
    display: block;
}

.cou-sec-item img:last-child {
    display: none;
}

.pv-video-player {
    height: 100% !important;
}