.content{
display: block;
width: 1230px;
padding-bottom:20px;
margin:25px auto 0;
overflow: hidden;
}
.content .left-box{
display: inline-block;
width: 100%;
float: left;
flex:1;
-webkit-flex: 1;
-moz-flex:1;
-ms-flex:1;
overflow: hidden;
}
.content .right-box{
display: inline-block;
width: 260px;
float: right;
height:auto;
margin-left: 20px;
}
.play-bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
background: rgba(0,0,0,.5);
text-align: center;
display: none;
}
.play-bg span {
width: 35px;
height: 35px;
background-color: #fff;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 2px #bdbdbd;
cursor: pointer;
text-align: center;
position: absolute;
left: 50%;
margin-left: -17px;
top: 50%;
margin-top: -17px;
}
.play-bg span i {
display: inline-block;
width: 0;
height: 0;
border-color: transparent #333;
border-width: 10px 0px 10px 16px;
border-style: solid;
float: left;
margin-left: 13px;
margin-top: 8px;
}
#news .banner {
background: url(../images/news-banner.jpg) no-repeat center;
height: 200px;
}

.play-bg span.cur{
animation: myfirst 2s linear .1s infinite;
-webkit-animation: myfirst 2s linear .1s infinite;
}
@keyframes myfirst {
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes myfirst {
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
/*相关推荐*/
.sub-tab{
padding: 20px;
}
.sub-tab .title{
border-bottom: 1px solid #eee;
padding-bottom: 10px;
font-size: 16px;
font-weight: bold;
}
.sub-tab li{
width: 100%;
position: relative;
height: 67px;
margin-top: 10px;
padding: 5px 0;
border-radius: 5px;
}
.sub-tab li:hover{
box-shadow: 0px 0px 8px #3b9eff;
}
.sub-tab .select li a {
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
}
.sub-tab li p{
left: 105px !important;
padding: 0 !important;
}
.sub-tab li p:hover{
color:#3b9eff;
}
.sub-tab .select li a .pic{
border: 1px solid #eaeaea;
width: 110px;
width: 90px;
height: 65px;
text-align: center;
line-height: 63px;
overflow: hidden;
display: inline-block;
position: relative;
vertical-align: middle;
}
.sub-tab .select li a .pic img{
width: 100%;
height: 100%;
}
.sub-tab .select li a .pic span {
display: block;
position: absolute;
bottom: 0;
right: 0;
background: rgba(0,0,0,.5);
height: 16px;
line-height: 16px;
color: #ccc;
font-size: 12px;
padding: 0 5px;
}
.sub-tab .select li a  p {
position: absolute;
left: 126px;
top: 0;
text-align: justify;
height: 40px;
padding: 0 10px 0 0;
color:#333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 180px;
}
.sub-tab .select li a  p.content-like {
top: 45px;
right: 0;
padding: 0;
height: 20px;
}
.sub-tab .select li a  p span.mod-like {
/*float: right;*/
vertical-align: middle;
}
.comment{
display: block;
margin-top: 20px;
overflow: hidden;
}
.comment-right{
width: 320px;
background: #fff;
border: 1px solid #eee;
float: right;
}
.comment-left{
background: #fff;
width: 890px;
float: left;
border: 1px solid #eee;
}
.spv-comment{
width: 100%;
margin-top: 10px;
}
.spv-comment .area-form,.spv-comment .area-box{
padding: 20px 20px 0px 20px;
}
.spv-comment .comment-form {
display: table;
width: 100%;
box-sizing: border-box;
position: relative;
}
.spv-comment .comment-form .form-cell {
display: table-cell;
vertical-align: top;
width: 100%;
}
.spv-comment .comment-form .form-cell .form-user-info {
display: inline-block;
margin-bottom: 10px;
}
.form-cell .form-user-info a {
display: inline-block;
color: #ff8f2f;
}
.comment-form .form-cell .form-wordlimit {
float: right;
color: #909090;
margin-bottom:10px;
}
.comment-form .form-cell .form-wordlimit span {
font-family: Constantia,Georgia;
font-size: 18px;
font-weight: 400;
}
.comment-form .form-cell .form-textarea {
width: 100%;
margin-top: 5px;
position: relative;
}
.comment-form .form-cell .form-textarea textarea {
min-height: 81px;
width: 100%;
padding: 4px;
box-sizing: border-box;
line-height: 20px;
font-size: 12px;
border: 1px solid #d4d9dd;
box-shadow: inset 0 3px 3px #ebebeb;
outline: 0;
resize: vertical;
overflow: hidden;
}
.comment-form .form-cell .form-toolbar {
margin-top: 0;
position: relative;
z-index: 102;
zoom: 1;
padding: 0;
background: 0;
border: 0;
box-shadow: none;
}
.form-toolbar .form-btn-submit {
float: right;
}
.form-toolbar .form-tool {
display: inline-block;
margin-right: 10px;
position: relative;
vertical-align: middle;
padding: 10px 0 0;
width: 100%;
}
.form-toolbar .form-action .form-btn-submit{
display: inline-block;
min-width: 79px;
height: 28px;
line-height: 28px;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid #d1d1d1;
background-color: #f2f2f2;
color: #555;
}
/*评论展示*/
.area-box {
position: relative;
padding-top: 50px;
}
.area-box .comment-tab {
height: 48px;
line-height: 46px;
width: 100%;
border: 0;
position: relative;
top: 0;
border-bottom: 1px solid #e5e5e5;
font-size: 16px;
color: #555;
vertical-align: middle;
}
.area-box .comment-tab em {
font-style: normal;
font-weight: 400;
font-size: 12px;
margin: 0 3px;
color: #909090;
}
.area-box .comment-tab .comment-tab-left {
float: left;
color: #ff8f2f;
border-bottom: 2px solid #ff8f2f;
background: #fff;
font-weight: 700;
outline: 0;
cursor: default;
}
.comment-list{
margin-top: 5px;
}
.comment-list li{
padding: 15px 10px;
border-bottom: 1px solid #eee;
overflow: hidden;
}
.comment-list li:last-child{
border-bottom: none;
}
.comment-list li #not-comment{
height: 100px;
text-align: center;
line-height: 100px;
color: #888;
font-size: 18px;
}
.comment-list li .user-avatar{
display: inline-block;
width: 50px;
height:50px;
margin-right: 15px;
float: left;
}
.comment-list li .user-avatar a{
display: inline-block;
}
.comment-list li .user-avatar img{
width: 50px;
height:50px;
border-radius: 50%;
}
.comment-list li .comment-section{
display: inline-block;
float: left;
}
.comment-list li .comment-section .user-info{
width: 100%;
font-size: 14px;
}
.comment-section .user-info .user-name{
color: #ff8f2f;
}
.comment-section .user-info .comment-timestamp{
margin: 0 10px 0 16px;
font-size: 12px;
color: #bbb;
}
.comment-list li .comment-section .comment-text{
padding-top: 10px;
margin-bottom: 5px;
font-size: 14px;
}
.comment-list .comment-handle span{
padding-right:15px;
cursor: pointer;
color:#888;
}
.comment-list .comment-handle span .fn-buxihuan{
font-size: 14px;
vertical-align: middle;
}




.novel-main{
margin: 20px 0 10px;
overflow: hidden;
}
.novel-main .novel-left{
display: inline-block;
float: left;
background: #fff;
box-shadow: 0 0 8px 1px #e4e5e6;
padding: 0 10px;
width: 870px;
}
.novel-main .novel-right{
width: 320px;
display: inline-block;
background: #fff;
box-shadow: 0 0 8px 1px #e4e5e6;
float: right;
min-height: 400px;
}
.novel-left li{
border-bottom: 1px solid #eee;
padding: 20px 10px;
overflow: hidden;
}
.novel-left li a:hover{

}
.novel-left li:last-child{
border-bottom: none;
}
.novel-left li .novelPic{
display: inline-block;
width: 150px;
height:100px;
float: left;
}
.novel-left li .novelPic img{
width: 150px;
height:100px;
}
.novel-left li .novel-box{
display: inline-block;
vertical-align: middle;
height:100px;
width: 680px;
float: right;
}
.novel-left li .novel-box p{
font-size: 16px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.novel-left li .novel-box .text{
font-size: 14px;
color: #888;
padding: 10px 0;
display: block;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
height: 33px;
text-align: justify;
margin-bottom: 8px;
word-wrap: break-word;
}

.novel-left li .novel-box .box-f{
display: inline-block;
float: left;
}
.novel-left li .novel-box .box-f span{
margin-right:10px;
}
.novel-left li .novel-box .box-f span i{
color: #9e9e9e;
}
.novel-left li .novel-box .box-f span:last-child{
margin-right: 0;
}
.novel-left li .novel-box .box-f span:last-child i{
background-size: 20px auto;
height: 24px;
}
.novel-left li .novel-box .box-r{
display: inline-block;
float: right;
}
.novel-left li .novel-box .box-r span{
display: inline-block;
padding: 2px 10px;
margin-right: 5px;
border-radius: 12px;
color: #848080;
border: 1px solid #afacac;
}
.novel-right .sub-tab .select li a p{
color:#333;
}

.novel-main .novel-left h1{
padding: 10px 0 7px 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.novel-main .novel-left .source var{
font-style: normal;
font-size: 14px;
}
.novel-main .novel-left .source{
height:30px;
padding-left: 10px;
margin-top: 10px;
}
.novel-main .novel-left .source .see{
margin-left: 10px;
padding: 0;
background: transparent;
color: #888;
cursor: pointer;
vertical-align: middle;
}
.novel-main .novel-left .source span{
display: inline-block;
padding: 5px 10px;
margin-right: 5px;
border-radius: 12px;
color: #fff;
background: #f9725c;
}
.novel-main .novel-left .paragraph{
padding: 30px;
border-top: 1px solid #eee;
margin-top: 10px;
}
.novel-main .novel-left .paragraph p{
text-indent: 27px;
/*margin-bottom: 10px;*/
line-height: 25px;
font-size: 14px;
text-align: justify;
word-wrap: break-word;
}
.novel-main .novel-left .paragraph img{
display: block;
margin: 30px auto;
max-width: 100%;
}
.novel-main .novel-left .cut{
padding: 30px 30px;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
overflow: hidden;
}
.novel-main .novel-left .cut a{
cursor: pointer;
display: inline-block;
}
.novel-main .novel-left .cut a i{
font-size: 30px;
vertical-align: middle;
width: auto;
color: #888;
}
.novel-main .novel-left .cut a.next{
float: right;
}
.novel-main .novel-left .cut a:hover{
color:#3b9eff;
}
.cut .prev-btn{
display: inline-block;
width: auto;
vertical-align: middle;
}
.cut .prev-box{
display: inline-block;
width: 170px;
height: 80px;
background: #eaeaea;
vertical-align: middle;
position: relative;
}
.cut .prev-box:hover{
background: rgba(59, 158, 255, 0.47);
}
.cut .prev-box .img-bg{
display: block;
width: 100%;
height:80px;
text-align: center;
line-height: 79px;
}
.cut .prev-box .img-bg img{
max-width: 100%;
max-height: 100%;
}
.cut .prev-box p{
font-size: 12px;
color: #fff;
padding: 0 4px;
text-align: justify;
position: absolute;
bottom: 0;
background: rgba(51, 51, 51, 0.41);
min-height: 25px;
right: 0;
left: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 25px;
}










.software-lesson .lesson-tit { line-height: 60px; font-size: 18px; color: #666; }
.software-lesson .lesson-cont { margin: 0 -20px 0px 0; }
.software-lesson .lesson-item { width: 608px; height: 184px; border: 1px solid #efefef; padding: 9px; position: relative; background: #fff; margin: 0 20px 20px 0; -webkit-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; }
.software-lesson .lesson-item .item-img { display: block; width: 268px; height: 100%; overflow: hidden; }
.software-lesson .lesson-item .item-img img { display: block; width: 100%; height: 100%; }
.software-lesson .lesson-item .img-info { position: relative; margin-left: 281px; height: 100%; }
.software-lesson .lesson-item .img-info .les-tit { font-size: 18px; color: #333; font-style: normal; font-weight: normal; line-height: 30px; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; }
.software-lesson .lesson-item .img-info .les-tit:hover { text-decoration: underline; color: #f30; }
.software-lesson .lesson-item .img-info P { line-height: 26px; font-size: 14px; color: #999; }
.software-lesson .lesson-item .img-info .les-num span { vertical-align: middle; }
.software-lesson .lesson-item .img-info .les-num em { vertical-align: middle; font-weight: normal; color: #999; margin: 0 5px; }
.software-lesson .lesson-item .img-info .to-learn-btn { display: block; width: 120px; height: 36px; line-height: 36px; text-align: center; font-size: 16px; color: #333; border: 1px solid #999; -webkit-border-radius: 24px; border-radius: 24px; position: absolute; left: 0; bottom: 0; }
.software-lesson .lesson-item .img-info .to-learn-btn:hover { background: #ffd500; }
.software-lesson .lesson-item:hover { -webkit-box-shadow: 0 2px 6px rgba(102, 102, 102, 0.2); box-shadow: 0 2px 6px rgba(102, 102, 102, 0.2); }