.viewer-details-bg{ position:fixed; z-index:0; width:100%; height:100%; background-color:#f2f2f2;}
.viewer-details-wrapper{margin-top: 0px;}
.effective-content{ width:700px; margin:auto;}

/*过渡详情-顶部*/
.viewer-details-banner{ height:460px; background:url(../img/detail-banner.jpg) no-repeat;}
.banner-wrapper{position:relative; width:668px; height:520px; background:url(../img/banner-img-mark.png) no-repeat; overflow:hidden;}
.banner-wrapper .mark{ position:absolute; z-index:10;}
.banner-wrapper .banner-img{position:absolute; z-index:5; width:100%; height:100%;}
.b-content{height:100%; top:0px; left:50%; margin-left:840px;}
.b-details{float:right; padding:40px 30px 0px 30px; width:400px; height:300px; margin-top:6%; background-color:#fff;}
.b-details .tit{font-size:22px; margin-bottom:18px; color:#353535;}

.b-details .message{margin-bottom:10px; color:#666; font-size:14px;}
.b-details .renshu{ margin-left:28px;}
.b-details .renshu::before{content:""; display:inline-block; width:20px; height:20px; background:url(../img/icon.png) -80px 0px no-repeat; vertical-align:middle; margin-right:2px;}
.b-details .time{margin-bottom:34px; color:#666;}
.b-details .price a{color:#999; text-decoration:line-through;}
.b-details .cheap-price{ margin-top:5px; font-size:16px; color:#999;}
.b-details .cheap-price font{font-size:18px; color:#fc583d; font-weight:bold;}
.b-details .btn{display:inline-block; margin-top:40px; width:150px; height:40px; line-height:40px; color:#fff; background-color:#95c241; border-radius:4px; text-align:center; -webkit-transition:all .2s;transition:all .2s;}
.b-details .btn:hover{ cursor:pointer; background-color:#a3d545;}


/*过渡详情-左*/
.viewer-details-main{position:relative; z-index:10; margin-top:40px; margin-bottom: 100px;}
.viewer-details-left{ background-color:#fff;}
.viewer-details-left .tit,.teacher-wrapper .tit,.related-wrapper .tit{padding-left:24px;padding-right:24px; height:59px; border-bottom:1px solid #f2f2f2; line-height:60px; color:#333; font-size:16px;}
.viewer-details-left .xq-wrapper,.viewer-details-right .xq-wrapper,.related-wrapper .xq-wrapper{ padding:0px 24px; margin-top:30px;}
.xq-wrapper .v-cover{ width:490px; float:left;}
.xq-wrapper .js{ width:320px; float:right;}
.xq-wrapper .js p{color:#666; margin-bottom:20px;}

/*过渡详情-右*/
.viewer-details-right{ width:280px;}
.viewer-details-right .teacher-wrapper{ height:555px; background-color:#fff;}
.viewer-details-right .tx{margin:auto; margin-bottom:20px; width:142px; height:142px;border-radius:50em; background:url(../img/tx-border-big.png) no-repeat center; background-size:100% 100%;}
.viewer-details-right .tx img{margin-left:3px; margin-top:3px; width:136px; height:136px;border-radius:50em;}
.xq-wrapper .text{ line-height:24px;}
.viewer-details-right .related-wrapper{ padding-bottom:5px; background-color:#fff;}
.viewer-details-right .related-wrapper span{ font-size: 12px;}
.viewer-details-right .related-wrapper a{ display:block; width:230px; height:200px; margin-bottom:10px; }
.viewer-details-right .relatedimg-box{position:relative; margin-bottom:6px; display:block; width:100%; height:170px; overflow:hidden;}
.viewer-details-right .relatedimg-box .course-img{ width:100%; height:100%;-weblit-transition:all .4s;transition:all .4s;}
.viewer-details-right .relatedimg-box .state{position:absolute; top:10px; right:10px; width:26px;}
.viewer-details-right .related-wrapper a:hover{ cursor:pointer;}
.viewer-details-right .related-wrapper a:hover .course-img{ -webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1);}
.viewer-details-right .related-wrapper a:hover span{ color:#95c241;}