/*reset*/
html,body{ height: 100%;}
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, figure, section, legend, textarea, p, blockquote, th, td, input, select, textarea, button { margin: 0; padding: 0 }
body{font:"Microsoft Yahei",Arial,Helvetica,sans-serif;margin: 0 auto;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}
table{border-collapse:collapse;border-spacing:0}
ul,ol,dd,dt,dl{list-style-type:none;}
a{color:#333;text-decoration: none;-webkit-touch-callout: none;-webkit-user-select: none;}
a,input,select{-webkit-tap-highlight-color: transparent;-webkit-appearance: none;-moz-appearance: none;-webkit-border-radius: 0;}
input,img{border:none;padding:0;font-size:14px;}
i,em{font-style:normal;}
:focus{outline: none}
/*原子类*/
.clear { clear: both; }
.clear:after { display: block; clear: both; visibility: hidden; height: 0; overflow: hidden; content: "."; }
/*placeholder css*/
::-moz-placeholder{ font-family: "Microsoft YaHei"}              
::-webkit-input-placeholder{ font-family: "Microsoft YaHei"}    
::-ms-input-placeholder{ font-family: "Microsoft YaHei"}
body{ color: #333333; background: #f4f4f4}

/*导航公共样式*/
.nav{position: fixed;bottom: 0;right: 0;left: 0;height: 1.306667rem;line-height: 1.306667rem;background-color: #ffffff; box-shadow: inset 0px 0px 1px 0px  #999999;}
.nav .nav-list{width: 25%;float: left;;text-align: center}
/*课程列表公共样式*/
.course-list{ 
    background-color: #ffffff;
    padding: .2rem .266667rem 0 .266667rem;
    position: relative;
} 
.course-list .list-name{
    line-height: 0.4rem;
    font-size: 0.4rem;
    color: #333333;
    float: left;
    padding-left: .226667rem;
    margin-bottom: .4rem;
    border-left: .06rem solid #b8852a;
    height: 0.4rem;
}
.course .course-list{
    height: calc(100% - 3rem);
    overflow: hidden;
}
.mycourse .course-list{
    height: calc(100% - 2.6rem);
}
.course-list .change{
    float: right;
    color: #333;
    font-size: .373333rem;
    margin-bottom: .4rem;
    position: relative;
}
 .change-condition{
    display: none; 
    position: absolute; 
}
.change .change-condition{
    left: -2.8rem;
    top: -1.866667rem;
}
.shadow{
    top: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.4);
    z-index: 11;
}
.change-condition #changelist{
    position: relative;
    z-index: 99;
    width: 3.133333rem;
    padding: 0 .533333rem;
    background-color: #ffffff;
	border-radius: .133333rem 0 0 .133333rem;
    border: solid 1px #c39f5f;
    text-align: center;
}
.change-condition #changelist li{
    padding: .413333rem .4rem; 
    border-bottom: solid 1px #c2c2c2;
    font-size: .373333rem;
    color: #333;
}
.change-condition #changelist li:last-of-type{
    border-bottom: none;
}
.change-condition #changelist li.cur{
    color: #b8852a;
}
.package_course , .recommend_course {
    height: calc(100% - .933333rem);
    overflow: hidden;
} 
.course .course-list>div, .package_course>div, .recommend_course>div{
    height: 100%;
    overflow-y: scroll;
}  
.list .course-introduce{
    padding: .2rem;
    border-bottom: 1px solid #ededed;
    margin-bottom: .2rem;
    font-size:0.24rem
}
.list .course-introduce figure{
    position: relative
}
.list .course-introduce figure .type{ 
    position: absolute;
    top: 0;
    left: 3.333333rem;
    width: .666667rem;
    height: .4rem;
    line-height: .4rem;
	background-color: #b8852a;
	border-radius: 0px 0px 5px 5px;
    opacity: 0.7;
    color: #fff;
    font-size: .266667rem;
    text-align: center;
}
.list .course-introduce figure .try{
    border-radius: 2px;
    position: absolute;
    bottom: .116667rem;
    left: 2.9rem;
    width: .666667rem;
    height: .4rem;
    line-height: .4rem;
	background-color: #000; 
    opacity: 0.7;
    color: #fff;
    font-size: .253333rem;
    text-align: center;
}


.list .course-introduce a{ 
    display: block;
}
.list .course-introduce img{ 
    width: 3.6rem;
	height: 2rem;
	background-color: #dcdcdc;
	border-radius: 5px;
}
.list .course-introduce figcaption{
    float: right;
    width: 5.04rem;
}
.list .course-introduce .course-name{
    height: 1.1rem;
    font-size: .4rem; 
	line-height: .573333rem;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    display: -webkit-box;
}
.list .course-detail{
    margin-top: .46rem;
}
.list .course-detail span:first-of-type{
    font-size: .266667rem;
    border-color: #999;
    color: #999;
}
.list .course-detail .progress{
    width: 1.813333rem;
    height: .533333rem;
    line-height: .533333rem;
    text-align: center;
	border-radius: .266667rem;
	border: solid 1px var(--theme-color);
    color: var(--theme-color);
    font-size: .32rem;
    float: right;
}

.list .course-detail .progress.false {
    border: solid 1px #999;
    color: #999;
}

.list .course-detail span.cur{ 
	border: solid 1px #999;
    color: #999; 
}
.list .course-detail .money{
    color: #b8852a;
    font-size: .32rem;
    float: right;
}

.screen img{
    width: .226667rem;
    height: .253333rem;
    vertical-align: middle;
}