.content { display: flex; flex-direction: column; box-sizing: border-box; width: 100vw; height: 100vh; } .content { background-color: var(--rgb111); overflow: hidden; } .content .one { padding: 0 2vw; margin: 0 0 2vw 0; } .content .one video { width: 100%; height: 210px; overflow: hidden; border: 1px solid var(--rgbf1f); } .content .one .image { width: 100%; height: 210px; overflow: hidden; border: 1px solid var(--rgbf1f); } .content .two { position: relative; flex-grow: 1; padding: 0 2vw; } .content .two .two_1 { display: flex; justify-content: space-around; margin: 0 0 3vw 0; } .content .two .two_1 .list ._span { background-color: var(--rgbfff); color: var(--rgb000); padding: 1vw 4vw; font-size: 14px; border-radius: 5px; } .content .two .two_1 .active ._span { background-color: var(--rgbfa4); color: var(--rgbfff); } .content .two .two_2 .tab_1 { display: flex; flex-direction: column; width: 96vw; height: 57vh; overflow-y: auto; padding: 1vw 0 0 0; } .content .two .two_2 .tab_1 .btn { display: flex; justify-content: space-around; margin: 0 0 2vw 0; } .content .two .two_2 .tab_1 .btn .btn_1 .span { display: inline-block; background-color: var(--rgb313); color: var(--rgbfff); padding: 1vw 4vw; border-radius: 5px; } .content .two .two_2 .tab_1 .btn .btn_1 .span ._span { font-size: 14px; padding: 0 0 0 1vw; } .content .two .two_2 .tab_1 .title { font-size: 15px; color: var(--rgbfff); margin: 0 0 2vw 0; } .content .two .two_2 .tab_1 .actor { font-size: 15px; color: var(--rgbfff); margin: 0 0 2vw 0; } .content .two .two_2 .tab_1 .actor .actor_1 { margin: 0 0 2vw 0; } .content .two .two_2 .tab_1 .actor .actor_2 .actor_scroll_view { white-space: nowrap; } .content .two .two_2 .tab_1 .actor .actor_2 .actor_scroll_view .actorList { display: inline-block; text-align: center; margin: 0 6px 0 0; } .content .two .two_2 .tab_1 .actor .actor_2 .actor_scroll_view .actorList .image { width: 66px; height: 66px; overflow: hidden; border-radius: 90%; } .content .two .two_2 .tab_1 .actor .actor_2 .actor_scroll_view .actorList .name { font-size: 15px; } .content .two .two_2 .tab_1 .brief { font-size: 15px; color: var(--rgbfff); margin: 0 0 2vw 0; } .content .two .two_2 .tab_1 .other .other_1 { font-size: 15px; color: var(--rgbfff); margin: 0 0 2vw 0; } .content .two .two_2 .tab_1 .other .other_2 { display: flex; flex-wrap: wrap; } .content .two .two_2 .tab_1 .other .other_2 .firmvideoList { width: 48%; margin: 0 10px 5px 0; } .content .two .two_2 .tab_1 .other .other_2 .firmvideoList .image { width: 100%; height: 100px; overflow: hidden; border-radius: 5px; box-shadow: 0 0 5px var(--rgbf1f); margin: 0 0 5px 0; } .content .two .two_2 .tab_1 .other .other_2 .firmvideoList .name { font-size: 14px; color: var(--rgbfff); margin: 0 0 5px 0; } .content .two .two_2 .tab_1 .other .other_2 .firmvideoList .other { display: flex; color: var(--rgbfff); font-size: 12px; justify-content: space-between; } .content .two .two_2 .tab_1 .other .other_2 .firmvideoList:nth-child(2n) { margin: 0 0 5px 0; } .content .two .two_2 .tab_2 { display: flex; flex-direction: column; width: 96vw; height: 57vh; overflow-y: auto; padding: 1vw 0 0 0; position: relative; } .content .two .two_2 .tab_2 .tab_2_1 { display: flex; flex-direction: column; } .content .two .two_2 .tab_2 .tab_2_1 .discussList { margin: 0 0 2vw 0; background-color: var(--rgb000); padding: 2vw; border-radius: 5px; } .content .two .two_2 .tab_2 .tab_2_1 .discussList .dis_1 { display: flex; margin: 0 0 1vw 0; } .content .two .two_2 .tab_2 .tab_2_1 .discussList .dis_1 .l { width: 8vw; height: 8vw; margin: 0 2vw 0 0; } .content .two .two_2 .tab_2 .tab_2_1 .discussList .dis_1 .l .image { width: 100%; height: 100%; border-radius: 90%; } .content .two .two_2 .tab_2 .tab_2_1 .discussList .dis_1 .c { flex-grow: 1; font-size: 14px; color: var(--rgbfff); padding: 1vw 0; } .content .two .two_2 .tab_2 .tab_2_1 .discussList .dis_1 .r { font-size: 12px; color: var(--rgbf1f); padding: 2vw 0 0 0; } .content .two .two_2 .tab_2 .tab_2_1 .discussList .dis_2 { font-size: 15px; color: var(--rgbfff); } .content .two .two_2 .tab_2 .chatBtn { position: fixed; width: 100vw; bottom: 5vw; right: 4vw; text-align: right; } .content .two .two_2 .tab_2 .chatBtn button { width: 50px; height: 50px; line-height: 50px; padding: 0; border-radius: 90%; font-size: 14px; font-weight: bold; background-color: var(--rgbfa4); color: var(--rgbfff); } .scroll-view { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .scroll-view .list-scroll-view { display: flex; flex-direction: column; } .is_bottom { text-align: center; } .is_bottom text { padding: 2vw 0; display: inline-block; color: #858585; font-size: 14px; }