@charset "utf-8";

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;

	font-size: 1em;
}

@font-face {
	font-family: 'PingFangSC';
	src: url('https://huboyixue.oss-cn-beijing.aliyuncs.com/PingFangSC.otf');
}

@font-face {
	font-family: 'din';
	src: url('../font/d-din-pro.otf');
}


body {
	font-size: 62.5%;
}

body,
table,
input,
textarea,
select,
option {
	font-family: Arial, sans-serif;
}

article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
	display: block;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

img {
	vertical-align: top;
}

a,
a:link {
	color: #fff;
	text-decoration: none;
}

a:visited {
	color: #fff;
}

a:hover {
	color: #fff;
}

a:active {
	color: #fff;
}

[v-cloak] {
	display: none
}

body {
	color: #141E28;
	font-family: 'PingFangSC';
	font-size: 16px;
	line-height: 1.5;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	background: #F5F6F7;
}

#container {
	overflow: hidden;
	text-align: left;
}

.comSection {
	margin: 0 auto;
	padding: 0 24px;
	max-width: 1400px;
}

em {
	font-style: normal;
}


/*------------------------------------------------------------
	header
------------------------------------------------------------*/
.header {
	background: #fff;
}

.header .hBox {
	background: #141E28;
}

.header .inner {
	margin: 0 auto;
	width: 1400px;
	display: flex;
	justify-content: space-between;
}

.header .inner .el-button--text {
	color: #C8D2DC;
	font-family: 'PingFangSC';
}

.header .inner .el-button--text:hover {
	color: #fff;
}

.header .inner .el-button .el-icon-star-off {
	margin-right: 3px;
}

.header .hBox .naviBox {
	display: flex;
	align-items: center;
}

.header .hBox .naviBox .userInfo {
	margin-right: 58px;
	display: flex;
	align-items: center;
	color: #C8D2DC;
	font-size: 14px;
}

.header .hBox .naviBox .userInfo .el-avatar {
	margin-right: 6px;
}

.header .hBox .naviBox .userInfo:hover {
	color: #fff;
}

.header .hBox .naviBox .el-button {
	margin: 0 58px 0 0;
}

.header .lang-box .el-dropdown-link {
	display: flex;
	align-items: center;
	color: #B4BEC8;
	cursor: pointer;
}

.header .lang-box:hover .el-dropdown-link {
	color: #fff;
	text-align: center;
}

.header .lang-box .el-dropdown-link span {
	margin: 0 8px 0 4px;
}

.header .gnavi-box {
	margin: 0 auto;
	padding-top: 16px;
	width: 1400px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.header .gnavi-box .logo img {
	display: block;
	object-fit: contain;
	cursor: pointer;
}

.header .gnavi-box .navi-list {
	display: flex;
}

.header .gnavi-box .navi-list .navi {
	margin-left: 80px;
	position: relative;
	z-index: 100;
}

.header .gnavi-box .navi-list .dropdown-navi {
	margin: 0 -24px 0 80px;
}

.header .gnavi-box .navi-list .navi>a {
	padding-bottom: 16px;
	display: block;
	color: #141E28;
	font-size: 20px;
	line-height: 48px;
}

.header .gnavi-box .navi-list .dropdown-navi>a img {
	margin: -4px 0 0 12px;
	vertical-align: middle;
}

.header .gnavi-box .navi-list .navi>a.on,
.header .gnavi-box .navi-list .navi>a:hover {
	color: #005AFF;
}

.header .gnavi-box .navi-list .navi .sub-navi {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	background: #FFFFFF;
	border-radius: 8px;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header .gnavi-box .navi-list .navi:hover .sub-navi {
	opacity: 1;
	visibility: visible;
}

.header .gnavi-box .navi-list .navi .sub-navi a {
	padding: 0 20px;
	min-width: 160px;
	display: block;
	color: #141E28;
	font-size: 20px;
	line-height: 48px;
	text-align: center;
}

.header .gnavi-box .navi-list .navi .sub-navi a:hover,
.header .gnavi-box .navi-list .navi .sub-navi .on {
	color: #005AFF;
	background: #CCDEFF;
}

.langDrop li {
	text-align: center;
}

/*------------------------------------------------------------
	footer
------------------------------------------------------------*/
.base-footer .footer {
	padding-top: 80px;
	background-color: #141E28;
}

.base-footer .footer .inner {
	margin: 0 auto;
	width: 1400px;
	display: flex;
	justify-content: space-between;
}

.base-footer .footer .inner .left-box {
	margin-right: 40px;
	min-width: 1px;
	flex: 1;
}

.base-footer .footer .inner .left-box .logo {
	margin: 0 0 18px;
	width: 240px;
	height: 48px;
	cursor: pointer;
}

.base-footer .footer .inner .left-box .navi-list {
	margin-bottom: 20px;
	display: flex;
}

.base-footer .footer .inner .left-box .navi-list .navi {
	margin-right: 60px;
	min-width: 4em;
}

.base-footer .footer .inner .left-box .navi-list a {
	color: #fff;
	font-size: 16px;
}

.base-footer .footer .inner .left-box .navi-list a:hover {
	text-decoration: underline;
}

.base-footer .footer .inner .left-box .info-list {
	margin-bottom: 23px;
	display: flex;
}

.base-footer .footer .inner .left-box .info-list .info {
	min-width: 272px;
	display: flex;
	align-items: center;
}

.base-footer .footer .inner .left-box .info-list .info img {
	margin-right: 12px;
}

.base-footer .footer .inner .left-box .info-list .info span {
	color: #fff;
	font-size: 20px;
}

.base-footer .footer .inner .left-box .info-list .info a {
	color: #fff;
	font-size: 14px;
}

.base-footer .footer .inner .left-box .info-list .info a:hover {
	text-decoration: underline;
}

.base-footer .footer .inner .left-box p {
	color: #B4BEC8;
	font-size: 12px;
	line-height: 1.5;
	white-space: pre-line;
}

.base-footer .footer .inner .right-box .img {
	margin: 0 0 8px;
	padding: 10px;
	width: 200px;
	height: 200px;
	display: block;
	border-radius: 16px;
	background: #fff;
	box-sizing: border-box;
}

.base-footer .footer .inner .right-box span {
	display: block;
	color: #fff;
	font-size: 16px;
	text-align: center;
}

.base-footer .footer .copyright-box {
	margin-top: 76px;
	color: #B4BEC8;
	font-size: 14px;
	line-height: 48px;
	background: rgba(0, 0, 0, 0.5);
}

.base-footer .footer .copyright-box .link {
	display: flex;
}

.base-footer .footer .copyright-box .link span {
	margin-left: 40px;
	color: #005AFF;
	cursor: pointer;
	text-decoration: underline;
}

.base-footer .footer .copyright-box .link span:hover {
	text-decoration: none;
}

.base-footer .sidebar {
	position: fixed;
	right: 20px;
	bottom: 50%;
	z-index: 99;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	-webkit-transform: translateY(50%);
	-moz-transform: translateY(50%);
	-ms-transform: translateY(50%);
	-o-transform: translateY(50%);
	transform: translateY(50%);
}

.base-footer .sidebar .backup {
	padding-top: 15px;
	height: 81px;
	cursor: pointer;
	color: #B4BEC8;
	font-size: 14px;
	text-align: center;
	box-sizing: border-box;
}

.base-footer .sidebar .backup:hover {
	color: #005AFF;
	background: #ECF5FF url("../images/common/backup_on.png") no-repeat center 15px;
}

.base-footer .sidebar .backup img {
	margin: 0 auto 10px;
	display: block;
}

.base-footer .sidebar .backup:hover img {
	visibility: hidden;
}

.base-footer .el-button {
	position: relative;
	display: block;
	width: 112px;
	height: 82px;
	padding: 0;
	border: 0;
	border-radius: 0;
	line-height: 18px;
	color: #B4BEC8;
}

.base-footer .el-button:hover {
	color: #005AFF;
}

.base-footer>.el-button::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 0;
	left: 12px;
	z-index: 2;
	height: 1px;
	background-color: #f0f0f0;
}

.base-footer>.el-button:last-child::after {
	display: none;
}

.base-footer .service-button span {
	display: block;
	padding-top: 34px;
	background: url("../images/common/service1.png") top center/28px 28px no-repeat;
}

.base-footer .service-button:hover span {
	background-image: url("../images/common/service2.png");
}

.phone-popover {
	padding: 0;
}

.phone-popover .content {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-moz-box-orient: vertical;
	-moz-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 0;
	font-size: 24px;
	font-weight: bold;
	line-height: 48px;
	text-align: center;
	color: #141E28;
}

.phone-popover .content div:last-child {
	margin-top: 3px;
}

.phone-popover-reference span {
	display: block;
	padding-top: 34px;
	background: url("../images/common/tel02.png") top center/24px 24px no-repeat;
}

.phone-popover-reference:hover span {
	background-image: url("../images/common/tel02_on.png");
}

.wx-popover-reference span {
	background-image: url("../images/common/weixin.png");
}

.wx-popover-reference:hover span {
	background-image: url("../images/common/weixin_on.png");
}

.base-footer .el-backtop {
	width: 64px;
	height: 30px;
	border-radius: 0;
	font-size: 18px;
	color: #999;
}

.subscribe-popover {
	min-width: 170px;
	padding: 0;
	border: 0;
}

.subscribe-popover img {
	margin: 15px auto;
	display: block;
	width: 140px;
	height: 140px;
}

.subscribe-popover img+div {
	border-radius: 0 0 4px 4px;
	background-color: #2C8EFF;
	font-size: 12px;
	line-height: 26px;
	text-align: center;
	color: #FFFFFF;
}

/* comTitle */
.main .comTitle {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.main .comCenterTitle {
	justify-content: center;
}

.main .comTitle .ttl {
	padding: 0 0 30px 24px;
	font-size: 32px;
	font-weight: bold;
	line-height: 50px;
	background: url("../images/common/circle.png") no-repeat left top;
}

.main .comCenterTitle .ttl {
	padding-right: 24px;
}

.main .comTitle .ttl span {
	margin: 0 0 2px 16px;
	display: inline-block;
	color: #B4BEC8;
	font-size: 16px;
	font-weight: normal;
	line-height: 32px;
	vertical-align: bottom;
}

.main .comTitle .more {
	margin-top: 20px;
	color: #005AFF;
	font-size: 16px;
}

.main .comTitle .more:hover {
	text-decoration: underline;
}

.main .comTitle .more .el-icon--right {
	margin-left: 8px;
}

/* comLiveList */
.main .comLiveList {
	margin: 0 -10px 52px;
	display: flex;
	flex-wrap: wrap;
}

.main .comLiveList li {
	padding: 0 10px 20px;
	width: 25%;
	box-sizing: border-box;
}

.main .comLiveList li a {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	color: #B4BEC8;
	background: #FFFFFF;
	border-radius: 16px;
	overflow: hidden;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.main .comLiveList li a .hot {
	position: absolute;
	left: 0;
	top: 0;
}

.main .comLiveList li a:hover {
	transform: translateY(-10px);
	-webkit-transform: translateY(-10px);
}

.main .comLiveList li a .photo {
	width: 100%;
	height: 188px;
	object-fit: cover;
}

.main .comLiveList li a .textBox {
	padding: 12px 12px 20px;
	min-height: 1px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.main .comLiveList li a .textBox .ttl {
	margin-bottom: 8px;
	min-height: 1px;
	flex: 1;
	color: #141E28;
	font-size: 20px;
	font-weight: bold;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.main .comLiveList li a .textBox .text {
	height: 48px;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.main .comLiveList li a .textBox .infoBox {
	margin-bottom: 16px;
	padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 0;
	background: none;
}

.main .comLiveList li a .textBox .infoBox .time {
	padding-left: 24px;
	background: url("../images/common/time.png") no-repeat left center;
}

.main .comLiveList li a .textBox .infoBox .name {
	padding-left: 24px;
	background: url("../images/common/icon01.png") no-repeat left center;
}

.main .comLiveList li a .textBox .countBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.main .comLiveList li a .textBox .countBox .hotCount {
	padding-left: 24px;
	background: url("../images/common/hot.png") no-repeat left center;
}

.main .comLiveList li a .textBox .countBox .btn {
	width: 100px;
	color: #fff;
	line-height: 40px;
	text-align: center;
	border-radius: 20px;
	background: #005AFF;
}

.main .comLiveList li a .textBox .tagBox {
	margin: 4px -8px 0 0;
	height: 20px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
}

.main .comLiveList li a .textBox .tagBox span {
	margin-right: 8px;
	padding: 0 8px;
	color: #B4BEC8;
	font-size: 12px;
	line-height: 20px;
	background: #F5F6F7;
	border-radius: 4px;
}

/* .main .comLiveList li a .textBox .tagBox span:first-child {
	color: #005AFF;
	background: #CCDEFF;
} */

.main .comLiveList li a .textBox .priceBox {
	margin-top: 20px;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 40px;
}

.main .comLiveList li a .textBox .priceBox .price {
	color: #FF7814;
	font-size: 20px;
	font-weight: bold;
}

.main .comLiveList li a .textBox .priceBox .btn {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: none;
	color: #fff;
	line-height: 40px;
	text-align: center;
	border-radius: 20px;
	background: #005AFF;
}

.main .comLiveList li a:hover .textBox .priceBox .price,
.main .comLiveList li a:hover .textBox .priceBox .count {
	opacity: 0;
	visibility: hidden;
}

.main .comLiveList li a:hover .textBox .priceBox .btn {
	display: block;
}

/* comNewsList */
.main .comNewsList {
	margin: 0 -10px 52px;
	display: flex;
	flex-wrap: wrap;
}

.main .comNewsList li {
	padding: 0 10px 20px;
	width: 50%;
	box-sizing: border-box;
}

.main .comNewsList li a {
	padding: 32px 40px 38px;
	height: 100%;
	display: flex;
	align-items: flex-start;
	background: #fff;
	border-radius: 16px;
	box-sizing: border-box;
}

.main .comNewsList li a .time {
	padding-bottom: 36px;
	min-width: 81px;
	color: #B4BEC8;
	font-weight: bold;
	border-bottom: 1px solid #B4BEC8;
}

.main .comNewsList li a .time span {
	display: block;
	color: #141E28;
	font-size: 28px;
}

.main .comNewsList li a .textBox {
	padding: 6px 0 0 38px;
	min-width: 1px;
	height: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.main .comNewsList li a .textBox .ttl {
	margin-bottom: 20px;
	min-height: 1px;
	flex: 1;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	color: #141E28;
	font-size: 20px;
	font-weight: bold;
}

.main .comNewsList li a .textBox .text {
	height: 44px;
	color: #B4BEC8;
	font-size: 14px;
	line-height: 22px;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.main .comNewsList li a:hover {
	background: #005AFF;
}

.main .comNewsList li a:hover .time,
.main .comNewsList li a:hover .time span,
.main .comNewsList li a:hover .textBox .ttl,
.main .comNewsList li a:hover .textBox .text {
	color: #fff;
}

.main .comNewsList li a:hover .time {
	border-color: #F5F6F7;
}

/* comTeacherList */
.main .comTeacherList {
	margin: 0 -10px;
	display: flex;
	flex-wrap: wrap;
}

.main .comTeacherList li {
	padding: 0 10px 20px;
	width: 20%;
	box-sizing: border-box;
}

.main .comTeacherList li a {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 16px;
}

.main .comTeacherList li a .photo {
	display: block;
}

.main .comTeacherList li a .photo img {
	width: 100%;
	height: 264px;
	display: block;
	object-fit: cover;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.main .comTeacherList li a:hover .photo img {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
}

.main .comTeacherList li a .nameBox {
	padding: 9px 12px;
	width: 100%;
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	color: #B4BEC8;
	font-size: 14px;
	border-radius: 0 0 16px 16px;
	background: rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
}

.main .comTeacherList li a .nameBox span {
	margin-right: 12px;
	color: #fff;
	font-size: 20px;
}

/* login-dialog */
.login-dialog {
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.login-dialog .el-dialog__header {
	padding: 0;
}

.login-dialog .el-dialog__body {
	padding: 0;
	display: flex;
	overflow: hidden;
	border-radius: 16px;
}

.login-dialog .el-dialog__headerbtn {
	position: absolute;
	right: -50px;
	top: -50px;
}

.login-dialog .el-dialog__headerbtn .el-dialog__close {
	color: #fff;
	font-size: 38px;
}

.login-dialog .photo {
	width: 360px;
	height: 460px;
}

.login-dialog .photo img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.login-dialog .formBox {
	min-width: 1px;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
}

.login-dialog .formBox .subBox {
	width: 360px;
}

.login-dialog .formBox .typeUl {
	margin-bottom: 26px;
	display: flex;
	justify-content: center;
}

.login-dialog .formBox .typeUl li {
	margin: 0 20px;
	cursor: pointer;
	font-size: 20px;
	font-weight: bold;
}

.login-dialog .formBox .typeUl li.on,
.login-dialog .formBox .typeUl li:hover {
	color: #005AFF;
}

.login-dialog .formBox .ttl {
	margin-bottom: 26px;
	color: #141E28;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

.login-dialog .formBox .listUl {
	margin-bottom: 20px;
}

.login-dialog .formBox .listUl li {
	margin-bottom: 16px;
	position: relative;
}

.login-dialog .formBox .listUl li .input {
	padding: 0 20px 0 42px;
	width: 100%;
	height: 48px;
	color: #141E28;
	font-size: 16px;
	line-height: 44px;
	border-radius: 24px;
	border: 2px solid #F3F6F9;
	box-sizing: border-box;
}

.login-dialog .formBox .listUl li img {
	position: absolute;
	left: 12px;
	top: 16px;
}

.login-dialog .formBox .listUl li .sendBtn {
	position: absolute;
	right: 12px;
	top: 0;
	color: #005AFF;
	font-size: 16px;
	line-height: 48px;
	cursor: pointer;
}

.login-dialog .formBox .listUl li .input::-webkit-input-placeholder {
	color: #C8D2DC;
}

.login-dialog .formBox .listUl li .input::-moz-placeholder {
	color: #C8D2DC;
	opacity: 1;
}

.login-dialog .formBox .listUl li .input:-moz-placeholder {
	color: #C8D2DC;
	opacity: 1;
}

.login-dialog .formBox .agree .el-checkbox__label {
	color: #B4BEC8;
	font-size: 16px;
	vertical-align: middle;
}

.login-dialog .formBox .agree {
	margin-bottom: 20px;
}

.login-dialog .formBox .agree .nav {
	cursor: pointer;
	color: #005AFF;
	font-size: 16px;
	vertical-align: middle;
}

.login-dialog .formBox .agree .nav:hover {
	text-decoration: underline;
}

.login-dialog .formBox .btn {
	margin-bottom: 20px;
	cursor: pointer;
	color: #fff;
	font-size: 16px;
	line-height: 48px;
	text-align: center;
	background: #005AFF;
	border-radius: 24px;
}

.login-dialog .formBox .btn:hover {
	opacity: 0.8;
}

.login-dialog .formBox .text {
	color: #C8D2DC;
	font-size: 16px;
	text-align: center;
}

.login-dialog .formBox .text span {
	cursor: pointer;
	color: #005AFF;
}

.login-dialog .formBox .text span:hover {
	text-decoration: underline;
}

.login-dialog .formBox .quickList {
	margin: 21px -10px 0;
	display: flex;
	justify-content: center;
}

.login-dialog .formBox .quickList li {
	margin: 0 10px;
	cursor: pointer;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.login-dialog .formBox .quickList li:hover {
	transform: translateY(-5px);
	-webkit-transform: translateY(-5px);
}

.login-dialog .formBox .ma {
	margin: -7px auto 16px;
	padding: 24px;
	width: 240px;
	height: 240px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 16px;
	border: 2px solid #F3F6F9;
	box-sizing: border-box;
}

.login-dialog .formBox .ma iframe {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	display: block;
}

.login-dialog .formBox .ma .qrImg {
	width: auto;
	height: auto;
	max-width: 200px;
	max-height: 200px;
}

.login-dialog .formBox .back {
	margin-top: 36px;
	display: flex;
	justify-content: center;
}

.login-dialog .formBox .back span {
	padding-left: 24px;
	cursor: pointer;
	color: #B4BEC8;
	font-size: 16px;
	background: url("../images/common/back.png") no-repeat left center;
}

/* agree-dialog */
.agree-dialog {
	border-radius: 16px;
}

.agree-dialog .el-dialog__title {
	color: #141E28;
	font-weight: bold;
}

.agree-dialog.el-dialog--center .el-dialog__body {
	max-height: 400px;
	overflow-y: auto;
}

.agree-dialog .el-button {
	padding: 14px 73px;
	border-color: #005AFF;
	border-radius: 23px;
	background-color: #005AFF;
	font-size: 16px;
	color: #fff;
}

/* evaluate-dialog */
.evaluate-dialog {
	border-radius: 16px;
}

.evaluate-dialog .el-dialog__title {
	color: #141E28;
	font-weight: bold;
}

.el-rate__icon {
	margin: 0 0 0 1px;
	font-size: 22px;
}

.el-rate__text {
	margin-left: 8px;
}

.evaluate-dialog .textarea {
	margin-top: 12px;
	padding: 12px;
	width: 100%;
	height: 120px;
	resize: none;
	color: #141E28;
	font-size: 14px;
	box-sizing: border-box;
	border: 1px solid #C8D2DC;
	border-radius: 8px;
}

.evaluate-dialog .el-button {
	padding: 14px 73px;
	border-color: #005AFF;
	border-radius: 23px;
	background-color: #005AFF;
	font-size: 16px;
	color: #fff;
}

/* signup-dialog */
.signup-dialog {
	border-radius: 16px;
}

.signup-dialog .el-dialog__header {
	text-align: left;
	border-bottom: 1px solid #F3F6F9;
}

.signup-dialog .el-dialog__title {
	color: #141E28;
	font-size: 20px;
	font-weight: bold;
}

.signup-dialog .el-dialog__body {
	padding: 35px 20px 10px;
}


.signup-dialog .formBox .list {
	margin: 0 -10px;
	display: flex;
	flex-wrap: wrap;
}

.signup-dialog .formBox .list li {
	padding: 0 10px 27px;
	width: 33.33%;
	box-sizing: border-box;
}

.signup-dialog .formBox .list li.addressItem {
	width: 66.66%;
}

.signup-dialog .formBox .list li.textareaItem {
	width: 100%;
}

.signup-dialog .formBox .list li p {
	color: #141E28;
	font-size: 16px;
	margin-bottom: 11px;
}

.signup-dialog .formBox .list li p span {
	margin-left: 4px;
	color: #FF5050;
}

.signup-dialog .formBox .list li .input input {
	padding: 0 16px;
	width: 100%;
	height: 48px;
	color: #141E28;
	font-size: 16px;
	line-height: 46px;
	box-sizing: border-box;
	border: 1px solid #C8D2DC;
	border-radius: 8px;
}

.signup-dialog .textarea {
	padding: 11px 16px;
	width: 100%;
	height: 120px;
	resize: none;
	color: #141E28;
	font-size: 16px;
	box-sizing: border-box;
	border: 1px solid #C8D2DC;
	border-radius: 8px;
}

.signup-dialog .el-dialog__footer {
	padding: 0 20px 40px;
}

.signup-dialog .el-button {
	padding: 0;
	width: 360px;
	border-color: #005AFF;
	border-radius: 40px;
	background-color: #005AFF;
	font-size: 20px;
	color: #fff;
	line-height: 80px;
	text-align: center;
	border: none;
}

.el-dialog .dialog-footer .el-button:hover {
	opacity: 0.8;
}

.input input::-webkit-input-placeholder {
	color: #B4BEC8;
}

.input input::-moz-placeholder {
	color: #B4BEC8;
	opacity: 1;
}

.input input:-moz-placeholder {
	color: #B4BEC8;
	opacity: 1;
}

.textarea::-webkit-input-placeholder {
	color: #B4BEC8;
}

.textarea::-moz-placeholder {
	color: #B4BEC8;
	opacity: 1;
}

.textarea:-moz-placeholder {
	color: #B4BEC8;
	opacity: 1;
}

/* comHotList */
.main .comHotList {
	margin: 0 -10px;
	display: flex;
	flex-wrap: wrap;
}

.main .comHotList li {
	padding: 0 10px 20px;
	width: 50%;
	box-sizing: border-box;
}

.main .comHotList li a {
	display: flex;
	position: relative;
	overflow: hidden;
	color: #B4BEC8;
	border-radius: 16px;
	background: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.main .comHotList li a:hover {
	transform: translateY(-10px);
	-webkit-transform: translateY(-10px);
}

.main .comHotList li a .photo {
	width: 335px;
	height: 188px;
	object-fit: cover;
}

.main .comHotList li a .hot {
	position: absolute;
	left: 0;
	top: 0;
}

.main .comHotList li a .textBox {
	padding: 16px 16px 0;
	min-width: 1px;
	flex: 1;
}

.main .comHotList li a .textBox .ttl {
	margin-bottom: 12px;
	height: 60px;
	color: #141E28;
	font-size: 20px;
	font-weight: bold;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.main .comHotList li a .textBox .tagBox {
	margin: 4px -8px 0 0;
	height: 20px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
}

.main .comHotList li a .textBox .tagBox span {
	margin-right: 8px;
	padding: 0 8px;
	color: #B4BEC8;
	font-size: 12px;
	line-height: 20px;
	background: #F5F6F7;
	border-radius: 4px;
}

.main .comHotList li a .textBox .priceBox {
	margin-top: 24px;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 40px;
}

.main .comHotList li a .textBox .priceBox .price {
	color: #FF7814;
	font-size: 20px;
	font-weight: bold;
}

.main .comHotList li a .textBox .priceBox .btn {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: none;
	color: #fff;
	line-height: 40px;
	text-align: center;
	border-radius: 20px;
	background: #005AFF;
}

.main .comHotList li a:hover .textBox .priceBox .btn {
	display: block;
}

/* comSection */
.main .comSection {
	margin: 0 auto;
	width: 1400px;
}

/* comBanner */
.comBanner {
	height: 480px;
	background: url("../images/institute/ind_banner.png") no-repeat center top;
	background-size: cover;
}

/* comSubBanner */
.comSubBanner {
	height: 240px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: url("../images/institute/list_banner.png") no-repeat center top;
	background-size: cover;
}

.comSubBanner .title {
	margin: 0 auto;
	width: 1000px;
	position: relative;
	font-size: 48px;
	font-weight: bold;
	line-height: 80px;
}

.comSubBanner .title:before {
	width: 80px;
	height: 80px;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.3;
	border: 16px solid #005AFF;
	box-sizing: border-box;
	border-radius: 50%;
	content: "";
}

.comSubBanner .title span {
	padding-left: 40px;
	position: relative;
	display: block;
}

/* comPageBox */
.comPageBox {
	margin-top: 40px;
	display: flex;
	justify-content: flex-end;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
	background: none;
}

.el-pagination .el-pager li {
	line-height: 26px;
	border: 1px solid rgba(255, 255, 255, 0);
	border-radius: 4px;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
	color: #005AFF;
	border-color: #005AFF;
	background: #fff;
}

/* pagePath */
.pagePath {
	margin: 0 auto;
	width: 1400px;
	display: flex;
	align-items: center;
}

.pagePath li {
	margin-right: 5px;
	color: #B4BEC8;
	line-height: 40px;
}

.pagePath li a {
	margin-right: 0;
	color: #B4BEC8;
}

.pagePath li a:hover {
	color: #141E28;
}

.pagePath li span {
	color: #141E28;
}

.pagePath .el-icon--right {
	font-size: 14px;
}

/* videoControls */
.main .videoControls {
	margin-top: 16px;
	display: flex;
	justify-content: space-between;
}

.main .videoControls .control-group {
	display: flex;
	align-items: center;
}

.main .videoControls .control-group p {
	margin-right: 12px;
}

.main .videoControls .control-group .btn-group {
	display: flex;
}

.main .videoControls .control-group .btn-group .btn {
	margin-right: 8px;
	padding: 0 8px;
	min-width: 100px;
	color: #B4BEC8;
	line-height: 32px;
	text-align: center;
	background: #F5F6F7;
	border-radius: 4px;
	cursor: pointer;
}

.main .videoControls .control-group .btn-group .btn.on {
	color: #fff;
	background: #005AFF;
}

.main .videoControls .nav-buttons {
	display: flex;
}

.main .videoControls .nav-buttons .btn {
	margin-left: 8px;
	padding: 0 8px;
	min-width: 100px;
	color: #B4BEC8;
	line-height: 32px;
	text-align: center;
	background: #F5F6F7;
	border-radius: 4px;
	cursor: pointer;
}

.main .videoControls .nav-buttons .btn.disabled {
	display: none;
}

.main .videoControls .nav-buttons .btn:hover {
	color: #fff;
	background: #005AFF;
}

/* comFormBox */
.main .comFormBox {
	padding: 27px 20px 40px;
	border-radius: 16px;
	background: #fff;
}

.main .comFormBox .list {
	margin: 0 -10px 13px;
	display: flex;
	flex-wrap: wrap;
}

.main .comFormBox .list>li {
	padding: 0 10px 27px;
	width: 33.33%;
	box-sizing: border-box;
}

.main .comFormBox .list li.itemW66 {
	width: 66.66%;
}

.main .comFormBox .list li.itemW100 {
	width: 100%;
}

.main .comFormBox .list li p {
	color: #141E28;
	font-size: 16px;
	margin-bottom: 13px;
}

.main .comFormBox .list li p span {
	margin-left: 4px;
	color: #FF5050;
}

.main .comFormBox .list li .input input {
	padding: 0 16px;
	width: 100%;
	height: 48px;
	color: #141E28;
	font-size: 16px;
	line-height: 46px;
	box-sizing: border-box;
	border: 1px solid #C8D2DC;
	border-radius: 8px;
}

.main .comFormBox .list li .textarea {
	padding: 11px 16px;
	width: 100%;
	height: 120px;
	display: block;
	resize: none;
	color: #141E28;
	font-size: 16px;
	box-sizing: border-box;
	border: 1px solid #C8D2DC;
	border-radius: 8px;
}

.main .comFormBox .list li.files .upload .el-upload {
	padding: 0 16px;
	width: 100%;
	height: 48px;
	position: relative;
	display: block;
	font-size: 16px;
	line-height: 46px;
	text-align: left;
	box-sizing: border-box;
	border: 1px solid #C8D2DC;
	border-radius: 8px;
}

.main .comFormBox .list li.files .upload .txt {
	color: #B4BEC8;
}

.main .comFormBox .list li.files .upload .upBtn {
	width: 120px;
	position: absolute;
	right: -1px;
	top: -1px;
	display: block;
	color: #fff;
	font-size: 16px;
	line-height: 48px;
	text-align: center;
	background: #005AFF;
	border-radius: 8px;
	cursor: pointer;
}

.main .comFormBox .list li.files .el-upload-list__item {
	font-size: 16px;
}

.main .comFormBox .submit {
	margin: 0 auto;
	padding: 0;
	width: 360px;
	border-color: #005AFF;
	border-radius: 40px;
	background-color: #005AFF;
	font-size: 20px;
	color: #fff;
	line-height: 80px;
	text-align: center;
	border: none;
	cursor: pointer;
}

.main .comFormBox .submit:hover {
	opacity: 0.8;
}

.main .comFormBox .list li .input .file {
	padding: 0 16px;
	width: 100%;
	height: 48px;
	position: relative;
	color: #141E28;
	font-size: 16px;
	line-height: 46px;
	box-sizing: border-box;
	border: 1px solid #C8D2DC;
	border-radius: 8px;
}

.main .comFormBox .list li .input .file .el-icon-remove {
	margin-left: 4px;
	cursor: pointer;
	color: #FF5050;
}

.main .comFormBox .list li .input .file.holder {
	color: #B4BEC8;
}

.main .comFormBox .list li .input .file .upload {
	position: absolute;
	right: -1px;
	top: -1px;
}

.main .comFormBox .list li .input .file .upload .upBtn {
	width: 120px;
	display: block;
	color: #fff;
	font-size: 16px;
	line-height: 48px;
	text-align: center;
	background: #005AFF;
	border-radius: 8px;
	cursor: pointer;
}

.main .comFormBox .list li .typeList {
	margin: 0 -10px;
	display: flex;
	flex-wrap: wrap;
}

.main .comFormBox .list li .typeList .type {
	width: 33.33%;
	padding: 20px 10px 0;
	box-sizing: border-box;
}

.main .comFormBox .list li .typeList .type:nth-child(1),
.main .comFormBox .list li .typeList .type:nth-child(2),
.main .comFormBox .list li .typeList .type:nth-child(3) {
	padding-top: 0;
}

.main .comFormBox .list li .typeList .type span {
	display: block;
	line-height: 48px;
	text-align: center;
	background: #F5F6F7;
	border-radius: 8px;
	cursor: pointer;
}

.main .comFormBox .list li .typeList .type span:hover,
.main .comFormBox .list li .typeList .type.on span {
	color: #005AFF;
	background: #CCDEFF;
}

/* cateList */
.main .comCateList {
	margin-bottom: 20px;
	padding: 1px 20px 0;
	border-radius: 16px;
	background: #fff;
}

.main .comCateList .cateItem {
	display: flex;
	align-items: flex-start;
	border-bottom: 1px solid #F5F6F7;
}

.main .comCateList .cateItem:last-child {
	border: none;
}

.main .comCateList .cateItem .cateTtl {
	width: 80px;
	color: #B4BEC8;
	line-height: 59px;
	text-align: right;
}

.main .comCateList .cateItem .itemContent {
	padding: 14px 80px 0 20px;
	min-width: 1px;
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	height: 59px;
	overflow: hidden;
	box-sizing: border-box;
}

.main .comCateList .cateItem .itemContent.autoHeight {
	height: auto;
}

.main .comCateList .cateItem .itemContent .cate {
	margin: 0 40px 14px 0;
	line-height: 30px;
	cursor: pointer;
}

.main .comCateList .cateItem .itemContent .cate:hover,
.main .comCateList .cateItem .itemContent .cate.on {
	color: #005AFF;
}

.main .comCateList .cateItem .more {
	margin: 15px 0 0;
	color: #B4BEC8;
	line-height: 30px;
	cursor: pointer;
}

/* comCouponList */
.comCouponList li .subBox {
	padding: 21px 20px 21px 0;
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 14px;
	background: #FF5050;
	border-radius: 8px;
}

.comCouponList li .subBox .priceBox {
	width: 199px;
	text-align: center;
}

.comCouponList li .subBox .priceBox .price {
	font-size: 16px;
}

.comCouponList li .subBox .priceBox .price span {
	font-size: 40px;
	font-weight: bold;
}

.comCouponList li .subBox .txtBox {
	padding: 0 0 0 20px;
	min-width: 1px;
	flex: 1;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.comCouponList li .subBox .txtBox .name {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.2;
}

.comCouponList li .subBox .txtBox p {
	margin-top: 10px;
	line-height: 1.2;
	white-space: pre-line;
}

.comCouponList li .subBox .status {
	margin-left: 20px;
	width: 120px;
	color: #FF5050;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	border-radius: 20px;
	background: #FFDCDC;
}

.comCouponList li.used .subBox {
	background: #B4BEC8;
}

.comCouponList li.used .subBox .status {
	color: #B4BEC8;
	background: #fff;
}

/* comFeedbackList */
.main .comFeedbackList li {
	padding: 16px 0 15px;
	border-bottom: 1px solid #F5F6F7;
}

.main .comFeedbackList li .questionBox {
	position: relative;
}

.main .comFeedbackList li .resolved {
	position: absolute;
	right: 20px;
	top: 40px;
}

.main .comFeedbackList li .nameBox {
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	line-height: 20px;
}

.main .comFeedbackList li .nameBox .avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin-right: 8px;
}

.main .comFeedbackList li .nameBox .name {
	margin-right: 20px;
	min-width: 1px;
	flex: 1;
}

.main .comFeedbackList li .nameBox .time {
	color: #B4BEC8;
}

.main .comFeedbackList li .text {
	margin-left: 28px;
	font-size: 14px;
	line-height: 22px;
}

.main .comFeedbackList li .answerBox {
	margin: 16px 0 0 28px;
	padding: 12px 12px 16px;
	background: #F5F6F7;
}

/* 视频播放 */
.preview-component-tip .vip-join {
	color: #00c1de;
}

.preview-vod-component .preview-component-layer {
	z-index: 98 !important;
}

.prism-player .prism-big-play-btn {
	z-index: 90 !important;
}

.vip_limit_content {
	display: flex;
	width: 100%;
	height: 100%;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.vip_limit_content .title {
	font-size: 18px;
	line-height: 36px;
	color: #fff;
	text-align: center;
	width: 100%;
}

.vip_limit_button_box {
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
}

.vip_limit_btn {
	display: inline-block;
	min-width: 100px;
	position: relative;
	background: #f60;
	padding: 0 35px;
	margin: 0px 5px 20px 5px;
	border-radius: 38px;
	font-size: 18px;
	line-height: 38px;
	color: #623A0C !important;
	text-align: center;
	background-image: linear-gradient(-135deg, #FBE8A8 0%, #F8E7AC 15%, #E2C078 100%);
	cursor: pointer;
}

.vip_limit_close {
	text-align: center;
}

.vip_limit_close span {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 36px;
	background: rgba(165, 165, 165, 0.54);
	border-radius: 50%;
	font-size: 24px;
	cursor: pointer;
}

.prism-player .prism-volume-control {
	left: auto !important;
	right: 125px;
}

.prism-player .prism-fullscreen-btn {
	margin-top: 15px !important;
	width: 24px;
	height: 24px;
}

.prism-player .prism-thumbnail {
	border: none;
}

.prism-player .prism-play-btn {
	width: 28px;
	height: 28px;
}

.player-olympic-player-next {
	width: 24px;
	height: 28px;
}

.prism-volume {
	margin-top: 14px !important;
	margin-right: 12px !important;
}

.prism-player .prism-volume .volume-icon {
	width: 27px;
	height: 26px;
	background-repeat: no-repeat;
}

.prism-player .prism-volume .volume-icon .short-horizontal {
	width: 2px;
	height: 7px;
}

.prism-player .prism-volume .volume-icon .long-horizontal {
	width: 2px;
	height: 13px;
}

.prism-player .prism-volume .volume-icon.mute .short-horizontal {
	height: 13px;
	top: 7px;
}

.prism-player .prism-volume .volume-icon.mute .long-horizontal {
	top: 7px;
	height: 13px;
}

.prism-player .prism-cc-btn {
	height: 24px;
	width: 20px;
	margin-top: 14px !important;
	margin-right: 22px !important;
}

.prism-player .prism-setting-btn {
	width: 20px;
	height: 22px;
	margin-top: 15px !important;
	margin-right: 23px !important;
}

.prism-time-display {
	margin-top: 4px !important;
	margin-left: 20px !important;
}

/* 答题结果 */
.resultBg {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	background: rgba(0, 0, 0, 0.3);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.question-result {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 710px;
	z-index: 1000;
	padding: 87px 85px 60px;
	box-sizing: border-box;
	background: url("../images/practice/result.png") left top/100% 100% no-repeat;
	transform: translate(-50%, -50%);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.resultBg.show,
.question-result.show {
	visibility: visible;
	opacity: 1;
}

.question-result .question-title {
	margin-bottom: 50px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
	font-size: 24px;
	line-height: 31px;
	color: #282828;
}

.question-result .question-user {
	margin-bottom: 32px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
	font-size: 16px;
	line-height: 26px;
	color: #282828;
}

.question-result .avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	margin-right: 10px;
	vertical-align: middle;
}

.question-result .question-score {
	display: flex;
	margin-bottom: 20px;
}

.question-result .score {
	flex: 1;
	padding: 16px;
	border-radius: 6px;
	margin-left: 19px;
	box-shadow: 0 3px 6px rgba(127, 141, 206, 0.2);
	text-align: center;
}

.question-result .score:first-child {
	margin-left: 0;
}

.question-result .score .name {
	padding-left: 20px;
	margin-bottom: 6px;
	background: left center/15px 15px no-repeat;
	font-size: 14px;
	line-height: 19px;
	color: #999999;
}

.question-result .score .value {
	font-weight: bold;
	font-size: 22px;
	line-height: 29px;
	color: #282828;
}

.question-result .score.grade .value {
	font-size: 18px;
}

.question-result .question-basic {
	display: flex;
	border-radius: 6px;
	box-shadow: 0 3px 6px rgba(127, 141, 206, 0.2);
}

.question-result .question-basic .item {
	position: relative;
	flex: 1;
	padding: 18px 0 17px;
	text-align: center;
	font-size: 14px;
	line-height: 19px;
	color: #999999;
}

.question-result .question-basic .item::before {
	content: "";
	position: absolute;
	top: 30px;
	bottom: 30px;
	left: 0;
	z-index: 2;
	width: 1px;
	border-left: 1px solid #E9E9E9;
}

.question-result .question-basic .item:first-child::before {
	display: none;
}

.question-result .question-basic .value {
	margin-top: 7px;
	font-weight: bold;
	font-size: 22px;
	line-height: 29px;
	color: #282828;
}

.question-result .question-basic .value2 {
	color: #FF5050;
}

.question-result .question-basic .value3 {
	color: #999;
}

.question-result .result-footer {
	margin-top: 50px;
	text-align: center;
}

.question-result .result-footer .button {
	width: 180px;
	height: 50px;
	border: 1px solid #005AFF;
	border-radius: 25px;
	margin-left: 40px;
	background-color: #FFFFFF;
	font-size: 16px;
	color: #005AFF;
	cursor: pointer;
	line-height: 38px;
}

.question-result .result-footer .button:first-child {
	margin-left: 0;
}

.question-result .result-footer .button.fill,
.question-result .result-footer .button:hover {
	background-color: #005AFF;
	color: #FFFFFF;
}

.question-result .user {
	position: absolute;
	top: 60px;
	right: 60px;
	font-size: 14px;
	line-height: 19px;
	color: #666666;
}

.question-result .user:hover {
	color: #005AFF;
}

.question-result .user .iconfont {
	font-size: 14px;
}

.question-result .processBox {
	position: relative;
	margin: 0 auto 38px;
	width: 200px;
}

.question-result .processBox .txt {
	position: absolute;
	left: 50%;
	bottom: 60px;
	color: #999;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}

.question-result .processBox .el-progress--circle .el-progress__text {
	top: 80px;
	color: #005AFF !important;
	font-size: 48px !important;
}