/* * Prefixed by https://autoprefixer.github.io * PostCSS: v8.4.14, * Autoprefixer: v10.4.7 * Browsers: last 4 version */ /* * Prefixed by https://autoprefixer.github.io * PostCSS: v8.3.6, * Autoprefixer: v10.3.1 * Browsers: last 4 version */ @charset "utf-8"; /*初始化样式*/ *{-webkit-tap-highlight-color:transparent;} /*html5设置*/ article,aside,details,figcaption,figure,footer,header,main,nav,section{display:block;} html,body,div,pre,code,form,fieldset,legend,input,textarea,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,p,h1,h2,h3,h4,h5,h6,dl,dd,ol,ul,li{margin:0;padding:0;} html {font-size: 100px;} body{background-color:#131517;color:#fff;font-size:100%; font-family:'Arial','Microsoft Yahei';overflow-x:auto;width:100%;min-width: 1200px; word-wrap:break-word;text-align:justify;} a{text-decoration:none;outline:none;color:#fff;} a:focus{outline:none;-moz-outline:none;} a:hover{} a img{border:none;} li{list-style:none;} select,input,textarea,button{border-radius:0;-webkit-border-radius:0;background:none;border:none;margin:0;padding:0;outline:none;font-family:Arial,'Microsoft Yahei';} input:focus{outline:none;} textarea{resize:none;} input[type='text']::-moz-placeholder{opacity:1;} input[type='text']:-moz-placeholder{opacity:1;} input[type='text']::-webkit-input-placeholder{opacity:1;} input[type='text']:-ms-input-placeholder{opacity:1;} table{background-color:transparent;border-spacing:0;border-collapse:collapse;font-size:16px;width:100%;border-top:solid 1px #e4e4e4;border-left:solid 1px #e4e4e4;-webkit-box-sizing:border-box;box-sizing:border-box;} table th{background-color:#f9f9f9;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;} table td,table th{padding:1%;border:1px solid #e4e4e4;-webkit-box-sizing:border-box;box-sizing:border-box;} #member li:nth-child(2) .tongzhi::after { content: ""; position: absolute; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); top: 50%; left: 30px; width: 7px; height: 7px; border-radius: 50%; background: red; } .omission1{overflow: hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;} .omission2{overflow: hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;} .omission3{overflow: hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;} .omission4{overflow: hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;} /*全局样式*/ .inner{width:93.75%; max-width: 1800px; margin:0 auto;} .clear{clear:both;height:0px;overflow:hidden;} .scroll {overflow: hidden; -webkit-overflow-scrolling: touch; position: relative;} /* Slider */ .slick-load {display: none;} .slick-slider{position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;} .slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0;} .slick-list:focus{outline:none;} .slick-list.dragging{cursor:pointer;cursor:hand;} .slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);} .slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto;} .slick-track:before,.slick-track:after{display:table;content:'';} .slick-track:after{clear:both;} .slick-loading .slick-track{visibility:hidden;} .slick-slide{display:none;float:left;height:100%;min-height:1px;font-size: 0; line-height: normal;} [dir='rtl'] .slick-slide{float:right;} .slick-slide img{display:block;} .slick-slide.slick-loading img{display:none;} .slick-slide.dragging img{pointer-events:none;} .slick-initialized .slick-slide{display:block;} .slick-loading .slick-slide{visibility:hidden;} .slick-vertical .slick-slide{display:block;height:auto;} .slick-arrow.slick-hidden{display:none;} .slick-arrow {overflow: hidden; display: inline-block; text-indent: -99999em; font-size:0; border-radius:50%; background:no-repeat 0 0; background-size:100% auto; width: 58px; height: 58px; border:1px solid transparent; cursor: pointer;} .slick-dots {font-size: 0; line-height: normal;} .slick-dots button {display: block; border:none; background-color: transparent; cursor: pointer;} /*wrapper*/ #wrapper{font-size:.16rem;line-height:1.875em;} /*header*/ #header{position:relative;z-index:2;} /*logo*/ #logo{padding:1.11111111% 0;float:left;position:relative;width:16.11111111%;} #logo h1{padding-bottom:20.68965517%;position:relative;} #logo a{display:block;overflow:hidden;position:absolute;left:0;top:0;width:100%;height:100%;text-indent:-99999em;background:url(../images/logo.jpg) no-repeat left center;background-size:contain;} /*nav*/ #nav{float:right;} #nav li{float:left;font-size:.16rem;padding:0 .25rem;line-height:3.75em;} #nav li a{position: relative;} /*#nav li:last-child a::before{position: absolute;content: '';width: 5px;height: 5px;border-radius: 50%;background-color: red;top: 20px;right: 0;}*/ #nav li.tip a::before { position: absolute; content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: red; top: 20px; right: 0; } #nav a{display:block;padding:.2rem .15rem;position:relative;} #nav a:after{width:100%;height:0.02rem;background-color:#ff6000;content:'';display:block;position:absolute;left:0;bottom:0;display:none;} #nav a:hover:after{display:block;} #nav .cur > a{color:#ff6000;} #nav .cur > a:after{display:block;} /*member*/ #member{float:right;font-size:.16rem;width: 210px;line-height:2.5em;padding:1.66666667% 0 1.66666667% 2.22222222%;} #member:before{width:100%;height:100%;position:fixed;left:0;top:0;content:'';background-color:rgba(0,0,0,0.5);z-index:2;display:none;} #member.active:before{display:block;} #member a{display:block;overflow:hidden;} #member a:hover{color:#ff6000;} #member .exited span{display:block;float:left;position:relative;} #member .exited span a{padding-left:.25rem;background:no-repeat left center;background-size:.17rem auto;opacity:.5;} #member .exited span a:hover{opacity:1;} #member .exited .log{padding-right:.4rem;} #member .exited .log:after{width:1px;height:.12rem;background-color:rgba(255,255,255,0.2);content:'';display:block;position:absolute;right:.2rem;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);} #member .exited .log a{background-image:url(../images/icon_09.png);} #member .exited .reg a{background-image:url(../images/icon_10.png);} #member .logged{position:relative;z-index:3;cursor:default;} #member .logged img{display:block;width:.4rem;height:.4rem;border-radius:50%;float:left;} #member .logged i{display:block;float:left;font-style:normal;padding-left:.15rem;max-width:1.2rem;white-space:nowrap;/* overflow:hidden;text-overflow:ellipsis; */} #member .info{position:relative;z-index:2;overflow:hidden;} #member .drop{background-color:#1f2123;width:120%;padding-top:0.8rem;position:absolute;left:-10%;top:-0.2rem;border-bottom:0.02rem solid #ff6000;display:none;} #member li{border-top:1px solid rgba(255,255,255,0.1);font-size:.18rem;text-align:center;line-height:.3rem;} #member li a{color:rgba(255,255,255,0.3);padding:.1rem;} /*slides*/ #slides{margin-bottom:1.5625%;} #slides .slick-load{border-radius:.1rem;overflow:hidden;} #slides .item a{display:block;overflow:hidden;padding-bottom:22.22222222%;background:no-repeat center center;background-size:cover;} #slides .slick-dots{position:absolute;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);bottom:0;margin-bottom:1.66666667%;} #slides .slick-dots li{display:inline-block;margin:0 .04rem;} #slides .slick-dots button{display:block;width:.1rem;height:.1rem;border:0.02rem solid rgba(255,255,255,0.5);border-radius:50%;text-indent:-99999em;overflow:hidden;} #slides .slick-dots .slick-active button{border-color:#fff;} #slides .load{padding-bottom:22.22222222%;} /*footer*/ #footer{color:rgba(255,255,255,0.2);font-size:.14rem;line-height:1.85714286em;padding:1.40625% 0;} #footer a{color:rgba(255,255,255,0.2);} #footer a:hover{color:#fff;} /*pagelist*/ #pagelist{float:left;} #pagelist ul{font-size:0;line-height:normal;} #pagelist li{display:inline-block;font-size:.14rem;line-height:1.85714286em;padding-left:.4rem;position:relative;} #pagelist li:before{width:1px;height:.1rem;background-color:#3b3f44;content:'';display:block;position:absolute;left:.195rem;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);opacity:.5;} #pagelist li:first-child{padding-left:0;} #pagelist li:first-child:before{display:none;} /*copyright*/ #copyright{float:right;} /*hmTitle*/ .hmTitle{font-size:.24rem;font-weight:normal;line-height:1.66666667em;margin-bottom:1.11111111%;} /*category*/ #category{overflow:hidden;} #category .list{ /* width:101.69444444%;overflow:hidden; */ display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -10px; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; min-height: 4.5rem; } #category .item{ /* width:12.61950287%;float:left;padding-right:1.66621142%;transition:width .3s; */ -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; width: 14.285%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; } #category .item.hover{ width: 18%; } #category .item.hover .box{ padding-bottom: 4.5rem; } #category .box{padding-bottom:4.1rem;background:no-repeat center center;background-size:cover;border-radius:.1rem;overflow:hidden;position:relative;} #category .info{position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);text-align:center;width:100%;} #category .icon{width:.4rem;margin:0 auto 9.52380952%;} #category .icon i{display:block;overflow:hidden;padding-bottom:100%;background:no-repeat center center;background-size:contain;} #category h3{font-size:.3rem;font-weight:Lighter;line-height:1.35em;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;margin-bottom:6.49350649%;} #category ul{display:none;} #category li{font-size:.16rem;line-height:2.25em;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;} #category li a{color:rgba(255,255,255,0.5);} #category li a:hover{color:#fff;} #category .active{width:19.17508877%;} #category .disable{width:11.52690522%;} /*course*/ #course{display:table;table-layout:fixed;width:100%;} #course .td{display:table-cell;vertical-align:top;background-color:#1f2123;padding:0 2.02702703%;border-radius:.05rem;} #course .space{width:2.02702703%;background-color:transparent;padding:0;} #course .top{overflow:hidden;border-bottom:1px dotted rgba(255,255,255,0.15);padding:0.4rem 0 .3rem;} #course .btn{float:right;} #course .btn a{background-color:#ff6000;text-align:center;display:block;height:.6rem;width:1.8rem;border-radius:5px;line-height:.6rem;} #course .btn a:hover{opacity:.85;} #course .title{margin-right:1.9rem;} #course .title h2{font-size:.24rem;line-height:1.25em;font-weight:normal;margin-bottom:.06rem;} #course .title p{font-size:.16rem;line-height:1.875em;color:rgba(255,255,255,0.3);} /*courseList*/ #courseList{width:42.22972973%;} #courseList li{border-bottom:1px dotted rgba(255,255,255,0.15);font-size:.16rem;color:rgba(255,255,255,0.3);line-height:1.875em;} #courseList li:last-child{border-bottom:none;} #courseList li a{color:rgba(255,255,255,0.3);} #courseList li a:hover{color:#ff6000;} #courseList li ul{display:none;} #courseList li li{border-bottom:none;border-top:1px dotted rgba(255,255,255,0.15);padding-left:.65rem;} #courseList li li .num{padding-right:.1rem;} #courseList li li .box{padding:4.9% 0;} #courseList .box{display:table;table-layout:fixed;width:100%;padding:4.33628319% 0;} #courseList .box span{display:table-cell;vertical-align:top;overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis} #courseList .num{padding-right:.15rem;width:0.5rem;} #courseList .time{width:14.0562249%;text-align:right;} #courseList .open{width:3.01204819%;cursor:pointer;opacity:0;} #courseList .open i{position:relative;display:block;height:.3rem;} #courseList .open i:after{width:.07rem;height:.07rem;border-right:0.03rem solid rgba(255,255,255,0.5);border-bottom:0.03rem solid rgba(255,255,255,0.5);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);content:'';display:block;position:absolute;left:50%;top:50%;margin:-0.06rem 0 0 -0.06rem;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s;} #courseList .open.active{opacity:1;} #courseList .current .open i:after{-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);margin:-0.025rem 0 0 -0.05rem;} #courseList .mCSB_outside + .mCSB_scrollTools{right:-0.1rem;} #courseList .scroll{height:7.3rem; overflow-y: auto; padding-right: 15px; } /*courseCase*/ #courseCase{width:55.74324324%;} #courseCase .btm{margin-top:3.92156863%;} #courseCase .scroll{height:7rem;} #courseCase ul{overflow:hidden;} #courseCase li{width:45.75163399%;padding:0 3.92156863% 3.92156863% 0;float:left;} #courseCase .pic{padding-bottom:57.14285714%;background:no-repeat center center;background-size:cover;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s;} #courseCase h3{position:absolute;left:0;bottom:0;font-size:.16rem;line-height:1.875em;font-weight:normal;padding:3.42857143% 5.7% 3.42857143%;width:88.6%;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;z-index:3;} #courseCase .box{border-radius:0.05rem;display:block;overflow:hidden;position:relative;} #courseCase .box:before{width:100%;height:100%;background:url(../images/bg_01.png) repeat-x center bottom;content:'';display:block;position:absolute;left:0;bottom:0;z-index:2;} #courseCase .box:hover .pic{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);} /*container*/ #container{overflow:hidden;clear:both;} #container .inner{border-top:1px solid #1f2123;padding-top:1.5625%;position:relative;} /*sidebar*/ #sidebar{width:16.11111111%;float:left;} #sidebar.fixed{position:fixed;top:.3rem;width:2.9rem;z-index:9;} /*sideMenu*/ .sideMenu li{margin-bottom:6.89655172%;} .sideMenu li:last-child{margin-bottom:0;} .sideMenu span{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;} .sideMenu i { font-style: normal; background: no-repeat left center; background-size: .3rem auto; /* padding-left: .5rem; */ display: block; position: relative; padding-right: 0.09rem; text-align: center; } .sideMenu i:after{width:0.09rem;height:0.14rem;background:url(../images/icon_01.png) no-repeat center center;background-size:contain;content:'';display:block;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:none;} .sideMenu a{position:relative;background:no-repeat center center;background-size:cover;display:block;overflow:hidden;border-radius:.05rem;} .sideMenu a:before{width:100%;height:100%;background-color:rgba(0,0,0,0.7);content:'';display:block;position:absolute;left:0;top:0;-webkit-transition:background .3s;-o-transition:background .3s;transition:background .3s;} .sideMenu a:hover{color:#fff;} .sideMenu .cur a:before,.sideMenu a:hover:before{background-color:rgba(0,0,0,0.15);} .sideMenu .cur a i:after,.sideMenu a:hover i:after{display:block;} .sideMenu .cur a i,.sideMenu a:hover i{color: #ff6000;} .sideMenu .cur a em,.sideMenu a:hover em{color:#fff;} .sideMenu em{position:absolute;left:0;bottom:0.05rem;width:100%;text-align:center;font-size:.12rem;color:rgba(255,255,255,0.3);font-style:normal;line-height:1.5em;} /*sideNav*/ #sideNav span{padding:0 10% 0 10%;width:60%;font-size:.24rem;line-height:1.25em;-webkit-transition:padding .3s,width .3s;-o-transition:padding .3s,width .3s;transition:padding .3s,width .3s;text-align: center;} #sideNav a{padding-bottom:36.89655172%;} #sideNav a:hover span{padding:0 10% 0 20%;width:70%;} /*sideSub*/ #sideSub span{padding:0 10%;width:80%;font-size:.2rem;line-height:1.5em;text-align:center;} #sideSub i{padding:0 .1rem;} #sideSub a{padding-bottom:27.5862069%;} /*main*/ #main{width:82.22222222%;float:right;} /*videoTop*/ #videoTop{display:table;width:100%;} #videoTop .td{display:table-cell;vertical-align:bottom;} #videoTop .desc{padding:0 1.68918919%;} #videoTop .name{font-size:.3rem;font-weight:normal;line-height:1.35em;margin-bottom:.1rem;} #videoTop .title{font-weight:normal;line-height:1.35em;font-size:.24rem;} #videoTop .intro{font-size:.16rem;line-height:1.5em;color:rgba(255,255,255,0.3);} #videoTop .price{text-align:right;font-size:.16rem;line-height:1.875em;} #videoTop .price span{display:inline-block;padding:0 .15rem;} #videoTop .price i{font-style:normal;font-size:0.36rem;color:#ff6000;} #videoTop .btn{width:19.59459459%;} #videoTop .btn a{background-color:#ff6000;display:block;float:right;width:79.31034483%;height:.6rem;line-height:.6rem;text-align:center;border-radius:5px;font-size:.16rem;} #videoTop .btn a:hover{opacity:.85;} #videoTop .back{width:5.74324324%;padding:0 2.02702703%;vertical-align:middle;} #videoTop .back a{display:block;overflow:hidden;padding-bottom:84%;background:url(../images/icon_03.png) no-repeat center center;background-size:contain;} /*videoBtm*/ #videoBtm{overflow:hidden;background-color:#1f2123;display: -webkit-box;display: -ms-flexbox;display: flex;} /*videoPlay*/ #videoPlay{position:relative;} #videoPlay .shuiyin{ position: absolute; left: 55%; top: 65%; z-index: 5; -webkit-transform: rotateZ(-45deg); -ms-transform: rotate(-45deg); transform: rotateZ(-45deg); font-size: 14px; color: rgba(200,200,200,.6); -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ } #videoPlay.left{float:left;width:80.40540541%;overflow: hidden;min-height: 300px;} #videoPlay.fullLeft{width:100%;float:none;min-height: 730px;display: flex;} #videoPlay.fullLeft .video-js{height: auto!important;width:100%;} #videoPlay.left .video{padding-bottom:0;height: 100%;} #videoPlay .video{padding-bottom:53.37837838%;position:relative;width:100%;} /* #videoPlay video{position:absolute;left:0;top:0;width:100%;height:100%;} */ #videoPlay .bullet-chat{position: absolute;left:100%;top: 20%;z-index: 3;color: rgba(200,200,200,.6);font-size: 14px;line-height: 1.5;width: 210px;} #videoPlay video::-internal-media-controls-download-button { display: none; } #videoPlay video::-webkit-media-controls-enclosure { overflow: hidden; } #videoPlay video::-webkit-media-controls-panel { width: calc(100% + 30px); } #videoPlay .tips{position:absolute;bottom:0;right:2.02702703%;width:95.94594595%;margin-bottom:6.41891892%;z-index:9;} #videoPlay .tips span{display:block;padding:0 .1rem;height:.3rem;line-height:.3rem;font-size:.14rem;background-color:rgba(0,0,0,0.5);color:#fff;border-radius:.05rem;float:right;clear:both;} #videoPlay .tips i{display:inline-block;margin-left:.1rem;vertical-align:middle;width:.1rem;height:.1rem;background:url(../images/icon_08.png) no-repeat center center;background-size:contain;cursor:pointer;} /*videoInfo*/ #videoInfo{float:right;width:19.59459459%;background-color:#1f2123;height:7.5rem;} #videoInfo .info{padding:10.34482759% 10.34482759% 0;} #videoInfo h3{font-size:.16rem;font-weight:normal;line-height:1.875em;} #videoInfo h4{font-size:.14rem;line-height:1.75em;font-weight:normal;} /*videoSoft*/ #videoSoft{border-bottom:1px dotted rgba(255,255,255,0.15);margin-bottom:13.04347826%;} #videoSoft h3{margin-bottom:9.56521739%;} #videoSoft h4{color:rgba(255,255,255,0.3);white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis;} #videoSoft ul{overflow:hidden;width:110%;} #videoSoft li{float:left;text-align:center;width:23.333%;padding:0 10% 8.69565217% 0;} #videoSoft .icon{background-color:rgba(255,255,255,0.05);border-radius:5px;padding:16.66666667%;margin-bottom:20%;} #videoSoft .icon i{display:block;overflow:hidden;padding-bottom:100%;background:no-repeat center center;background-size:contain;} /*videoPlan*/ #videoPlan h3{margin-bottom:6.52173913%;} /*videoList*/ .videoList .item{margin-bottom:10%;} .videoList h4{color:rgba(255,255,255,0.5);margin-bottom:5.65217391%;} .videoList ul{position:relative;padding:.1rem 0;} .videoList ul:before,.videoList ul:after{width:.06rem;height:.06rem;border-radius:50%;z-index:2;left:0;content:'';display:block;position:absolute;border:.02rem solid #404244;} .videoList ul:before{top:0;} .videoList ul:after{bottom:0;} .videoList ul > li:before,.videoList ul > li:after{content:'';display:block;position:absolute;background-color:#404244;} .videoList ul > li:before{width:.02rem;height:100%;left:.035rem;top:0;} .videoList ul > li:after{width:.06rem;height:.06rem;border-radius:50%;z-index:2;left:0;top:.08rem;border:.02rem solid #1f2123;} .videoList li{font-size:.14rem;line-height:1.875em;color:rgba(255,255,255,0.3);position:relative;padding-left:17.39130435%; padding-right:4.378%;} .videoList li a{color:rgba(255,255,255,0.3);} .videoList li a:hover{color:#ff6000;} .videoList ol{padding-left:1em;margin-left:2em;} .videoList ol li{list-style:outside decimal none;padding-left:0;} .videoList .current{color:#ff6000;} .videoList .current:after{width:.18rem;height:.12rem;background:url(../images/icon_02.png) no-repeat center center;background-size:contain;border-radius:0;border:none;left:-0.01rem;} .videoList .current > a{color:#ff6000;} .videoList #catalogue .current > a{color:#ff6000;} /*skill*/ #skill #videoTop{padding:0.60810811% 0 2.02702703%;} /*works*/ .works{overflow:hidden;} .works ul{width:102.06081081%;} .works li{float:left;width:31.31413439%;padding:1.98609732% 2.01919894% 0 0;} .works li:nth-child(-n+3){padding-top:0;} .works li a{display:block;overflow:hidden;position:relative;border-radius:.05rem;cursor:pointer} .works .pic{padding-bottom:57.08245243%;background:no-repeat center center;background-size:cover;position:relative;border-radius:.05rem;overflow:hidden;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s;cursor:pointer} /*student*/ #student .info{position:absolute;left:0;top:0;height:100%;background-color:rgba(0,0,0,0.7);text-align:center;width:87.31501057%;padding:0 6.34249471%;text-align:fixed;opacity:0;-webkit-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s;} #student .box{height:100%;position:relative;width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;} #student .box:before,#student .box:after{width:100%;height:1px;background-color:rgba(255,255,255,0.2);content:'';display:block;position:absolute;left:0;} #student .box:before{top:.3rem;} #student .box:after{bottom:.3rem;} #student h2,#student h3{font-size:.16rem;font-weight:normal;line-height:1.75em;/* white-space:nowrap; */overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;} #student h3{font-size:.14rem;} #student p{font-size:.14rem;color:rgba(255,255,255,0.3);line-height:1.75em;margin-top:4.35835351%;} #student li a:hover .info{opacity:1;} /*submenu*/ .submenu ul{overflow:hidden;font-size:0;line-height:normal;} .submenu li{display:inline-block;font-size:.16rem;line-height:1.3125em;margin:0 .4rem;position:relative;padding:.29rem 0;} .submenu li:after{width:100%;height:.02rem;background-color:#ff6000;content:'';display:block;position:absolute;left:0;bottom:0;display:none;} .submenu .cur a{color:#ff6000;} .submenu .cur:after{display:block;} /*sideTab*/ #sideTab{overflow:hidden;border-radius:0.05rem;padding:10.34482759% 0;} #sideTab span{width:50%;float:left;display:block;background-color:#1f2123;} #sideTab a { display: block; height: .6rem; line-height: .6rem; text-align: center; color: rgba(255,255,255,0.3); white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } #sideTab a:hover{color:#fff;} #sideTab .cur a{background-color:rgba(255,255,255,0.05);color:#fff;} /*sidebox*/ #sidebox .box{display:none;} #sidebox .box:first-child{display:block;} #sidebox .videoList li{padding-left:10.34482759%;padding-bottom:4.13793103%;} #sidebox .videoList li:last-child{padding-bottom:0;} #sidebox .videoList li:before{left:0.03rem;} #sidebox .scroll{height:7.5rem;} /*frame*/ #frame .pic span{position:absolute;left:0;bottom:0;font-size:.16rem;padding:0 6.34249471%;width:87.31501057%;line-height:1.875em;margin-bottom:2.1141649%;} /*study*/ #study #videoTop{padding:1.68918919% 0 2.02702703%;} #study .title{margin-bottom:.1rem;} /*catalogue*/ #catalogue{padding:8.69565217% 0;} #catalogue .scroll{height:6.3rem;} #catalogue ul{position:relative;padding:.1rem 0;} #catalogue ul:before,#catalogue ul:after{width:.06rem;height:.06rem;border-radius:50%;z-index:2;left:0;content:'';display:block;position:absolute;border:.02rem solid #404244;} #catalogue ul:before{top:0;} #catalogue ul:after{bottom:0;} #catalogue li{font-size:.14rem;line-height:1.875em;color:rgba(255,255,255,0.3);position:relative;padding-left:17.39130435%;padding-bottom:6.52173913%;} #catalogue li:before,#catalogue li:after{content:'';display:block;position:absolute;background-color:#404244;} #catalogue li:before{width:.02rem;height:100%;left:.035rem;top:0;} #catalogue li:after{width:.06rem;height:.06rem;border-radius:50%;z-index:2;left:0;top:.08rem;border:.02rem solid #1f2123;} #catalogue a{color:rgba(255,255,255,0.3);position:relative;padding-right:0.14rem;display:block;} #catalogue a:after{width:0.14rem;height:0.14rem;background:no-repeat center center;background-size:contain;content:'';display:block;position:absolute;right:0;top:.06rem;} #catalogue a:hover{color:#ff6000;} #catalogue .locked a:after{background-image:url(../images/icon_05.png);} #catalogue .playing:after{border-color:#ff6000;background-color:#1f2123;} #catalogue .playing a{color:#ff6000;} /* 播放中 */ #catalogue .playing a:after{width:.12rem;height:.12rem;top:0.07rem;background-image:url(../images/icon_04.png);} #catalogue .played a:after { width: .12rem; height: .12rem; top: 0.07rem; background-image: url(../images/icon_06.png); } #catalogue .look-at a:after{ background-image: url(../images/looked.svg); width: 0.18rem; height: 0.18rem; top: 0.04rem; } #catalogue .look-at a{ right: -0.02rem; } #catalogue .mCSB_outside + .mCSB_scrollTools{right:-0.1rem;} /* 看过的视频 */ #catalogue .finish a:after{width:.14rem;height:.14rem;top:0.07rem;background-image:url(../images/icon_18.png);} /* 购买课程后显示解锁图标 */ #catalogue .unlock a:after{width:.14rem;height:.14rem;top:0.07rem;background-image:url(../images/icon_17.png);} /*popup*/ .popup{position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:10;display:none;} .popup .table{display:table;table-layout:fixed;width:100%;height:100%;} .popup .td{display:table-cell;vertical-align:middle;} .popup .box{background-color:#fff;-webkit-box-shadow:0px 0px 0.2rem rgba(0,0,0,0.2);box-shadow:0px 0px 0.2rem rgba(0,0,0,0.2);margin:0 auto;border-radius:0.05rem;overflow:hidden;} .popup .gray{background-color:#1f2123;} .popup .w800{width:41.66666667%;min-width:8rem;} .popup .w660{width:34.375%;min-width:6.6rem;} .popup .w400{width:20.83333333%;min-width:4rem;} .popup .title{text-align:center;font-size:.24rem;line-height:1.5em;font-weight:normal;color:#333;border-bottom:1px solid #eee;padding:0.22rem 0.5rem;} .popup .ucTitle{border-bottom:1px dotted rgba(255,255,255,0.15);margin-bottom:0;padding-bottom:.33rem;} .popup .info{padding:.25rem .5rem;} .popup .btn{font-size:0;line-height:normal;text-align:center;} .popup .button{display:inline-block;background-color:#ff6000;color:#fff;border-radius:5px;font-size:.16rem;width:2rem;height:.5rem;cursor:pointer;margin:0 .05rem;line-height:.5rem;} .popup .cancel{background-color:#f5f5f5;color:#888;} .popup .back{background-color:#363839;color:rgba(255,255,255,0.3);margin-right:.1rem;} /*discount*/ .discount{display:none;} .discount .info{padding:.4rem .5rem .6rem;} .discount ul{overflow:hidden;} .discount li{float:left;width:44.64285714%;padding-bottom:8.03571429%;color:#555;} .discount li:nth-child(2n){float:right;} .discount .coupon{cursor:pointer;} .discount .top{background-color:#ff6000;border-radius:.1rem;position:relative;overflow:hidden;color:#fff;margin-bottom:.1rem;} .discount .top:before,.discount .top:after{width:.2rem;height:.2rem;border-radius:50%;background-color:#fff;content:'';display:block;position:absolute;bottom:.39rem;} .discount .top:before{left:-0.1rem;} .discount .top:after{right:-0.1rem;} .discount .desc{padding:0.1rem .18rem 0.08rem;font-size:.14rem;line-height:0.16rem;} .discount h3{font-size:.18rem;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;line-height:1.66666667em;margin-bottom:0.03rem;} .discount .intro{height:0.32rem;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;float:left;width:9.5em;} .discount .price{font-size:.18rem;font-weight:bold;line-height:1em;float:right;width:0.79rem;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;} .discount .price i{font-size:.36rem;font-style:normal;line-height:1em;} .discount .limit{clear:both;border-top:1px dashed rgba(255,255,255,0.3);color:rgba(255,255,255,0.6);padding-top:0.08rem;margin-top:0.08rem;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;} .discount .btm{padding:0 0.18rem;font-size:.16rem;line-height:1.875em;} .discount .btm span{display:block;padding-left:.25rem;position:relative;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;} .discount .btm span:before,.discount .btm span:after{content:'';display:block;position:absolute;border-radius:50%;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);} .discount .btm span:before{left:0;width:.12rem;height:.12rem;border:0.02rem solid #777;} .discount .btm span:after{width:0.04rem;height:0.04rem;left:0.055rem;} .discount .btn{border-top:1px solid #eee;padding-top:.5rem;} .discount .selected .btm{color:#ff6000;} .discount .selected .btm span:before{border-color:#ff6000;} .discount .selected .btm span:after{background-color:#ff6000;} /*payment*/ .payment .info{padding:.25rem .6rem;} .payment h3{font-weight:normal;font-size:.18rem;color:#333;line-height:1.5em;margin-bottom:.13rem;} .payment .btn{padding:0.2rem 0 .25rem;} /*courseSel*/ #courseSel{margin-bottom:6.48148148%;} #courseSel ul{overflow:hidden;} #courseSel li{float:left;width:47.22222222%;text-align:center;} #courseSel li:nth-child(2n){float:right;} #courseSel .price{font-size:.14rem;color:#333;line-height:1.125em;margin-bottom:.14rem;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;} #courseSel .price i{font-style:normal;color:#ff6000;font-size:.48rem;line-height:1em;} #courseSel .scope{font-size:.24rem;color:#666;line-height:1.5em;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;} #courseSel .scope span{font-size:.16rem;color:#999;line-height:1.5em;} #courseSel .lesson{font-size:.16rem;color:#666;line-height:1.5em;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;} #courseSel a{display:block;overflow:hidden;border:1px solid #eee;border-radius:0.05rem;padding:.24rem .2rem .22rem;position:relative;} #courseSel .selected a{border-color:#ff6000;} #courseSel .selected a:after{width:.2rem;height:.2rem;content:'';display:block;position:absolute;right:-1px;bottom:-1px;background:url(../images/icon_06.png) no-repeat center center;background-size:contain;} /*offerSel*/ #offerSel{margin-bottom:5.18518519%;} #offerSel .offer{border-top:1px solid #eee;border-bottom:1px solid #eee;font-size:.18rem;line-height:1.5em;color:#666;padding:2.03703704% 5.55555556% 2.03703704% 0;position:relative;cursor:pointer;margin-bottom:5.55555556%;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;} #offerSel .offer:after{width:6px;height:6px;border-right:.02rem solid #888;border-bottom:.02rem solid #888;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:'';display:block;position:absolute;right:.2rem;top:50%;margin-top:-4px;} #offerSel .offer .price{color:#ff6000;margin-left:.1rem;} #offerSel .offer i{font-weight:bold;font-style:normal;font-size:.24rem;line-height:1.5em;} #offerSel .amount{text-align:center;font-size:.16rem;color:#333;line-height:1.875em;} #offerSel .amount#zaijian{text-align: left;margin-bottom: 5.55555556%;} #offerSel .amount span{color:#ff6000;} #offerSel .amount i{font-weight:bold;font-size:.3rem;font-style:normal;line-height:1em;} #offerSel .amount#zaijian i{font-size:.24rem;} /*paymethod*/ #paymethod{overflow:hidden;} #paymethod ul{overflow:hidden;width:105.55555556%;} #paymethod li{float:left;width:100%;padding:0 5.26315789% 5.26315789% 0;} #paymethod a{display:block;} /* #paymethod a.hover { border: 1px solid #ff6000; } */ /* #paymethod a:hover { border: 1px solid #ff6000; } */ #paymethod i{display:block;overflow:hidden;padding-bottom:37.5%;background:no-repeat center center;background-size:contain;} #paymethod .alipay{background-image:url(../images/paymethod_alipay.png);} #paymethod .wechat{background-image:url(../images/paymethod_wechat.png);} #paymethod .union{background-image:url(../images/paymethod_union.png);} .pay-type{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pay-input{ width: 10px; height: 10px; border: 1px solid #ff6000; margin-right: .2rem; border-radius: 3px; } .pay-icon{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center; font-size: .18rem; color: #333333;} .pay-icon img{margin-right: .1rem;} #paymethod a.hover .pay-input{ background-color: #ff6000; background-image: url(../images/icon_11.png); background-position: center; background-size: cover; } /*result*/ .result{font-size:.16rem;color:#666;line-height:1.625em;text-align:center;} .result .info{padding:.6rem;} .result .icon{width:28.57142857%;margin:0 auto;} .result .icon i{display:block;overflow:hidden;padding-bottom:100%;background:no-repeat center center;background-size:contain;} .result .icon .succeed{background-image:url(../images/result_01.png);} .result .icon .failed{background-image:url(../images/result_02.png);} .result .icon .logout{background-image:url(../images/result_03.png);} .result .text{margin-top:8.57142857%;} .result .button{width:1.4rem;height:.4rem;line-height:.4rem;margin-top:8.21428571%;} /*status*/ .status{position:absolute;} .status span{float:right;background-color:rgba(0,0,0,0.5);color:rgba(255,255,255,0.3);font-size:.14rem;display:block;border-radius:0.05rem;line-height:.3rem;padding:0 .3rem 0 .1rem;} .status span:after{width:.12rem;height:.12rem;background:url(../images/icon_07.png) no-repeat 0 0;background-size:100% auto;content:'';display:block;position:absolute;right:.1rem;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);} .status i{font-style:normal;color:rgba(255,255,255,0.3);} .status .active{color:#ff6000;} .status .active:after{background-position:0 33.333%;} .status .end{color:#ff6000;cursor:pointer} .status .end:after{background-position:0 66.666%;} .status .ended:after{background-position:0 100%;} /*liveList*/ #liveList .status{width:91.54334038%;right:4.22832981%;top:0;margin-top:4.22832981%;} #liveList h2{font-size:.16rem;font-weight:normal;line-height:1.875em;position:absolute;bottom:0;width:87.31501057%;left:6.34249471%;margin-bottom:4.65116279%;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;cursor:pointer} #liveList a:hover .pic{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);} /*live*/ #live #videoTop{padding:.20rem 0 .24rem;} /*worksLive*/ #worksLive #videoTop .td{padding-top:.3rem;padding-bottom:.29rem;} #worksLive #videoTop .submenu{padding:0;} #worksLive #videoTop .back{vertical-align:bottom;padding-bottom:.35rem;} /*playList*/ .playList li{margin-bottom:6.89655172%;} .playList .pic{display:table-cell;vertical-align:middle;width:50%;border-radius:.05rem;overflow:hidden;} .playList .pic i{display:block;overflow:hidden;padding-bottom:57.93103448%;background:no-repeat center center;background-size:cover;} .playList .text{display:table-cell;vertical-align:middle;padding-left:6.89655172%;} .playList h3{font-weight:normal;font-size:.16rem;line-height:1.875em;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;margin-bottom:.07rem;} .playList p{font-size:.14rem;line-height:1.5em;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;color:#7a7b7b;} .playList a{display:table;table-layout:fixed;width:100%;} .playList .current h3,.playList .current p{color:#ff6000;} /*bottom*/ #bottom{color:#7a7b7b;font-size:.14rem;line-height:1.75em;position:absolute;bottom:0;left:0;width:100%;padding:1.14583333% 0;} #bottom a{color:#7a7b7b;} #bottom a:hover{color:#ff6000;} #bottom #pagelist{float:none;margin-bottom:0.94444444%;} #bottom #pagelist ul{text-align:center;} #bottom #copyright{float:none;text-align:center;} /*logReg*/ .logReg{position:fixed;left:0;top:0;overflow-y:auto;height:100%;background:no-repeat center center;background-size:cover;color:#7a7b7b;font-size:.14rem;line-height:1.5em;display:table;table-layout:fixed;width:100%;} .logReg .td{display:table-cell;vertical-align:middle;} .logReg footer{ position: absolute; right: 0; bottom: 10px; width: 100%; } .logReg .info{width:22.22222222%;min-width:4rem;margin:0 auto;position:relative;z-index:2;} .logReg .logo{width:73.25%;padding-bottom:22.5%;margin:0 auto 10.5%;position:relative;} .logReg .logo a{position:absolute;left:0;top:0;width:100%;height:100%;background:url(../images/logo_logreg.png) no-repeat center center;background-size:contain;text-indent:-99999em;display:block;overflow:hidden;} .logReg .form{background-color:#1f2123;overflow:hidden;border-radius:0.05rem;} .logReg .form a{color:#ff6000;} .logReg .form a:hover{text-decoration:underline;} .logReg .top{padding:5.5% 7.5% 0;} .logReg h2{font-size:.24rem;font-weight:normal;line-height:1.5em;margin-bottom:.13rem;color:#fff;} .logReg h2 i{font-size:.16rem;color:rgba(122,123,123,0.2);margin-left:.1rem;} .logReg .item{position:relative;margin-bottom:7.35294118%;} .logReg .item label{font-size:.14rem;} .logReg .input{border-bottom:1px solid rgba(255,255,255,0.05);position:relative;margin-bottom:5.88235294%;} .logReg .input label{position:absolute;left:0;top:0;width:100%;height:100%;cursor:text;} .logReg .input i{position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:100%;font-style:normal;} .logReg .verify{padding-right:6em;} .logReg .invite{margin-bottom:11.76470588%;} .logReg .text{display:block;width:100%;font-size:.16rem;line-height:.3rem;padding:.1rem 0;} .logReg label{font-size:.16rem;} .logReg .getCode{font-size:.16rem;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);} .logReg .remember{margin-bottom:10.29411765%;} .logReg .remember label{position:relative;padding-left:.25rem;} .logReg .remember label:before{width:0.16rem;height:0.16rem;border-radius:0.02rem;background:#ff6000 no-repeat 0.03rem center;background-size:0.09rem auto;content:'';display:block;position:absolute;left:0;top: 1px;} .logReg .remember .checked:before{background-image:url(../images/icon_11.png);} .logReg .remember input[type="checkbox"]{ position: absolute; left: 0; top: 3px; opacity: 0; z-index: 8; width: 0.16rem; height: 0.16rem;} .logReg .button{background-color:#ff6000;color:#fff !important;display:block;width:100%;height:.6rem;line-height:.6rem; border-radius:.05rem;font-size:.16rem;cursor:pointer;margin-bottom:7.35294118%;text-align:center;} .logReg .scan{line-height:.16rem;border-top:1px solid rgba(255,255,255,0.05);padding:5.88235294% 0;} .logReg .scan span{float:right;display:block;padding-left:.3rem;} .logReg .scan a{color:#7a7b7b;display:block;background:no-repeat left center;background-size:auto .16rem;padding-left:.3rem;position: relative;} .logReg .scan a:hover{color:#ff6000;text-decoration:none;} .logReg .scan .qq{background-image:url(../images/login_qq.png);padding-left:.25rem;} .logReg .scan .qq a{position: absolute;left: 0;top: 0;width: 100%;height: 100%; opacity: 0;z-index: 5;} .logReg .scan .wx{background-image:url(../images/login_wx.png);} .logReg .type li{border-top:1px solid rgba(255,255,255,0.05);} .logReg .type i{display:block;float:right;font-style:normal;background:no-repeat left center;background-size:auto .16rem;padding-left:.2rem;} .logReg .type .phone{background-image:url(../images/login_phone.png);} .logReg .type .wx{background-image:url(../images/login_wx.png);padding-left:.3rem;} .logReg .type a{display:block;overflow:hidden;color:#7a7b7b;padding:5.58823529% 0;} .logReg .type a:hover{color:#ff6000;text-decoration:none;} .logReg .btm{text-align:center;font-size:.16rem;line-height:1.875em;background-color:#26282a;padding:3.75% 0;} /*logPage*/ #logPage{background-image:url(../images/bg_log.jpg);} /*boxInfo*/ .boxInfo{background-color:#1f2123;border-radius:.05rem;padding:.25rem .3rem;} .boxTitle{border-bottom:1px dotted rgba(255,255,255,0.15);padding-bottom:.11rem;overflow:hidden;font-size:.16rem;} .boxTitle h3{font-weight:normal;font-size:.24rem;line-height:1.5em;float:left;} .boxTitle h3 i{font-style:normal;font-size:.16rem;} .boxTitle span{float:right;color:rgba(255,255,255,0.3);line-height:.36rem;} .boxTitle a{color:rgba(255,255,255,0.3);} .boxTitle a:hover{color:#ff6000;} /*commentBox*/ .commentBox{padding:.55rem .55rem .6rem;margin-top:2.02702703%;} .commentBox .boxTitle{padding-bottom:.32rem;} /*commentForm*/ .commentForm{overflow:hidden;margin-top:2.72108844%;} .commentForm .avatar{float:left;width:.8rem;height:.8rem;border-radius:50%;overflow:hidden;} .commentForm .avatar img{display:block;width:100%;height:100%;border-radius:50%;} .commentForm .form{margin-left:1.1rem;} .commentForm .input{background-color:#37383a;position:relative;color:#fff;font-size:.16rem;line-height:2em;} .commentForm textarea{display:block;width:100%;padding:0.1rem .10rem;height:1.25rem;resize:vertical;color:#fff;font-size:.16rem;} .commentForm .tips{position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:100%;text-align:center;} .commentForm .tips a{background-color:#ff6000;color:#fff;display:inline-block;border-radius:.05rem;margin:0 .1rem;padding:0 .2rem;} .commentForm .btn{text-align:right;font-size:0;line-height:normal;margin-top:.2rem;} .commentForm .button{width:2rem;height:.5rem;line-height:.5rem;text-align:center;border-radius:0.05rem;color:#fff;display:inline-block;font-size:.16rem;background-color:#ff6000;cursor:pointer;margin-left:1.58730159%;} .commentForm .button:hover{opacity:.85;} .commentForm .cancel{background-color:#363839;color:rgba(255,255,255,0.5);} /*commentList*/ .commentList li{overflow:hidden;border-bottom:1px dotted rgba(255,255,255,0.15);padding:.4rem 0 .3rem;} .commentList .avatar{float:left;width:.8rem;height:.8rem;border-radius:50%;overflow:hidden;} .commentList .avatar img{display:block;width:100%;height:100%;border-radius:50%;} .commentList .text{margin-left:1.1rem;font-size:.16rem;color:rgba(255,255,255,0.3);line-height:1.875em;} .commentList h4{font-size:0.18rem;color:#ff6000;line-height:1.25em;margin-bottom:.1rem;} .commentList .cont{margin-bottom:.05rem;} .commentList li li{margin-left:1.1rem;border-bottom:none;padding:.3rem 0 0;} .commentList li li .avatar{width:.4rem;height:.4rem;} .commentList li li .text{margin-left:.7rem;} /*subNav*/ #subNav{margin-bottom: 50px;} #subNav ul{overflow:hidden;font-size:0;line-height:normal;} #subNav li{display:inline-block;font-size:.16rem;line-height:1.875em;margin-right:.3rem;position:relative;} #subNav li:after{width:100%;height:.02rem;background-color:#ff6000;content:'';display:block;position:absolute;left:0;bottom:0;display:none;} #subNav .cur a{color:#ff6000;} #subNav .cur:after{display:block;} /*myCourse*/ #myCourse>h4{ font-weight: 400; } #myCourse ul{ display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -10px; -ms-flex-wrap: wrap; flex-wrap: wrap; } #myCourse li{ line-height:2em; -webkit-box-sizing: border-box; box-sizing: border-box; width: 33.33%; padding: 0 10px; margin-top: 20px; } #myCourse .pic{width:60.34482759%;display:table-cell;vertical-align:middle;position:relative;overflow:hidden;} #myCourse .pic i{display:block;overflow:hidden;padding-bottom:57.14285714%;background:no-repeat center center;background-size:85%;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s;cursor:pointer} #myCourse .text{display:table-cell;vertical-align:middle;padding:3.44827586% 5.17241379%;} #myCourse .status{right:.2rem;bottom:.2rem;} #myCourse .status .end{color:rgba(255,255,255,0.3);} #myCourse .pending,#myCourse .ended span{color:#ff6000;cursor:pointer} #myCourse .process{width:80%;margin-bottom:3.52941176%;} #myCourse .top i{font-style:normal;float:right;font-size:.12rem;} #myCourse .btm{overflow:hidden;height:.06rem;border-radius:.03rem;background-color:rgba(255,255,255,0.1);position:relative;} #myCourse .btm i{position:absolute;left:0;top:0;height:100%;width:0;background-color:#ff6000;border-radius:.03rem;display:block;} #myCourse h2{font-size:0.16rem;font-weight:normal;line-height:1.5em;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;color:#fff;margin-bottom:.06rem;} #myCourse h2 span{display:block;} #myCourse time{display:block;} #myCourse a{display:table;table-layout:fixed;width:100%;border-radius:0.05rem;overflow:hidden;background-color:rgba(255,255,255,0.05);color:#7a7b7b;} #myCourse a:hover .pic i{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);} /*contact*/ #contact{overflow:hidden;} #contact .box{width:49.16666667%;float:left;} #contact .box:nth-child(2n){float:right;} #contact .boxInfo{padding-right:0.55rem;} #contact .scroll{height:7.5rem;} #contact .mCSB_outside + .mCSB_scrollTools{right:-0.3rem;} /*message*/ #message .commentForm{margin:0.4rem 0;} #message .commentList{margin-left:1.1rem;border-top:1px dotted rgba(255,255,255,0.15);} #message .commentList .text{margin-left:0;} #message .commentList li{margin-left:0;} #message .commentList li li .text{margin-left:0.7rem;} /*ucBox*/ .ucBox{float:left;width:49.16666667%;padding-bottom:1.66666667%;} .ucBox.right{float:right;} .ucBox.np{padding-bottom:0;} /*ucTitle*/ .ucTitle{text-align:center;color:#ff6000;font-size:.24rem;line-height:1.5em;margin-bottom:0.33rem;} /*ucInfoBox*/ .ucInfoBox{padding:0.43rem 4.44444444% 0.3rem;border-radius:0.05rem;background-color:#1f2123;} .ucInfoBox table{border:none;text-align:center;font-size:.16rem;line-height:1.875em;} .ucInfoBox th{border:none;background-color:rgba(255,255,255,0.15);font-weight:normal;} .ucInfoBox td{border:none;border-bottom:1px dashed rgba(255,255,255,0.15);} .ucInfoBox .title{text-align:left;} .ucInfoBox .operate{width:9.75609756%;} .ucInfoBox .operate a{color:rgba(255,255,255,0.5);} .ucInfoBox .operate a:hover{color:#ff6000;} .ucInfoBox .mCSB_outside + .mCSB_scrollTools{right:-0.4rem;} /*ucButton*/ .ucButton{width:2rem;height:.5rem;color:#fff;background-color:#ff6000;text-align:center;line-height:.5rem;border-radius:.05rem;display:inline-block;cursor:pointer;font-size:.16rem;} .ucButton:hover{opacity:.85;} /*dot*/ .dot{display:block;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;position:relative;padding-left:.13rem;} .dot:before{width:.03rem;height:.02rem;border-radius:50%;background-color:#fff;content:'';display:block;position:absolute;left:.03rem;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);} .dot:hover{color:#ff6000;} .dot:hover:before{background-color:#ff6000;} /*person*/ #person{position:relative;border-bottom:1px dashed rgba(255,255,255,0.15);padding:.2rem 0 .32rem;} #person ul{margin-right:2rem;} #person li{font-size:.18rem;line-height:.3rem;padding:.06rem 0;height:.3rem;} #person span{display:block;} #person .l{float:left;} #person .r{margin-left:1.7rem;color:rgba(255,255,255,0.3);} #person .ucButton{position:absolute;right:0;bottom:0.29rem;cursor:default;} #person .ucButton:hover{opacity:1;} /*orderBox*/ #orderBox li{display:table;table-layout:fixed;width:100%;font-size:.16rem;line-height:.3rem;padding:.15rem 0;border-bottom:1px dashed rgba(255,255,255,0.15);} #orderBox span{display:table-cell;vertical-align:middle;} #orderBox .l{width:70%;} #orderBox .r{width:30%;} #orderBox i{float:right;font-style:normal;padding:0 .1rem;border-radius:.05rem;} #orderBox .paid,#orderBox .completed{background-color:#ff6000;color:#fff;} #orderBox .cancelled{background-color:rgba(255,255,255,0.1);color:rgba(255,255,255,0.3);} #orderBox .pending{background-color:#b58467;} /*notice*/ #notice li{font-size:.16rem;line-height:.3rem;border-bottom:1px dashed rgba(255,255,255,0.15);padding:.15rem 0;} #notice time{float:right;color:rgba(255,255,255,0.3);} #notice a{margin-right:.8rem;} /*noticeList*/ #noticeList .scroll{height:7.35rem;} #noticeList th,#noticeList td{padding:0.91463415% 0;} #noticeList .date{width:19.51219512%;} #noticeList th.title{padding-left:16.46341463%;} #noticeList td.title{padding-left:3.04878049%;padding-right:3.04878049%;} /*orderList*/ #orderList .scroll{height:6.75rem;} #orderList th,#orderList td{padding:0.15rem 0;} #orderList .title{width:30.48780488%;} #orderList .date{width:13.41463415%;} #orderList .state{text-align:right;padding-right:1.4rem;} #orderList .state span{display:inline-block;border-radius:0.03rem;padding:0 0.1rem;} #orderList .info{padding-left:.6rem;padding-right:.7rem;} #orderList th.title{text-align:center;} #orderList th.state{padding:0 1.4rem;} #orderList td.title{padding-left:.5rem;padding-right:.5rem;} #orderList td.state{padding:0 1.3rem;} #orderList .pending .state span{background-color:#b58467;} #orderList .pending .state span.cancel_but{cursor: pointer;background-color:#ff6000;} #orderList .completed .state span{background-color:#ff6000;} #orderList .cancelled{color:rgba(255,255,255,0.3);} #orderList .cancelled a,#orderList .cancelled a:hover{color:rgba(255,255,255,0.3);} #orderList .cancelled a:before,#orderList .cancelled a:hover:before{background-color:rgba(255,255,255,0.3);} #orderList .cancelled .state span{background-color:rgba(255,255,255,0.1);color:rgba(255,255,255,0.3);} /*orderDetails*/ .orderDetails{color:rgba(255,255,255,0.3);line-height:.2rem;display:none;} .orderDetails .box{display:table;table-layout:fixed;width:100%;} .orderDetails .td{display:table-cell;vertical-align:middle;padding-right:.1rem;} .orderDetails .pic{width:1.75rem;} .orderDetails .pic i{display:block;overflow:hidden;padding-bottom:57.14285714%;background:no-repeat center center;background-size:cover;border-radius:0.03rem;} .orderDetails .num{text-align:left;} .orderDetails .num,.orderDetails .coupon{text-align:left;} .orderDetails p{padding:0.12rem 0;} .orderDetails p span{color:#ff6000;} .orderDetails p img{display:block;width:auto;height:.2rem;margin:0 auto;} .orderDetails .arrow{width:.21rem;height:.13rem;background:url(../images/icon_14.png) no-repeat center center;background-size:contain;margin:0 auto;cursor:pointer;} /*points*/ #points{overflow:hidden;padding:.3rem 0;display:table;table-layout:fixed;width:100%;} #points .td{display:table-cell;vertical-align:middle;} #points .l{font-size:.2rem;line-height:1.125em;font-weight:bold;width:3em;white-space: nowrap;} #points .m{color:#ff6000;font-style:normal;line-height:1em;font-size:0.36rem;} #points .r{width:2rem;} /*coupon*/ #coupon{border-bottom:1px dashed rgba(255,255,255,0.15);padding:0.37rem 0 0.21rem;} #coupon .info{padding:0.1rem .18rem 0.08rem;font-size:.14rem;line-height:0.16rem;background-color:#ff6000;border-radius:.1rem;position:relative;overflow:hidden;color:#fff;margin:0 .05rem;} #coupon .info:before,#coupon .info:after{width:.2rem;height:.2rem;border-radius:50%;background-color:#1f2123;content:'';display:block;position:absolute;bottom:.39rem;} #coupon .info:before{left:-0.1rem;} #coupon .info:after{right:-0.1rem;} #coupon h3{font-size:.18rem;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;line-height:1.66666667em;margin-bottom:0.03rem;} #coupon .intro{/*height:0.32rem; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;*/overflow:hidden;float:left;width:9.5em;} #coupon .price{font-size:.18rem;font-weight:bold;line-height:1em;float:right;width:0.89rem;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;} #coupon .price i{font-size:.36rem;font-style:normal;line-height:1em;} #coupon .price.not,.coupon .price.not{overflow: visible;} #coupon .limit{clear:both;border-top:1px dashed rgba(255,255,255,0.3);color:rgba(255,255,255,0.6);padding-top:0.08rem;margin-top:0.08rem;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;} #coupon .slick-track{margin:0;} #coupon .slick-load{padding:0 .2rem;} #coupon .slick-arrow{width:.09rem;height:.14rem;text-indent:-99999em;overflow:hidden;background:no-repeat center center;background-size:contain;content:'';display:block;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);font-size:0;} #coupon .slick-prev{left:0;background-image:url(../images/icon_13.png);} #coupon .slick-next{right:0;background-image:url(../images/icon_12.png);} /*withdrawalForm*/ #withdrawalForm .charge,#withdrawalForm .result{display:none;} #withdrawalForm .info{padding-top:.43rem;padding-bottom:.5rem;} #withdrawalForm .intro{font-size:.16rem;line-height:2.25em;padding:.3rem 0;height:1.72rem;} #withdrawalForm .form{padding:.2rem 0;} #withdrawalForm .btn{border-top:1px dotted rgba(255,255,255,0.15);padding-top:.35rem;} #withdrawalForm .item{overflow:hidden;padding:.1rem 0;color:rgba(255,255,255,0.3);font-size:.16rem;line-height:.3rem;} #withdrawalForm .label{display:block;float:left;line-height:.4rem;color:#fff;} #withdrawalForm .ml{margin-left:1.15rem;} #withdrawalForm .input{border:1px solid rgba(255,255,255,0.2);width:2.38rem;border-radius:.05rem;overflow:hidden;} #withdrawalForm .text{font-size:.16rem;line-height:.3rem;height:.3rem;padding:.05rem 5%;width:90%;color:#fff;} #withdrawalForm .type{display:none;} #withdrawalForm .tips{line-height:.4rem;position:relative;padding-right:1.45rem;} #withdrawalForm .tips a{color:#ff6000;text-decoration:underline;position:absolute;right:0;top:0;} #withdrawalForm .radio{overflow:hidden;padding:.05rem 0;} #withdrawalForm .radio label{position:relative;display:block;float:left;padding-left:.25rem;padding-right:.5rem;} #withdrawalForm .radio label:before{width:0.16rem;height:0.16rem;background:url(../images/icon_15.png) no-repeat 0 0;background-size:100% auto;content:'';display:block;position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);} #withdrawalForm .radio .selected:before{background-position:0 100%;} #withdrawalForm .radio input[type="radio"]{display:none;} #withdrawalForm .result .text{color:#666;} /*modifyInfo*/ #modifyInfo .info{padding-top:.43rem;padding-bottom:.6rem;} #modifyInfo .btn{padding-top:.6rem;} #modifyInfo .item{overflow:hidden;padding:0.15rem 0;position:relative;border-bottom:1px dotted rgba(255,255,255,0.15);} #modifyInfo .label{display:block;float:left;color:#fff;font-size:.16rem;line-height:.3rem;} #modifyInfo .mg{margin:0 1.2rem 0 1.5rem;} #modifyInfo .editor,#modifyInfo .getCode{position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);} #modifyInfo .editor{width:1rem;} #modifyInfo .editor span{background-color:rgba(255,255,255,0.1);display:block;color:rgba(255,255,255,0.5);cursor:pointer;border-radius:0.03rem;text-align:center;} #modifyInfo .editor i{display:block;width:0.16rem;height:0.18rem;background:url(../images/icon_16.png) no-repeat center center;background-size:contain;margin:0 auto;cursor:pointer;} #modifyInfo .text{font-size:.16rem;line-height:.3rem;height:.3rem;display:block;width:100%;color:rgba(255,255,255,0.3);} #modifyInfo .wx{background:url(../images/icon_wechat.png) no-repeat left center;background-size:0.22rem auto;text-indent:.3rem;} #modifyInfo .getCode{width:1.2rem;} #modifyInfo .send{display:block;height:.36rem;background-color:#363839;border-radius:0.03rem;text-align:center;line-height:.36rem;color:rgba(255,255,255,0.5);} #modifyInfo .bind{display:none;} #modifyInfo .bind .info{padding-left:1.45rem;padding-right:1.45rem;} #modifyInfo .bind .mg{margin-left:1rem;} #modifyInfo #bindWechat .ucTitle{border-bottom:none;} #modifyInfo .qrcode{width:2rem;margin:0 auto .2rem;height:auto;} #modifyInfo .qrcode img{display:block;width:100%;height:auto;} #modifyInfo .tips{text-align:center;font-size:.18rem;line-height:.2rem;} /* dhcoupon */ .change{ margin-top: 0.20rem; text-align: right; } #dhcoupon .item{overflow:hidden;padding:0.15rem 0;position:relative;border-bottom:1px dotted rgba(255,255,255,0.15);} #dhcoupon .info{padding-top:.43rem;padding-bottom:.6rem;} #dhcoupon .btn{padding-top:.6rem;} #dhcoupon .label{display:block;float:left;color:#fff;font-size:.16rem;line-height:.3rem;} #dhcoupon .mg{margin:0 1.2rem 0 1.5rem;} #dhcoupon .text{font-size:.16rem;line-height:.3rem;height:.3rem;display:block;width:100%;color:rgba(255,255,255,0.3);} /* */ .back-btn{margin: 20px 0 0 0; font-size: 14px;width: 70px;height: 30px;background-color: #ff6600;text-align: center;line-height: 30px;border-radius: 5px;} /* 视频播放提示 */ .play-tips{ position: absolute; bottom: 12%; left: 1%; background-color: rgba(0,0,0,0.5); color: #fff; padding: 10px; border-radius: 20px; display: none; z-index: 10; } .play-tips span{ background-image: url(../images/icon_19.png); width: .16rem; height: .16rem; background-position: center; background-size: cover; display: inline-block; vertical-align: middle; margin-right: 10px; cursor: pointer; } .h50{height: 50px;} .layui-layer-btn a{font-size: 14px;} .layui-layer-dialog .layui-layer-padding{color: #333;} .layui-layer-btn{height: 50px;} body .p-item .intro, body .p-item .price{ float: none; width: 48.5%; } body .p-item{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* 设置滚动条的样式 */ #courseList .scroll::-webkit-scrollbar, .my-scroll::-webkit-scrollbar{ width:6px; } /* 滚动槽 */ #courseList .scroll::-webkit-scrollbar-track, .my-scroll::-webkit-scrollbar-track{ -webkit-box-shadow:#ff6000; border-radius:6px; } /* 滚动条滑块 */ #courseList .scroll::-webkit-scrollbar-thumb, .my-scroll::-webkit-scrollbar-thumb{ border-radius:6px; background:#ff6000; -webkit-box-shadow:#ff6000; } #courseList .scroll::-webkit-scrollbar-thumb:window-inactive, .my-scroll::-webkit-scrollbar-thumb:window-inactive{ background: #ff6000; } .puop-content{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; z-index: 99; display: none; } .puop-content .puop-body{ max-width: 1000px; width: 80%; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 50px auto; border: solid 4px #333; background: #000; border-radius: 15px; padding: 20px; position: relative; padding-right: 10px; } .puop-content .puop-body>h2{ text-align: center; margin-bottom: 0.3rem; color: #ff6000; } .puop-content .puop-body .puop-close{ position: absolute; right: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; background: url(../images/close.svg) no-repeat center/100%; cursor: pointer; } .puop-content .puop-body .txt{ height: 75vh; overflow-y: auto; padding-right: 10px; } /* 视频 */ .playwindow{ -moz-user-select:none; /*火狐*/ -webkit-user-select:none; /*webkit浏览器*/ -ms-user-select:none; /*IE10*/ /*早期浏览器*/ user-select:none; } /* 全屏 */ .playwindow.full{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99; background: #000; } .playwindow.full .fullback .playbox{ max-width: 100%; padding: 0; } /* .playwindow.full .videobox video{ height: calc(100vh - 77px); } */ /* 播放器容器 */ .playbox{ background: #000; padding: 40px 10px 0 10px; } /* 电影模式 */ .fullback.active{ position: fixed; background: #000; left: 0; top: 0; z-index: 100; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .fullback.active .playbox{ max-width: 1000px; } /* 小窗口模式 */ .videobox.small{ position: fixed; border: solid 5px #666; border-radius: 5px; z-index: 99; position: fixed; right: 10px; bottom: 50px; } .prism-player{ position: absolute !important; left: 0; top: 0; } .prism-player .prism-big-play-btn{ left: 50% !important; top: 50% !important; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .prism-player .prism-liveshift-progress .prism-progress-played,.prism-progress .prism-progress-played{ background: #ff6000 !important; } .prism-player .prism-controlbar{ display: block !important; } /* .videobox{ position: relative; } */ .videobox video{ width: 100%; /* object-fit: cover; */ } /* 进度条 */ .progress{ height: 5px; background: #999; border-radius: 5px; overflow: hidden; position: relative; cursor: pointer; } .progress .now{ position: absolute; left: 0; top: 0; width: 0; height: 100%; background: #ff6000; -webkit-transition: all .5s linear; -o-transition: all .5s linear; transition: all .5s linear; } /* 控件区 */ .consoles{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 45px; font-size: 14px; color: #fff; } .group1,.group2{ display: -webkit-box; display: -ms-flexbox; display: flex; padding: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .group1>*{ margin-right: 10px; } .group2>*{ margin-left: 10px; } /* 全屏按钮 */ .fullscreen{ width: 25px; height: 25px; background: url(../images/fullscreen.svg) no-repeat center/100%; cursor: pointer; } /* 电影按钮 */ .movie{ width: 22px; height: 16px; border: solid 2px #fff; border-radius: 5px; cursor: pointer; } /* 播放/暂停 */ .play{ width: 25px; height: 25px; background: url(../images/play.svg) no-repeat center/100%; cursor: pointer; } .play.pause{ background-image: url(../images/pause.svg); } /* 视频上播放/暂停 */ .videobox.show-play .video-play p{ display: block; } .video-play{ position: absolute; left: 0; top: 0; width: 100%; height: 98%; z-index: 5; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; } .video-play p{ width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: #ff6000 url(../images/play.svg) no-repeat center/60%; display: none; } .videobox.pause .video-play p{ background-image: url(../images/pause.svg); } /* 停止 */ .stop{ width: 18px; height: 16px; background: #fff; cursor: pointer; } /* 倍速 */ .speed-box{ position: relative; } .speed-box .speed-list{ position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 80px; display: none; padding-bottom: 32px; z-index: 8; } .speed-box:hover .speed-list{ display: block; } .speed-box .speed-content{ border: solid 1px #333; background: #000; } .speed-box .speed-content div{ line-height: 30px; text-align: center; cursor: pointer; } .speed-box .speed-content div:hover{ background: rgba(255,255,255,.6); } /* 音量 */ .volume{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .volume .muted{ width: 25px; height: 25px; background: url(../images/volume.svg) no-repeat 0 center/100%; cursor: pointer; } .volume.active .muted{ background-image: url(../images/volume_off.svg); } .volume .volume-change{ width: 60px; height: 4px; background: #ccc; border-radius: 4px; position: relative; } .volume .vnow{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: orangered; border-radius: 4px; } .volume .v-slider{ position: absolute; left: 54px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: #fff; cursor: pointer; z-index: 5; } .volume .v-slider:after{ content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; background: #000; } .volume .volume-box{ position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 12px; width: 66px; } .volume .show-value{ position: absolute; left: 0; bottom: 100%; font-size: 12px; color: #fff; text-align: center; width: 100%; display: none; } #videoPlay.fullscreen .bullet-chat, #videoPlay.fullscreen .shuiyin{ z-index: 9999999; } /* 直播 */ .zhibo-section{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 30px 0 0; } .zhibo-section .poster{ width: 300px; } .zhibo-section .poster img{ width: 100%; } .zhibo-section .zs-video{ width: calc(100% - 350px); } .zhibo-section .zs-video video, .zhibo-section .zs-video .video-js{ height: 75vh; } .zhibo-section .zs-video .vjs-fullscreen video, .zhibo-section .zs-video .video-js.vjs-fullscreen{ height: 100%; } .download .flex{margin-top: .2rem;display: flex;justify-content: space-between;flex-wrap: wrap;align-items: flex-start;} .download .flex .box{width: 36%;padding: .4rem .5rem;background-image: url('../images/download-bg.png');background-size: cover;box-sizing: border-box;border-radius: .2rem} .download .flex .box .name{font-size: .38rem;font-weight: bold;color: #fff;text-align: center;} .download .flex .box .text{margin-top: .4rem;font-size: .24rem;text-align: center;line-height: 1.8;} .download .flex .box .list{margin-top: .3rem;} .download .flex .box .list ul{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;margin: -2%;} .download .flex .box .list ul li{width: 46%;margin: 2%;border: .02rem solid #fff;border-radius: .1rem;box-sizing: border-box;} .download .flex .box .list ul li a{display: flex;align-items: center;justify-content: center;width: 100%;height: .8rem;font-size: .2rem;color: #fff;} .download .flex .box .list ul li img{margin-right: .1rem;} .download .flex .box .list ul li:nth-of-type(1) a img{height: .5rem;} .download .flex .box .list ul li:nth-of-type(2) a img{height: .3rem;} .download .flex .box .list ul li:nth-of-type(3) a img{height: .2rem;} .download .flex .box .list ul li:nth-of-type(4) a img{height: .24rem;} .download .flex .img{width: 59%;display: flex;flex-wrap: wrap;margin: -1%;} .download .flex .img img{width: 23%;margin: 1%;}