@font-face {
	font-family: 'mx-icon';
	src: url('fonts/mx-iconc378.ttf?z63l79') format('truetype'),
	url('fonts/mx-iconc378.woff?z63l79') format('woff'),
	url('fonts/mx-iconc378.svg?z63l79#mx-icon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="mx-icon-"], [class*=" mx-icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'mx-icon', serif !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	user-select: none;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.mx-icon-sound-uk:before {
	content: "\e900";
}

.mx-icon-close:before {
	content: "\e901";
}

.mx-icon-headset-c:before {
	content: "\e902";
}

.mx-icon-sound:before {
	content: "\e903";
}

.mx-icon-sound-square:before {
	content: "\e904";
}

.mx-icon-voice:before {
	content: "\e905";
}

/* ====================== main ====================== */
input[type=radio], input[type=checkbox] {
	width: 18px;
	height: 18px;
	margin: 0 5px 0 5px;
	position: relative;
	bottom: -4px;
}

.mx_center {
	margin: 20px 0;
	text-align: center;
}

#nav {
	margin: 15px 0;
	user-select: none;
	/*overflow: hidden;*/
}

#nav:after, #nav:before {
	display: table;
	content: "";
}

#nav:after {
	clear: both;
}

#nav li {
	float: left;
	width: 100px;
	padding: 0 10px;
	text-align: center;
	margin-right: 10px;
	line-height: 38px;
	font-size: 18px;
	border-radius: 8px;
	cursor: pointer;
	color: #ffffff;
	background: #1fab89;
}

#nav li.active {
	background: #ff8264;
}

#nav li:hover {
	background: #bf242a;
}

#option_gender {
	margin: 15px 0;
}

#option_gender label {
	margin-right: 10px;
	font-size: 15px;
}

#chart2, #chart3 {
	display: none;
}

.dialog_title {
	background-color: #f4f4f5;
	color: #909399;
	/*border: 1px solid #D5D7DF;*/
	border-radius: 5px;
	padding: 6px 10px;
	line-height: 1.2;
	font-size: 15px;
}

#dialog_content {
	font-size: 72px;
	line-height: 1.2;
	margin: 5px 0 15px;
}

#dialog_img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 500px;
}

/* ====================== row ====================== */
.mx-row {
	position: relative;
	box-sizing: border-box;
}

.mx-row:after, .mx-row:before {
	display: table;
	content: "";
}

.mx-row:after {
	clear: both;
}

.mx-col {
	float: left;
	box-sizing: border-box;
	width: 50%
}

.details {
	font-size: 24px;
}

.details li {
	line-height: 1.3;
}

.details li.similar {
	margin: 8px 0;
	color: #b3b3b3;
	font-size: 20px;
}

.details li.mouth {
	height: 226px;
	margin-bottom: 10px;
}

.details li.mouth img {
	max-width: 100%;
}

.details li.mouth3 {
	height: 104px;
}

.details b, #dialog_content b, .tb_word b {
	/*font-weight: normal;*/
	color: red;
}

.mx-icon-sound-square.male {
	color: #1a73e8;
}

.mx-icon-sound-square.female {
	color: deeppink;
}

.tips {
	margin-top: 0.5em;
	color: #b3b3b3;
}

[class^="mx-icon-sound"] {
	font-size: 28px;
	cursor: pointer;
	vertical-align: middle;
}

[class^="mx-icon-sound"]:hover {
	opacity: .7;
}

/* ====================== table ====================== */
.table_tit {
	font-size: 18px;
	font-weight: bold;
	margin-top: 10px;
	text-indent: 5px;
}

.table1 {
	border-collapse: separate;
	border-spacing: 5px;
}

.table1 tr td, .table1 tr th {
	width: 50px;
	height: 50px;
	text-align: center;
	font-size: 32px;
	border-radius: 8px;
	user-select: none;
}

.table1 tr td {
	cursor: pointer;
}

.table1 tr td[key^="Vowels_"] {
	background: #71c9ce;
}

.table1 tr td[key^="Dipthongs_"] {
	background: #a6e3e9;
}

.table1 tr td[key^="Consonants_"] {
	background: #cbf1f5;
}

.table1 tr td:hover {
	background: #f38181;
}

.table1 tr td.active {
	background: #ffde7d;
}

table.mx_table {
	width: 100%;
	border-collapse: collapse;
}

table.mx_table tr:hover td {
	background: #F2F5F9;
}

table.mx_table th, table.mx_table td {
	text-align: left;
	background: #fff;
	border-top: 1px solid #ddd;
	padding: 8px;
	word-break: break-all;
	font-size: 15px;
}

table.mx_table th {
	background: #F5F6F9;
}

table.mx_table thead th {
	border-top: none;
}

table.mx_table .tb_index {
	width: 50px;
}

table.mx_table .tb_word {
	font-size: 20px;
}

table.mx_table .tb_num {
	width: 90px;
	text-align: center;
}

table.mx_table .tb_operate {
	width: 190px;
}

.table_but {
	margin: 10px 5px;
}

/* ====================== button ====================== */
.mx_button {
	display: inline-block;
	margin: 0;
	padding: 8px 12px;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	text-align: center;
	outline: none;
	box-sizing: border-box;
	user-select: none;
	background: #4395ff;
	border: 1px solid #3589ff;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	transition: .1s;
}

.mx_button:hover {
	box-shadow: 2px 2px 5px 0 #a6aab0;
}

.mx_button:active {
	opacity: .7;
}

.mx_button.medium {
	font-size: 105%;
	padding: 10px 13px;
}

.mx_button.big {
	font-size: 125%;
	padding: 10px 16px;
}

.mx_button_default {
	background: #fff;
	border: 1px solid #dcdfe6;
	color: #606266;
}

.mx_button_success {
	background-color: #67c23a;
	border-color: #67c23a;
	color: #fff;
}

.mx_button_warning {
	background-color: #e6a23c;
	border-color: #e6a23c;
	color: #fff;
}

.mx_button_danger {
	background-color: #ef473a;
	border-color: #dd1419;
	color: #fff;
}

.mx_button:disabled, .mx_button:disabled:hover {
	cursor: not-allowed;
	opacity: .3;
	box-shadow: none;
}

/* ==================== divider ==================== */
.divider {
	position: relative;
	text-align: center;
	margin: 10px 0;
}

.divider:after {
	position: absolute;
	top: 50%;
	display: block;
	content: '';
	width: 100%;
	border-bottom: 1px solid #b9b9b9;
}

.divider b {
	z-index: 1;
	display: inline-block;
	padding: 0 10px;
	position: relative;
	background: #FFF;
	font-size: 120%;
	font-weight: 400;
}

.item_input {
	background: #fff;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	box-sizing: border-box;
	color: #606266;
	display: inline-block;
	height: 40px;
	line-height: 40px;
	outline: none;
	font-size: 16px;
	padding: 0 15px;
	transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
	width: 100%;
}

.form_item .item_label {
	font-weight: bold;
	margin-bottom: 5px;
}

.form_item .item_input {
	width: 120px;
}

/* ==================== learn_points ==================== */
.learn_points {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.8;
	color: #333;
}

.learn_points .title {
	position: relative;
}

.learn_points .title:after {
	position: absolute;
	top: 50%;
	display: block;
	content: '';
	width: 100%;
	border-bottom: 1px solid #b9b9b9;
}

.learn_points .title b {
	z-index: 1;
	position: relative;
	background: #FFF;
	padding-right: 5px;
}

.learn_points .case {
	padding: 5px;
}

.learn_points .case b {
	color: red;
}

.learn_points .case p {
	text-indent: 2em;
}

.learn_points .case p.ml_1 {
	text-indent: 0;
	margin-left: 2em;
}

.learn_points .case a {
	color: #136ec2;
}

/* ==================== dal ==================== */
.dal, .dal_bg, .ddi, .ddi_bg {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.dal_bg, .ddi_bg {
	z-index: 999999999998;
	background: rgba(0, 0, 0, .6);
}

.dal, .ddi {
	z-index: 999999999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dal_modal, .ddi_modal {
	position: relative;
	width: 500px;
	background: #fff;
	border-radius: 5px;
	padding: 20px;
	font-size: 16px;
	max-height: 95%;
	overflow: auto;
}

.dal_text {
	margin: 15px 0;
}

.dal_foot {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.ddi_dialog {
	width: 600px;
	padding: 0;
}

.ddi_dialog.fullscreen {
	width: 100%;
	height: 100%;
	max-height: 100%;
	border-radius: 0;
	background: #FFF;
}

.ddi_head {
	width: 100%;
	height: 38px;
	line-height: 38px;
	padding-left: 10px;
	font-weight: bold;
	font-size: 18px;
	color: #303133;
}

.ddi_head .mx-icon-close {
	display: block;
	width: 20px;
	height: 20px;
	line-height: 20px;
	position: absolute;
	top: 10px;
	right: 10px;
	color: #FC4A4A;
	font-size: 18px;
}

.ddi_head .mx-icon-close:hover {
	opacity: .8;
	cursor: pointer;
}

.ddi_body {
	margin: 0 15px 10px;
}

/* ==================== player ==================== */
.mx_overflow_hidden {
	overflow: hidden;
}

.mx_player {
	margin-top: 10px;
	position: relative;
	width: 100%;
	height: 120px;
	max-width: 920px;
	background: #d7dde8;
	border-radius: 5px;
}

.mx_player .mx_surfer {
	width: 100%;
	height: calc(100% - 26px);
	overflow: hidden;
	border-radius: 0 0 5px 5px;
}

.mx_player .mx_controls {
	display: flex;
	position: absolute;
	top: 26px;
	left: 0;
	width: 100%;
	height: calc(100% - 26px);
	z-index: 999;
}

.mx_player .mx_p_top {
	background: #757F9A;
	color: #FFFFFF;
	height: 26px;
	line-height: 26px;
	padding: 0 10px;
	border-radius: 5px 5px 0 0;
}

.mx_player .mx_p_top .mx_p_title {
	float: left;
	font-size: 16px;
}

.mx_player .mx_p_top .mx_p_time {
	float: right;
	font-size: 14px;
	font-family: Consolas, serif;
}

.mx_player .mx_controls button {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	top: 50%;
	left: 50%;
	min-width: 100px;
	height: 60px;
	white-space: nowrap;
	cursor: pointer;
	border-radius: 10px;
	outline: 0;
	padding: 0 10px;
	margin-top: -30px;
	margin-left: -50px;
	font-size: 32px;
	background-color: #FF4B2B;
	border-color: #FF4B2B;
	color: #FFF;
}

.mx_player .mx_controls button:hover {
	background: #f78989;
	border-color: #f78989;
	color: #FFF;
}

.mx_player .mx_controls button.disabled {
	cursor: not-allowed;
	background: #fab6b6;
	border-color: #fab6b6;
	color: #FFF;
}

.mx_circle {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 64px;
	width: 64px;
	position: relative;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	background: linear-gradient(#e9eaeb, #D3CCE3);
	border: 1px solid #bdc3c7;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .19), inset 0 1px 0 rgba(255, 255, 255, .4);
	transition: height 0.25s ease, width 0.25s ease;
	transform: translate(-50%, -50%);
}

.mx_circle:hover {
	outline: none;
}

.mx_circle:before, .mx_circle:after {
	display: block;
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 50%;
}

.mx_circle .mx-icon {
	font-size: 46px;
	color: #333;
}

.mx_circle.mx_on {
	background: linear-gradient(#FF416C, #FF4B2B);
	border: 1px solid #FF4B2B;
}

.mx_circle.mx_on .mx-icon {
	color: #fff;
}

.mx_circle.mx_on:before, .mx_circle.mx_on:after {
	border: 0.015625rem solid #FF4B2B;
}

.mx_circle.mx_on:before {
	animation: mx_ripple 2s linear infinite;
}

.mx_circle.mx_on:after {
	animation: mx_ripple 2s linear 1s infinite;
}

.mx_reverse.mx_on:before, .mx_reverse.mx_on:after {
	animation-direction: reverse;
}

.mx_reverse.mx_on {
	cursor: pointer;
}

@keyframes mx_ripple {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.5);
		opacity: 0.5;
	}
	75% {
		transform: scale(1.75);
		opacity: 0.2;
	}
	100% {
		transform: scale(1.95);
		opacity: 0;
	}
}

@media only screen and (max-width: 1200px) {
	.mx-col {
		width: 100%;
	}

	.details {
		margin-top: 10px;
		padding: 6px;
	}
}

@media only screen and (max-width: 768px) {
	table.mx_table .tb_num {
		display: none;
	}

	#dialog_content {
		text-align: center;
	}

	#dialog_img {
		height: 260px;
	}
}