.wrap{ background: #eee;}
.course_list{ background: #eeeeee; padding:.3rem 0; }
.course_timetable{ background: #eeeeee; }
.course_list .item, .course_timetable .item { padding: .4rem .5rem; background-color: #fff; border: 1px solid #ddd; margin:0 .3rem .3rem; -webkit-border-radius: .3rem; -moz-border-radius: .3rem; border-radius: .3rem}
.course_list .isfree, .course_timetable .isfree { position: relative; overflow: hidden}
.content{ word-wrap: break-word; word-break: normal; word-break:break-all; }
.course_list .isfree:before, .course_timetable .isfree:before { content: ''; display: inline-block; width: 0; height: 0; border-width: 1.6rem; border-color: transparent transparent #ec523e transparent; border-style: dashed dashed solid dashed; position: absolute; top: -1.6rem; right: -1.6rem; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg)}

.course_list .isfree:after, .course_timetable .isfree:after { content: 'Ãâ·Ñ'; position: absolute; right: -0.85rem; top: -0.85rem; color: #fff; font-size: .5rem; width: 3.19rem; height: 3.19rem; text-align: center; line-height: 3.19rem; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg)}
.course_list .photo,.course_timetable .photo { margin-top: .2rem; background: #f9f9f9; border-radius: .3rem;}
.course_list .photo .avatar,.course_timetable .photo .avatar{ width: 2.25rem; height: 2.25rem; display: block; background-origin:content; background-position:50% 50%; background-size:contain; background-repeat:no-repeat;  border-radius: .3rem; }

.course_list .photo, .course_timetable .photo { float: left}
.course_list .info, .course_timetable .info { margin-left: 2.8rem}
.course_list .topic, .course_timetable .topic { font-size: .7rem; height: 1.1rem; line-height: 1.1rem; overflow: hidden}
.course_list .name, .course_timetable .name { font-size: .5rem; color: #999}
.course_list .state, .course_timetable .state { font-size: .6rem; color: #999}
.course_list .time, .course_timetable .time { display: inline-block; padding-right: .4rem; font-size: .5rem; }
.course_list .is_start, .course_timetable .is_start { color: #ec523e}
.course_list .is_start_b, .course_timetable .is_start_b { color: #999}
.course_list .is_start_g, .course_timetable .is_start_g { color: green;}
.course_list .flower, .course_timetable .flower { padding-right: .5rem}
.course_list .flower i, .course_timetable .flower i, .course_list .eye i, .course_timetable .eye i { color: #ec523e; padding-right: .2rem}

.course_timetable .item { margin: .2rem 0 .6rem 0; position: relative}
.course_timetable .item:before { content: ''; width: 9px; height: 15px; background: url('../../images/app/wallet/arrow_left.png'); position: absolute; left: -9px; top: 15px}
.course_timetable .mod_item { padding: 0 .5rem 0 1.8rem; position: relative; height: 100%;}

.course_timetable .mod_item:before { content: ''; height: 100%; width: .25rem; background-color: #fff; position: absolute; left: .625rem}
.course_timetable .timeplot { font-size: .7rem; padding-top: .5rem; position: relative}
.course_timetable .timeplot:before { content: ''; position: absolute; width: .62rem; height: .62rem; -webkit-border-radius: 50rem; -moz-border-radius: 50rem; border-radius: 50rem; background-color: #bbb; left: -1.35rem; top: .6rem}
.course_info { background-color: #eee; height: 100%;  margin: 0 auto; width: 100%;}
.course_info .mod_ban { height: 7.7rem; background: url('../../images/app/wallet/course_info_ban.jpg'); background-size: 100% auto; position: relative}
.course_info .mod_ban h1 { padding-top: 1.5rem; text-align: center; color: #fff; font-size: 1.125rem; font-weight: normal; padding-left:1rem; padding-right:1rem; }
.course_info .expert { position: absolute; left: 0; bottom: 0; height: 1.75rem; background: rgba(0, 0, 0, 0.7); width: 100%; text-align: center}
.course_info .expert .photo { display: inline-block; width: 1.75rem; height: 1.75rem; overflow: hidden}
.course_info .expert .photo img { width: 1.2rem; height: 1.2rem; margin: .275rem; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%}
.course_info .expert .name { display: inline-block; color: #fff; font-size: .7rem; height: 1.75rem; line-height: 1.75rem; vertical-align: top}
.nameexp{ margin-right: .5rem; display: inline-block; }
.course_info .topic { height: 1.7rem; line-height: 1.7rem; border-bottom: 1px solid #ddd; font-size: .7rem; padding: 0 .5rem}
.course_info .topic i { color: #5063c6; padding-right: .5rem; display: inline-block; height: 1.7rem; width: .5rem; padding-top: .15rem; line-height: 1.4rem}
.course_info .mod_expert, .course_info .mod_course, .course_info .mod_time { background-color: #fff; margin-top: .5rem}
.course_info .mod_expert p, .course_info .mod_course p, .course_info .mod_time p { padding: .5rem; font-size: .65rem; color: #999}
.course_info .mod_course { padding-bottom: 1rem}
.course_info .mod_course img { width: 94%; display: block; margin: 0 3%}
.course_info .mod_time { margin-bottom: 2rem}
.course_info .btn_listen { width: 100%; height: 2rem; line-height: 2rem; text-align: center; position: fixed; left: 0; bottom: 0; background-color: #ec523e; color: #fff; font-size: .8rem}
.btn_listen span{ font-size:.7rem; }
@media (min-width: 415px) {
	.course_info {width: 700px;}
}