html, body { position: absolute; height: 100%; width: 100%; background: #000; margin: 0; padding: 0; overscroll-behavior-y: contain; } .abox,.bbox{height:100vh;height:100dvh} .abox>.bbox { -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; touch-action: none; } .abox { width: 320px; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; z-index: 1; height: 568px; } .bbox { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .topmenu a { margin: 0 20px; padding: 0 } #bjtab { color: #fff; border-bottom: 2px solid #fff; } .bjtab { -webkit-user-select: none; } .ls { position: relative; font-size: 18px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width: 100%; height: 100%; position: relative; box-sizing: border-box; } .rich:empty:before { content: attr(placeholder); color: #666; } .bc-tm { background: rgba(255, 255, 255, 0.7); } .rich:focus:before { content: none; } .ls video, .ls img, .ls .ytb { max-width: 100%; max-height: 100%; } .bbox { transition-duration: 600ms; transition-property: transform; width: 760px; max-width: 100%; margin: 0 auto; } .play-ico { width: 60px; height: 60px; opacity: .3; position: absolute; margin: auto; left: 0; top: 0; bottom: 0; right: 0; color: #fff; animation: play-animation 1.1s linear; } @keyframes play-animation { 0% { opacity: 0; transform: scale(2) } 10% { opacity: .3; transform: scale(1.2) } to { transform: scale(1.2); opacity: .3 } } .rmenu { width: 60px; position: absolute; z-index: 999; bottom: 36px; right: 3px; } .br-50 { border-radius: 50% !important } .bmenu { position: absolute; bottom: 56px; left: 10px; right: 50px; } .mag-0-10 { margin: 0 10px; } .pad-0-10 { padding: 0 10px; } .mag-t-16 { margin-top: 16px; } .fs-3 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 6; -webkit-box-orient: vertical; text-overflow: ellipsis; } .tx-img1 { animation: cliprect 2s; } @keyframes cliprect { 0% { -webkit-clip-path: inset(50% round 10% 50%); clip-path: inset(50% round 10% 50%); } 100% { -webkit-clip-path: inset(0% round 0); clip-path: inset(0% round 0); } } .ytbplay { position: absolute; margin: auto; padding: 10px; border-radius: 16px; } .ytb { width: 100%; position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .ytb iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #imgsbox img { max-width: 80px; max-height: 80px } .title,.wh,.rmenu{ color: #fff; } .sw-1{text-shadow: 0 0 0.2em #797979, 0 0 0.2em #797979, 0 0 0.2em #797979} .ls img { border-radius: 6px } .y-num { right: 0; top: 0 } .mag-0-20 { margin: 0 20px } .bc-no { background-color: transparent; background-image: none; } *, :before, :after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; } .fz-dot-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .musave { display: none } .dock { z-index:999; height: 36px; bottom: 0; left: 0; right: 0; margin: auto;} .dock a{text-align: center; flex: 1; } .dock span{margin-left: 6px; left: 50%;} .pad-0-20{padding:0 12px;} .tmenu a{color:#b9b9b9;margin:0 10px;} #bj{color:#fff;border-bottom:2px solid #fff} .bc-tm{width:40px;height:40px;background-color:rgba(0, 0, 0, .3);} .fr-v1{filter: invert(1);} .ytb iframe { pointer-events: none; } .ytb.active iframe { pointer-events: auto; }