body {
	background-color: #ffffff;
	background: url(../../images/page-bg.jpg) no-repeat top center;
	color: #353535;
	font-family: Arial, "微軟正黑體", "sans-serif", "Font Awesome 5 Free";
	font-size: 14px;
	margin: 0 auto;
	padding: 0 0;
}
h1, h2, h3, h4, h5, h6, p, label {
	margin: 0 0;
	padding: 0 0;
}
h2 {
	font-size: 36px;
	font-weight: bold;
}
h3 {
	font-size: 28px;
	margin-bottom: 20px;
}
h4 {
	font-size: 24px;
	font-weight: bold;
	line-height: 1.8em;
	margin-bottom: 20px;
}
ol, ul {
	padding: 0;
	margin: 0;
    list-style: none;
}
p {
	font-size: 16px;
	line-height: 1.6em;
	padding-bottom: 15px;
}
a {
	color: #353535;
}
a:hover {
	text-decoration-line: none;
}
/*-- BUTTON STYLES --*/
.more-btn, .back-btn {
	width: 100%;
	background: url(../../images/btn-bg.png) repeat-x center center;
	margin: 30px 0px;
	display: inline-block;
}
.more-btn a, .back-btn a {
	background-color: #ffffff;
	border: 1px #7d694b solid;
	border-radius: 18px;
	display: inline-block;
	float: right;
}
.more-btn a:hover, .back-btn a:hover {
	background-color: #7d694b;
}
.more-btn a p, .back-btn a p {
	color: #7d694b;
	font-size: 16px;
	text-align: center;
	margin: 0px 0px;
	padding: 5px 30px;
}
.more-btn a p::after {
	font-family: "Font Awesome 5 free";
	font-weight: 900;
	content: "\f054";
	color: #7d694b;
	padding-left: 5px;
}
.back-btn a p::after {
	font-family: "Font Awesome 5 free";
	font-weight: 900;
	content: "\f3e5";
	color: #7d694b;
	padding-left: 5px;
}
.more-btn a p:hover, .more-btn a p:hover::after, .back-btn a p:hover, .back-btn a p:hover::after {
	color: #ffffff;
}
#input-btn {
	text-align: center;
}
#input-btn input {
	width: 150px;
	background-color: #ffffff;
	color: #7d694b;
	font-size: 16px;
	border: 2px #7d694b solid;
	border-radius: 25px;
	padding: 10px 5px;
	margin: 0px 15px;
}
#input-btn input:hover {
	background-color: #7d694b;
	color: #ffffff;
}
/*-- HEADER STYLES --*/
#header {
	width: 100%;
	height: auto;
}

#topbar {
	background: url(../../images/topbar-bg.jpg) no-repeat top center;
	padding: 5px 0px;
	position: absolute;
}
#topbar a {
 	color: #ffffff;
}

#topbar a:hover {
	color: #7d694b;
}
#topbar .btn-download {
	background-color: #ffffff;
	border-color: #7d694b;
	border-radius: 5px;
	color: #f4a121;
	font-size: 14px;
	line-height: 1.5;
	margin-right: 10px;
	padding: 4px 20px;
	float: right;
}
#topbar .btn-download:hover {
	background-color: #f4a121;
	color: #ffffff;
}
#topbar .btn-download::after {
	font-family: "Font Awesome 5 free";
	font-weight: 900;
	content: "\f019";
	color: #f4a121;
	padding-left: 30px;
}
#topbar .btn-download:hover::after {
	font-family: "Font Awesome 5 free";
	font-weight: 900;
	content: "\f019";
	color: #ffffff;
	padding-left: 30px;
}
#topbar .dropdown {
}
#topbar .btn-dropdown {
	background-color: #ffffff;
	border-color: #7d694b;
	border-radius: 5px;
	color: #353535;
	font-size: 14px;
	line-height: 1.5;
	margin-right: 10px;
	padding: 4px 20px;
	float: right;
}
#topbar .btn-download:hover, #topbar .btn-download:active, #topbar .btn-download:focus {
	background-color: #f4a121;
	color: #ffffff;
}
#tpb-menu {
	margin-top: 80px;
	margin-bottom: 60px;
}
#tpb-menu .collapse:not(.show) {
	display: inherit;
}
#tpb-menu .navbar-collapse {
	flex-basis: 0;
}
#tpb-menu .navbar-nav {
	display: inline-block;
}
.nav-item {
	height: auto;
	display: inline-block;
    *display: inline;
    zoom: 1;
}
.nav-btn ul {
	margin-top: 0px;
	margin-left: 0px;
}
.nav-btn ul li {
	width: 95px;
	height: 41px;
	background: url(../../images/nav-y.png) no-repeat top center;
	text-align: center;
	margin: 0 10px 10px 0;
	padding-bottom: 0px;
}
.nav-btn ul li a {
	color: #75400c;
	font-size: 16px;
	padding: 5px 0 0 0;
}
.nav-btn ul li:hover, .nav-btn ul li:active {
	background: url(../../images/nav-b.png) no-repeat top center;
}
.nav-btn ul li a:hover, .nav-btn ul li a:active {
	color: #ffffff;
}
.nav-btn .active {
	background: url(../../images/nav-b.png) no-repeat top center;
}
.nav-btn .active a {
	color: #ffffff;
}
/*-- ONLINE DICTIONARY STYLES --*/
#nav-dictionary {
	border: 1px #7d694b solid;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}
#nav-dictionary h3 {
	background-color: #7d694b;
	border-top-left-radius: 17px;
	border-top-right-radius: 17px;
	color: #ffffff;
	font-size: 26px;
	line-height: 0px;
	font-weight: bold;
	text-align: center;
	padding: 20px 20px 15px 10px;
	margin-bottom: 0px;
}
#nav-dictionary h3 img {
	margin: 0px 10px 5px 0px;
}
.nav_search_bar {
	background-color : #FFB900;
	padding : 10px;
	color: #444;
}
/*-- LAYOUT STYLES --*/
#main {
}
#content {
}
.page_content {
}
h2.page-title {
	color: #1e3264;
	border-left: #1e3264 9px solid;
	letter-spacing: 10px;
	padding-left: 25px;
	margin-bottom: 60px;
}
h3.page-title {
	color: #353535;
	font-size: 24px;
	padding-left: 15px;
	margin-bottom: 40px;
}
h3.page-title::before {
	font-family: "Font Awesome 5 free";
	font-weight: 900;
	content: "\f02e";
	color: #353535;
	padding-right: 10px;
}
#finesse .breadcrumb, #material .breadcrumb, #video .breadcrumb {
	background-color: transparent;
	margin-bottom: 20px;
}
#finesse .breadcrumb li, #material .breadcrumb li, #video .breadcrumb li {
	font-size: 28px;
	font-weight: bold;
}
#finesse .breadcrumb li.s01, #finesse .breadcrumb li.s01::before, #finesse .breadcrumb li.s01 a {
	color: #1e6e0a;
}
#finesse .breadcrumb li.s02, #finesse .breadcrumb li.s02::before, #finesse .breadcrumb li.s02 a {
	color: #283cab;
}
#finesse .breadcrumb li.s03, #finesse .breadcrumb li.s03::before, #finesse .breadcrumb li.s03 a {
	color: #ffa01e;
}
#material .breadcrumb li.s11, #material .breadcrumb li.s11::before, #material .breadcrumb li.s11 a {
	color: #506eb4;
}
#video .breadcrumb li.s21, #video .breadcrumb li.s21::before, #video .breadcrumb li.s21 a {
	color: #353535;
}
#finesse .breadcrumb-item+.breadcrumb-item::before, #material .breadcrumb-item+.breadcrumb-item::before, #video .breadcrumb-item+.breadcrumb-item::before {
	font-family: "Font Awesome 5 free";
	font-weight: 900;
	content: "\f105";
}
h3.style01 {
	color: #1e6e0a;
	font-weight: bold;
}
h4.style01, h4.style02, h4.style03 {
	width: 300px;
	color: #ffffff;
	font-size: 28px;
	font-weight: bold;
	text-align: center;
	border-radius: 40px;
	padding: 15px;
	margin-left: 15px;
	margin-bottom: 30px;
}
h4.style01, ul.finesse_list li.s01 {
	background: -webkit-linear-gradient(180deg, rgba(30, 110, 10, 1)0%, rgba(75, 160, 50, 1)100%);
	background: -o-linear-gradient(180deg, rgba(30, 110, 10, 1)0%, rgba(75, 160, 50, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(30, 110, 10, 1)0%, rgba(75, 160, 50, 1)100%);
	background: linear-gradient(180deg, rgba(30, 110, 10, 1)0%, rgba(75, 160, 50, 1)100%);
	border: #1e6e0a 2px solid;
}
h4.style02, ul.finesse_list li.s02 {
	background: -webkit-linear-gradient(180deg, rgba(40, 60, 170, 1)0%, rgba(75, 90, 180, 1)100%);
	background: -o-linear-gradient(180deg, rgba(40, 60, 170, 1)0%, rgba(75, 90, 180, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(40, 60, 170, 1)0%, rgba(75, 90, 180, 1)100%);
	background: linear-gradient(180deg, rgba(40, 60, 170, 1)0%, rgba(75, 90, 180, 1)100%);
	border: #283cab 2px solid;
}
h4.style03, ul.finesse_list li.s03 {
	background: -webkit-linear-gradient(180deg, rgba(255, 160, 30, 1)0%, rgba(255, 180, 80, 1)100%);
	background: -o-linear-gradient(180deg, rgba(255, 160, 30, 1)0%, rgba(255, 180, 80, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(255, 160, 30, 1)0%, rgba(255, 180, 80, 1)100%);
	background: linear-gradient(180deg, rgba(255, 160, 30, 1)0%, rgba(255, 180, 80, 1)100%);
	border: #ffa01e 2px solid;
}
h4.s21 {
	font-weight: bold;
	padding-left: 15px;
}
ul.ms_info_list li {
	background: -webkit-linear-gradient(180deg, rgba(80, 100, 180, 1)0%, rgba(125, 160, 235, 1)100%);
	background: -o-linear-gradient(180deg, rgba(80, 100, 180, 1)0%, rgba(125, 160, 235, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(80, 100, 180, 1)0%, rgba(125, 160, 235, 1)100%);
	background: linear-gradient(180deg, rgba(80, 100, 180, 1)0%, rgba(125, 160, 235, 1)100%);
	border: #506eb4 2px solid;
}
ul.ms_info_list li:hover {
	background: -webkit-linear-gradient(180deg, rgba(80, 100, 180, 1)0%, rgba(80, 100, 180, 1)100%);
	background: -o-linear-gradient(180deg, rgba(80, 100, 180, 1)0%, rgba(80, 100, 180, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(80, 100, 180, 1)0%, rgba(80, 100, 180, 1)100%);
	background: linear-gradient(180deg, rgba(80, 100, 180, 1)0%, rgba(80, 100, 180, 1)100%);
}
ul.video_list li {
	background: -webkit-linear-gradient(180deg, rgba(230, 45, 70, 1)0%, rgba(230, 125, 140, 1)100%);
	background: -o-linear-gradient(180deg, rgba(230, 45, 70, 1)0%, rgba(230, 125, 140, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(230, 45, 70, 1)0%, rgba(230, 125, 140, 1)100%);
	background: linear-gradient(180deg, rgba(230, 45, 70, 1)0%, rgba(230, 125, 140, 1)100%);
	border: #e62d46 2px solid;
}
ul.video_list li:hover {
	background: -webkit-linear-gradient(180deg, rgba(230, 45, 70, 1)0%, rgba(230, 45, 70, 1)100%);
	background: -o-linear-gradient(180deg, rgba(230, 45, 70, 1)0%, rgba(230, 45, 70, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(230, 45, 70, 1)0%, rgba(230, 45, 70, 1)100%);
	background: linear-gradient(180deg, rgba(230, 45, 70, 1)0%, rgba(230, 45, 70, 1)100%);
}

/* PHD add */

.s22 {
	font-weight: bold;
	font-size:22px;
}

ul.video_list1 {
	width:100%;
	margin: 0px 0px 30px 30px;
}

select#change_mode {
	background-color: #ffffff;
	border-color: #7d694b;
	color: #353535;
	font-size: 14px;
	margin-right: 10px;
	height: 2.2em;
	float: right;
	width:auto;
}

/* arrows */

/*-- INDEX --*/
#index {
	background: url(../../images/index-bg.jpg) no-repeat center;
	background-size: cover;
	height: 100vh;
	margin: 0;
	padding: 0;
	position: relative;
}
#index .global-link {
	width: 510px;
	text-align: center;
	margin: 0 auto;
	padding-top: 5%;
	position: relative;
}
#index .global-link img {
	width: 100%;
	padding: 60px 15px 90px 15px;
	margin: 0 auto;
}
#index .global-link div {
	margin-top: 30px;
}
#index .link-btn {
	background: -webkit-linear-gradient(180deg, rgba(248, 194, 109, 1)0%, rgba(243, 158, 22, 1)100%);
	background: -o-linear-gradient(180deg, rgba(248, 194, 109, 1)0%, rgba(243, 158, 22, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(248, 194, 109, 1)0%, rgba(243, 158, 22, 1)100%);
	background: linear-gradient(180deg, rgba(248, 194, 109, 1)0%, rgba(243, 158, 22, 1)100%);
	color: #ffffff;
	font-size: 21px;
	border: #f8b551 1px solid;
	border-radius: 30px;
	padding: 10px 30px;
	margin: 0px 15px 10px 15px;
}
#index .link-btn:hover {
	background: -webkit-linear-gradient(180deg, rgba(243, 158, 22, 1)0%, rgba(243, 158, 22, 1)100%);
	background: -o-linear-gradient(180deg, rgba(243, 158, 22, 1)0%, rgba(243, 158, 22, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(243, 158, 22, 1)0%, rgba(243, 158, 22, 1)100%);
	background: linear-gradient(180deg, rgba(243, 158, 22, 1)0%, rgba(243, 158, 22, 1)100%);
}
/*-- HOME --*/
#tpb-kv {
	background-color: #f4a121;
	border-radius: 30px;
	padding: 0px 0px 10px 0px;
	margin-bottom: 40px;
}
#tpb-kv img {
	width: 100%;
	text-align: center;
	padding: 0px 0px 30px 0px;
	margin: -4px 0px 0px 0px;
}
#tpb-kv p {
	color: #ffffff;
	font-size: 16px;
	line-height: 24px;
	padding: 0px 40px 10px 40px;
}
#home_news_block {
}
#home_news_block h3 {
	color: #7d694b;
	font-size: 26px;
	line-height: 0px;
}
#home_news_block h3 img {
	margin: 0px 10px 10px 0px;
}
#home_news_list {
}
#home_news_list ol {
	font-weight: bold;
	list-style-type: decimal;
	list-style-position: inside;
	margin-bottom: 0px;
	padding: 0px 20px;
}
#home_news_list li {
	font-size: 16px;
	font-weight: 400;
	padding: 10px;
	border-bottom: 1px solid #ffffff;
}
#home_news_list li a {
	color: #554123;
}
#home_news_list li a:hover {
	color: #f4a121;
}
#home_news_list li:nth-child(odd) {
	background-color: #fdf1d8;
}
#home_news_list li:nth-child(even) {
	background-color: #fef8eb;
}
#latest-video {
	text-align: center;
}
#latest-video h3 {
	color: #7d694b;
	font-size: 26px;
	line-height: 0px;
	text-align: left;
}
#latest-video h3 img {
	margin: 0px 10px 10px 0px;
}
/*-- DICTIONARY --*/
#content .dictionary_search {
	min-height: 600px;
	border: 2px #1e3264 solid;
	border-radius: 20px;
}
.dictionary_search_bar {
	background-color: #506eb4;
	border-top-left-radius: 17px;
	border-top-right-radius: 17px;
	padding: 15px 30px;
}
#search_form {
	width: 100%;
}
#search_form input {
	margin-right: 10px;
}
/*-- NEWS --*/
#news_table {
	width: 100%;
}
.news-table {
	font-size: 18px;
	margin: 0 auto;
	border: none;
}
.news-table thead th {
	background-color: #d4d9e6;
	color: #506eb4;
	font-weight: bold;
	text-align: center;
	padding: 15px 15px;
}
.news-table tbody tr:nth-child(odd) {
	background-color: #e9ecf2;
}
.news-table tr:nth-child(even) {
	background-color: #d4d9e6;
}
.news-table tbody th {
	color: #1e3264;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	padding: 15px 15px;
}
.news-table td a {
	color: #1e3264;
	text-align: left;
	padding: 15px 15px;
}
.news-table td a:hover {
	color: #506eb4;
}
#news-page {
}
#news-page .news-date {
	width: 115px;
	background-color: #506eb4;
	color: #eeeeee;
	font-size: 14px;
	padding: 5px 20px;
	margin-bottom: 15px;
}
/*-- INFO / FINESSE --*/
#info_list {
	margin: 0px;
}
#info_list ol {
	font-weight: bold;
	list-style-type: decimal;
	list-style-position: inside;
	margin-bottom: 0px;
	padding: 0px 0px;
}
#info_list li {
	font-size: 18px;
	font-weight: 400;
	padding: 10px;
	border-bottom: 1px solid #ffffff;
}
#info_list li a {
	color: #1e3264;
}
#info_list li a:hover {
	color: #506eb4;
}
#info_list li:nth-child(odd) {
	background-color: #d4d9e6;
}
#info_list li:nth-child(even) {
	background-color: #e9ecf2;
}
.game-level01 img, .game-level02 img, .game-level03 img {
	width: 100%;
	border-radius: 20px;
	margin: 0px 15px;
}
.game-level01 img {
	border: #82be6e 2px solid;
}
.game-level02 img {
	border: #5a6ecd 2px solid;
}
.game-level03 img {
	border: #ffbe32 2px solid;
}
.finesse-level ul {
	padding: 0px;
	margin: 0px 15px;
}
.finesse-level ul li {
	padding-bottom: 30px;
}
.finesse-level ul li a {
	color: #ffffff;
}
.finesse-level ul li ul {
	padding: 0px;
	margin: 0px;
}
.finesse-level ul li ul li {
	padding: 0px 10px 30px 10px;
	display: inline-block;
}
.finesse-level ul li ul li a {
	text-align: center;
}
.finesse-level ul li ul li a img {
	border: none;
	border-radius: 15px;
	padding: 0px;
	margin: 0px;
}
p.style01, p.style02, p.style03 {
	font-size: 21px;
	padding-top: 15px;
}
p.style01 {
	color: #469632;
}
p.style02 {
	color: #5a6ecd;
}
p.style03 {
	color: #ffbe32;
}
ul.finesse_list, ul.ms_info_list, ul.video_list {
	margin-bottom: 30px;
}
ul.finesse_list li.s01 a, ul.finesse_list li.s02 a, ul.finesse_list li.s03 a, ul.ms_info_list li a, ul.video_list li a {
	color: #ffffff;
}
ul.finesse_list li.s01:hover {
	background: -webkit-linear-gradient(180deg, rgba(30, 110, 10, 1)0%, rgba(30, 110, 10, 1)100%);
	background: -o-linear-gradient(180deg, rgba(30, 110, 10, 1)0%, rgba(30, 110, 10, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(30, 110, 10, 1)0%, rgba(30, 110, 10, 1)100%);
	background: linear-gradient(180deg, rgba(30, 110, 10, 1)0%, rgba(30, 110, 10, 1)100%);
}
ul.finesse_list li.s02:hover {
	background: -webkit-linear-gradient(180deg, rgba(40, 60, 170, 1)0%, rgba(40, 60, 170, 1)100%);
	background: -o-linear-gradient(180deg, rgba(40, 60, 170, 1)0%, rgba(40, 60, 170, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(40, 60, 170, 1)0%, rgba(740, 60, 170, 1)100%);
	background: linear-gradient(180deg, rgba(40, 60, 170, 1)0%, rgba(40, 60, 170, 1)100%);
}
ul.finesse_list li.s03:hover {
	background: -webkit-linear-gradient(180deg, rgba(243, 158, 22, 1)0%, rgba(243, 158, 22, 1)100%);
	background: -o-linear-gradient(180deg, rgba(243, 158, 22, 1)0%, rgba(243, 158, 22, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(243, 158, 22, 1)0%, rgba(243, 158, 22, 1)100%);
	background: linear-gradient(180deg, rgba(243, 158, 22, 1)0%, rgba(243, 158, 22, 1)100%);
}
.material-s {
	overflow-y: auto;
}
.material-s table.s001, .material-s table.s002, .material-s table.s003 {
	width: 100%;
	text-align: center;
	margin-bottom: 15px;
}
.material-s table.s001 tr {
	text-align: left;
}
.material-s table.s002 tr {
	background-color: #faf5e6;
	text-align: center;
}
.material-s table.s003 tr {
	background-color: #fffafa;
	text-align: center;
}
.material-s table.s003 tr td {
	padding-top: 5px;
}
.ms-list ul {
	padding: 0px;
	margin: 0px 15px;
}
.ms-list ul li {
	width: 150px;
	height: 150px;
	background: url(../../images/ms-list-bg.jpg) no-repeat center center;
	border-radius: 15px;
	display: inline-block;
	text-align: center;
	margin: 0px 10px 30px 10px;
}
.ms-list ul li a {
	width: 150px;
	height: 150px;
	color: #ffffff;
	font-size: 30px;
	line-height: 150px;
}
.ms-list ul li a:hover {
	color: #1e82c8;
}
/*-- PHONICS --*/
ul.phonics_info {
	margin: 0px 15px;
}
ul.phonics_info li, ul.finesse_list li, ul.ms_info_list li, ul.video_list li {
	list-style: none;
}
ul.phonics_info li, ul.finesse_list li, ul.ms_info_list li, ul.video_list li {
	width: 210px;
	color: #ffffff;
	font-size: 21px;
	text-align: center;
	border: 2px solid;
	border-radius: 40px;
	display: inline-block;
	padding : 10px;
	margin: 20px 10px;
}
ul.phonics_info li.s01 {
	background: -webkit-linear-gradient(180deg, rgba(10, 80, 170, 1)0%, rgba(100, 140, 200, 1)100%);
	background: -o-linear-gradient(180deg, rgba(10, 80, 170, 1)0%, rgba(100, 140, 200, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(10, 80, 170, 1)0%, rgba(100, 140, 200, 1)100%);
	background: linear-gradient(180deg, rgba(10, 80, 170, 1)0%, rgba(100, 140, 200, 1)100%);
	border-color: #0a50aa;
}
ul.phonics_info li.s01:hover {
	background: -webkit-linear-gradient(180deg, rgba(10, 80, 170, 1)0%, rgba(10, 80, 170, 1)100%);
	background: -o-linear-gradient(180deg, rgba(10, 80, 170, 1)0%, rgba(10, 80, 170, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(10, 80, 170, 1)0%, rgba(10, 80, 170, 1)100%);
	background: linear-gradient(180deg, rgba(10, 80, 170, 1)0%, rgba(10, 80, 170, 1)100%);
}
ul.phonics_info li.s02 {
	background: -webkit-linear-gradient(180deg, rgba(180, 30, 30, 1)0%, rgba(220, 100, 100, 1)100%);
	background: -o-linear-gradient(180deg, rgba(180, 30, 30, 1)0%, rgba(220, 100, 100, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(180, 30, 30, 1)0%, rgba(220, 100, 100, 1)100%);
	background: linear-gradient(180deg, rgba(180, 30, 30, 1)0%, rgba(220, 100, 100, 1)100%);
	border-color: #b41e1e;
}
ul.phonics_info li.s02:hover {
	background: -webkit-linear-gradient(180deg, rgba(180, 30, 30, 1)0%, rgba(180, 30, 30, 1)100%);
	background: -o-linear-gradient(180deg, rgba(180, 30, 30, 1)0%, rgba(180, 30, 30, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(180, 30, 30, 1)0%, rgba(180, 30, 30, 1)100%);
	background: linear-gradient(180deg, rgba(180, 30, 30, 1)0%, rgba(180, 30, 30, 1)100%);
}
ul.phonics_info li.s03 {
	background: -webkit-linear-gradient(180deg, rgba(100, 180, 30, 1)0%, rgba(150, 210, 100, 1)100%);
	background: -o-linear-gradient(180deg, rgba(100, 180, 30, 1)0%, rgba(150, 210, 100, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(100, 180, 30, 1)0%, rgba(150, 210, 100, 1)100%);
	background: linear-gradient(180deg, rgba(100, 180, 30, 1)0%, rgba(150, 210, 100, 1)100%);
	border-color: #64b41e;
}
ul.phonics_info li.s03:hover {
	background: -webkit-linear-gradient(180deg, rgba(100, 180, 30, 1)0%, rgba(100, 180, 30, 1)100%);
	background: -o-linear-gradient(180deg, rgba(100, 180, 30, 1)0%, rgba(100, 180, 30, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(100, 180, 30, 1)0%, rgba(100, 180, 30, 1)100%);
	background: linear-gradient(180deg, rgba(100, 180, 30, 1)0%, rgba(100, 180, 30, 1)100%);
}
ul.phonics_info li.s04 {
	background: -webkit-linear-gradient(180deg, rgba(90, 90, 90, 1)0%, rgba(155, 155, 155, 1)100%);
	background: -o-linear-gradient(180deg, rgba(90, 90, 90, 1)0%, rgba(155, 155, 155, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(90, 90, 90, 1)0%, rgba(155, 155, 155, 1)100%);
	background: linear-gradient(180deg, rgba(90, 90, 90, 1)0%, rgba(155, 155, 155, 1)100%);
	border-color: #5a5a5a;
}
ul.phonics_info li.s04:hover {
	background: -webkit-linear-gradient(180deg, rgba(90, 90, 90, 1)0%, rgba(90, 90, 90, 1)100%);
	background: -o-linear-gradient(180deg, rgba(90, 90, 90, 1)0%, rgba(90, 90, 90, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(90, 90, 90, 1)0%, rgba(90, 90, 90, 1)100%);
	background: linear-gradient(180deg, rgba(90, 90, 90, 1)0%, rgba(90, 90, 90, 1)100%);
}
ul.phonics_info li.s05 {
	background: -webkit-linear-gradient(180deg, rgba(140, 50, 160, 1)0%, rgba(160, 100, 170, 1)100%);
	background: -o-linear-gradient(180deg, rgba(140, 50, 160, 1)0%, rgba(160, 100, 170, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(140, 50, 160, 1)0%, rgba(160, 100, 170, 1)100%);
	background: linear-gradient(180deg, rgba(140, 50, 160, 1)0%, rgba(160, 100, 170, 1)100%);
	border-color: #8c32a0;
}
ul.phonics_info li.s05:hover {
	background: -webkit-linear-gradient(180deg, rgba(140, 50, 160, 1)0%, rgba(140, 50, 160, 1)100%);
	background: -o-linear-gradient(180deg, rgba(140, 50, 160, 1)0%, rgba(140, 50, 160, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(140, 50, 160, 1)0%, rgba(140, 50, 160, 1)100%);
	background: linear-gradient(180deg, rgba(140, 50, 160, 1)0%, rgba(140, 50, 160, 1)100%);
}
ul.phonics_info li.s06 {
	background: -webkit-linear-gradient(180deg, rgba(230, 190, 0, 1)0%, rgba(250, 225, 100, 1)100%);
	background: -o-linear-gradient(180deg, rgba(230, 190, 0, 1)0%, rgba(250, 225, 100, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(230, 190, 0, 1)0%, rgba(250, 225, 100, 1)100%);
	background: linear-gradient(180deg, rgba(230, 190, 0, 1)0%, rgba(250, 225, 100, 1)100%);
	border-color: #e6be00;
}
ul.phonics_info li.s06:hover {
	background: -webkit-linear-gradient(180deg, rgba(230, 190, 0, 1)0%, rgba(230, 190, 0, 1)100%);
	background: -o-linear-gradient(180deg, rgba(230, 190, 0, 1)0%, rgba(230, 190, 0, 1)100%);
	background: -moz-linear-gradient(180deg, rgba(230, 190, 0, 1)0%, rgba(230, 190, 0, 1)100%);
	background: linear-gradient(180deg, rgba(230, 190, 0, 1)0%, rgba(230, 190, 0, 1)100%);
}
.show_info,.info_div,.open_dialog,.play_sound {
	cursor : pointer;
}
.setting1 {
	font-family: Arial, "微軟正黑體", "sans-serif";
	border-collapse: separate;
	border-spacing: 10px;
}
.dialog {
	font-family: Arial, "微軟正黑體", "sans-serif";
	display: none;
}
/*-- MATERIAL SENTENCE STYLES --*/
.lesson_title {
	font-family: Arial, "微軟正黑體", "sans-serif", "Font Awesome 5 Free";
	font-size: 28px;
	display: block;
	letter-spacing : 2px;
	margin: 10px;
}
.lesson_ch {
	font-family: Arial, "微軟正黑體", "sans-serif", "Font Awesome 5 Free";
	font-size: 24px;
	display: block;
	letter-spacing : 2px;
	margin: 10px;
}
.sentence_list {
	display: block;
	margin: 1em;
	width: 100%;
}
.muyu_table td {
	padding: 2px 3px;
}
.text_12_Black {
	font-family: Arial, "微軟正黑體", "sans-serif", "Font Awesome 5 Free";
	font-size: 18px;
	margin-left: 1em;
	letter-spacing: 3px;
}
.text_12 {
	font-family: Arial, "微軟正黑體", "sans-serif", "Font Awesome 5 Free";
	font-size: 18px;
	margin: 10px 0px 15px 5px;
	letter-spacing: 3px;
}
.text_10 {
	font-family: Arial, "微軟正黑體", "sans-serif", "Font Awesome 5 Free";
	font-size: 21px;
	margin: 10px;
}
.audio{
	cursor: pointer;
	padding:.3em;
	font-size: 1.5em;
	color: #000;
}
.audio_none{
	padding:.3em;
	font-size: 1.5em;
	opacity:0.2;
	cursor: not-allowed! important;
}
/*-- CONTACT STYLES --*/
#form_contact_msg {
	margin: 0px 15px 30px 15px;
}
#form_contact_msg p {
	color: #506eb4;
	padding-top: 20px;
	padding-bottom: 30px;
}
#form_contact_msg table {
	width: 100%;
}
#form_contact_msg table th, #form_contact_msg label {
	color: #1e3264;
	font-size: 18px;
	font-weight: 400;
}
.pure-form label {
	margin: 0px 0px 20px 0px;
}
.pure-form input[type] {
	border: #506eb4 1px solid;
	box-shadow: none;
	font-size: 100%;
	width: 100%;
	margin-bottom: 1em;
}
.pure-form textarea {
	padding: 0px;
	border: #506eb4 1px solid;
	box-shadow: none;
	border-radius: 5px;
}
a:not([href]):not([tabindex]), a.recaptcha {
	color: #506eb4;
	font-size: 16px;
}
a.recaptcha::before {
	font-family: "Font Awesome 5 free";
	font-weight: 900;
	content: "\f01e";
	color: #506eb4;
	padding-left: 10px;
	padding-right: 5px;
}
/*-- FOOTER STYLES --*/
#footer {
	height: 250px;
	background: url(../../images/footer-bg.jpg) no-repeat bottom center;
	margin: 70px 0px 0px 0px;
	padding-bottom: 30px;
}
#footer .container {
	height: 100%;
}
#footer table {
	width: 100%;
	height: 220px;
	border: 0px;
	vertical-align: bottom;
}
#footer table td {
	color: #ffffff;
	font-size: 16px;
	vertical-align: bottom;
}
#footer table img {
	text-align: center;
	padding: 0px 15px;
}
#footer .ibllt {
	text-align: left;
	padding-left: 15px;
}
#footer .phd {
	text-align: right;
	padding-right: 15px;
}
#footer div img {
	padding: 0px 15px;
}
.footer-container {
	width: 100%;
	height: 250px;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
}
.footer-item {
	flex: 1;
	padding: 15px;
}
.footer-container div {
	color: #ffffff;
	font-size: 16px;
}
.footer-container div a {
	color: #ffffff;
	font-size: 16px;
}
.footer-container div a:hover {
	text-decoration-line: underline;
}
.footer-container div img {
	padding: 0px 15px;
}
.footer-container div.f01 {
	text-align: left;
}
.footer-container div.f02 {
	text-align: center;
}
.footer-container div.f03 {
	text-align: right;
}

.footer-container div.f04 {
	text-align: left;
}

.index-footer-item {
	text-align:center;
	width: 100%;
	position:fixed;
	bottom: 1%;
	margin: 0 auto;
}

.index-footer-item a{
	color: #ffffff;
	font-size: 16px;
}

/*-- Small devices (landscape phones, 576px and up) --*/
@media (min-width: 576px) {
}

/*-- Medium devices (tablets, 768px and up) --*/
@media (min-width: 768px) {
}

/*-- Large devices (desktops, 992px and up) --*/
@media (min-width: 992px) {
}

/*-- Extra large devices (large desktops, 1200px and up) --*/
@media (min-width: 1200px) {
}

/*-- Large devices (desktops, less than 1200px) --*/
@media (max-width: 1199.98px) {
#index .global-link {
	width: 80%;
}
}

/*-- Medium devices (tablets, less than 992px) --*/
@media (max-width: 991.98px) {
#tpb-kv {
	border-radius: 20px;
}
#tpb-kv p {
	line-height: 26px;
	padding: 0px 25px 10px 25px;
}
}

/*-- Small devices (landscape phones, less than 768px) --*/
@media (max-width: 767.98px) {
#index .global-link {
	width: 100%;
}
#index .global-link img {
	padding: 60px 15px;
}
#index .link-btn {
	margin: 15px 15px;
	display: block;
}
#nav-dictionary {
	margin-top: 30px;
}
#footer {
	padding-bottom: 15px;
	margin: 30px 0px 0px 0px;
}
.footer-container {
	height: 100%;
	flex-direction: column;
	align-items: center;
	padding-top: 60px;
}
.footer-item {
	padding: 15px 0px;
}
.footer-container div.f01 {
	text-align: center;
	order: 2;
}
.footer-container div.f02 {
	order: 1;
}
.footer-container div.f03 {
	text-align: center;
	order: 4;
}

.footer-container div.f04 {
	text-align: left;
	order: 3;
}

}

/*-- Extra small devices (portrait phones, less than 576px) --*/
@media (max-width: 575.98px) {

select#change_mode {
	margin-right: -12px;
	width:150px;
	font-size:1em;
}

#topbar {
	padding: 5px 0px;
	position: absolute;
}
#topbar .btn-download {
	padding: 4px 10px;
	float: right;
}
#topbar .btn-download::after {
	padding-left: 5px;
}
#topbar .btn-download:hover::after {
	padding-left: 5px;
}
#topbar .btn-dropdown {
	padding: 4px 10px;
}
#tpb-menu {
	margin-top: 60px;
	margin-bottom: 30px;
}
.navbar-brand {
	padding-top: 0px;
	padding-bottom: 20px;
}
#tpb-kv {
	border-radius: 10px;
}
#tpb-kv p {
	line-height: 30px;
	padding: 0px 15px 10px 15px;
}
.dictionary_search_bar {
	padding: 15px 20px;
}
#search_form #input_eng {
	margin-bottom: 15px;
}
#input-btn input {
	width: 130px;
	margin: 5px 10px;
	display: inline-block;
}
h4.style01, h4.style02, h4.style03 {
	padding: 0px;
}
.game-level01 img, .game-level02 img, .game-level03 img {
	margin: 0px 0px;
}
.finesse-level ul {
	text-align: center;
	margin: 0px 0px;
}
.finesse-level ul li ul li {
	padding: 0px 5px 30px 5px;
}
.ms-list ul {
	text-align: center;
	margin: 0px 0px;
}
.ms-list ul li {
	margin: 0px 5px 30px 5px;
}
.pure-form label {
    margin: 0px 0px 0px 0px;
}
}
/*-- EDIT CONTENT STYLES --*/
#edit-content {
	font-family: Arial, "微軟正黑體", "sans-serif";
}
#edit-content h1, #edit-content h2, #edit-content h3 {
	line-height: 1.3em;
	padding-bottom: 30px;
	margin-bottom: 0px;
}
#edit-content h1 {
	color: #7d694b;
	font-size: 36px;
	font-weight: bold;
}
#edit-content h2 {
	font-size: 30px;
	font-weight: bold;
}
#edit-content h3 {
	color: #7d694b;
	font-size: 24px;
	font-weight: bold;
}
#edit-content p {
	font-size: 18px;
	line-height: 1.5em;
	padding-bottom: 20px;
}
#edit-content ol, #edit-content ul {
	margin: 30px 40px;
}
#edit-content ol li, #edit-content ul li {
	font-size: 18px;
	line-height: 1.5em;
	padding-bottom: 20px;
}
#edit-content img {
	text-align: center;
	display: block;
	margin: 0px auto;
	margin-bottom: 15px;
}

/* 原 style.css */

.grading_score{
	padding: .3em;
	display : inline-block;
	font-size : 120%;
	font-weight : 700;
	color:#555;
}

.safari {
	top : -1.5em;
	font-size : 110%;
}

.ch{
	width: 100%;
	padding: 1em;
	display : inline-block;
	line-height:1.2em;
	font-size : 160%;
	color : #fff;
}

.ch_bg{
	background-color: #60BF00;
}

.show_tone{
	width: 100%;
	height:100%;
	margin:0;
}

.word{
	width: 100%;
	text-align : left;
	margin:0;
}

.text_12 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	margin: .5em 0em .1em .3em;
	letter-spacing: 3px;
}

.text_10 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	margin: .2em;
	width:850px;
}

.text_16_Black {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 3em;
	display: inline-block;
	padding: .6em 0em .6em 0em;
	line-height: 1em;
	color: #333;
	font-weight : 700;
}

.text_16_Times {
	font-family: "Times New Roman", Times, serif;
    font-size: 1.5em;
    color: #8A0000;
    display: block;
    text-align: left;
    margin: .8em .8em .8em 1em;
	font-weight: 200;
}

span.default{
	vertical-align: middle;
	background-color:#ffe4c0;
	cursor:pointer;
	padding-left: 3px;
	padding-right: 3px;
}

span.action{
	background-color:#555555;
	color: white;
}

span.active{
	background-color:#555555;
	color: white;
	padding-left: 3px;
	padding-right: 3px;
}

.text_12_Black {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	margin-left: 1em;
	letter-spacing: 3px;
}

.padding20{
	padding : 0 22px 22px 22px;
	/*overflow:hidden;*/
	overflow-y:auto;
	height: 100%;
}

#myDiv ul {
	list-style: none;
	width: 750px;
	margin: 0;
	padding: 0;	
}
#myDiv ul li{
	display: list-item; /* 水平排列 */
	float: left;
	margin: 0;
	padding: 0;
}

#myDiv input.999{
	-moz-background-size:34px 36px;
	-webkit-background-size:34px 36px;
	-o-background-size:34px 36px;
	background-size:34px 36px;
}

.select_li{
	position : relative;
	cursor : pointer;
	z-index: 10;
}

.select_li:hover{
	background-color : #ccc; 
}

.select_li_iframe{
	cursor : pointer;
	pointer-events: none;
}

.select_li_iframe:hover{
	background-color : #ccc; 
}

#keyboard_muyu_tone{
	margin: 10px;
	overflow: auto;
	display: block;
	width: 750px;
	height: 60px;
}

td.normal {padding : 3px; }

.text-right{
	position: relative;
	margin:10px;
}

#news_table,#form_contact_msg{ margin:15px;}

#keyboard_pad{
	padding: 5px;
	width: 750px;
	border: solid 1px #aaaaaa;
}

#muyu_autocomplete{
	overflow: auto;
	display: block;
	width: 750px;
}

#myDiv{
	width: 750px;
	height:150px;
}

.dialog_btn{
	width: 34px;
	height: 36px;
	cursor: pointer;
	background-color: transparent;
	background-image: url('');
	background-repeat : no-repeat;
	-moz-background-size:34px 36px;
	-webkit-background-size:34px 36px;
	-o-background-size:34px 36px;
	background-size:32px 34px; */
}

.tone_select{
	margin-left:1em;
	width: 75%;
	display : inline-block;
	font-size : 130%;
	font-weight : 700;
	color : rgb(171,91,40);
}

#tone_select{
	margin-left: 25%;
	border:0px;
	outline:0px;
	appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
	background: url("/themes/default/arrow.png") no-repeat scroll right center transparent;
	padding-right: 14px;
}

.grading_score{
	padding: .3em;
	display : inline-block;
	font-size : 120%;
	font-weight : 700;
	color:#555;
}

.tone_div{
	padding-top: 2px;
	width: 100%;
	background-color: #F8F9F9;
	font-weight : 700;
}

.safari {
	top : -1.5em;
	font-size : 110%;
}

.ch{
	width: 100%;
	padding: 1em;
	display : inline-block;
	line-height:1.2em;
	font-size : 160%;
	color : #fff;
}

.show_tone{
	width: 100%;
	height:100%;
	margin:0;
}

.word{
	width: 100%;
	text-align : left;
	margin:0;
}

/*-- IE 10+ (10/11/Edge) hack --*/
_:-ms-lang(x), 
.navbar { 
    display: block;
	width: 100%;
}
_:-ms-lang(x), 
#navbarNav { 
    display: inline-block!important;
	position: absolute;
	top: 25px;
	right: 15px;
}
@media only screen and (max-width: 1199px) {
	_:-ms-lang(x), 
	#navbarNav { 
	    width: calc(100% - 250px);
		top: 0;
		right: 0;
	}
}