@charset "utf-8";
/* 滚动条 */
.scrollBar {
    overflow: auto;
}

.scrollBar::-webkit-scrollbar {
    width: 0.16rem;
}

.scrollBar::-webkit-scrollbar-track {
    border-radius: 0.08rem;
    background-color: #eaeaea;
    box-shadow: 1px 1px 3px 1px rgba(51, 51, 51, 0.25) inset;
}

.scrollBar::-webkit-scrollbar-thumb {
    border-top: 1px solid #dfdfdf;
    border-left: 1px solid #c3c3c3;
    border-right: 1px solid #c3c3c3;
    border-bottom: 1px solid #adadad;
    background-color: #ff9908;
    border-radius: 0.08rem;
}

.smallBar {
    scrollbar-arrow-color: #83baf3;
    scrollbar-face-color: #83baf3;
    scrollbar-3dlight-color: #83baf3;
    scrollbar-highlight-color: #83baf3;
    scrollbar-shadow-color: #83baf3;
    scrollbar-darkshadow-color: #83baf3;
    scrollbar-track-color: #fff;
    scrollbar-base-color: #83baf3;
    overflow: auto;
}

.smallBar::-webkit-scrollbar {
    width: 0.08rem;
    background: #ccc;
    border-radius: 0.05rem;
}

.smallBar::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 0.04rem;
}

.smallBar::-webkit-scrollbar-thumb {
    background-color: #83baf3;
    border-radius: 0.04rem;
}

.smallBar::-webkit-scrollbar-thumb:hover {
    background-color: #83baf3;
}

.smallBar::-webkit-scrollbar-thumb:active {
    background-color: #83baf3;
}

/* 页面设置 */
body.loginbody {
    background: url(images/bg.png) 0 0 no-repeat;
    background-size: 50% 7.61rem;
    background-position: 100% 0;
    overflow-x: hidden;
}

#banner {
    width: 100%;
    height: 11rem;
    position: relative;
}

/* header start */
#loginHeader {
    width: 100%;
    height: 0.85rem;
    background: #f2f2f2c9;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
}

#loginHeader > .headbox {
    width: 100%;
    height: 0.85rem;
}

.headbox > a {
    width: 25%;
    height: 0.86rem;
    display: inline-block;
    background: url(images/logo.png) right no-repeat;
    background-size: auto 0.5rem;
    float: left;
    margin-right: 0.5rem;
}

.headbox .tipsList {
    /* color: white; */
    width: 6.8rem;
    display: inline-flex;
    font-size: 0.2rem;
    justify-content: space-between;
}

.headbox .tipsList li {
    padding-top: 0.3rem;
    cursor: pointer;
}

.headbox .tipsList li.active {
    color: #fb6b6a;
}

/* .gropuBox {
		width: 2.8rem;
		height: 0.28rme;
		position: absolute;
		top: 0.51rem;
		right: 0;
		display: flex;
		justify-content: right;
	}
	.gropuBox li {
		line-height: 0.28rem;
	}
	.gropuBox .loginBtn {
		color: #3171f2;
		width: 0.7rem;
		cursor: pointer;
		height: 0.28rem;
		text-align: center;
		margin-left: 0.15rem;
		box-shadow: 0 0 0 1px #3171f2 inset;
		border-radius: 0.12rem;
		transition: 0.2s all;
	}
	.gropuBox .loginBtn:hover {
		color: #fff;
		background: #3171f2;
	}
	.gropuBox .loginTips {
		color: #3171f2;
		cursor: pointer;
		font-size: 0.18rem;
		line-height: 0.28rem;
		padding-left: 0.28rem;
		background: url(images/icon-user.png) 0 center no-repeat;
    	background-size: auto 0.24rem;
	} */
#exGuidBtn {
    font-size: 0.2rem;
    /* color: white; */
    margin-left: 1rem;
    margin-right: 0.5rem;
    cursor: pointer;
}

#exGuidBtn:before {
    content: " ";
    width: 0.25rem;
    height: 0.25rem;
    background: url(icon/icon_cz.png) center no-repeat;
    background-size: auto 0.24rem;
    position: absolute;
    z-index: 2;
    top: 0.27rem;
    margin-left: -0.3rem;
    margin-top: 0.01rem;
}

#loginBtn {
    display: inline-block;
    padding: 0.05rem 0.2rem 0.05rem 0.2rem;
    border: 1px solid white;
    border-radius: 0.3rem;
    font-size: 0.2rem;
    background-color: white;
    color: #fb6b6a;
    cursor: pointer;
}

#userBtn {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    position: fixed;
    top: 0.2rem;
    cursor: pointer;
}

#userBtn img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

#userContent {
    width: 1.5rem;
    height: 1rem;
    position: fixed;
    top: 0.8rem;
    cursor: pointer;
    margin-left: -0.525rem;
    background-color: white;
    font-size: 0.2rem;
    padding-top: 0.2rem;
    border-radius: 0.05rem;
    display: none;
}

#userContent:before {
    content: '';
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #fff;
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    bottom: auto;
    margin: auto;
}

#userContent.active {
    display: inline-block;
}

#userContent > span {
    display: block;
    height: 0.35rem;
    line-height: 0.35rem;
    padding-left: 0.45rem;
}

#userContent > span:nth-child(1):before {
    content: " ";
    width: 0.25rem;
    height: 0.25rem;
    background: url(images/icon-gr-user.png) center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0.1rem;
    z-index: 2;
    margin-top: 0.05rem;
}

#userContent > span:nth-child(2):before {
    content: " ";
    width: 0.25rem;
    height: 0.25rem;
    background: url(images/icon_tc.png) center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0.1rem;
    z-index: 2;
    margin-top: 0.05rem;
}

/* #exGuidBtn {
		color: #b5262c;
		cursor: pointer;
		width: 1.89rem;
		height: 0.53rem;
		font-size: 0.24rem;
		text-align: center;
		display: inline-block;
		padding: 0.03rem 0 0 0.36rem;
		border-radius: 0.26rem 0.1rem 0.1rem 0.26rem;
		background: url('images/exGuidBg.png') no-repeat;
		box-shadow: 0.01rem 0.02rem 0.06rem 0.04rem rgba(181,38,44, 0.1);
		background-size: 100% 100%;
		line-height: 0.5rem;
		position: absolute;
		top: 0.5rem;
		right: 18%;
	} */
#startExBtn, #startExamBtn,#endExBtn {
    cursor: pointer;
    color: white;
    overflow: hidden;
    font-size: 0.2rem;
    position: relative;
    text-align: center;
    background-color: #fb6b6a;
    border-radius: 0.3rem;
    display: inline-block;
    margin-right: 0.25rem;
    transition: 0.2s all;
    padding: 0 0.3rem;
}

/* #startExBtn:after {
		content: '开始实验';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	#startExBtn:before {
		opacity: 0;
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: linear-gradient(to right, #fbde29 0%,#fff4b1 100%);
		transition: 0.2s all;
	} */
/* #startExBtn:hover:before {
		opacity: 1;
	} */

/* navList */
/* #navList {
		width: 14rem;
		height: 0.64rem;
		padding: 0 1.68rem;
		background: #e4f5ff;
		position: relative;
		display: flex;
		justify-content: space-around;
		z-index: 1;
		margin: 0 auto;
	}
	#navList li {
		color: #535353;
		height: 0.64rem;
		font-size: 0.22rem;
		line-height: 0.64rem;
		position: relative;
		font-weight: bold;
	}
	#navList li > a,
	#navList li > span {
		cursor: pointer;
	}
	#navList[data-on='sub1'] li[data-val='sub1'] > a,
	#navList[data-on='sub2'] li[data-val='sub2'] > a,
	#navList[data-on='sub3'] li[data-val='sub3'] > a,
	#navList[data-on='sub4'] li[data-val='sub4'] > a,
	#navList[data-on='sub5'] li[data-val='sub5'] > a,
	#navList[data-on='sub6'] li[data-val='sub6'] > a {
		pointer-events: none;
		color: #2468f1;
	}
    #navList[data-on='sub1'] ~ [data-mod='sub1'],
    #navList[data-on='sub2'] ~ [data-mod='sub2'],
    #navList[data-on='sub3'] ~ [data-mod='sub3'],
    #navList[data-on='sub4'] ~ [data-mod='sub4'],
    #navList[data-on='sub5'] ~ [data-mod='sub5'],
    #navList[data-on='sub6'] ~ [data-mod='sub6'] {
    	display: inline-block;
    }
    #navList .navsub {
    	position: relative;
    }
    #navList > li.disable {
    	color: #999;
    	pointer-events: none;
    }
    #navList .subBox {
    	width: 2.08rem;
    	background: #fff;
    	padding: 0.2rem 0.3rem;
    	border-radius: 0.1rem;
    	display: none;
    	box-shadow: 0 0 0.05rem 0.03rem rgba(112,112,112,0.36);
    	text-align: left;
    	position: absolute;
    	top: 0.64rem;
    	left: -0.6rem;
    	z-index: 10;
    }
    #navList[data-on='sub5'] li[data-val='sub5']:hover .subBox {
    	display: inline-block;
    }
    #navList .subBox span {
    	display: block;
    	cursor: pointer;
    	font-size: 0.18rem;
    	transition: 0.2s all;
    	line-height: 2em;
    }
    #navList .subBox[data-sub='sub5-1'] span[data-val='sub5-1'],
    #navList .subBox[data-sub='sub5-2'] span[data-val='sub5-2'],
    #navList .subBox[data-sub='sub5-3'] span[data-val='sub5-3'],
    #navList .subBox[data-sub='sub5-4'] span[data-val='sub5-4'],
    #navList .subBox[data-sub='sub5-5'] span[data-val='sub5-5']{
    	color: #2468f1;
    	pointer-events: none;
    }
    #navList .subBox span:hover {
    	color: #2468f1;
    } */
[data-mod] {
    min-height: 2rem;
    margin: 0 auto;
    /* display: none; */
    position: relative;
    padding-bottom: 0.3rem;
}

/*组合按钮 */
.groupBtn {
    text-align: center;
    margin-top: 0.2rem;
}

.groupBtn li {
    color: #fff;
    width: 1.3rem;
    height: 0.48rem;
    cursor: pointer;
    font-size: 0.24rem;
    line-height: 0.48rem;
    display: inline-block;
    border-radius: 0.05rem;
    background: #fb6b6a;
    transition: 0.2s all;
}

.groupBtn li + li {
    margin-left: 0.2rem;
}

.groupBtn li:hover {
    color: #fb6b6a;
    background: #fff;
    box-shadow: 0 0 0 1px #fb6b6a inset;
}

/* model */
.model {
    width: 70%;
    margin: auto;
    margin-top: 0.3rem;
    text-align: left;
    padding: 0 0.2rem;
    padding-top: 0.5rem;
}

.model > header {
    font-size: 0.25rem;
    display: block;
    font-weight: bold;
    margin-bottom: 0.05rem;
}

.model > header > span:nth-child(1) {
    position: absolute;
    width: 0.28rem;
    height: 0.28rem;
    display: inline-block;
    border-radius: 50%;
    top: 0.35rem;
    margin-left: -0.1rem;
    background: #f1ae5d;
    z-index: 1;
}

.model > header > span:nth-child(2) {
    z-index: 2;
    position: relative;
}

.model > #ywmenu {
    display: block;
    letter-spacing: 0.02rem;
    font-size: 0.12rem;
    margin-bottom: 0.2rem;
    color: #f1ae5d;
}

/*exInfo*/
#exInfo p {
    font-size: 0.2rem;
    line-height: 1.6em;
}

/*requirement*/
#requirement {
    width: 100%;
    height: 6.5rem;
    background-image: url('images/requirementBg1.png'), url('images/requirementBg2.png');
    background-size: 5.61rem 4.91rem, 5.61rem 4.91rem;
    background-position: 3.6% 1.5rem, 96.4% 1.5rem;
    background-repeat: no-repeat, no-repeat;
}

#requirement .textBox {
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-around;
}

#requirement .textBox dl {
    width: 3.6rem;
    text-align: center;
}

#requirement .textBox dt {
    color: #fff;
    width: 2.78rem;
    height: 0.6rem;
    font-size: 0.2rem;
    line-height: 0.6rem;
    background: #2468f1;
    border-radius: 0.2rem;
    display: inline-block;
}

#requirement .textBox dd {
    color: #212121;
    font-size: 0.2rem;
    line-height: 1.4em;
    text-indent: 2em;
    text-align: left;
    margin-top: 1rem;
}

/* process */
#process img {
    max-width: 100%;
}

#process > h2 {
    color: #2468f1;
    font-size: 0.24rem;
    line-height: 0.4rem;
    text-align: center;
    margin-top: 0.5rem;
}

#process h3 {
    color: #2468f1;
    font-size: 0.22rem;
}

#process .tab {
    margin: 0.2rem 0;
    background: #fff;
    border-bottom: 0.04rem solid #2468f1;
}

#process .tab tfoot {
    font-weight: bold;
    border-top: 1px solid #2468f1;
}

#process p {
    font-size: 0.2rem;
    line-height: 1.6em;
    text-indent: 2em;
}

#process p.fb {
    margin-top: 0.3rem;
}

/* team */
#team h2 {
    color: #2468f1;
    height: 0.5rem;
    font-size: 0.2rem;
    line-height: 0.5rem;
    margin-bottom: 0.2rem;
}

.teaTemList {
    width: 100%;
    min-height: 5.8rem;
    margin-bottom: 0.6rem;
}

.teaTemList .leftPart {
    width: 3.7rem;
    min-height: 5.8rem;
    background: #f9fbff;
    display: inline-block;
}

.teaTemList .leftPart figure {
    width: 3.5rem;
    height: 4rem;
    display: inline-block;
    position: relative;
    margin: 0.1rem;
}

.teaTemList .leftPart figure img {
    max-width: 3.5rem;
    max-height: 4rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.teaTemList .leftPart h3,
.teaTemList .leftPart h4 {
    color: #2468f1;
}

.teaTemList .leftPart h3 {
    font-size: 0.24rem;
    padding: 0.2rem 0 0.2rem 0.2rem;
}

.teaTemList .leftPart h4 {
    font-size: 0.2rem;
    font-weight: normal;
    line-height: 1.6em;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.teaTemList .leftPart h3 span,
.teaTemList .leftPart h4 span {
    padding-right: 0.1rem;
}

.teaTemList .rightPart {
    width: 7rem;
    min-height: 5.8rem;
    background: #f9fbff;
    font-size: 0.18rem;
    padding: 0.3rem 0.5rem;
    display: inline-block;
    text-align: justify;
    float: right;
}

.teaTemList .rightPart p {
    line-height: 1.6em;
    margin-bottom: 0.2rem;
}

#team .tab {
    margin: 0.2rem 0;
    /* background: #fff;
	    border-bottom: 0.04rem solid #2468f1; */
}

/* fullConBox */
.fullConBox {
    margin: 0.3rem 0;
    /* background: #f9fbff; */
    /* padding: 0.5rem 0 0.3rem 0;
		position: relative; */
}

/* .fullConBox:before,
	.fullConBox:after {
		content: '';
		width: calc(50vw - 5.2rem);
		height: 100%;
		background: #f9fbff;
		display: inline-block;
		position: absolute;
		top: 0;
	} */
/* .fullConBox:before {
		right: 99.6%;
	}
	.fullConBox:after {
		left: 99.6%;
	} */

/* exGuide */
#exGuide {
    opacity: 0;
    width: 100%;
    /* height: calc(100% - 0.2rem); */
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: -99;
    transition: 0.2s all;
}

#exGuide.show {
    opacity: 1;
    z-index: 10000;
}

#exGuide > header {
    color: #fff;
    width: 100%;
    height: 0.58rem;
    padding: 0 0.36rem;
    background: #fb6b6a;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    position: relative;
}

#exGuide > header h2 {
    font-size: 0.2rem;
    font-weight: 500;
    line-height: 0.56rem;
}

#exGuide > header ul {
    height: 0.58rem;
    dispaly: inline-block;
    padding-right: 0.2rem;
    position: absolute;
    top: 0;
    right: 0;
}

#exGuide > header li {
    cursor: pointer;
    height: 0.58rem;
    position: relative;
    line-height: 0.58rem;
    padding-left: 0.38rem;
    display: inline-block;
    margin-right: 0.3rem;
    position: relative;
    transition: 0.2s all;
}

#exGuide > header li:hover {
    color: #ffd78f;
}

#exGuide > header li:before {
    width: 0.3rem;
    height: 0.3rem;
    text-align: center;
    line-height: 0.3rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #fff inset;
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    margin: auto;
    transition: 0.2s all;
}

#exGuide > header li:hover:before {
    color: #ffd78f;
    box-shadow: 0 0 0 1px #ffd78f inset;
}

#exGuide > header li.load a {
    color: #fff;
}

#exGuide > header li:hover a {
    color: #ffd78f;
}

#exGuide > header li.load:before {
    content: '↓';
    font-size: 0.18rem;
}

#exGuide > header li.closeBtn:before {
    content: 'ｘ';
    font-size: 0.2rem;
}

#exGuide .exGuideBox {
    width: 11.75rem;
    height: calc(100% - 1rem);
    background: #fff;
    display: none;
    position: absolute;
    top: 0.58rem;
    left: 0;
    right: 0;
    bottom: auto;
    margin: auto;
    border: none;
}

#exGuide.show .exGuideBox {
    display: inline-block;
}

/* 麦克风 */
#microphoneTest {
    opacity: 0;
    width: 100%;
    height: 100%;
    background: rgba(51, 51, 51, 0.35);
    position: fixed;
    top: 0;
    left: 0;
    z-index: -99;
    transition: 0.2s all;
}

#microphoneTest.show {
    opacity: 1;
    z-index: 1000;
}

#microphoneTest .testBox {
    width: 6.25rem;
    height: 3.25rem;
    background: #fff;
    font-size: 0.16rem;
    padding: 0.8rem 0.75rem 0 0.75rem;
    border-radius: 0.2rem;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}

#microphoneTest .closeBtn {
    width: 0.28rem;
    height: 0.28rem;
    cursor: pointer;
    display: inline-block;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
}

#microphoneTest .closeBtn:before,
#microphoneTest .closeBtn:after {
    content: '';
    width: 100%;
    height: 1px;
    background: #4a4a4a;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transition: 0.2s all;
}

#microphoneTest .closeBtn:before {
    transform: rotate(45deg);
}

#microphoneTest .closeBtn:after {
    transform: rotate(-45deg);
}

#microphoneTest .closeBtn:hover:before,
#microphoneTest .closeBtn:hover:after {
    background: #5086f3;
}

.testBox[data-sate] [data-sub] {
    display: none;
}

.testBox[data-sate='start'] [data-sub='start'],
.testBox[data-sate='testing'] [data-sub='testing'],
.testBox[data-sate='playex'] [data-sub='playex'],
.testBox[data-sate='testerro'] [data-sub='testerro'],
.testBox[data-sate='testtips'] [data-sub='testtips'] {
    display: block;
}

.testBox [data-sub='start'] {
    padding-top: 0.2rem;
}

.testBox [data-sub='playex'],
.testBox [data-sub='testerro'],
.testBox [data-sub='testtips'] {
    padding-top: 0.4rem;
}

.testBox p {
    line-height: 1.6em;
}

.testBox .btn {
    color: #fff;
    width: 1.45rem;
    height: 0.46rem;
    cursor: pointer;
    font-size: 0.16rem;
    line-height: 0.46rem;
    display: inline-block;
    border-radius: 0.05rem;
    background-color: #7ba4f6;
    transition: 0.2s all;
    margin-top: 0.3rem;
    position: relative;
}

.testBox .btn:hover {
    color: #fff;
    background-color: #5086f3;
}

.testBox .btn[data-type='wave']:before,
.testBox .btn[data-type='wave']:after {
    content: '';
    width: 0.4rem;
    height: 0.46rem;
    display: inline-block;
    background: url('images/waveBg.png') center no-repeat;
    background-size: 0.27rem 0.11rem;
    position: absolute;
    top: 0;
}

.testBox .btn[data-type='wave']:before {
    left: 0;
}

.testBox .btn[data-type='wave']:after {
    right: 0;
    transform: rotateY(180deg);
}

.testBox [data-sub='testing'] > div {
    width: 3.8rem;
    height: 1.15rem;
    text-align: left;
    line-height: 1.15rem;
    background: url('images/testingBg.png') 100% center no-repeat;
    background-size: 1.15rem 1.15rem;
    margin: 0 auto;
}

/* exmask */
.exmask {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -99;
    transition: 0.2s all;
}

.exmask.show {
    opacity: 1;
    z-index: 10000;
}

.exmask > .mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    position: absolute;
    top: 0;
    left: 0;
}

.exmask > .maskBox {
    width: 17.35rem;
    height: calc(100% - 1.8rem);
    border: 1px solid #f1eef0;
    background: #f1eef0;
    position: absolute;
    top: 1.2rem;
    left: 0;
    right: 0;
    bottom: auto;
    margin: auto;
}

.maskBox .closeBtn {
    width: 0.3rem;
    height: 0.3rem;
    cursor: pointer;
    display: inline-block;
    box-shadow: 0 0 0 1px #666 inset;
    border-radius: 50%;
    position: absolute;
    top: 0.2rem;
    right: 0.3rem;
    transition: 0.2s all;
}

.maskBox .closeBtn:hover {
    background: #2076fa;
    box-shadow: 0 0 0 1px #2076fa inset;
}

.maskBox .closeBtn:before,
.maskBox .closeBtn:after {
    content: '';
    width: 0.2rem;
    height: 1px;
    display: inline-block;
    background: #666;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transition: 0.2s all;
}

.maskBox .closeBtn:hover:before,
.maskBox .closeBtn:hover:after {
    background: #fff;
}

.maskBox .closeBtn:before {
    transform: rotate(45deg);
}

.maskBox .closeBtn:after {
    transform: rotate(-45deg);
}

.maskBox .resHead {
    width: 2.86rem;
    height: 100%;
    background: #fa5530;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0.45rem 0 0.45rem 0.36rem;
    background: linear-gradient(to bottom, #c41c1d 0%, #f7552d 100%);
}

.maskBox .resHead:before {
    content: '';
    width: 1px;
    height: calc(100% - 0.9rem);
    background: #fff;
    display: inline-block;
    position: absolute;
    top: 0.45rem;
    left: 0.5rem;
}

.maskBox .resHead li {
    color: #fff;
    width: 100%;
    height: 0.5rem;
    cursor: pointer;
    font-size: 0.24rem;
    line-height: 0.5rem;
    padding-left: 0.44rem;
    position: relative;
    z-index: 10;
}

.maskBox .resHead[data-on='sub1'] li[data-val='sub1'],
.maskBox .resHead[data-on='sub2'] li[data-val='sub2'],
.maskBox .resHead[data-on='sub3'] li[data-val='sub3'],
.maskBox .resHead[data-on='sub4'] li[data-val='sub4'],
.maskBox .resHead[data-on='sub5'] li[data-val='sub5'] {
    color: #f3d160;
}

.maskBox .resHead li:before {
    opacity: 0;
    content: '';
    width: 0.2rem;
    height: 0.2rem;
    background: #f3d160;
    display: inline-block;
    border-radius: 0.1rem;
    box-shadow: 0 0 0 0.05rem #fff inset;
    position: absolute;
    top: 0;
    left: 0.05rem;
    right: auto;
    bottom: 0;
    margin: auto;
    transition: 0.2s all;
}

.maskBox .resHead[data-on='sub1'] li[data-val='sub1']:before,
.maskBox .resHead[data-on='sub2'] li[data-val='sub2']:before,
.maskBox .resHead[data-on='sub3'] li[data-val='sub3']:before,
.maskBox .resHead[data-on='sub4'] li[data-val='sub4']:before,
.maskBox .resHead[data-on='sub5'] li[data-val='sub5']:before {
    opacity: 1;
}

.maskBox .resCon {
    height: calc(100% - 0.8rem);
    width: calc(100% - 3.14rem);
    position: absolute;
    top: 0.6rem;
    right: 0.14rem;
}

.resCon .resHeadList {
    width: 100%;
    height: 0.5rem;
}

.resCon .resHeadList li {
    color: #ec9a29;
    height: 0.4rem;
    cursor: pointer;
    font-size: 0.2rem;
    line-height: 0.4rem;
    display: inline-block;
    border-radius: 0.3rem;
    padding: 0 0.28rem 0 0.48rem;
    box-shadow: 0 0 0 1px #ec9a29 inset;
    margin-right: 0.12rem;
    transition: 0.2s all;
}

.resCon .resHeadList li:hover {
    color: #fff;
}

.resCon .resHeadList li[icon='save'] {
    background: url("images/icon-save.png") 0.2rem center no-repeat;
    background-size: 0.17rem auto;
}

.resCon .resHeadList li[icon='load'] {
    background: url("images/icon-load.png") 0.2rem center no-repeat;
    background-size: 0.18rem auto;
}

.resCon .resHeadList li[icon='uniwin'] {
    background: url("images/icon-uniwin.png") 0.18rem center no-repeat;
    background-size: 0.2rem auto;
}

.resCon .resHeadList li[icon='save']:hover {
    background: #ec9a29 url("images/icon-save2.png") 0.2rem center no-repeat;
    background-size: 0.17rem auto;
}

.resCon .resHeadList li[icon='load']:hover {
    background: #ec9a29 url("images/icon-load2.png") 0.2rem center no-repeat;
    background-size: 0.18rem auto;
}

.resCon .resHeadList li.on[icon='uniwin'],
.resCon .resHeadList li[icon='uniwin']:hover {
    color: #fff;
    background: #ec9a29 url("images/icon-uniwin2.png") 0.18rem center no-repeat;
    background-size: 0.2rem auto;
}

/* tab */
.tab {
    width: 100%;
    /* border-top: 0.04rem solid #2468f1; */
}

.tab thead {
    /* color: #2468f1; */
    font-size: 0.2rem;
    /* border-bottom: 1px solid #b5b5b5; */
}

.tab thead th, .tab thead td {
    padding: 0.15rem 0.1rem;
    border: 1px solid #bfbfbf;
    background-color: #fb6b6a;
    color: white;
}

.tab tbody {
    color: #434343;
    font-size: 0.18rem;
}

.tab th, .tab td {
    padding: 0.08rem 0.1rem;
}

.tab th {
    text-align: center;
    border: 1px solid #bfbfbf;
}

.tab td {
    text-align: left;
    border: 1px solid #bfbfbf;
}

/* .tabBor.tab thead th:nth-child(1) {
		border-left: 1px solid #2468f1;
	} */
/* .tabBor.tab thead th:last-child {
		border-right: 1px solid #2468f1;
	} */
/* .tabBor.tab tbody {
		box-shadow: 0 0 0 1px #2468f1;
		position: relative;
	} */
/* .tabBor.tab thead + tbody:before {
		content: '';
		width: 100%;
		height: 1px;
		background: #b5b5b5;
		display: inline-block;
		position: absolute;
		top: -1px;
		left: 0;
	}
	.tabBor.tab tbody + tbody:before {
		content: '';
		width: 100%;
		height: 1px;
		background: #fff;
		display: inline-block;
		position: absolute;
		top: -1px;
		left: 0;
	}
	.tabBor.tab tbody tr:nth-child(1) th,
	.tabBor.tab tbody tr:nth-child(1) td {
		borer-top: 1px solid #999;
	} */
/* 实验结果 */
#result > [data-val] {
    display: none;
}

#result[data-on='sub5-1'] > [data-val='sub5-1'],
#result[data-on='sub5-2'] > [data-val='sub5-2'],
#result[data-on='sub5-3'] > [data-val='sub5-3'],
#result[data-on='sub5-4'] > [data-val='sub5-4'],
#result[data-on='sub5-5'] > [data-val='sub5-5'],
#result[data-on='sub5-6'] > [data-val='sub5-6'] {
    display: block;
}

#result h2[icon] {
    /* color: #2468f1; */
    height: 0.5rem;
    font-size: 0.22rem;
    font-weight: normal;
    line-height: 0.5rem;
    padding-left: 0.51rem;
    position: relative;
}

#result h2[icon]:before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

#result h2[icon='report']:before {
    background: url('images/icon-report.png') center no-repeat;
    background-size: 0.34rem 0.34rem;
}

#result h2[icon='comment']:before {
    background: url('images/icon-comment.png') center no-repeat;
    background-size: 0.31rem 0.32rem;
}

#result h2[icon='discuss']:before {
    background: url('images/icon-discuss.png') center no-repeat;
    background-size: 0.34rem 0.32rem;
}

#result h2[icon='resources']:before {
    background: url('images/icon-resources.png') center no-repeat;
    background-size: 0.31rem 0.30rem;
}

/* 实验成绩  */
#scoreBox > header {
    width: 100%;
    height: 0.6rem;
    /* margin-bottom: 0.2rem; */
    position: relative;
    background: #fb6b6a;
}

#scoreBox .myTips ,#scoreBox .mateTips {
    opacity: 0;
    color: white;
    font-size: 0.20rem;
    line-height: 0.5rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 0.2s all;
}
#scoreBox .myTips1 {
    color: white;
    font-size: 0.20rem;
    line-height: 0.5rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 0.2s all;
}
#scoreBox .mateTips {
    opacity: 0;
    color: white;
    font-size: 0.20rem;
    line-height: 0.5rem;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 0.2s all;
}

#scoreBox .myTips {
    height: 0.5rem;
    width: 7rem;
    display: flex;
    margin-top: 0.05rem;
    margin-left: 0.2rem;
    color: white;
}
#scoreBox .myTips1 {
    height: 0.5rem;
    width: 7rem;
    display: flex;
    margin-top: 0.05rem;
    margin-left: 0.2rem;
    color: white;
}
#scoreBox .mateTips {
    display: inline-block;
}

#scoreBox [data-on='score-1'] .myTips,
#scoreBox [data-on='score-2'] .mateTips {
    opacity: 1;
    z-index: 10;
}

#scoreBox .myTips li, #scoreBox .mateTips li {
    padding-left: 0.45rem;
    position: relative;
}

#scoreBox .myTips li ~ li, #scoreBox .mateTips li ~ li {
    margin-left: 0.6rem;
}

#scoreBox .myTips li[icon='myscore'], #scoreBox .mateTips li[icon='myscore'] {
    background: url('images/icon-myscore.png') 0.05rem 50% no-repeat;
    background-size: 0.3rem 0.3rem;
}

#scoreBox .myTips li[icon='ranking'], #scoreBox .mateTips li[icon='ranking'] {
    background: url('images/icon-ranking.png') 0.04rem 50% no-repeat;
    background-size: 0.3rem 0.3rem;
}

#scoreBox .nav {
    width: 3.2rem;
    height: 0.4rem;
    display: flex;
    position: absolute;
    top: 0.1rem;
    right: 0.15rem;
}

#scoreBox .nav li {
    color: #fb6b6a;
    width: 1.6rem;
    height: 0.4rem;
    cursor: pointer;
    line-height: 0.4rem;
    text-align: center;
    border: 1px solid #bfbfbf;
    transition: 0.2s all;
    background: white;
}

#scoreBox .nav li:nth-child(1) {
    border-right: none !important;
    border-radius: 0.2rem 0 0 0.2rem;
}

#scoreBox .nav li:nth-child(2) {
    border-left: none !important;
    border-radius: 0 0.2rem 0.2rem 0;
}

/* #scoreBox .nav li:hover {
		color: #2468f1;
		border: 1px solid #2468f1;
	} */
#scoreBox [data-on='score-1'] li[data-val='score-1'],
#scoreBox [data-on='score-2'] li[data-val='score-2'] {
    color: #fff;
    background: #fb6b6a;
    border: 1px solid #bfbfbf;
    pointer-events: none;
}

#scoreBox > [data-val] {
    display: none;
}

#scoreBox [data-on='score-1'] ~ [data-val='score-1'],
#scoreBox [data-on='score-2'] ~ [data-val='score-2'] {
    display: block;
}

#scoreBox #saveBtn {
    color: #fff;
    width: 1.3rem;
    height: 0.48rem;
    cursor: pointer;
    font-size: 0.24rem;
    line-height: 0.48rem;
    display: inline-block;
    border-radius: 0.05rem;
    background: #fb6b6a;
    transition: 0.2s all;
}

#scoreBox #saveBtn:hover {
    color: #fb6b6a;
    background: #fff;
    box-shadow: 0 0 0 1px #fb6b6a inset;
}

#scoreBox > .smallBar {
    max-height: 80vh;
    width: calc(100% + 0.2rem);
    padding-right: 0.2rem;
}

#scoreBox .mateScore {
    border-bottom: 1px solid #2468f1;
}

#scoreBox .tab input {
    width: 0.7rem;
    height: 0.26rem;
    padding: 0 0.05rem;
    text-align: center;
    border: 1px solid #2468f1;
}

/* 实验报告 */
#reportCon {
    margin-top: 0.2rem;
}

#reportCon caption {
    background: #fb6b6a;
    padding-right: 0.15rem;
}

#reportCon caption > h2[icon] {
    display: inline-block;
    float: left;
    color: white;
}

#reportCon .tab thead th {
    background: #ffdbdb;
    color: black;
    border: 1px solid #fb6b6a;
}

#reportCon .listConBox {
    color: #434343;
    font-size: 0.18rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid #fb6b6a;
    border-top: none;
}

#reportCon .listConBox #sylcimg {
    width: 100%;
}

#topRepotList {
    display: flex;
    flex-wrap: wrap;
}

#topRepotList li {
    width: 33.33%;
    height: 0.5rem;
    line-height: 0.5rem;
}

#topRepotList li.guid2 {
    width: 66.66%;
}

#reportCon .saveBtn {
    color: #fb6b6a;
    height: 0.35rem;
    cursor: pointer;
    padding: 0 0.25rem;
    font-size: 0.18rem;
    line-height: 0.35rem;
    display: inline-block;
    border-radius: 0.2rem;
    box-shadow: 0 0 0 1px #fb6b6a inset;
    margin-bottom: 0.12rem;
    transition: 0.2s all;
    background-color: white;
    margin-top: 0.08rem;
}

/* #reportCon .saveBtn:hover {
		color: #fff;
		background: #fb6b6a;
	} */
#reportCon .listConBox > h3 {
    color: #fb6b6a;
    height: 0.4rem;
    line-height: 0.4rem;
    margin-bottom: 0.1rem;
}

#reportCon .listConBox > p {
    line-height: 0.4rem;
}

#reportCon .listConBox textarea {
    width: 100%;
    height: 2.5rem;
    border-radius: 0.05rem;
    padding: 0.12rem 0.2rem;
    border: 1px solid #bbb;
    transition: 0.2s all;
}

#reportCon .listConBox textarea:focus {
    border: 1px solid #2468f1;
}

#reportListTips {
    padding: 0 0.1rem;
    margin-bottom: 0.25rem;
    display: flex;
    flex-wrap: wrap;
}

#reportListTips li {
    width: 50%;
    height: 0.4rem;
    line-height: 0.4rem;
    padding-left: 0.12rem;
    position: relative;
}

#reportListTips li:before {
    content: '';
    width: 0.05rem;
    height: 0.24rem;
    display: inline-block;
    background: #2468f1;
    position: absolute;
    top: 0.08rem;
    left: 0;
}

/* 实验评价 */
#saveEvaluateBtn {
    height: 0.5rem;
    background: #fb6b6a;
    text-align: right;
}

#saveEvaluateBtn > span {
    display: inline-block;
    padding: 0.02rem 0.2rem;
    background: white;
    border-radius: 0.08rem;
    margin-right: 0.3rem;
    margin-top: 0.125rem;
    cursor: pointer;
}

#exScoreNc {
    height: 2.5rem;
    width: 100%;
}

#exScoreNc > div {
    display: inline-block;
    width: 20%;
    height: 100%;
    float: left;
    border-right: 1px solid #bfbfbf;
    border-bottom: 1px solid #bfbfbf;
}

#exScoreNc > div:nth-child(1) {
    border-left: 1px solid #bfbfbf;
}

#exScoreNc > div .evaluates {
    padding-left: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    height: 0.3rem;
}

#exScoreNc > div > span:nth-child(1) {
    height: 0.8rem;
    line-height: 0.8rem;
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 0.16rem;
}

#exScoreNc > div > div {
    height: 0.3rem;
    text-align: center;
}

#exScoreNc > div .scoreText {
    height: 1rem;
    line-height: 1rem;
    display: block;
    text-align: center;
}

#exScoreNc > div .evaluates li {
    float: left;
    list-style: none;
    width: 0.3rem;
    height: 0.3rem;
    background: url(../../../ui/css/sd/images/star.gif);
    margin: 0 0.03rem;
}

#exScoreNc > div .evaluates li.light {
    background-position: 0 -29px;
}

#exScoreNc > div .evaluates li a {
    display: block;
    width: 100%;
    padding-top: 0.3rem;
    overflow: hidden;
}

#exComment {
    margin-top: 0.1rem;
}

#exComment > header {
    width: 100%;
    background: #fb6b6a;
    height: 0.5rem;
}

#exComment > header span {
    display: inline-block;
    margin: 0.1rem 0.2rem;
    color: white;
    cursor: pointer;
}

#exComment[data-on='sub1'] [data-val='sub1'],
#exComment[data-on='sub2'] [data-val='sub2'] {
    border-bottom: 1px solid;
}

#exComment [data-sub] {
    display: none;
}

#exComment[data-on='sub1'] > [data-sub='sub1'],
#exComment[data-on='sub2'] > [data-sub='sub2'] {
    display: block;
}

#exComment > .smallBar {
    max-height: 80vh;
    width: calc(100% + 0.2rem);
    padding-right: 0.2rem;
}

#exComment textarea {
    width: 100%;
    height: 2.5rem;
    border-radius: 0.05rem;
    padding: 0.12rem 0.2rem;
    /* border: 1px solid #bbb; */
    border: 0;
    transition: 0.2s all;
    background: white;
}

#exComment textarea:focus {
    border: 1px solid #2468f1;
}

.listComment li {
    width: 100%;
    border-bottom: 1px dotted #e0d7c9;
    margin-bottom: 0.1rem;
    position: relative;
}

.listComment .titBox {
    width: 100%;
    height: 0.6rem;
    position: relative;
    padding-right: 1.1rem;
}

.listComment .titBox .leftBox {
    color: #666;
    width: 100%;
    height: 0.6rem;
    font-size: 0.16rem;
    padding-left: 0.1rem;
    transition: 0.2s all;
    cursor: pointer;
}

.listComment .titBox .leftBox:hover {
    color: #2468f1;
}

.listComment .titBox .title {
    width: 100%;
    height: 0.36rem;
    font-weight: bold;
    line-height: 0.32rem;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.listComment .titBox [data-time] {
    height: 0.28rem;
    line-height: 0.2rem;
    display: inline-block;
}

.listComment .titBox [data-time]:after {
    content: attr(data-time);
    padding-left: 0.5rem;
}

.listComment .titBox [data-good] {
    width: 0.2rem;
    height: 0.2rem;
    cursor: pointer;
    display: inline-block;
    background: url('icon/dis-good.png') center no-repeat;
    background-size: auto 0.2rem;
    position: absolute;
    top: 0;
    left: auto;
    right: 0.8rem;
    bottom: 0;
    margin: auto;
}

.listComment .titBox [data-good='true'] {
    background: url('icon/dis-gooded.png') center no-repeat;
    background-size: auto 0.2rem;
}

.listComment .titBox:after {
    content: attr(data-good);
    color: #7e8080;
    width: 0.7rem;
    height: 0.3rem;
    font-size: 0.16rem;
    line-height: 0.36rem;
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    margin: auto;
}

.listComment li > .conBox {
    color: #1d1e1e;
    width: 100%;
    max-height: 3.24rem;
    font-size: 0.18rem;
    line-height: 0.3rem;
    padding: 0.12rem 0.2rem;
    background: #efefef;
    display: none;
}

.listComment li > .conBox .smallBar {
    max-height: 3rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.listComment li > .conBox:empty {
    padding: 0;
}

/* 在线讨论  */
.saveDiscuss {
    height: 0.5rem;
    background: #fb6b6a;
}

.saveDiscuss .discusstit {
    font-size: 0.16rem;
    font-weight: bold;
    display: inline-block;
    line-height: 0.5rem;
    margin-left: 0.2rem;
    color: white;
}

.saveDiscussBtn {
    display: inline-block;
    padding: 0.02rem 0.2rem;
    background: white;
    border-radius: 0.08rem;
    margin-right: 0.3rem;
    margin-top: 0.125rem;
    cursor: pointer;
    float: right;
}

#discussnc {
    width: 100%;
    height: 2rem;
    padding: 0.2rem;
    background: white;
}

#discussnc input {
    border: 0;
    outline: 0;
    width: 100%;
    height: 0.3rem;
}

.discussall {
    height: 0.5rem;
    background: #ffdbdb;
}

.discussall .discusstit {
    font-size: 0.16rem;
    font-weight: bold;
    width: 90%;
    height: 0.5rem;
    line-height: 0.5rem;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 0.1rem;
}

.discussall .saveDiscussBtn {
    display: none;
}

.discussall .saveDiscussBtn.active {
    display: inline-block;
}

#leftcns, #rightcn {
    padding: 0.1rem;
    background: white;
    display: none;
}

#leftcns, #rightcn .scrollbarBtn {
    max-height: 5rem;
}

#rightcn .scrollbarBtn {
    padding-right: 0.1rem;
}

#leftcns.active, #rightcn.active {
    display: block;
}

.onDiscuss header {
    display: block;
    height: 0.5rem;
    border-bottom: 1px dashed #cfcfcf;
}

.onDiscuss header .title {
    width: 80%;
    height: 0.5rem;
    line-height: 0.5rem;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 0.1rem;
    cursor: pointer;
}

#rightcn #rightcns > div {
    border-bottom: 1px dashed #cfcfcf;
    margin-bottom: 0.1rem;
    padding-bottom: 0.05rem;
}

#rightcn #rightcns .rightuser {
    margin-bottom: 0.1rem;
}

#rightcn #rightcns .rightuser > span:nth-child(1) {
    display: inline-block;
    padding: 0 0.1rem;
    background: #bfbfbf;
    border-radius: 0.1rem;
}

#rightcn #rightcns .rightuser .isStar {
    float: right;
}

#rightcn #rightcns .rightuser .isStar > span:nth-child(1) {
    display: inline-block;
    width: 0.13rem;
    height: 0.13rem;
    margin-right: 0.05rem;
    background: url(images/dis-good.png) center no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

#rightcn #rightcns .rightuser .isStar > span.isFabulous {
    background: url(images/dis-goodes.png) center no-repeat;
    background-size: 100% 100%;
}

#savehd {
    width: 100%;
    height: 1rem;
    background: #fafafa;
    padding: 0.1rem;
}

#savehd input {
    width: 100%;
    border: 0;
    background: #fafafa;
    height: 0.3rem;
}

#savehd > div {
    width: 100%;
    text-align: center;
    margin-top: 0.2rem;
}

#savehd > div > span {
    display: inline-block;
    padding: 0 0.2rem;
    background: #fb6b6a;
    color: white;
    border-radius: 0.06rem;
    cursor: pointer;
}

/* #onDiscuss {
		margin-top: 0.2rem;
		height: 7rem;
    	width: calc(100% + 0.2rem);
    	padding: 0.2rem;
    	background-color: #e6fffc;
	}
	#onDiscuss > div{
		background-color: white;
		padding: 0.2rem;
		height: 100%;
	}
	#onDiscuss #leftcn{
		width: 50%;
		border-right: 1px solid #cfcfcf;
    	padding: 0.2rem;
    	display: inline-block;
    	padding-top: 0;
    	height: 100%;
	}
	#onDiscuss #leftcn #leftTit{
		font-size: 0.18rem;
    	height: 0.22rem;
	}
	#onDiscuss #leftcn #leftcns{
		height: calc(100% - 0.9rem);
	    overflow: auto;
	    margin-bottom: 0.48rem;
	}
	#onDiscuss #leftcn #leftcTw,#onDiscuss #rightcn #leftcTw{
		width: 100%;
	    border: 1px solid #fb6b6a;
	    border-radius: 0.05rem;
	    height: 0.3rem;
	    display: inline-table;
	    font-size: 0.16rem;
	    padding: 0;
	    margin: 0;
	}
	#onDiscuss #leftcn #leftcTw input,#onDiscuss #rightcn #leftcTw input{
		height: 0.3rem;
	    border: 0;
	    width: calc(100% - 0.7rem);
	    display: block;
	    padding: 0;
	    margin: 0;
	    border-radius: 0.05rem;
	    float: left;
	    padding-left: 0.1rem;
	}
	#onDiscuss #leftcn #leftcTw span,#onDiscuss #rightcn #leftcTw span{
	    display: block;
	    height: 0.3rem;
	    line-height: 0.3rem;
	    width: 0.7rem;
	    border: 1px solid #fb6b6a;
	    text-align: center;
	    float: right;
	    background: #fb6b6a;
	    color: white;
	    cursor: pointer;
	}
	#onDiscuss #rightcn{
		width: 50%;
	    float: right;
	    padding: 0.2rem 0 0.2rem 0.2rem;
	    font-size: 0.18rem;
	    padding-top: 0;
	    height: 100%;
	}
	#onDiscuss #rightcn .scrollbarBtn{
		height: calc(100% - 0.68rem);
    	padding-right: 0.2rem;
    	margin-bottom: 0.48rem;
	}
	#onDiscuss #rightcn #rightTit{
		border-bottom: 1px dashed #cfcfcf;
    	padding-bottom: 0.1rem;
	}
	#onDiscuss #rightcn .discusSuser{
		width: 0.45rem;
	    height: 0.45rem;
	    border-radius: 50%;
	    top: 0.2rem;
	    display: block;
	    float: left;
	}
	#onDiscuss #rightcn .discusSuser img{
		width: 100%;
	    height: 100%;
	    border-radius: 50%;
	}
	#onDiscuss #rightcn #rightcns{
    	max-height: 2rem;
	}
	#onDiscuss #rightcn #rightcns > div{
	    display: inline-block;
	    width: 100%;
	    padding: 0.2rem 0;
	    border-bottom: 1px dashed #cfcfcf;
	}
	#onDiscuss #rightcn #rightcns > div > div{
		padding-left: 0.6rem;
	}
	#onDiscuss #rightcn #rightcns .rightuser{
		margin-bottom: 0.1rem;
	}
	#onDiscuss #rightcn #rightcns .rightuser .isStar{
		float: right;
	}
	#onDiscuss #rightcn #rightcns .rightuser .isStar > span:nth-child(1){
		display: inline-block;
	    width: 0.13rem;
	    height: 0.13rem;
	    margin-right: 0.05rem;
	    background: url(images/dis-good.png) center no-repeat;
	    background-size: 100% 100%;
	    cursor: pointer;
	}
	#onDiscuss #rightcn #rightcns .rightuser .isStar > span.isFabulous{
		background: url(images/dis-goodes.png) center no-repeat;
	    background-size: 100% 100%;
	}
	.onDiscuss {
		width: 100%;
		padding-left: 0.1rem;
	}
	.onDiscuss>header {
		width: 100%;
	    height: 0.4rem;
	    cursor: pointer;
	    line-height: 0.32rem;
	    border-bottom: 1px dashed #cfcfcf;
	    margin-top: 0.1rem;
	}
	.onDiscuss>header[data-show='show'] {
		height: auto;
	}
	.onDiscuss>header .title {
		color: #4a4a4a;
		width: 100%;
		height: 0.4rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 0.18rem;
		line-height: 0.4rem;
		display: inline-block;
	}
	.onDiscuss>header[data-show='show'] .title {
		height: auto;
	    white-space: pre-wrap;
	}
	.onDiscuss>header .textBtn {
		color: #c83529;
		height: 0.4rem;
		font-weight: 500;
		line-height: 0.4rem;
		display: inline-block;
		position: absolute;
		top: 0;
		right: 0.3rem;
	}
	.onDiscuss>header .textBtn:after {
		content: '>';
		display: inline-block;
		margin-left: 0.05rem;
		position: relative;
	}
	.onDiscuss>header[data-show='show'] .textBtn:after {
		transform: rotate(90deg);
	}
	.onDiscuss .discussBox {
		margin-top: 0.12rem;
	}
	.onDisCon {
		display: none;
	}
	.discussBox > dt {
		position: relative;
		padding-top: 0.3rem;
	}
	.discussBox > dt .title {
		width: 100%;
		height: 0.5rem;
		text-align: left;
		font-size: 0.16rem;
		line-height: 0.5rem;
		line-height: 0.5rem;
		padding-left: 0.16rem;
		display: inline-block;
		position: relative;
		background: #fff;
	}
	.discussBox > dt .title:before {
		content: '';
		width: 0.16rem;
		height: 0.16rem;
		display: inline-block;
		clip-path: polygon(0 0, 100% 0, 0 100%);
		background: #d2e6ff;
		position: absolute;
		top: 0;
		left: 0;
	}
	.discussBox > dt .btnGroup {
		background: #fff;
		display: inline-block;
		padding: 0 0.1rem 0 0.2rem;
		clip-path: polygon(0.2rem 0, 100% 0, 100% 100%, 0 100%);
		position: absolute;
		top: 0;
		right: 0;
	}
	.discussBox > dt [data-btn] {
		color: #4a4a4a;
		height: 0.28rem;
		cursor: pointer;
		margin: 0 0.05rem;
		font-size: 0.12rem;
		padding-left: 0.28rem;
		line-height: 0.32rem;
		display: inline-block;
		transition: 0.2s all;
		text-align: center;
	}
	.discussBox > dt .active[data-btn],
	.discussBox > dt [data-btn]:hover {
		color: #c83529;
	}
	.discussBox > dt [data-btn='good'] {
		background: url('icon/dis-good.png') 0 center no-repeat;
		background-size: 0.2rem auto;
	}
	.discussBox > dt .active[data-btn='good'] {
		background: url('icon/dis-gooded.png') 0 center no-repeat;
		background-size: 0.2rem auto;
	}
	.discussBox > dt [data-btn='collect'] {
		background: url('icon/dis-collect.png') 0 center no-repeat;
		background-size: 0.2rem auto;
	}
	.discussBox > dt .active[data-btn='collect'] {
		background: url('icon/dis-collected.png') 0 center no-repeat;
		background-size: 0.2rem auto;
	}
	.discussBox > dt [data-btn='discuss'] {
		background: url('icon/dis-discuss.png') 0 center no-repeat;
		background-size: 0.2rem auto;
	}
	.discussBox > dt .active[data-btn='discuss'] {
		background: url('icon/dis-discussed.png') 0 center no-repeat;
		background-size: 0.2rem auto;
	}
	.discussBox > dd {
		color: #666;
		background: #fff;
		font-size: 0.16rem;
		border-top: 1px dotted #999;
		padding: 0.12rem;
	}
	.discussFoot>h2 {
		color: #000;
		width: 100%;
		height: 0.32rem;
		font-weight: 500;
		font-size: 0.16rem;
		line-height: 0.32rem;
		padding-left: 0.2rem;
		background: #d2e6ff;
		position: relative;
	}
	.discussFoot textarea {
		width: 100%;
		height: 1.85rem;
		padding: 0.05rem 0.1rem;
		box-shadow: 0 0 0.03rem 0.02rem rgba(201, 201, 201, 0.35);
		border: none;
	}
	.discussFoot .saveBtn {
	    color: #fff;
	    width: 0.96rem;
	    height: 0.4rem;
	    cursor: pointer;
	    text-align: center;
	    background: #d2e6ff;
	    line-height: 0.4rem;
	    border-radius: 0.2rem;
	    display: inline-block;
	    transition: 0.2s all;
	}
	.discussFoot .saveBtn:hover {
		color: #d2e6ff;
		background: #fff;
		box-shadow: 0 0 0 1px #d2e6ff inset;
	} */
/* 资源数据  */
#resources {
    width: 100%;
    height: 8rem;
}

#resources #resourcestit {
    height: 0.5rem;
    background: #fb6b6a;
    font-size: 0.16rem;
    font-weight: bold;
    line-height: 0.5rem;
    padding-left: 0.2rem;
    color: white;
}

#resources .shareBox {
    width: 100%;
    height: 1.5rem;
    margin-bottom: 0.2rem;
}

#resources .shareBox .shareBox2 {
    width: 48%;
    background: white;
    height: 100%;
}

#resources .shareBox .shareBoxLeft {
    float: left;
}

#resources .shareBox .shareBoxRight {
    float: right;
}

#resources > header {
    width: 100%;
    border-bottom: 1px solid #2468f1;
    padding-bottom: 0.2rem;
    margin-bottom: 0.2rem;
}

#resources > header span {
    color: #2468f1;
    width: 1.36rem;
    height: 0.48rem;
    cursor: pointer;
    font-size: 0.18rem;
    text-align: center;
    margin-right: 0.4rem;
    line-height: 0.48rem;
    display: inline-block;
    border-radius: 0.05rem;
    box-shadow: 0 0 0 1px #2468f1 inset;
    transition: 0.2s all;
}

#resources > header span:hover {
    color: #fff;
    background: #2468f1;
}

#resources[data-on='sub1'] span[data-val='sub1'],
#resources[data-on='sub2'] span[data-val='sub2'] {
    color: #fff;
    background: #2468f1;
    pointer-events: none;
}

#resources > [data-sub] {
    display: none;
}

#resources[data-on='sub1'] > [data-sub='sub1'],
#resources[data-on='sub2'] > [data-sub='sub2'] {
    display: block;
}

#resources[data-on='sub1'] > #sha#fb6b6aApp[data-sub='sub1'] {
    display: flex;
}

#resourcemsg {
    text-align: center;
    display: block;
    margin-top: 0.1rem;
}

#resources #sha#fb6b6aApp {
    width: 30%;
    height: 100%;
    float: left;
    display: inline-block;
}

#resources #sha#fb6b6aApp > div {
    height: calc(25% - 0.07rem);
    width: 100%;
    margin: 0.1rem 0;
    background: white;
}

#resources #sha#fb6b6aApp .shareBox:nth-child(1), #resources #sha#fb6b6aApp .shareBox:nth-child(4) {
    margin: 0;
}

#resources #sha#fb6b6aApp2 {
    width: 100%;
    height: 4rem;
    display: inline-block;
    background: white;
}

#resources #sha#fb6b6aApp2 header {
    padding-left: 0.5rem;
    font-size: 0.18rem;
    height: 0.45rem;
    line-height: 0.45rem;
    margin: 0.1rem 0 0.1rem 0.1rem;
    background: url(icon/share-tgl.png) left no-repeat;
    background-size: auto 100%;
}

.shareBox [data-icon] {
    width: 40%;
    height: 100%;
    float: left;
}

.shareBox [data-icon='visit'] {
    background: url('icon/share-visit.png') center no-repeat;
    background-size: 0.6rem 0.46rem;
}

.shareBox [data-icon='totalNub'] {
    background: url('icon/share-totalNub.png') center no-repeat;
    background-size: 0.46rem 0.46rem;
}

.shareBox [data-icon='allTime'] {
    background: url('icon/share-allTime.png') center no-repeat;
    background-size: 0.46rem 0.46rem;
}

.shareBox [data-icon='aveTime'] {
    background: url('icon/share-aveTime.png') center no-repeat;
    background-size: 0.46rem 0.46rem;
}

.shareBox .shareBox3 {
    height: 100%;
    width: 60%;
    float: right;
    padding: 0.3rem 0.1rem;
    font-size: 0.18rem;
}

.shareBox .shareBox3 > span {
    display: block;
}

.shareBox .shareBox3 > span:nth-child(1) {
    color: #fb6b6a;
    font-size: 0.3rem;
    height: 0.5rem;
    line-height: 0.5rem;
}

#resources #sha#fb6b6aApp2 > div {
    width: 100%;
    height: 100%;
}

.shareSubCon {
    min-height: 1.2rem;
    padding: 0.12rem;
}

.shareSubCon {
    height: calc(100% - 0.64rem);
}

.shareSubCon.passSub {
    min-height: 2.8rem;
    position: relative;
}

.passList {
    display: none;
}

/* .passList {
		display: inline-block;
	}
	.passList li {
		color: #666;
		height: 0.3rem;
		font-size: 0.16rem;
		line-height: 0.3rem;
		padding-left: 0.45rem;
		position: relative;
	}
	.passList li:before {
		content: '';
		width: 0.32rem;
		height: 0.16rem;
		display: inline-block;
		border-radius: 0.08rem;
		position: absolute;
		top: 0.07rem;
		left: 0;
	}
	.passList li[data-type='fine']:before {
		background: #ff9908;
	}
	.passList li[data-type='pass']:before {
		background: #00a0e9;
	}
	.passList li[data-type='offgrade']:before {
		background: #ff2b08;
	}
	.passList li:after {
		color: #4a4a4a;
		font-size: 0.12rem;
		content: ""attr(data-nub)"人";
		padding-left: 0.05rem;
	} */
.passPic {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 0.6rem;
    left: 0;
    right: 0;
    bottom: auto;
    margin: auto;
    background: conic-gradient(#ff9908 0, #ff9908 33.33%, #00a0e9 33.33%, #00a0e9 66.66%, #ff2b08 66.66%, #ff2b08 100%);
}

.passPic:before {
    content: '';
    width: 1.4rem;
    height: 1.4rem;
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    margin: auto;
}

.passPic:after {
    color: #fff;
    content: attr(data-text);
    width: 1.1rem;
    height: 1.1rem;
    font-size: 0.24rem;
    text-align: center;
    border-radius: 50%;
    line-height: 1.1rem;
    display: inline-block;
    background-color: #3e80f3;
    background-image: linear-gradient(to right, #3241c6, #417ef4);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: auto;
}

.passPic [data-box] {
    width: 0.8rem;
    height: 1.5rem;
    display: none;
    position: absolute;
    left: 0.55rem;
    bottom: 0.95rem;
    transform-origin: 50% 100%;

}

.passPic [data-box][style] {
    display: inline-block;
}

.passPic [data-box]:before {
    content: '';
    width: 1px;
    height: 0.2rem;
    background: #666;
    display: inline-block;
    position: absolute;
    top: 0.3rem;
    left: 50%;
}

.passPic [data-box] b {
    width: 100%;
    height: 0.3rem;
    line-height: 0.3rem;
    display: inline-block;
    text-align: center;
    position: relative;
    left: 50%;
    transform-origin: 0 0.3rem;
    border-bottom: 1px solid #666;
}

.passPic [data-box] b.reposition {
    left: -50%;
    transform-origin: 100% 0.3rem;
}

.passPic [data-box='fine'] {
    transform: rotate(60deg);
}

.passPic [data-box='fine']:before {
    background: #ff9908;
}

.passPic [data-box='fine'] b {
    color: #ff9908;
    transform: rotate(-60deg);
    border-bottom: 1px solid #ff9908;
}

.passPic [data-box='pass'] {
    transform: rotate(180deg);
}

.passPic [data-box='pass']:before {
    background: #00a0e9;
}

.passPic [data-box='pass'] b {
    color: #00a0e9;
    transform: rotate(-180deg);
    border-bottom: 1px solid #00a0e9;
}

.passPic [data-box='offgrade'] {
    transform: rotate(270deg);
}

.passPic [data-box='offgrade']:before {
    background: #ff2b08;
}

.passPic [data-box='offgrade'] b {
    color: #ff2b08;
    transform: rotate(-180deg);
    border-bottom: 1px solid #ff2b08;
}

#sharedApp2 {
    height: 4rem;
    background-color: white;
}

#resources #sharedApp2 > div > header {
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.2rem;
    padding-left: 0.5rem;
}

#resources #sharedApp2 > div > header:before {
    content: " ";
    width: 0.3rem;
    height: 0.3rem;
    background: url(icon/share-tgl.png) center no-repeat;
    background-size: auto 0.3rem;
    position: absolute;
    z-index: 2;
    margin-top: 0.12rem;
    margin-left: -0.35rem;
}

#resources #sharedApp2 > div > header #statisticstg {
    margin-left: 0.1rem;
    font-size: 0.25rem;
}

/* 共享资源*/
.search {
    font-size: 0.18rem;
    height: 0.28rem;
}

.search input {
    height: 0.28rem;
    /* border-radius: 0.08rem; */
    border: 1px solid #e4e4e4;
    padding: 0 0.12rem;
}

.search .btn {
    /* color: #fff;
		width: 0.7rem;
		height: 0.28rem;
		cursor: pointer;
		text-align: center;
		background: #a4c0f9;
		display: inline-block;
		border-radius: 0.08rem;
		line-height: 0.28rem;
		margin-left: 0.08rem;
		transition: 0.2s all; */
    color: #fb6b6a;
    cursor: pointer;
    margin-left: 0.2rem;
    font-weight: bold;
}

/* .search .btn:hover {
		color: #a4c0f9;
		background: #fff;
		box-shadow: 0 0 0 1px #a4c0f9;
	} */
.search ~ .smallBar {
    width: calc(100% + 0.2rem);
    padding-right: 0.2rem;
    max-height: 80vh;
    margin-top: 0.2rem;
}

.tab {
    border-bottom: 1px solid #2468f1;
}

.tab tbody tr:hover {
    background: #f9f9f9;
}

.tab .loadBtn {
    color: #a4c0f9;
    cursor: pointer;
}

/* 资源下载 */
.downloadFiles {
    text-align: center;
}

.downloadFiles a {
    cursor: pointer;
    color: #3c76c9;
}

.downloadFiles a:hover {
    text-decoration: underline;
}

/* 通知公告 */
#notice #noticetit {
    font-size: 0.16rem;
    font-weight: bold;
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 0.1rem;
    background: #fb6b6a;
    color: white;
}

#notice h2[icon] {
    color: #2468f1;
    height: 0.5rem;
    font-size: 0.22rem;
    font-weight: normal;
    line-height: 0.5rem;
    padding-left: 0.51rem;
    margin-bottom: 0.2rem;
    position: relative;
}

#notice h2[icon]:before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

#notice h2[icon='notice']:before {
    background: url('images/icon-notice.png') center no-repeat;
    background-size: 0.29rem 0.31rem;
}

#blackboardNub[data-nub]:after {
    content: attr(data-nub);
    color: #fff;
    min-width: 0.24rem;
    height: 0.24rem;
    background: #e84461;
    font-size: 0.12rem;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    line-height: 0.24rem;
    position: relative;
    top: -0.12rem;
    left: 0.05rem;
}

#notice [data-sub] {
    display: none;
}

#notice[data-on='readlist'] > [data-sub='readlist'],
#notice[data-on='readInfo'] > [data-sub='readInfo'] {
    display: block;
}

#notice .listBox {
    width: 100%;
    min-height: 2rem;
    max-height: 80vh;
    padding: 0rem 0.5rem 0.3rem 0.5rem;
    background-color: white;
}

#notice .listBox li {
    height: 0.48rem;
    cursor: pointer;
    font-size: 0.18rem;
    line-height: 0.48rem;
    /* padding-left: 0.48rem; */
    padding-right: 0.7rem;
    border-bottom: 1px dashed #e0d7c9;
    /* background: url('images/icon-message.png') 0 center no-repeat;
		background-size: 0.27rem 0.22rem; */
    transition: 0.2s all;
    position: relative;
}

#notice .listBox li:hover {
    color: #2468f1;
    border-bottom: 1px dashed #2468f1;
}

#notice .listBox .boardTime {
    float: right;
}

#notice .listBox .readBtn {
    color: #989898;
    width: 0.7rem;
    height: 0.48rem;
    line-height: 0.48rem;
    margin-right: 0.2rem;
}

#notice .listBox .readBtn:after {
    content: '未读';
    color: #fb6b6a;
}

#notice .listBox .readBtn[data-read='true']:after {
    content: '已读';
    color: #bfbfbf;
}

#notice .readInfo {
    width: 100%;
    min-height: 3rem;
    padding: 0.2rem;
    background-color: white;
}

#notice .readInfo div {
    background: white;
    min-height: 2.6rem;
}

#notice .readInfo h3 {
    height: 0.6rem;
    font-size: 0.2rem;
    font-weight: bold;
    line-height: 0.4rem;
    text-align: center;
    padding-top: 0.2rem;
}

#notice .readInfo .conbox {
    color: #535353;
    line-height: 2em;
    font-size: 0.18rem;
    text-align: justify;
    padding: 0.2rem 0.35rem 0.5rem 0.35rem;
    max-height: 5rem;
    overflow: auto;
}

#notice .btnBox {
    text-align: right;
    padding-bottom: 0.2rem;
    padding-right: 0.3rem;
}

#notice .btnBox li {
    color: #fb6b6a;
    width: 0.7rem;
    height: 0.32rem;
    cursor: pointer;
    text-align: center;
    border: 1px solid #fb6b6a;
    line-height: 0.32rem;
    display: inline-block;
    border-radius: 0.05rem;
    transition: 0.2s all;
}

#notice .btnBox li:hover {
    color: white;
    background: #fb6b6a;
    box-shadow: 0 0 0 1px #fb6b6a inset;
}

.btnBox1, .btnBox2,.btnBox3, .btnBox4 {
    text-align: center;
    color: #fff;
    width: 0.7rem;
    height: 0.32rem;
    cursor: pointer;
    border: 1px solid #fff;
    line-height: 0.32rem;
    display: inline-block;
    border-radius: 0.05rem;
    transition: 0.2s all;
    position: relative;
    left: 12rem;
    margin-top: 0.15rem;
}

#notBlackboard {
    display: block;
    text-align: center;
}

/* 返回顶部 */
#backTop {
    color: #b5262c;
    width: 0.45rem;
    height: 1.6rem;
    cursor: pointer;
    background: #fff;
    font-size: 0.18rem;
    padding-top: 0.55rem;
    display: inline-block;
    padding-left: 0.1rem;
    border-radius: 0.24rem;
    writing-mode: vertical-lr;
    box-shadow: 0 0 0 1px #bbb inset;
    position: fixed;
    top: 0;
    left: auto;
    right: 2rem;
    bottom: 0;
    margin: auto;
    z-index: 10;
    transition: 0.2s all;
}

#backTop:hover {
    box-shadow: 0 0 0 1px #b5262c inset;
}

#backTop:before {
    content: '';
    width: 100%;
    height: 0.44rem;
    background: url("images/icon-topUp.png") center 68% no-repeat;
    background-size: 0.19rem 0.21rem;
    border-bottom: 1px solid #bbb;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.2s all;
}

#backTop:hover:before {
    border-bottom: 1px solid #b5262c;
}

/* 个人信息 */
#pensonInfo {
    opacity: 0;
    width: 100%;
    height: 100%;
    background: rgba(102, 102, 102, 0.35);
    position: fixed;
    top: 0;
    left: 0;
    z-index: -99;
    transition: 0.2s all;
}

#pensonInfo[data-state='show'] {
    opacity: 1;
    z-index: 1000;
}

#pensonInfo .inofBox {
    width: 10.2rem;
    height: 5rem;
    background: #fff;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

#pensonInfo .inofBox .closeBtn {
    width: 0.25rem;
    height: 0.25rem;
    cursor: pointer;
    display: inline-block;
    position: absolute;
    top: 0.15rem;
    right: 0.2rem;
    z-index: 10;
}

#pensonInfo .inofBox .closeBtn:before,
#pensonInfo .inofBox .closeBtn:after {
    content: '';
    width: 100%;
    height: 1px;
    display: inline-block;
    background: white;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transition: 0.2s all;
}

#pensonInfo .inofBox .closeBtn:before {
    transform: rotate(45deg);
}

#pensonInfo .inofBox .closeBtn:after {
    transform: rotate(-45deg);
}

#pensonInfo .inofBox .closeBtn:hover:before,
#pensonInfo .inofBox .closeBtn:hover:after {
    background: #fb6b6a;
}

#pensonInfo .inofBox header {
    color: white;
    height: 0.5rem;
    font-size: 0.24rem;
    text-align: center;
    line-height: 0.5rem;
    background: #fb6b6a;
}

#pensonInfo .listSub {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    justify-content: space-between;
    padding: 0 1.5rem;
}

#pensonInfo .listSub li {
    width: 45%;
    height: 0.3rem;
    font-size: 0.18rem;
    line-height: 0.3rem;
    margin-bottom: 0.1rem;
}

#pensonInfo .listSub li:before {
    content: attr(data-text);
    width: 1rem;
    display: inline-block;
    padding-right: 0.05rem;
    text-align: right;
}

#pensonInfo .listSub .edit {
    color: #7ba4f6;
    cursor: pointer;
}

#pensonInfo .listSub .edit:hover {
    text-decoration: underline;
}

#pensonInfo .listSub li input {
    width: 2rem;
    height: 0.3rem;
    padding: 0 0.1rem;
    border: 1px solid #bbb;
    border-radius: 0.05rem;
}

/*pwd_dialog */
.pwd_dialog {
    width: 3.2rem;
    height: 2.7rem;
    padding-top: 0.4rem;
    border: 0.04rem solid #fb6b6a;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 10020;
    display: none;
}

.pwd_dialog > header {
    width: 3.2rem;
    height: 0.4rem;
    background: #fb6b6a;
    position: absolute;
    top: 0;
    left: -0.04rem;
}

.pwd_content {
    width: 100%;
    height: calc(100% - 0.4rem);
    padding: 0.15rem 0.2rem;
}

.pwd_content div {
    line-height: 0.2rem;
}

.pwd_content .content_pwd {
    text-align: left;
}

.pwd_content .content_pwd input {
    width: 2.7rem;
    height: 0.32rem;
    font-size: 0.14rem;
    margin: 0.1rem 0;
    padding-left: 5px;
    background: #f9f9f9;
    border: 0.01rem solid #dadada;
    transition: 0.2s all;
}

.pwd_content .content_pwd input:focus {
    background: #fff;
    border: 0.01rem solid #ffa200;
}

.pwd_btn {
    color: #fff;
    width: 0.8rem;
    height: 0.3rem;
    cursor: pointer;
    outerline: none;
    line-height: 0.3rem;
    background: #fb6b6a;
    transition: 0.2s all;
    border-radius: 0.05rem;
    margin-top: 0.12rem;
    border: none;
}

.pwd_btn:hover {
    color: #fb6b6a;
    background: #fff;
    box-shadow: 0 0 0 1px #fb6b6a inset;
}

#dialogMask {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10000;
}

.error {
    color: #fff;
    width: 100%;
    height: 0.2rem;
    font-size: 0.14rem;
    line-height: 0.2rem;
    padding-top: 0.1rem;
    padding-left: 0.1rem;
    display: none;
}

.error:before {
    content: " ! ";
    width: 0.2rem;
    height: 0.2rem;
    color: #646c8a;
    font-size: 14px;
    background: #fb6b6a;
    font-weight: bold;
    line-height: 0.2rem;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.pwd_close {
    width: 0.26rem;
    height: 0.26rem;
    cursor: pointer;
    background: #fff;
    border: 0.01rem solid #fb6b6a;
    position: absolute;
    top: 0.05rem;
    right: 0.05rem;
    transition: 0.3s all;
    -ms-transition: 0.3s all;
}

.pwd_close:before {
    content: " + ";
    width: 100%;
    height: 100%;
    color: #fb6b6a;
    font-size: 0.24rem;
    line-height: 0.32rem;
    text-align: center;
    display: inline-block;
    transform: rotate(45deg);
    transform-origin: 50% 50%;
    -ms-transform: rotate(45deg);
    -ms-transform-origin: 50% 50%;
    position: absolute;
    top: -0.02rem;
    right: -0.02rem;
    transition: 0.3s all;
    -ms-transition: 0.3s all;
}

.pwd_close:hover {
    background: #fb6b6a;
    border: 0.01rem solid #fff;
}

.pwd_close:hover:before {
    color: #fff;
}

.per-save {
    margin: 0.15rem auto 0;
    border: 0 none;
    width: 1.35rem;
    height: 0.33rem;
    cursor: pointer;
    display: block;
    font-size: 0.16rem;
    color: #FFF;
    background-color: #fb6b6a;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.update_btn {
    color: #fff;
    width: 0.6rem;
    cursor: pointer;
    height: 0.28rem;
    font-size: 0.16rem;
    margin-left: 0.1rem;
    display: inline-block;
    border-radius: 0.05rem;
    background-color: #fb6b6a;
    text-align: center;
    transition: 0.2s all;
}

.update_btn:hover {
    color: #fb6b6a;
    background-color: #fff;
    box-shadow: 0 0 0 1px #fb6b6a inset;
}

/*maskTips*/
#maskTips {
    opacity: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: -99;
}

#maskTips.show {
    opacity: 1;
    z-index: 10000;
}

#maskTips .tipBox {
    width: 2.88rem;
    height: 1.92rem;
    display: inline-block;
    padding: 0.12rem 0.2rem;
    border-radius: 0.03rem;
    background: #f9f9f9;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}

#maskTips .tipBox h2 {
    color: #2076fa;
    height: 0.3rem;
    font-weight: 600;
    font-size: 0.2rem;
    line-height: 0.3rem;
    border-bottom: 1px solid #2076fa;
    text-align: left;
}

#maskTips .tipBox p {
    font-size: 0.18rem;
    padding: 0.24rem 0 0.12rem 0;
}

#maskTips .tipBox .btn {
    color: #fff;
    width: 0.7rem;
    height: 0.4rem;
    cursor: pointer;
    font-size: 0.18rem;
    line-height: 0.4rem;
    padding: 0 0.12rem;
    background: #2076fa;
    border-radius: 0.03rem;
    display: inline-block;
    transition: 0.2s all;
    margin-top: 0.12rem;
}

#maskTips .tipBox .btn:hover {
    color: #2076fa;
    background: #fff;
    box-shadow: 0 0 0 1px #2076fa;
}

/* 登录注册框 */
#maskLogin {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -99;
    transtion: 0.2s all;
}

#maskLogin .maskBg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
}

#maskLogin.show {
    opacity: 1;
    z-index: 1000;
}

#loginBox {
    width: 5.65rem;
    height: 5.54rem;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden;
}

#loginBox .head {
    color: #fff;
    width: 100%;
    height: 0.54rem;
    font-size: 0.18rem;
    text-align: center;
    background: #fb6b6a;
    line-height: 0.54rem;
    border-radius: 0.2rem 0.2rem 0 0;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

#banner .head {
    position: absolute;
    top: 5.7rem;
    width: 100%;
    font-size: 0.16rem;
    padding-left: 10%;
    height: 0.5rem;
    line-height: 0.5rem;
    display: flex;
}

#loginBox .head [data-icon], #banner .head [data-icon] {
    width: 0.36rem;
    height: 0.36rem;
    display: inline-block;
    position: relative;
    top: 0.06rem;
}

#loginBox .head [data-icon='360'], #banner .head [data-icon='360'] {
    background: url("images/icon-360.png") center no-repeat;
    background-size: 0.24rem 0.24rem;
}

#loginBox .head [data-icon='Google'], #banner .head [data-icon='Google'] {
    background: url("images/icon-Google.png") center no-repeat;
    background-size: 0.24rem 0.24rem;
}

#typeLogin,
#typeRegister {
    width: 100%;
    height: 5.2rem;
    background: #fff;
    padding: 0 0.4rem;
    /* border-radius: 0 0 0.2rem 0.2rem; */
    background-size: 105% auto;
    position: absolute;
    /* top: 0.54rem; */
    left: 0;
    right: 0;
}

#maskLogin header {
    color: #fb6b6a;
    height: 0.8rem;
    font-size: 0.32rem;
    line-height: 0.8rem;
    text-align: center;
    border-bottom: 1px solid #e3e3e3;
}

#typeRegister {
    display: none;
    padding-top: 0.2rem;
}

#loginBox #form:before {
    content: " ";
    width: 0.25rem;
    height: 0.24rem;
    background: url(images/icon-user.png) center no-repeat;
    background-size: auto 0.24rem;
    position: absolute;
    left: 1.2rem;
    top: 1.20rem;
    z-index: 2;
}

#loginBox #form:after {
    content: " ";
    width: 0.25rem;
    height: 0.24rem;
    background: url(images/icon-lock.png) center no-repeat;
    background-size: auto 0.24rem;
    position: absolute;
    left: 1.2rem;
    top: 1.96rem;
}

/* #loginBox #registerForm:after {
		content: " ";
	    width: 0.25rem;
	    height: 1rem;
	    background-image: url(images/icon-lock.png), url(images/icon-lock.png);
	    background-repeat: no-repeat, no-repeat;
	    background-position: 0 0, 0 0.75rem;
	    background-size: auto 0.24rem, auto 0.24rem;
	    position: absolute;
	    left: 1.21rem;
	    top: 1.96rem;
	} */
#loginBox #typeLogin input {
    width: 70%;
    height: 0.46rem;
    border: none;
    display: block;
    color: #c9c9c9;
    margin: 30px auto;
    padding: 0 24px 0 36px;
    border: 1px solid black;
    border-radius: 0.1rem;
    background: transparent;
    transition: 0.2s all;
    position: relative;
}

#loginBox #typeLogin input:-webkit-autofill,
#loginBox #typeLogin input:-webkit-autofill:hover,
#loginBox #typeLogin input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

#registerForm > div {
    margin: 0.05rem 0;
}

#registerForm .jjtype {
    margin-top: 0.1rem !important;
    font-size: 0.17rem;
}

#registerForm .bspan {
    width: 49%;
    display: inline-block;
    font-size: 0.17rem;
}

#registerForm #fb6b6as {
    color: #fb6b6a;
}

.qinput {
    width: 100%;
    height: 0.35rem;
    border: 1px solid #ececec;
    border-radius: 0.05rem;
    background-color: #f4f4f4;
    padding: 0 0.1rem;
    font-size: 0.11rem;
}

#yzmtype {
    width: 50%;
    display: inline-block;
}

#hqyzm {
    display: inline-block;
    float: right;
    border: 1px solid #fb6b6a;
    border-radius: 0.05rem;
    padding: 0.035rem 0.05rem;
    background-color: #fb6b6a;
    color: white;
    font-size: 0.12rem;
    cursor: pointer;
}

/**/
.maskBtn {
    color: #fff;
    width: 100%;
    cursor: pointer;
    height: 0.48rem;
    font-size: 0.2rem;
    text-align: center;
    background: #fb6b6a;
    line-height: 0.48rem;
    border-radius: 0.05rem;
    transition: 0.2s all;
    margin-top: 0.2rem;
    display: block;
}

.maskBtn:hover {
    color: #fb6b6a;
    background: #fff;
    box-shadow: 0 0 0 1px #fb6b6a inset;
}

#loginBox #error, #loginBox #registerMsg {
    width: 100%;
    color: #fb6b6a;
    text-align: center;
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0.7rem;
    margin: auto;
}

#loginBox .roleSelect {
    width: 70%;
    height: 0.3rem;
    display: flex;
    margin: auto;
}

#loginBox .roleSelect li {
    color: #606060;
    height: 0.3rem;
    cursor: pointer;
    line-height: 0.3rem;
    display: inline-block;
    padding-left: 0.24rem;
    position: relative;
    flex-grow: 1;
}

#loginBox .roleSelect li:hover {
    color: #2076fa;
}

#loginBox .roleSelect li:before {
    content: '';
    width: 0.2rem;
    height: 0.2rem;
    font-size: 0.18rem;
    border-radius: 50%;
    line-height: 0.2rem;
    display: inline-block;
    box-shadow: 0 0 0 1px #c2c2c2 inset;
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    margin: auto;
    text-align: center;
}

#loginBox .roleSelect li:hover:before {
    box-shadow: 0 0 0 1px #2076fa inset;
}

#loginBox .roleSelect[data-val='stu'] li[ data-role='stu']:before,
#loginBox .roleSelect[data-val='tea'] li[ data-role='tea']:before,
#loginBox .roleSelect[data-val='learn'] li[ data-role='learn']:before,
#loginBox .roleSelect[data-val='expert'] li[ data-role='expert']:before {
    content: '●';
}

#loginBox .changText {
    width: 100%;
    height: 0.3rem;
    padding: 0 0.4rem;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 0.2rem;
}

#loginBox .changText a {
    color: #fb6b6a;
    cursor: pointer;
}

#loginBox #registerForm .roleSelect {
    margin-top: 0;
}

/* 登录弹出框  */
#loginBox .loginConBox {
    opacity: 0;
    width: 100%;
    height: 2.04rem;
    position: absolute;
    top: 0.5rem;
    left: 0;
    z-index: -9;
    transition: 0.2s all;
}

#loginBox .loginConBox.active {
    opacity: 1;
    z-index: 10;
}

#loginBox[state="state1"]:after {
    content: attr(data-info);
    width: 100%;
    height: 30px;
    display: inline-block;
    line-height: 30px;
    color: #000;
    font-size: 12px;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 15px;
}

/* footer */
#footer {
    width: 100%;
    color: #fff;
    font-size: 0.14rem;
    text-align: center;
    line-height: 0.3rem;
    background: url(images/under.png) center no-repeat;
    background-size: 100% 100%;
    padding: 1.2rem 0 0.4rem 0;
    position: relative;
    margin-top: 0.5rem;
}

#dialogMask {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10000;
}

.tab td[align="center"] {
    text-align: center;
}


#productName {
    position: absolute;
    top: 1.5rem;
    font-size: 0.6rem;
    /* color: #fb6b6a; */
    /*  text-align: center; */
    width: 100%;
    padding-left: 10%;
    font-weight: bold;
}

#productTit {
    position: absolute;
    top: 2.1rem;
    font-size: 0.2rem;
    color: white;
    text-align: center;
    width: 100%;
}

#productJj {
    position: absolute;
    top: 2.5rem;
    width: 100%;
    height: 3.3rem;
}

#productJj > div:nth-child(1) {
    width: 49%;
    height: 100%;
    float: left;
    margin-left: 9%;
    margin-right: 2%;
    padding: 0.2rem;
    /* color: white; */
    line-height: 200%;
    overflow: auto;
    font-size: 0.18rem;
    /* background-color: #2c3640de; */
}

#productJj header {
    font-size: 0.2rem;
    font-weight: bold;
}

#productJj p {
    text-indent: 2em;
}

.jjContent, .tdContent {
    display: none;
}

.jjContent.active, .tdContent.active {
    display: block;
}

.menus {
    text-align: center;
    margin-bottom: 0.3rem;
}

#jjmenu, #usermenu {
    text-align: center;
    display: inline-block;
    border: 2px solid #bfbfbf;
    height: 0.5rem;
    line-height: 0.5rem;
    padding: 0 0.5rem;
    border-radius: 0.25rem;
}

.jjmenuBtn, .usermenuBtn {
    font-size: 0.22rem;
    display: inline-block;
    margin: 0 0.3rem;
    cursor: pointer;
}

.jjmenuBtn.active, .usermenuBtn.active {
    color: #fb6b6a;
    cursor: default;
}

.jjmenuBtn.active > span, .usermenuBtn.active > span {
    display: block;
    border-bottom: 3px solid #fb6b6a;
    width: 70%;
    margin: auto;
    margin-top: -0.05rem;
}

/** 团队 **/
#teamtit {
    margin-bottom: 0.2rem;
    display: block;
}

#teamtit > span:nth-child(1) {
    font-size: 0.17rem;
    font-weight: bold;
    margin-right: 0.2rem;
}

#teamtit > span:nth-child(2) {
    font-size: 0.12rem;
}

.teamjs {
    font-size: 0.16rem;
    font-weight: bold;
    display: block;
}

.teamjs:nth-child(1) {
    margin-bottom: 0.1rem;
}

.teamjs:nth-child(2) {
    margin-top: 0.1rem;
}

#teamcn #teamuser, #teamcn #teamuserdetail {
    width: 100%;
    height: 3.5rem;
    display: none;
}

#teamcn #teamuser.active, #teamcn #teamuserdetail.active {
    display: block;
}

#teamcn #teamuser .teamusers {
    display: inline-block;
    width: 25%;
    float: left;
    padding: 0 0.1rem;
    cursor: pointer;
    position: relative;
}

#teamcn #teamuser .teamusers.active {
    width: 50%;
    cursor: default;
}

#teamcn #teamuser .teamusernum {
    position: absolute;
    right: 0.3rem;
    top: 0.2rem;
    display: block;
    width: 0.3rem;
    height: 0.3rem;
}

#teamcn .teamusernum1 {
    background: url(images/num1.png) center no-repeat;
    background-size: 100% 100%;
}

#teamcn .teamusernum2 {
    background: url(images/num2.png) center no-repeat;
    background-size: 100% 100%;
}

#teamcn .teamusernum3 {
    background: url(images/num3.png) center no-repeat;
    background-size: 100% 100%;
}

#teamcn .teamusernum4 {
    background: url(images/num4.png) center no-repeat;
    background-size: 100% 100%;
}

#teamcn #teamuser .teamusertit {
    display: none;
    position: relative;
}

#teamcn #teamuser .teamusertit.active {
    display: block;
}

#teamcn #teamuser .teamusertit > span {
    position: absolute;
    bottom: 0;
    background: #f2f2f2c9;
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
    font-size: 0.18rem;
}

#teamcn #teamuser .teamusercn {
    display: none;
    position: relative;
}

#teamcn #teamuser .teamusercn.active {
    display: block;
}

#teamcn #teamuser .teamusercn > span {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1.3rem;
    color: white;
}

#teamcn #teamuser .teamusercn > .teamzy {
    height: 2rem;
}

#teamcn #teamuser .teamusercn > span .teamspan {
    font-size: 0.17rem;
    display: block;
    padding: 0 0.3rem 0.1rem 0.3rem;
    width: 100%;
    text-indent: 2em;
    line-height: 150%;
}

#teamcn #teamuser .teamusercn > span .teamspantit {
    font-size: 0.2rem;
    font-weight: bold;
    text-indent: 0;
}

#teamcn #teamuser .teamusercn > span .teambtn {
    display: inline-block;
    padding: 0.02rem 0.1rem;
    background: #fb6b6a;
    border-radius: 0.08rem;
    margin-left: 0.3rem;
    margin-top: 0.1rem;
    cursor: pointer;
}

#teamcn #teamuser img {
    width: 100%;
    height: 100%;
}

#teamcn #teamuserdetail .teamCloseBtn {
    height: 0.35rem;
    text-align: right;
    padding-right: 0.3rem;
}

#teamcn #teamuserdetail .teamCloseBtn > span {
    display: inline-block;
    padding: 0.01rem 0.2rem;
    border: 1px solid;
    border-radius: 0.1rem;
    background: #fb6b6a;
    color: white;
    cursor: pointer;
}

#teamcn #teamuserdetail .tdContent {
    width: 100%;
    height: calc(100% - 0.35rem);
}

#teamcn #teamuserdetail .tdContent .tdImg {
    width: 38%;
    height: 100%;
    display: inline-block;
    margin-left: 1%;
    text-align: center;
}

#teamcn #teamuserdetail .tdContent .tdImg img {
    height: 100%;
    width: 100%;
}

#teamcn #teamuserdetail .tdContent .tdContents {
    width: 60%;
    height: 100%;
    float: right;
    padding: 0.1rem 0.1rem 0.1rem 0.3rem;
    overflow: auto;
    font-size: 0.17rem;
}

#teamcn #teamuserdetail .tdContent .tdContents p {
    line-height: 200%;
}

#conBody > div[data-mod='sub3'], #conBody > div[data-mod='sub5'] {
    background: #fafafa;
}

.notUser {
    width: 100%;
    height: 3.5rem;
}

.notUser > div {
    width: 2.5rem;
    height: 2.5rem;
    margin: auto;
    margin-top: 1rem;
}

.notUser > span {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 0.2rem;
}

#notUser0 > div {
    background: url(images/pic_wcj.png) center no-repeat;
    background-size: 100% 100%;
}

#notUser1 > div {
    background: url(images/pic_wzy.png) center no-repeat;
    background-size: 100% 100%;
    width: 5rem;
}

#notUser2 > div {
    background: url(images/pic_wtz.png) center no-repeat;
    background-size: 100% 100%;
    width: 3rem;
}

/*定义滚动条高宽及背景
	 高宽分别对应横竖滚动条的尺寸*/
.scrollbarBtn {
    overflow: auto;
}

.scrollbarBtn::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #F5F5F5;
    border-radius: 10px;
}

/*定义滚动条轨道
	 内阴影+圆角*/
.scrollbarBtn::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

/*定义滑块
	 内阴影+圆角*/
.scrollbarBtn::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px #fb6b6a;
    background-color: #fb6b6a;
}

#reportChart {
    margin-top: 0.2rem;
    border: 1px solid #fb6b6a;
}

#kst {
    width: 3.5rem;
    height: 3.5rem;
    position: absolute;
    top: 0.6rem;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

#kst > div:nth-child(1) {
    width: 50%;
    height: 50%;
    background: #f7f7f7;
    border-radius: 50%;
    position: absolute;
    left: 25%;
    top: 25%;
}

#kst > div:nth-child(2) {
    width: 45%;
    height: 45%;
    background: white;
    border-radius: 50%;
    position: absolute;
    left: 27.5%;
    top: 27.5%;
}

#kst > div:nth-child(3) {
    width: 40%;
    height: 40%;
    background: #f7f7f7;
    border-radius: 50%;
    position: absolute;
    left: 30%;
    top: 30%;
}

#kst > div:nth-child(4) {
    width: 35%;
    height: 35%;
    background: white;
    border-radius: 50%;
    position: absolute;
    left: 32.5%;
    top: 32.5%;
}

#kst > div:nth-child(5) {
    width: 30%;
    height: 30%;
    background: #f7f7f7;
    border-radius: 50%;
    position: absolute;
    left: 35%;
    top: 35%;
}

#kst > div:nth-child(6) {
    width: 25%;
    height: 25%;
    background: white;
    border-radius: 50%;
    position: absolute;
    left: 37.5%;
    top: 37.5%;
}

#kst > div:nth-child(6) > span {
    display: block;
    color: #22cd5b;
    text-align: center;
}

#kst > div:nth-child(6) > span:nth-child(1) {
    font-size: 0.3rem;
    margin-top: 40%;
}

/* #kst > div:nth-child(6) > span:nth-child(2){
		font-size: 0.18rem;
    	margin-top: 0.02rem;
	} */
#kst [data-box] {
    width: 1rem;
    height: 1.3rem;
    /* display: none; */
    position: absolute;
    left: calc(50% - 0.5rem);
    bottom: 50%;
    transform-origin: 50% 100%;
    text-align: center;
}

#kst [data-box]:before {
    content: '';
    width: 1px;
    background: #666;
    display: inline-block;
    position: absolute;
    top: 0.21rem;
    left: 48%;
}

#kst [data-box='pass'] {
    transform: rotate(300deg);
}

#kst [data-box='pass'] b {
    transform: rotate(60deg);
    top: -0.38rem;
    left: -0.18rem;
    width: 1rem;
}

#kst [data-box='fine'] {
    transform: rotate(27deg);
}

#kst [data-box='fine'] b {
    transform: rotate(-27deg);
    top: -0.22rem;
    left: 0.38rem;
    width: 1rem;
}

#kst [data-box='offgrade'] {
    transform: rotate(127deg);
}

#kst [data-box='offgrade'] b {
    transform: rotate(233deg);
    top: -0.23rem;
    left: -0.4rem;
    width: 1rem;
}

/* #kst [data-box] b.reposition {
	    left: 48%;
	    transform-origin: 100% 0.3rem;
	} */

/* #kst [data-box='fine'] {
		transform: rotate(60deg);
	} */
#kst [data-box='fine']:before {
    background: #ff9908;
    height: 0.2rem;
}

#kst [data-box='fine'] b {
    color: #ff9908;
    border-bottom: 1px solid #ff9908;
    float: left;
    height: 0.21rem;
    position: relative;
}

/* #kst [data-box='pass'] {
		transform: rotate(180deg);
	} */
#kst [data-box='pass']:before {
    background: #00a0e9;
    height: 0.37rem;
}

#kst [data-box='pass'] b {
    color: #00a0e9;
    border-bottom: 1px solid #00a0e9;
    float: left;
    height: 0.21rem;
    position: relative;
}

/* #kst [data-box='offgrade'] {
		transform: rotate(270deg);
	} */
#kst [data-box='offgrade']:before {
    background: #ff2b08;
    height: 0.54rem;
}

#kst [data-box='offgrade'] b {
    color: #ff2b08;
    border-bottom: 1px solid #ff2b08;
    float: left;
    height: 0.21rem;
    position: relative;
}

#reportMask {
    opacity: 0;
    width: 100%;
    height: 100%;
    background: rgba(102, 102, 102, 0.35);
    position: fixed;
    top: 0;
    left: 0;
    z-index: -99;
    transition: 0.2s all;
}

#reportMask[data-state='show'] {
    opacity: 1;
    z-index: 1000;
}

#reportMask .reportMaskNr {
    width: 3.5rem;
    height: 0.5rem;
    line-height: 0.5rem;
    background: #fff;
    border-radius: 0.2rem;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}

/** 视频 **/
#videos {
    width: 70%;
    height: 4rem;
    position: absolute;
    top: 6.6rem;
    left: 15%;
}

#videos > div {
    display: inline-block;
    width: 50%;
    height: 100%;
    float: left;
    padding: 0.1rem 0.2rem;
}

#videos > div > span {
    display: block;
    text-align: center;
    font-size: 0.16rem;
    height: 0.3rem;
}

#videos > div > div {
    height: calc(100% - 0.3rem);
    width: 100%;
}

#videos > div > div > div {
    width: 100%;
    height: 100%;
}


.colors thead th, .colors thead td {
    background-color: #ffdbdb;
    color: black;
    font-weight: bold;
}

.zsl {
    display: inline-block;
    height: 3.84rem;
    width: 1.5rem;
    background: url(images/zsl.png) center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 15rem;
}

.zsr {
    display: inline-block;
    height: 2rem;
    width: 1.9rem;
    background: url(images/zsr.png) center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 21.5rem;
    right: 0;
}

.zsb {
    display: inline-block;
    height: 2rem;
    width: 1.9rem;
    background: url(images/zsb.png) center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 0;
    right: 0;
}