.banner{ width: 100%; height: 500px; padding: 60px; background: url("../images/userhome/thomebanner.png") 50% 0 no-repeat; }
.banner .headimg{ width: 120px; height: 120px; margin:0 auto 14px; overflow: hidden; }
.banner .headimg img{ width: 100%; height: 100%; border-radius: 50%; }
.banner .name-box{ margin-bottom: 20px; text-align: center; }
.banner .name-box .name{ font-size: 18px; line-height: 24px; color: #fff; }
.banner .name-box .title{ font-size: 14px; line-height: 24px; color: #fff; }
.banner .attent{ display: block; width: 100px; height: 30px; margin: 0 auto 30px; text-align: center; border: 1px solid #fff; border-radius: 4px; font-size: 14px; line-height: 28px; color: #fff; }
.banner .attent:hover{ border: 1px solid #f89b38; color: #f89b38; }
.banner .attented{ position: relative; display: block; width: 100px; height: 30px; line-height: 30px; margin: 0 auto 30px; background-color: #53606d;
    font-size: 14px; text-align: center; color: #fff; cursor: pointer; border-radius: 4px; }
/*.banner .attented:hover:after{ content: '取消关注'; position: absolute; top: 0; left: 0; display: block; width: 100px; height: 30px; line-height: 30px; margin: 0 auto 30px; background-color: #53606d;
    font-size: 14px; text-align: center; color: #fff; cursor: pointer; border-radius: 4px; }*/
.banner .intro{ width: 780px; line-height: 24px; margin: 0 auto 60px; font-size: 14px; color: #fff; text-align: center; }
.banner .intro:after{ top: -24px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(50, 62, 78, .1)),to(#35414f),color-stop(50%, #35414f));
    background: -moz-linear-gradient(to right, rgba(50, 62, 78, .1), #35414f 50%, #323f4f);
    background: -ms-linear-gradient(to right, rgba(50, 62, 78, .1), #35414f 50%, #323f4f);
    background: -o-linear-gradient(to right, rgba(50, 62, 78, .1), #35414f 50%, #323f4f);
    background: linear-gradient(to right, rgba(50, 62, 78, .1), #35414f 50%, #323f4f);
}
.banner .rela-info{ width: 100%; text-align: center; }
.banner .rela-info .course{ display: inline-block; width: 170px; text-align: center; }
.banner .rela-info .course .number{ display: block; font-size: 20px; color: #fff; line-height: 1; margin-bottom: 10px; }
.banner .rela-info .course .title{ font-size: 14px; color: #fff; line-height: 1; }
.banner .rela-info .fans{ display: inline-block; width: 170px; text-align: center; }
.banner .rela-info .fans .number{ display: block; font-size: 20px; color: #fff; line-height: 1; margin-bottom: 10px; }
.banner .rela-info .fans .title{ font-size: 14px; color: #fff; line-height: 1; }

.contain{ width: 1100px; margin: 0 auto; }

/*主讲课程*/
.main-course{ width: 100%; padding-bottom: 70px; }
.main-course .title{ font-size: 24px; line-height: 30px; padding: 100px 0 60px; text-align: center; }
.main-course .title:before{ display: inline-block; content: ''; width: 120px; height: 30px; position: relative; top: 6px; background: url("../images/userhome/hometitleicon.png") 0 50% no-repeat; }
.main-course .title:after{ display: inline-block; content: ''; width: 120px; height: 30px; position: relative; top: 6px; background: url("../images/userhome/hometitleicon.png") 100% 50% no-repeat; }

.main-course .course{ width: 100%; height: 360px; padding: 40px; background-color: #fff;
    -webkit-box-shadow: 0 5px 19px 0 rgba(60, 60, 60, 0.09);
    -moz-box-shadow:  0 5px 19px 0 rgba(60, 60, 60, 0.09);
    box-shadow:  0 5px 19px 0 rgba(60, 60, 60, 0.09);
}
.main-course .course .course-img{ position: relative; width: 450px; height: 280px; background-color: #eee; }
.main-course .course .course-img .flag{ position: absolute; top: 30px; left: 0; width: 100px; height: 26px; line-height: 26px; background-color: #f89b38; color: #fff; text-align: center; border-radius: 0 4px 4px 0; }
.main-course .course .course-img video{ width: 100%; height: 100%; object-fit: fill; }
.main-course .course .course-img img{ width: 100%; height: 100%; }

.main-course .course .info-box{ width: 530px; }
.main-course .course .info-box .course-name{ width: 100%; font-size: 18px; font-weight: bold; line-height: 1; margin-top: 18px; margin-bottom: 30px; }
.main-course .course .info-box .course-name a:hover{ color: #f89b38; }
.main-course .course .info-box .course-teacher{ font-size: 14px; line-height: 1; margin-bottom: 10px; }
.main-course .course .info-box .intro-text{ font-size: 14px;  line-height: 24px; height:96px; color: #666; margin-bottom: 50px; }
.main-course .course .info-box .intro-text:after{ top: -24px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, .1)),to(#fff),color-stop(50%, #fff));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, .1), #fff 50%, #fff);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, .1), #fff 50%, #fff);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, .1), #fff 50%, #fff);
    background: linear-gradient(to right, rgba(255, 255, 255, .1), #fff 50%, #fff);
}

.main-course .course .prise{ font-size: 22px; line-height: 40px; color: #f89b38; }
.main-course .course .rela-btn{ width: 100%; }
.main-course .course .buy{ width: 180px; height: 40px; line-height:40px; text-align: center; background-color: #f89b38; border-radius: 4px; color: #fff; font-size: 16px; margin-right: 40px; }

/*精选课程*/
.choice-course{ width: 100%; background-color: #fff; }
.choice-course .title{ font-size: 24px; line-height: 30px; padding: 100px 0 60px; text-align: center; }
.choice-course .title:before{ display: inline-block; content: ''; width: 120px; height: 30px; position: relative; top: 6px; background: url("../images/userhome/hometitleicon.png") 0 50% no-repeat; }
.choice-course .title:after{ display: inline-block; content: ''; width: 120px; height: 30px; position: relative; top: 6px; background: url("../images/userhome/hometitleicon.png") 100% 50% no-repeat; }

.choice-course .item-box{ margin: 0 -20px; }
.choice-course .item{ width: 188px; background-color: #fff; overflow: hidden; border-radius: 4px; margin:0 20px; transition: all ease 300ms;
    -webkit-box-shadow: 0 0 20px 0 rgba(114, 114, 114, 0.2);
    -moz-box-shadow: 0 0 20px 0 rgba(114, 114, 114, 0.2);
    box-shadow: 0 0 20px 0 rgba(114, 114, 114, 0.2);
}
.choice-course .item:hover{ transform: translate(0,-10px);
    -webkit-box-shadow: 0 3px 8px 0 rgba(248, 157, 61, 0.23);
    -moz-box-shadow:0 3px 8px 0 rgba(248, 157, 61, 0.23);
    box-shadow: 0 3px 8px 0 rgba(248, 157, 61, 0.23);
}
.choice-course .item .item-img{ display: block; width: 100%; height: 128px; overflow: hidden; background-color: #ccc; }
.choice-course .item .item-img img{ width: 100%; height: 100%; }
.choice-course .item .item-name-box{ display: block; position: relative; width: 100%; height: 70px; }
.choice-course .item .item-name{ position: absolute; top: 50%; left: 0; transform: translate(0,-50%); width: 100%; max-height: 52px; padding: 0 30px; text-align: center; font-size: 14px; line-height: 26px; -webkit-line-clamp:2; }
.choice-course .item .item-name:hover{ color: #f89b38; }

.choice-course .readmore{ width: 800px; margin:0 auto; padding: 40px 0 60px; text-align: center; }
.choice-course .readmore a{ display: inline-block; width: 140px; padding: 0 10px; line-height: 35px; margin: 5px; border-radius: 4px; border: 1px solid #ccc; color: #ccc; text-align: center; }
.choice-course .readmore a:hover{ color: #fff; border-color: #f89b38; background-color: #f89b38; }


/*学生评价*/
.student-evaluate{ width: 100%; padding-bottom: 100px; }
.student-evaluate .title{ font-size: 24px; line-height: 30px; padding: 100px 0 60px; text-align: center; }
.student-evaluate .title:before{ display: inline-block; content: ''; width: 120px; height: 30px; position: relative; top: 6px; background: url("../images/userhome/hometitleicon.png") 0 50% no-repeat; }
.student-evaluate .title:after{ display: inline-block; content: ''; width: 120px; height: 30px; position: relative; top: 6px; background: url("../images/userhome/hometitleicon.png") 100% 50% no-repeat; }

.student-evaluate .item{ width: 100%; height: 150px; padding: 20px; background-color: #fefefe; margin-bottom: 20px;
    -webkit-box-shadow: 0 4px 8px 0 rgba(181, 181, 181, 0.23);
    -moz-box-shadow:  0 4px 8px 0 rgba(181, 181, 181, 0.23);
    box-shadow:  0 4px 8px 0 rgba(181, 181, 181, 0.23);
}
.student-evaluate .item .item-img{ width: 50px; height: 50px; overflow: hidden; margin-right: 20px; }
.student-evaluate .item .item-img img{ width: 100%; height: 100%; border-radius: 50%; }
.student-evaluate .item .content-box{ width: 990px; }
.student-evaluate .item .content-box .name{ width: 100%; font-size: 14px; line-height: 24px; color: #999; margin-bottom: 10px; }
.student-evaluate .item .content-box .name a:hover{ color: #f89b38; }
.student-evaluate .item .content-box .text{ width: 100%; font-size: 14px; height: 48px; line-height: 24px; margin-bottom: 10px; }
.student-evaluate .item .content-box .text:after{
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, .1)),to(#fefefe),color-stop(50%, #fefefe));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, .1), #fefefe 50%, #fefefe);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, .1), #fefefe 50%, #fefefe);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, .1), #fefefe 50%, #fefefe);
    background: linear-gradient(to right, rgba(255, 255, 255, .1), #fefefe 50%, #fefefe);
}
.student-evaluate .item .content-box .origin{ text-align: right; color: #999;}
.student-evaluate .item .content-box .origin a:hover{ color: #f89b38; }