/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 Microsoft YaHei,\5b8b\4f53;color:#333;outline:0;}
html,body{background:#fff;font-size: 10px;}
a{color:#000;}

* { margin: 0; padding: 0; box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

/* function */
.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
.f-cb,.f-cbli li{zoom:1;}
.f-dn{display:none;}
.f-db{display:block;}
.f-dib{display: inline-block;}
.f-df{display: flex;}
.f-fdrr{flex-direction: row-reverse;}
.f-fdcl{flex-direction: column;}
.flex-1{flex: 1;}
.f-ai{align-items: center;}
.f-ais{align-items: stretch;}
.f-aifn{align-items: flex-end;}
.f-jcsb{justify-content: space-between;}
.f-jc{justify-content: center;}
.f-jcfe{justify-content: flex-end;}
.f-fww{flex-wrap: wrap;}
.f-vh{visibility:hidden;}
.f-fl{float:left;}
.f-fr{float:right;}
.f-pr{position:relative;}
.f-prz{position:relative;zoom:1;}
.f-pa{position:absolute;}
.f-pf{position:fixed;}
.f-oh{overflow:hidden!important;}
.f-ff0{font-family:arial,\5b8b\4f53;}
.f-ff1{font-family:"Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53;}
.f-fs1{font-size: 12px;}
.f-fs13{font-size: 13px;}
.f-fs2{font-size: 14px;}
.f-fs16{font-size: 16px;}
.f-fs3{font-size: 18px;}
.f-fs4{font-size: 34px;}
.f-fs28{font-size: 28px;}
.f-fs20{font-size: 20px;}
.f-fs24{font-size: 24px;}
.f-fwn{font-weight:normal;}
.f-fwb{font-weight:bold;}
.f-tal{text-align:left;}
.f-tac{text-align:center;}
.f-tar{text-align:right;}
.f-taj{text-align:justify;text-justify:inter-ideograph;}
.f-wsn{word-wrap:normal;white-space:nowrap;}
.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}
.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}
.f-ti{overflow:hidden;text-indent:-30000px;}
.f-ti2{text-indent:2em;}
.f-lhn{line-height:normal;}
.f-lhn24{line-height: 24px;}
.f-tdu,.f-tdu:hover{text-decoration:underline;}
.f-tdn,.f-tdn:hover{text-decoration:none;}
.f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}
.f-csp{cursor:pointer;}
.f-csd{cursor:default;}
.f-csh{cursor:help;}
.f-csm{cursor:move;}
.f-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
.f-mg-auto{margin: 0 auto;}

/* ::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
} */

::-webkit-scrollbar {
    width: 8px;
    /* 1px wider than Lion. */
    /* This is more usable for users trying to click it. */
    background-color: transparent;
    -webkit-border-radius: 100px;
}


/* hover effect for both scrollbar area, and scrollbar 'thumb' */

::-webkit-scrollbar:hover {
    background-color: rgba(0, 0, 0, 0.09);
}

/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */

::-webkit-scrollbar-thumb:vertical {
    /* This is the EXACT color of Mac OS scrollbars.
     Yes, I pulled out digital color meter */
    background: #ddd;
    -webkit-border-radius: 100px;
}

::-webkit-scrollbar-thumb:vertical:active {
    background: #ddd;
    /* Some darker color when you click it */
    -webkit-border-radius: 100px;
}

body ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
}

body ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
}

body ::-webkit-scrollbar {
    width: 6px;
}

.f-cl6{color: #666;}
.f-cl3{color: #333;}
.f-cl9{color: #999;}
.f-clc{color: #ccc;}
.white-bg{background: #fff;}
.btn-bg{background:linear-gradient(270deg, #0bc5fe, #3287fb);}
.top45{margin-top: 45px;}
.border10{border-top: 10px solid #F6F6F6;}
.border1{border-top: 1px solid #ddd;}
.border-bm{border-bottom: 1px solid #ddd;}
.blue-color{color: #388CFF;}
.blue-bg{background: #388CFF;}
.blue-bor{border: 1px solid #388CFF;}
.green-bg{background: #26B9D1;}
.green-bor{border: 1px solid #26B9D1;}
.green-color{color: #26B9D1;}
.orange-bg{background: #FDA844;}
.orange-bor{border: 1px solid #FDA844;}
.orange-color{color: #FDA844;}
.red-color{color: #F2266F;}
.red-bg{background: #F2266F;}
.red-bor{border: 1px solid #F2266F;}
.white-color{color: #fff;}
.white-bg{background: #fff;}
.white-bor{border: 1px solid #fff;}
.f-clef{background: #EFEFEF;}
.gray-border{
	border: 1px solid #ddd;
	border-radius: 3px;
}
.gray-bg{background: #ddd}
.bg-eee{background: #eee}
.bg-f6f{background: #f6f6f6}
.bor-top-ddd{border-top: 1px solid #ddd;}
.bor-btm-ddd{border-bottom: 1px solid #ddd;}
.bor-btm-eee{border-bottom: 1px solid #efefef;}
.bor-bottom15{border-bottom: 1.5rem solid #efefef;}


.pd-colum10-row15{padding: 10px 15px;}
.pd-column15{padding: 15px 0;}
.pd-row15{padding: 0 15px;}
.pd-left15{padding-left: 15px;}
.pd-right15{padding-right: 15px;}
.pd-top15{padding-top: 15px;}
.pd-bottom15{padding-bottom: 15px;}
.pd15{padding: 15px;}
.pd10{padding: 10px;}
.pd-column10{padding: 10px 0;}
.pd-top10{padding-top: 10px;}
.pd-bottom10{padding-bottom: 10px;}
.pd-left10{padding-left: 10px;}
.pd-right25{padding-right: 25px;}

.mg-column10{margin: 10px 0;}
.mg-column15{margin: 15px 0;}
.mg-row15{margin: 0 15px;}
.mg-top15{margin-top: 15px;}
.mg-bottom15{margin-bottom: 15px;}
.mg-left15{margin-left: 15px;}
.mg-right15{margin-right: 15px;}
.mg-top10{margin-top: 10px;}
.mg-left10{margin-left: 10px;}
.mg-right10{margin-right: 10px;}
.mg-bottom10{margin-bottom: 10px;}
.pd-bottom45{padding-bottom: 45px;}
.icon-mg-left{margin-left: 6px;}
.icon-mg-right{margin-right: 6px;}
.icon-mg-top{margin-top: 6px;}
.icon-mg-bottom{margin-bottom: 6px;}
.title-btn{padding: 4px 10px; border-radius: 3px;}
.summit-btn{font-size: 16px; padding: 6px 20px; border-radius: 3px;}

/*头部header样式 start*/
.model{
    border-top: 10px solid #F6F6F6;
    width: 100%;
	min-height: 10rem;
    & .model-title:before{
        content: '';
        position: absolute;
        left: 15px;
        top: 18px;
        width: 3px;
        height: 15px;
        border-radius: 2px;
        background: linear-gradient(#FAD04F, #FDA844);
    }
}
.model-con{padding: 0 15px 15px;}
.max-height{max-height: calc(100vh - 0px);}
.popTip{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9;
    & .popcon{
        width: 80%;
        background: #fff;
        height: auto;
        border-radius: 8px;
        z-index: 3;
        & .userty-txt{
            padding: 40px 20px 20px;
            margin-bottom: 15px;
        }
        & .userty-btn-group{
            border-top: 1px solid #ddd;
            & p{
                text-align: center;
                border: 0;
                border-radius: 0;
                border-right: 1px solid #ddd;
                padding: 10px 0;
                background: #fff;
                color: #666;
            }
             & .btndiv:first-child p{
                border-bottom-left-radius:8px;
            }
            & .btndiv:last-of-type p{
                border-right: 0;
                color: #388CFF;
                border-bottom-right-radius:8px;
            }
        }
    }
    
    & p.icon-close{
        width: 20px;
        height: 20px;
        top: 10px;
        right: 15px;
        z-index: 3;
    }
    & p.icon-close:before,
    & p.icon-close:after{
        content: '';
        position: absolute;
        right: 10px;
        top: 0px;
        width: 2px;
        height: 20px;
        background: #999;
    }
    & p.icon-close:before{
        transform: rotate(45deg);
    }
    & p.icon-close:after{
        transform: rotate(-45deg);
    }
}
.border-eee{border-top: 1px solid #efefef;}
.page-con{
	min-height: calc(100vh - 0px);
	overflow-x: hidden;
}
.icon-choose {
	width: 1.5rem;
	height: 1.5rem;
	background: url(/xxcms/r/cms/www/nkzx/images/learnTrack/icon-choose.png);
	background-size: cover;
	margin-left: 6px;
}
.icon-ensure{
    width: 20px!important;
    height: 13px!important;
    background: url(/xxcms/r/cms/www/nkzx/images/studypack/icon-ensure.png) no-repeat;
    background-size: cover;
}
.icon-cx{
    width: 25px;
    height: 25px;
    background: url(/xxcms/r/cms/www/nkzx/images/studypack/icon-cx.png) no-repeat;
    background-size: cover;
    z-index: 3;
}
.icon-delete{
    width: 25px;
    height: 25px;
    background: url(/xxcms/r/cms/www/nkzx/images/studypack/icon-clean.png) no-repeat;
    background-size: cover;
    z-index: 3;
}
.icon-middle-star,
.icon-middle-half-star,
.icon-middle-gray-star{
	width: 2rem;
	height: 2rem;
	margin-right: 6px;
}
.icon-star,
.icon-half-star,
.icon-gray-star{
	width: 1.7rem;
	height: 1.6rem;
	margin-right: 6px;
}
.icon-star,
.icon-middle-star{
	background: url(/xxcms/r/cms/www/nkzx/images/learnTrack/icon-star.png);
	background-size: cover;
}
.icon-half-star,
.icon-middle-half-star{
	background: url(/xxcms/r/cms/www/nkzx/images/learnTrack/icon-half-star.png);
	background-size: cover;
}
.icon-gray-star,
.icon-middle-gray-star{
	background: url(/xxcms/r/cms/www/nkzx/images/learnTrack/icon-gray-star.png);
	background-size: cover;
}
.icon-more{
	width: 6px;
	height: 6px;
	border-left: 1px solid #ddd;
	border-top: 1px solid #ddd;
	transform: rotate(135deg);
	margin: 3px 0 0 6px;
}
.icon-km{
	width: 1.6rem;
	height: 1.6rem;
	background-size: cover!important;
	margin-right: 6px;
}

.icon-up-jb,
.icon-down-tb{
	position: relative;
	width: 1.2px;
	height: 1.2rem;
	margin-right: 0.6rem;
	&:before{
		position: absolute;
		content: '';
		left: -0.3rem;
		width: 0.4rem;
		height: 0.4rem;
		transform: rotate(-45deg);
	}
}
.icon-down-tb{
	border-left: 1px solid #F2266F;
	&:before{
		bottom: 0;
		border-left: 1px solid #F2266F;
		border-bottom: 1px solid #F2266F;
	}
}
.icon-up-jb{
	border-left: 1px solid #388CFF;
	&:before{
		top: 0.1rem;
		border-top: 1px solid #388CFF;
		border-right: 1px solid #388CFF;
	}
}
.icon-more-sq,
.icon-more-zk{
	height: 2rem;
	&:before,
	&:after{
		content: '';
		position: absolute;
		width: 0.8rem;
		height: 0.8rem;
	}
	&:after{
		top: 0.6rem;
	}
}
.icon-more-zk{
	height: 2rem;
	&:before,
	&:after{
		border-left: 1px solid #388CFF;
		border-bottom: 1px solid #388CFF;
		transform: translateY(-1px) rotate(-45deg);
		animation: rotateDown .3s;
	}
}
.icon-more-sq{
	&:before,
	&:after{
		border-right: 1px solid #388CFF;
		border-top: 1px solid #388CFF;
		transform: translateY(6px) rotate(-45deg);
		animation: moreRotateUp .3s;
	}
}
@keyframes moreRotateUp{
	from { 
		transform: translateY(-1px) rotate(135deg);
	}
	to { 
		transform: translateY(6px) rotate(-45deg);
	}
}
.icon-down6,
.icon-up6{
	height: 6px;
	width: 6px;
}
.icon-down6{
	border-left: 1px solid #666;
	border-bottom: 1px solid #666;
	transform: translateY(-1px) rotate(-45deg);
	animation: rotateDown .3s;
}
.icon-up6{
	border-right: 1px solid #666;
	border-top: 1px solid #666;
	transform: translateY(2px) rotate(-45deg);
	animation: rotateUp .3s;
}
@keyframes rotateUp{
	from { 
		transform: translateY(-1px) rotate(135deg);
	}
	to { 
		transform: translateY(2px) rotate(-45deg);
	}
}
@keyframes rotateDown{
	from { 
		transform: translateY(2px) rotate(135deg);
	}
	to { 
		transform: translateY(-1px) rotate(-45deg);
	}
}
.icon-right{
	width: 10px;
	height: 10px;
	border-top: 1px solid #ddd;
	border-right: 1px solid #ddd;
	transform: rotate(45deg);
}
.icon-dtk{
    width: 21px;
    height: 20px;
    background: url(/xxcms/r/cms/www/nkzx/images/studypack/icon-dtk.png) no-repeat;
    background-size: cover; 
}

/* 表格排序*/
.table-icon-order:before,
.table-icon-order:after,
.icon-order-desc:before,
.icon-order-asc:before{
	content: "";
	position: absolute;
	border-style: solid;
	left: 5px;
}
.table-icon-order {
	&:before{
		border-width: 0 3px 4px;
		border-color: transparent transparent #999;
		top: 3px;
	}
	&:after{
		border-width: 4px 3px 0;
		border-color: #999 transparent transparent;
		top: 10px;
	}
}
/*从小到大排序 desc*/
.icon-order-desc:before {
	border-width: 0 3px 4px;
	border-color: transparent transparent #388CFF;
	top: 6px;
}
/*从大到小排序 asc*/
.icon-order-asc:before {
	border-width: 4px 3px 0;
	border-color: #388CFF transparent transparent;
	top: 6px;
}

ol li{
    list-style: inherit;
    margin-left: 25px;
    display: list-item;
}