* {margin:0;padding:0;} body,html,#app {width:100%;background-color:#fff;} ul,li {list-style:none;} a {text-decoration:none;color:#333} select,input,button {border:none;outline:none;} .main .main-container{width:1300px;height:100%;margin:0 auto;position:relative} .header{width:100%;height:64px; border-bottom: 1px solid #cccccc; -webkit-box-shadow: 0 2px 10px #e5e5e5; box-shadow: 0 2px 10px #e5e5e5; display:flex;justify-content:space-between;padding:0 30px;box-sizing:border-box; align-items:center} .header .header-logo{height:30px; padding:8px; max-width:250px; } .header .header-logo a{ display:flex;align-items:center; font-size:22px; font-weight:bold;color:#333; line-height:30px;letter-spacing:2px;} .header .header-logo img{height:30px;width:30px;margin-right:5px;} .header .header-logo:hover{background:#fe2c55; } .header .header-logo:hover a{color:#fff} .login-box-gd{ width:210px; display:flex;justify-content:space-between } .login-box-gd a{height: 35px; line-height: 35px; font-size: 14px; width:100px; display: block; text-align: center; border-radius:5px; cursor:pointer; color:#999; background:#272933;} .login-box-gd .active{background:#fe2c55; color:#fff; border:none;} .main-nav{ display:flex;align-items:center; flex-wrap:wrap; } .main-nav li{ font-size:18px; white-space:nowrap;overflow:hidden; padding:0 10px;text-align:center; font-weight:500 } .main-nav a{color:#555;letter-spacing:1px;} .main-nav li:last-child{border:none;} .main-search{width:500px;height:40px; display:flex;align-items:center; } .main-search .right{width:100%;height:100%;position:relative} .main-search .right form{width:100%;height:100%} .main-search .right .search-input{width:calc(100% - 40px);height:100%;padding:0 20px;border:1px solid #ccc;border-radius:12px;background-color:transparent;} .main-search .right img,.main-search .right .search-submit{width:18px;height:18px;position:absolute;top:50%;right:26px;transform:translateY(-50%);cursor:pointer} .main-search .right .search-submit{width:66px;height:100%;z-index:1;right:0;background-color:transparent;border-left:1px solid #ccc;} .main-content{ margin-top:30px; margin-bottom:20px; overflow:hidden;} .cpimgvideo{ margin-bottom:20px; position:relative; width:900px;float:left;} .cpimgvideo .videobox{ height:600px;position:relative;overflow:hidden;justify-content:center;margin-bottom:20px; display:flex;align-items:center;background:#000;margin-top:20px;} .cpimgvideo .videobox video{width:100%;height:100%;display:block;} .cpimgvideo .videobox img{max-width:100%;max-height:100%; display:block;border-radius:15px; } .cpimgvideo .playvideo{position:absolute;left:50%;top:50%;margin-left:-35px; z-index:10;margin-top:-35px; cursor:pointer} .cpimgvideo .playvideo img{width:70px;height:70px;} .cpimgvideo .pimgsmall{ overflow:hidden; white-space:nowrap; width:100%; font-size:0; } .cpimgvideo .pimgsmall li{width:80px;height:80px;position: relative; margin-right:15px; display:inline-block; font-size:14px; overflow:hidden;position:relative} .cpimgvideo .pimgsmall li img{width:80px;height:80px;position:absolute; display:block; object-fit:cover;} .cpimgvideo .pimgsmall .cur{border:1px solid #fb531c; margin-left: 0; } .ycbox{width:330px;float:right;color:#fff;} .topuserbox{ position:relative;margin-bottom:15px;background:#f1f2f3;padding:15px 10px; } .topuserbox .username{ white-space:nowrap;overflow:hidden;height:30px; line-height:35px; font-weight:600;color:#333;height:35px;} .topuserbox .userkey{ white-space:nowrap;overflow:hidden;height:35px; line-height:35px; color:#333;height:35px;} .topuserbox .godianpu{ height:35px;text-align:center;line-height:35px; color:#fff;cursor:pointer;border-radius:5px;border:1px solid #ccc;margin-top:10px; background:#fe2c55} .topuserbox img{width:100%;} .main-content h1{font-size:24px;color:#333; font-weight:500} .main-content .usercont{line-height:28px; margin-top:10px; overflow:hidden; text-align:justify;color:#888;position:relative} .telbox{ line-height:35px; height:35px;letter-spacing:1px; display:none} .telbox a{color:#333} .titlebox{font-size:22px; margin:25px 0; color:#999; } .ycbox .moreimglist{ margin-top:10px;} .ycbox .moreimglist li{margin-bottom:10px;height:80px;padding-bottom:10px; border-bottom:1px solid #eee} .ycbox .moreimglist li a{width:100%;display:flex;justify-content:space-between;} .ycbox .moreimglist .tuijianimgbox {width:80px;height:80px;position:relative;overflow:hidden; } .ycbox .moreimglist .tuijianimgbox img {width:100%;height:100%;position:absolute;left:0;top:0;min-height:100%;display:block;transition:all .5s;object-fit:cover; } .ycbox .moreimglist .cp-title { line-height:30px;color:#999;overflow:hidden;text-overflow:ellipsis;font-size:18px; width:230px;max-height:60px; } .cpimgvideo .playvideo2 img{position:relative !important;width:50% !important;height:50% !important; margin-left:20%;margin-top:20%} .tuijianimgbox .playvideo2 img{position:relative !important;width:50% !important;height:50% !important; margin-left:20%;margin-top:20%} .morewzlist{ margin-top:10px; display:flex;justify-content:space-between; flex-wrap:wrap;} .morewzlist li{margin-bottom:10px;height:30px;padding-bottom:10px; border-bottom:1px solid #eee;line-height:30px; width:48%; overflow:hidden} .morewzlist a { line-height:30px;color:#999;overflow:hidden;text-overflow:ellipsis;font-size:18px; } .sharebox{margin:20px 0 10px 0; color:#999;font-size:22px; border-bottom:1px solid #eee;padding-bottom:10px;} .social-share{display:inline-block;margin-left:10px;} .addtimebox{margin:10px 0; color:#999;font-size:14px;} .mp3box{position:absolute;top:30px;right:30px; width:50px;height:50px;border-radius:100%;background-color:rgba(0,0,0,0.5);border:2px solid #fff;z-index:10;cursor:pointer} .mp3box:hover{background-color:rgba(0,0,0,0.1);} .mp3box img{width:60%;height:60%;border-radius:100%;padding:20%;animation: spin 10s linear infinite; } .pasue{ transform: rotate(45deg); position:absolute;left:0;top:50%; width:100%;color:#fff;border-top: 1px solid #fff;display:none;} @keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} } .bottom-info{ font-size:16px; color:#999; line-height:25px; text-align:center; padding:15px 0; } .xsgdbox{display:block;position:absolute;bottom:0;right:0;width:70px;height:25px;line-height:25px; background:#272933;color:#fff; text-align:center; text-indent:0;font-size:12px;cursor:pointer;} @media(max-width:767px) { body,#app{background:#fff;} .header .header-content, .main .main-container{width:100%} .header{position:relative;width:100%;padding:10px 5px;box-sizing:border-box;background:#ededed;} .header .header-logo a{color:#333;} .header .header-logo{border:none;margin-bottom:0;} .main-nav,.main-search,.bottom-info{display:none;} .login-box-gd{top:15px; width:170px;position:absolute;right:10px;} .login-box-gd a{width:80px;font-size:12px;} .cpimgvideo{width:100%;margin-bottom:0;} .topuserbox{border-radius:0;} .cpimgvideo .pimgbig{height:auto;margin-bottom:15px;} .main-content{margin-top:0;padding-top:10px;} .main-content h1{padding:0 10px;font-size:18px;} .cpimgvideo .pimgsmall li{width:55px;height:55px;margin:0 8px;} .cpimgvideo .pimgsmall li img{width:100%;height:100%;} .cpimgvideo .videobox{ height:auto !important;background:none !important; } .cpimgvideo .videobox video{ height:260px;background:none !important; } .sharebox,.addtimebox{padding:0 10px;} .ycbox{width:100%;color:#333;padding:10px;box-sizing:border-box; padding-bottom:50px;} .main-content .usercont{max-height:100%;padding:10px;} .telbox{position:fixed;left:0px;bottom:0;width:100%;margin:0;padding:5px 0;border-radius:0;border:none;background:#272933;z-index:11; text-align:center; font-size:22px; font-weight:500;color:#fff;display:block} .telbox a{color:#fff} .ycbox .moreimglist .cp-title{ width: calc(100% - 90px);} .pasue{display:block} .mp3box img{animation:none;} .xsgdbox{display:none;} .morewzlist{padding:10px;} .morewzlist li{width:100%;} .videobox .playvideo{display:none} .cpimgvideo .playvideo2 img{ margin-left:30%;margin-top:30%} } .tybt,.tybm,.tybt1,.tybm1{color:#3897f0;font-weight:bold;font-size:20px !important;} .tybt2,.tybm2{color:#238ed9;font-weight:bold;font-size:20px !important;} .tybt3,.tybm3{color:#7ab900;font-weight:bold;font-size:20px !important;} .tybt4,.tybm4{color:#3fb68c;font-weight:bold;font-size:20px !important;} .tybt5,.tybm5{color:#428bbd;font-weight:bold;font-size:20px !important;} .tylxr,.tyqq,.tydz{color:#ff6600;font-weight:bold;font-size:20px !important;}