@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700;900&display=swap");

/* All */
body {
	background: #6d8180;
}
.webapp {
	padding: 0;
	margin: 0;
	overflow: auto;
	height: auto;
}

.webapp .container {
	font-size: 16px;
	max-width: 768px;
	overflow: auto;
	font-family: "Roboto", "Noto Sans TC", sans-serif;
}

@media (max-width: 576px) {
	.webapp .container {
		font-size: 15px;
	}
}

* {
	touch-action: pan-x;
	touch-action: pan-y;
}

a:link,
a:hover,
a:active,
a:focus {
	text-decoration: none;
}

.form-check-input {
	color: rgb(236, 6, 6);
}

.hw-fz-9px {
	font-size: 9px;
}

package-selected .hw-fz-11px {
	font-size: 11px;
}

.hw-fz-12px {
	font-size: 12px;
}

.hw-fz-13px {
	font-size: 13px;
}

.hw-fz-18px {
	font-size: 18px;
}

.hw-fz-p8em {
	font-size: 0.8em;
}

/* Fix Origin */

.promo-ad {
	clear: both;
	text-align: center;
	padding: 1em 0;
	margin: 2em 0 0 0;
}

/* Navbar */

/* Header
===============================================================*/

header .title-webapp {
	float: left;
	font-size: 2em;
	font-weight: 700;
	margin: 0 0.3em 0 0;
	color: #fff;
	text-shadow: 1px 1px 6px #000;
}

@media (max-width: 768px) {
	header .title-webapp {
		font-size: 2em;
		text-shadow: 1px 1px 4px #000;
	}
}

header .title-webapp img {
	width: 200px;
	transition: all 0.3s;
}

@media (max-width: 768px) {
	header .title-webapp img {
		width: 140px;
		transition: all 0.3s;
	}
}
@media (max-width: 576px) {
	header .title-webapp img {
		width: 120px;
		transition: all 0.3s;
	}
}
@media (max-width: 415px) {
	header .title-webapp img {
		width: 100px;
		transition: all 0.3s;
	}
}

/* Header Menu */

.header-menu {
	position: relative;
}

.header-menu .nav-webapp {
	margin-bottom: 0.6em;
}

@media (max-width: 767.98px) {
	.header-menu .nav-webapp {
		width: 60%;
		float: right;
	}
}

.nav-webapp img {
	width: 1.6em;
}

.header-menu .nav-webapp img {
	width: 1.5em;
}

.header-menu .nav-webapp .nav-item {
	margin: 0;
}

.header-menu .nav-webapp li a.nav-link:link,
.header-menu .nav-webapp li a.nav-link:visited {
	color: #aa0000;
	padding: 0 0.4em;
	font-weight: 400;
	font-size: 1em;
	transition: all 0.3s;
}

.header-menu .nav-webapp li a.nav-link:hover,
.header-menu .nav-webapp li a.nav-link:active {
	margin-top: -0.4em;
	padding-bottom: 0.2em;
	color: #d60101;
	transition: all 0.1s;
	border-bottom: 2px solid #d60101;
}

.header-menu .nav-webapp .dropdown-menu {
	font-size: 1em;
}

@media (max-width: 768px) {
	.header-menu .nav-webapp li a.nav-link:link {
		font-size: 1.1em;
		padding: 0.4em;
		text-align: center;
		transition: all 0.2s;
		border-bottom: 1px solid rgb(18, 140, 134, 0.3);
	}

	.header-menu .nav-webapp li a.last:link {
		border-bottom: 0px solid rgb(0, 0, 0, 0.3);
	}

	.header-menu .nav-webapp li a.nav-link:hover,
	.header-menu .nav-webapp li a.nav-link:active {
		margin-top: 0em;
	}
}

.navbar {
	padding: 0;
	margin: 0;
}

.navbar .container-fluid {
	padding: 0;
	margin: 0 0 0.5em 0;
}

.navbar-nav {
	border-radius: 0.8em;
}

@media (max-width: 768px) {
	.navbar-nav {
		background: #fff;
		border: 0px solid #138d87;
		box-shadow: 0 0 6px 2px rgba(99, 99, 99, 0.3);
	}

	.navbar-tri {
		position: absolute;
		top: -0.6em;
		right: 0.8em;
		width: 0;
		height: 0;
		border-left: 0.5em solid transparent;
		border-right: 0.5em solid transparent;
		border-bottom: 0.6em solid #fff;
	}

	.navbar-toggler:focus ~ svg {
		transform: rotate(180);
	}
}

.navbar-toggler {
	border-radius: 100%;
	padding: 0.4em 0.6em;
	background: rgb(255, 255, 255, 0.5);
	border: 1px solid rgba(161, 161, 161, 0.6);
	color: #808080;
}
@media (max-width: 415px) {
	.navbar-toggler {
		padding: 0.2em 0.4em;
	}
}

.navbar-toggler-icon {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2819, 141, 138, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	color: #000;
}

.navbar-toggler:focus {
	text-decoration: none;
	outline: 0;
	color: #fff;
	background: #6b6b6b;
}

/* cloud alert  */
.webapp .cloudalert-box {
	display: none;
}
.webapp .cloudalert {
	font-size: 0.85em;
	position: relative;
	padding: 0.5em;
	margin: 1em 0 1.5em 0;
	line-height: 1em;
	border-radius: 1.5em;
	text-align: center;
	transition: all 0.3s;
}
.webapp .cloudalert:hover {
	font-size: 1em;
	padding: 0.7em 0.5em;
	transition: all 0.3s;
}

.webapp .cloudalert-warning {
	background: #0d8f8a;
	color: #fff;
	transition: all 0.3s;
}
.webapp .cloudalert-warning:hover {
	background: #10a19d;
	color: #fff;
	transition: all 0.3s;
}
.webapp .cloudalert-warning a:link,
.webapp .cloudalert-warning a:visited {
	color: #ffee36;
	text-decoration: underline;
}
.webapp .cloudalert-warning a:hover,
.webapp .cloudalert-warning a:active {
	color: #ffee36;
	text-decoration: none;
}

/* WebApp General
    ===============================================================*/

.webapp {
	margin: 0;
	padding: 0;
	height: auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

@media (max-width: 576px) {
	.webapp {
		min-height: auto;
		background-size: cover;
	}
}

.webapp .webapp-header {
	position: relative;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.55) 15%,
		rgba(255, 255, 255, 0) 70%
	);
	padding: 0.55em 0.6em 0.4em 4em;
	margin-top: 0em;
	line-height: 1em;
	border-radius: 1.5em;
}

.webapp .webapp-header small {
	font-size: 0.65em;
	font-weight: 400;
}

.webapp .webapp-header-edu6k {
	position: relative;
	background: linear-gradient(
		90deg,
		#327509 15%,
		rgb(186, 210, 50, 0.6) 50%,
		rgba(255, 255, 255, 0) 70%
	);
}

.webapp .webapp-header .icon-title {
	position: absolute;
	width: 3.2em;
	left: 0.8em;
	top: -1em;
}

.webapp .webapp-header .app-name {
	font-size: 1.16em;
	font-weight: 600;
	color: #535353;
}

.webapp .webapp-header .app-name-edu6k {
	color: #fff;
}

@media (max-width: 576px) {
	.webapp .webapp-header .app-name {
		font-size: 1.1em;
	}
}

.webapp .webapp-header a:link,
.webapp .webapp-header a:visited {
	color: #e30612;
	text-decoration: underline;
}

.webapp .webapp-header a:hover,
.webapp .webapp-header a:active {
	text-decoration: none;
}

.main-package {
	margin: 0 0 1em 0;
}

/* Hotwords Block
    ===============================================================*/

.hotwords-content .nav-webapp .nav-link {
	color: rgb(0, 0, 0);
	padding: 0px 8px;
	font-weight: 400;
	font-size: 0.9em;
}

@media (max-width: 576px) {
	.hotwords-content .nav-webapp .nav-link {
		font-size: 13px;
		padding: 0px 5px;
	}
}

.hotwords-content .nav-webapp img {
	width: 1.6em;
}

.hotwords-content .nav-webapp li .nav-link:hover {
	background-color: rgb(255, 255, 255, 0);
}

.hotwords-content .nav-webapp .dropdown-menu {
	font-size: 0.9em;
}

.hotwords-content .nav-webapp a:link,
.hotwords-content .nav-webapp a:visited {
	color: #000;
	text-decoration: none;
}

.hotwords-content .dropdown-menu a:link,
.hotwords-content .dropdown-menu a:visited {
	color: #000;
	text-decoration: none;
}

.hotwords-content .dropdown-menu a:hover,
.hotwords-content .dropdown-menu a:active {
	color: rgb(190, 6, 6);
}

.hotwords-content .app-content {
	font-size: 1.5em;
	padding-left: 1.2em;
}

@media (max-width: 576px) {
	.hotwords-content .app-content {
		font-size: 0.9rem;
		padding-left: 1.5em;
	}
}

.hotwords-content .app-content .btn {
	font-size: 1rem;
	padding: 0.2em 0.8em;
}

@media (max-width: 576px) {
	.hotwords-content .app-content .btn {
		font-size: 12px;
		padding: 0.1em 0.3em;
	}
}

.hotwords-content .mag-cover {
	width: 100%;
	margin: 0 1em 0 1em;
	-webkit-box-shadow: 0px 0px 5px 1px #000000;
	box-shadow: 2px 2px 4px 1px rgb(0, 0, 0, 0.5);
}

@media (max-width: 576px) {
	.hotwords-content .mag-cover {
		width: 100%;
		-webkit-box-shadow: 0px 0px 2px 1px #000000;
		box-shadow: 2px 2px 3px 1px rgb(0, 0, 0, 0.5);
	}
}

.hotwords-content .mag-month {
	float: right;
	margin-right: 0.3em;
	font-size: 3.6em;
	font-weight: 700;
	line-height: 3.6rem;
	text-shadow: 2px 2px 2px #3a3a3a;
	font-style: italic;
}

@media (max-width: 576px) {
	.hotwords-content .mag-month {
		line-height: 2.5rem;
	}
}

.hotwords-content .mag-year {
	text-align: right;
	font-size: 1.8rem;
	line-height: 1.5em;
	text-shadow: 1px 1px 2px #3a3a3a;
	margin-bottom: 0.2rem;
}

@media (max-width: 576px) {
	.hotwords-content .mag-year {
		font-size: 1.2rem;
		line-height: 1.4em;
	}
}

.hotwords-content .app-content .article-cover {
	width: 4.5em;
	float: left;
	margin-right: 6px;
}

.hotwords-content .app-content .title-date {
	font-size: 1em;
	text-shadow: 1px 1px 2px #000;
}

.hotwords-content .app-content .title-en {
	clear: left;
	font-size: 1.4em;
	line-height: 1.1em;
	font-weight: 700;
	color: #ffffff;
	text-shadow: 2px 2px 2px rgb(49, 49, 49);
	margin-top: 0.5em;
}

.hotwords-content .app-content .title-ch {
	color: #000;
	font-size: 1rem;
}

@media (max-width: 576px) {
	.hotwords-content .app-content .title-ch {
		color: #000;
		font-size: 0.8rem;
	}
}

.hotwords-content .app-content .month-active {
	width: 3em;
	margin-right: 3px;
}

@media (max-width: 576px) {
	.hotwords-content .app-content .month-active {
		width: 3.3em;
		margin-bottom: 0.1rem;
	}
}

.hotwords-content .hotwords-package-box a:link,
.hotwords-content .hotwords-package-box a:visited {
	color: #000;
}

.hotwords-content .hotwords-package-box a:hover,
.hotwords-content .hotwords-package-box a:active {
	color: #000;
	text-decoration: none;
}

.hotwords-content .g-2 {
	margin-top: 0.3em;
}

.hotwords-content .noarticle {
	position: relative;
	padding: 0.5em;
}

.hotwords-content .noarticle span {
	margin-left: 1.5em;
	color: #53413a;
}

.hotwords-content .noarticle .bubble {
	position: absolute;
	top: 0em;
	left: 0em;
	font-size: 0.8em;
	font-weight: 700;
	rotate: -15deg;
	line-height: 1.2em;
	text-align: center;
	padding: 0.4em 0.6em;
	border-radius: 50%;
	background: #01bab2;
	color: #fff;
	box-shadow: 1px 1px 3px 3px rgb(0, 0, 0, 0.2);
}

.hotwords-content .noarticle .des {
	margin-top: 0.25em;
	font-size: 0.9em;
	line-height: 1em;
	color: #0a8e8a;
}

.hotwords-content .noarticle .des b {
	color: #006461;
}

@media (max-width: 576px) {
	.hotwords-content .noarticle .des {
		font-size: 1em;
	}
}

/* Words Page
    ===============================================================*/

.words-content {
	text-align: center;
	color: #242424;
}

.words-content .webapp-header {
	text-align: left;
	font-size: 0.9em;
	color: rgb(66, 66, 66);
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0) 90%
	);
	padding: 0.3em 0em;
}

.words-content .webapp-header .app-info small {
	font-size: 0.5em;
}

@media (max-width: 576px) {
	.words-content .webapp-header .app-info small {
		font-size: 0.6em;
	}
}

.words-content .fav-word {
	float: right;
	font-size: 1.4em;
	padding: 0.1em 8px;
	margin-top: -1em;
}

.words-content .words-name {
	clear: both;
	display: inline-block;
	font-weight: 700;
	font-size: 2.6rem;
	padding-top: 1.8rem;
	min-height: 6.5rem;
}

@media (max-width: 576px) {
	.words-content .words-name {
		font-size: 2.4rem;
		padding: 1.2rem 0;
		min-height: 3rem;
	}
}
@media (max-width: 415px) {
	.words-content .words-name {
		font-size: 2rem;
		padding: 0.8rem 0;
		min-height: 1rem;
	}
}

.words-content .words-name a:link,
.words-content .words-name a:visited {
	color: #3d3d3d;
	text-decoration: none;
	transition: all 0.5s;
}

.words-content .words-name a:hover,
.words-content .words-name a:active {
	color: rgb(177, 11, 11);
	text-decoration: none;
	transition: all 0.2s;
}

.words-content .words-name a.search {
	position: relative;
	font-size: 1.2rem;
	cursor: pointer;
	color: rgb(116, 116, 116);
	transition: all 0.3s;
}

.words-content .words-name .search-tip {
	position: absolute;
	display: none;
	top: -1.2rem;
	right: -6rem;
	text-decoration: none;
	font-size: 0.86rem;
	font-weight: 400;
	min-width: 6rem;
	border: 1px solid #9e9e9e;
	padding: 1px 2px;
	color: rgb(77, 77, 77);
	transition: all 0.3s;
}

.words-content .words-name .search:hover .search-tip {
	display: block;
}

.words-content .words-name a.search:link,
.words-content .words-name a.search:visited {
	text-decoration: none;
	color: rgb(116, 116, 116);
}

.words-content .words-name a.search:hover,
.words-content .words-name a.search:active {
	color: rgb(177, 11, 11);
}

.words-content .words-type {
	font-size: 1.3rem;
	font-family: "Noto Serif TC", serif;
	font-style: italic;
	font-weight: 500;
	transition: all 0.2s;
}
@media (max-width: 576px) {
	.words-content .words-type {
		font-size: 1rem;
		transition: all 0.2s;
	}
}
@media (max-width: 415px) {
	.words-content .words-ch .col-9 {
		width: 80%;
		transition: all 0.2s;
	}
}

.words-content .words-ch {
	font-family: "Noto Serif TC", serif;
	margin-top: 0;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1.4em;
	transition: all 0.2s;
}
@media (max-width: 576px) {
	.words-content .words-ch {
		font-size: 1.2rem;
		transition: all 0.2s;
	}
}

.words-content .words-ch .words-prev {
	text-align: left;
	color: #bebebe;
	cursor: pointer;
}

.words-content .words-ch .words-next {
	text-align: right;
	color: #bebebe;
	cursor: pointer;
}

.words-content .words-ch a:link,
.words-content .words-ch a:visited {
	color: #bebebe;
}

.words-content .words-ch a:hover {
	color: #616161;
}

.words-content .words-sentences {
	font-size: 1.3rem;
	min-height: 13em;
	line-height: 1.4em;
	max-width: 96%;
	margin: 2em auto 0 auto;
	padding: 0 0.6em;
	color: #2e2e2e;
	transition: all 0.5s;
}

@media (max-width: 576px) {
	.words-content .words-sentences {
		font-size: 1.2rem;
		font-family: "Noto Sans TC", serif;
		margin: 1em auto 0 auto;
		min-height: auto;
		transition: all 0.2s;
	}
}
@media (max-width: 415px) {
	.words-content .words-sentences {
		font-size: 1.1rem;
		letter-spacing: -0.4px;
		padding: 0;
		margin: 1em auto 0 auto;
		transition: all 0.2s;
	}
}
.words-content .words-sentences .sentences-en {
	font-weight: 500;
}

.words-content .words-sentences .sentences-en a:link,
.words-content .words-sentences .sentences-en a:visited {
	font-weight: 700;
	color: #000;
	text-decoration: underline;
}

.words-content .words-sentences .sentences-en a:hover {
	color: #e93232;
	text-decoration: none;
}

.words-content .words-sentences .sentences-ch {
	font-size: 1.15rem;
	margin-top: -0.5em;
}

.words-content .words-sentences .sentences-voice {
	font-size: 1.2em;
	padding: 0.1em 0.3em;
	margin: 0;
}

.words-content .words-sentences a.sentences-voice:hover {
	color: #ff0000;
}

.words-content .words-sentences img {
	width: 2.4em;
	margin: 1.5em 0;
}

.words-content .words-func {
	margin: 0 auto;
	padding-bottom: 0.5em;
}

.words-content .words-func .grid {
	position: relative;
	color: #444444;
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.6em;
	border-top: 2px solid rgba(68, 68, 68, 0.1);
	padding: 1em;
	margin-top: 0.5em;
	margin-bottom: 1em;
	cursor: pointer;
	transition: all 0.3s;
}

.words-content .words-func .grid img {
	width: 3em;
	filter: opacity(0.7);
	margin-bottom: 0.6em;
}

.words-content .words-func .grid:hover {
	border-top: 2px solid rgba(68, 68, 68, 0.3);
	background: rgb(255, 252, 232, 0.15);
	border-end-start-radius: 1em;
	border-end-end-radius: 1em;
	transition: all 0.3s;
}
.words-content .words-func .grid:hover img {
	filter: opacity(1);
}

.words-content .words-func .grid:active {
	border-top: 2px solid rgb(61, 61, 61);
	background: rgb(255, 252, 232, 0.5);
}

.words-content .words-func .bottom-btn .active {
	border-top: 2px solid rgb(61, 61, 61, 0.6);
	background: linear-gradient(
		0deg,
		rgb(228, 219, 145, 0.8) 5%,
		rgba(255, 250, 213, 0.8) 95%
	);
	border-end-start-radius: 1em;
	border-end-end-radius: 1em;
}
.words-content .words-func .bottom-btn .active img {
	filter: opacity(1);
}

.words-content .words-func .bottom-btn .active:hover {
	background: linear-gradient(
		0deg,
		rgb(228, 219, 145, 0.8) 5%,
		rgba(255, 250, 213, 0.8) 95%
	);
	border-end-start-radius: 1em;
	border-end-end-radius: 1em;
	transition: all 0.3s;
}

.words-content .words-func .self-level {
	margin-top: 5.5rem;
	position: relative;
	padding: 0 1rem 0 0;
}

.words-content .words-func .self-level a {
	color: rgb(134, 134, 134);
	border: 1px solid rgb(71, 71, 71, 0.1);
	cursor: pointer;
	margin: 0 0 5px 2px;
	text-decoration: none;
}

.words-content .words-func .self-level a.badge {
	padding: 0.75em;
	font-size: 0.9em;
	font-weight: 400;
	background: rgb(255, 255, 255, 0.2);
	border-radius: 100%;
}

.words-content .words-func .self-level a.badge:hover {
	color: rgb(36, 36, 36, 0.5);
	background: rgb(255, 255, 255, 0.4);
	border: 1px solid rgb(71, 71, 71, 0.3);
}

.words-content .words-func .self-level a.self-level-1 {
	position: absolute;
	bottom: 4.1em;
	right: 1em;
}

.words-content .words-func .self-level a.self-level-2 {
	position: absolute;
	font-size: 1.4em;
	padding: 0.55em;
	bottom: 0.1em;
	right: 0.4em;
}

.words-content .words-func .self-level a.self-level-3 {
	position: absolute;
	bottom: 0.5em;
	right: 4.6em;
}

.words-content .words-func .self-level a.active,
.words-content .words-func .self-level a.active:hover {
	font-weight: 700;
	color: rgb(36, 36, 36, 0.75);
	background: rgb(255, 247, 139);
	border: 1px solid rgb(214, 140, 3, 0);
}

.words-content .words-func .self-level a.self-level-2.active-fav,
.words-content .words-func .sefl-level a.self-level-2.active-fav:hover {
	font-weight: 700;
	color: rgb(184, 0, 0);
	background: rgb(255, 247, 139);
	border: 1px solid rgb(184, 0, 0, 0.3);
}

.words-content .words-mode-listen {
	position: relative;
}

.words-content .words-mode-listen .fa-headphones-simple {
	position: absolute;
	font-size: 12em;
	top: 0.2em;
	right: 0;
	left: 0;
	margin: 0 auto;
	color: rgb(143, 130, 118, 0.4);
	z-index: -1;
}

.words-content h4 {
	color: rgb(133, 34, 34);
	margin: 1em 0 -1em 0;
	padding: 0;
}

/* Words Set
    ===============================================================*/

.words-set {
	padding-bottom: 1em;
}

.words-set .set-area {
	/* background: linear-gradient(180deg, rgb(0, 0, 0, .6) 0%, rgb(0, 0, 0, .3) 90%); */
	color: #fff;
	border-radius: 1.5em;
	box-shadow: 0px 0px 5px rgb(112, 46, 46);
}

.words-set .set-area .item-select {
	padding: 0.8em 0;
	margin: 0;
	border-top-left-radius: 1.5em;
	border-top-right-radius: 1.5em;
	color: #000;
	background: linear-gradient(
		90deg,
		rgba(255, 225, 225, 0.7) 40%,
		rgba(88, 15, 15, 0.3) 80%
	);
	border-bottom: 3px solid #fc7676;
}

.words-set .set-area .item-content {
	padding: 0.5em 0 1em 0;
	margin-bottom: 2em;
	border-bottom-left-radius: 1.5em;
	border-bottom-right-radius: 1.5em;
	background: linear-gradient(
		180deg,
		rgba(36, 16, 7, 0.8) 30%,
		rgba(36, 16, 7, 0.4) 90%
	);
}

.words-set .set-area .item-content h6 {
	color: rgb(240, 236, 190);
	font-weight: 300;
	font-size: 0.8em;
}
.words-set .set-area .item-content h6 small {
	color: rgb(177, 175, 154);
	font-size: 0.5rem;
}

@media (max-width: 576px) {
	.words-set .set-area .item-content h6 {
		font-size: 0.8em;
	}
}

.words-set .set-area .item-content .btn-go {
	color: rgb(53, 53, 53);
	font-weight: 500;
	letter-spacing: 1px;
	margin: 1em 0 0 0;
	border: 0px;
	border-radius: 1.2em;
	background: linear-gradient(
		180deg,
		rgba(255, 229, 112, 1) 0%,
		rgba(221, 195, 78, 1) 100%
	);
	box-shadow: 2px 2px 3px 3px rgb(49, 31, 9, 0.2);
	transition: all 0.3s;
}

.words-set .set-area .item-content .btn-go:hover {
	margin: 0.8em 0 0.2em 0;
	background: linear-gradient(
		180deg,
		rgb(255, 232, 132) 0%,
		rgb(243, 217, 99) 100%
	);
	box-shadow: 1px 1px 1px 1px rgb(49, 31, 9, 0.2);
	transition: all 0.3s;
}

.words-set .set-area .item-content .btn-sub {
	color: #fff;
	border-radius: 1.2em;
	background: linear-gradient(
		180deg,
		rgb(236, 61, 61) 40%,
		rgb(194, 29, 29) 100%
	);
}

.words-set .package-selected {
	position: relative;
	color: #242424;
}

.words-set .package-selected .package-name {
	display: block;
	text-align: center;
	float: left;
	font-size: 1rem;
	line-height: 1em;
	padding-top: 4.6em;
	width: 125px;
	height: 125px;
	border-radius: 0.6em;
	margin-right: 0.8em;
	margin-bottom: 0.2em;
	background-size: cover;
}

@media (max-width: 576px) {
	.words-set .package-selected .package-name {
		font-size: 0.8rem;
		margin-right: 0.6em;
		width: 100px;
		height: 100px;
	}
}

.words-set .package-selected .package-name.toeic {
	color: #fff;
}

.words-set .package-selected .package-cat {
	font-size: 1em;
	font-weight: 400;
	line-height: 1.2em;
	padding-bottom: 0.2em;
}

@media (max-width: 576px) {
	.words-set .package-selected .package-cat {
		font-size: 0.9em;
	}
}

.words-set .package-selected .package-title {
	text-align: left;
	padding-top: 0.1em;
	font-size: 1.8em;
	line-height: 1em;
	font-weight: 500;
	margin-bottom: 0em;
}

@media (max-width: 576px) {
	.words-set .package-selected .package-title {
		font-size: 1.4em;
	}
}

.words-set .package-selected .package-words {
	margin: 0.2em 0 0 0;
	font-size: 0.8em;
	font-weight: 400;
	color: #f8f8f8;
	background: rgb(61, 44, 34);
}

.words-set .package-note {
	text-align: left;
	padding: 0.2em 0 0 0;
	font-size: 0.9em;
	line-height: 1.4em;
}

@media (max-width: 576px) {
	.words-set .package-note {
		font-size: 0.7em;
		line-height: 1.25em;
	}
}

.words-set .free-package {
	position: relative;
	padding: 0.5em 0;
}

.words-set .free-package .btn-toggle-list {
	position: absolute;
	top: -0.5em;
	right: -0.5em;
	font-size: 12px;
}

.words-set .words-list {
	clear: both;
	margin-top: 1.5em;
	color: #000;
}

.words-set .words-list .single {
	float: left;
	width: 33%;
}

@media (max-width: 576px) {
	.words-set .words-list .single {
		width: 50%;
	}
}

.words-set .words-list .single .mark {
	float: left;
}

.words-set .words-list .single .content {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.words-set .words-list .single a.mark {
	background: transparent;
}

.words-set .words-list .single a.content:link,
.words-set .words-list .single a.content:visited {
	color: rgb(255, 255, 255);
	text-decoration: underline;
}

.words-set .words-list .single a.content:hover,
.words-set .words-list .single a.content:active {
	text-decoration: none;
}

.words-set .package-selected span small {
	font-size: 0.9rem;
}

.words-set .package-selected .btn-free {
	position: absolute;
	font-size: 0.8em;
	top: -2.5em;
	right: 0.8em;
	padding: 0.6em 0.6em;
	border: 0px;
	border-radius: 1.5em;
	box-shadow: 1px 1px 3px 3px rgb(0, 0, 0, 0.2);
	background: linear-gradient(
		180deg,
		rgb(252, 241, 150) 30%,
		rgb(238, 199, 91) 90%
	);
	transition: all 0.3s;
}

.words-set .package-selected .btn-free:hover {
	position: absolute;
	font-size: 0.8em;
	top: -2.7em;
	right: 0.8em;
	padding: 0.6em 0.6em;
	border-radius: 1.5em;
	background: linear-gradient(
		180deg,
		rgb(255, 249, 196) 30%,
		rgb(255, 225, 143) 90%
	);
	box-shadow: 1px 2px 3px 1px rgb(0, 0, 0, 0.2);
	transition: all 0.1s;
}

@media (max-width: 576px) {
	.words-set .package-selected .btn-free {
		position: absolute;
		top: -2.5em;
		right: 0.4em;
		padding: 0.4em 0.4em;
		border-radius: 1.5em;
	}
}

.words-set .package-selected .btn-free .fa-plus-circle {
	color: #ff0000;
}

.words-set .set-area .item-content .package-set .btn {
	font-size: 1em;
	color: rgb(184, 181, 145, 0.6);
	background-color: rgb(216, 238, 89, 0);
	border-color: rgb(184, 181, 145, 0.35);
	padding: 0.15em 0.7em;
	border-radius: 1.5em;
	transition: all 0.2s;
}
.words-set .set-area .item-content .package-set .btn:hover {
	color: rgb(206, 202, 160);
	border-color: rgb(184, 181, 145, 0.7);
}
@media (max-width: 576px) {
	.words-set .set-area .item-content .package-set .btn {
		font-size: 0.95em;
		padding: 0.15em 0.7em 0.12em 0.7em;
		transition: all 0.2s;
	}
}
.words-set
	.set-area
	.item-content
	.package-set
	.btn-check:checked
	+ .btn-outline-light {
	color: rgb(56, 56, 56);
	font-weight: 500;
	background-color: rgb(247, 239, 121);
	border-color: rgb(247, 239, 121);
	box-shadow: 0 0 4px 2px rgba(247, 239, 121, 0.8);
}
.words-set .set-area .item-content .package-set .set-multi {
	padding-top: 0.2em;
}
.words-set .set-area .item-content .package-set .set-multi .btn {
	color: rgb(184, 181, 145, 0.7);
	background-color: rgb(216, 238, 89, 0);
	border-color: rgb(184, 181, 145, 0.35);
	padding: 0.2em 0.6em;
}
.words-set .set-area .item-content .package-set .set-multi .btn:hover {
	color: rgb(206, 202, 160);
	border-color: rgb(184, 181, 145, 0.7);
}

.words-set
	.set-area
	.item-content
	.package-set
	.btn-check:checked
	+ .btn-outline-info {
	color: rgb(56, 56, 56);
	background-color: rgb(247, 234, 121);
	border-color: rgb(247, 239, 121);
	box-shadow: 0 0 4px 2px rgba(247, 239, 121, 0.8);
}

.words-set .package-selected .package-hotwords {
	color: #000;
	background: url("../h-images/bg-hotwords-package.png") no-repeat left top;
}

.words-set .package-selected .package-hotwords-lt {
	color: #000;
	background: url("../h-images/bg-hotwords-package-lt.png") no-repeat left top;
}

.words-set .package-selected .package-hotwords-sc {
	color: #000;
	background: url("../h-images/bg-hotwords-package-sc.png") no-repeat left top;
}

.words-set .package-selected .package-hotwords-ad {
	color: #000;
	background: url("../h-images/bg-hotwords-package-ad.png") no-repeat left top;
}

.words-set .package-selected .package-1 {
	background: url("../h-images/bg-hot-package-1.png") no-repeat left top;
	color: #fff;
}

.words-set .package-selected .package-2 {
	color: #fff;
	background: url("../h-images/bg-hot-package-2.png") no-repeat left top;
}

.words-set .package-selected .package-3 {
	color: #fff;
	background: url("../h-images/bg-hot-package-3.png") no-repeat left top;
}

.words-set .package-selected .toeic {
	color: #fff;
	background: url("../h-images/bg-toeic-package.png") no-repeat left top;
}

.words-set .package-selected .win7k {
	color: #fff;
	background: url("../h-images/7k-bg-package.png") no-repeat left top;
}

.words-set .package-selected .vcard {
	color: #414141;
	background: url("../h-images/bg-vcard-package.png") no-repeat left top;
}

.words-set .package-selected .edu6k {
	color: #fff;
	background: url("../h-images/bg-edu6k-package.png") no-repeat left top;
}

.words-set .package-selected .mybox-1 {
	color: #fff;
	background: url("../h-images/bg-my-package-1.png") no-repeat left top;
}

.words-set .package-selected .mybox-fav {
	color: #fff;
	background: url("../h-images/bg-my-package-fav.png") no-repeat left top;
}

.words-set .package-selected .mybox-easy {
	color: #fff;
	background: url("../h-images/bg-my-package-easy.png") no-repeat left top;
}

.words-set .package-selected .mybox-hard {
	color: #fff;
	background: url("../h-images/bg-my-package-hard.png") no-repeat left top;
}

@media (max-width: 576px) {
	.words-set .hotwords-package-box a,
	.words-set .hot-package-box a,
	.words-set .main-package-box a,
	.words-set .vcard-package-box a,
	.words-set .edu6k-package-box a,
	.words-set .my-package-box a {
		font-size: 13px;
		padding-top: 3.7em;
		line-height: 1em;
		width: 82px;
		height: 82px;
		display: block;
		transition: all 0.3s;
	}

	.words-set .hotwords-package-box a.package-hotwords,
	.words-set .hotwords-package-box a.package-hotwords-lt,
	.words-set .hotwords-package-box a.package-hotwords-sc,
	.words-set .hotwords-package-box a.package-hotwords-ad,
	.words-set .hot-package-box a.package-1,
	.words-set .hot-package-box a.package-2,
	.words-set .hot-package-box a.package-3,
	.words-set .main-package-box a.toeic,
	.words-set .main-package-box a.win7k,
	.words-set .main-package-box a.vcard,
	.words-set .edu6k-package-box a.edu6k,
	.words-set .my-package-box a.mybox-1,
	.words-set .my-package-box a.mybox-fav,
	.words-set .my-package-box a.mybox-easy,
	.words-set .my-package-box a.mybox-hard {
		background-size: 80px;
		display: block;
		transition: all 0.3s;
	}

	.words-set .package-selected .package-name,
	.words-set .my-package-box a.mybox-fav,
	.words-set .my-package-box a.mybox-easy,
	.words-set .my-package-box a.mybox-hard {
		background-size: 100px;
		display: block;
		transition: all 0.3s;
	}
}

/* Page
===============================================================*/

.page-content {
	max-width: 768px;
	margin: 0 auto 2em auto;
}

.page-content a:link {
	text-decoration: none;
}

.page-content .page-title {
	color: #535353;
	font-size: 1.25rem;
	text-align: left;
	font-weight: 500;
	padding: 0;
	margin: 0 0 1em 0;
	border-bottom: 1px solid #a5a5a5;
}

.page-content .page-title a:link {
	text-decoration: none;
}

.page-content .page-title h3 small {
	color: #5b5b5b;
	font-size: 0.8rem;
}

.page-content .page-title small {
	color: #5b5b5b;
	font-weight: 400;
	font-size: 0.8rem;
}

.page-content .page-area {
	border-bottom: 0px solid #bcb59c;
	padding: 1em;
	line-height: 1.4em;
	border-radius: 1.5em;
	box-shadow: 0px 0px 5px rgb(112, 46, 46);
}

.page-area .btn-primary {
	padding: 0.38em 0.55em;
}

@media (max-width: 576px) {
	.page-content .page-area {
		font-size: 0.85rem;
	}

	.page-content .page-area small {
		display: block;
		line-height: 1.4em;
	}

	.page-content .page-area input,
	.page-content .page-area select,
	.page-content .page-area button {
		font-size: 1em;
	}

	.page-content .page-area h5 {
		font-size: 0.9rem;
	}
}

.page-content .page-area h6 {
	margin: 1.5em 0 0.5em 0;
	font-weight: 500;
}

.page-content .page-area .form-check a:link,
.page-content .page-area .form-check a:visited {
	text-decoration: underline;
}

.page-content .page-area .form-check a:hover,
.page-content .page-area .form-check a:active {
	text-decoration: none;
}

.page-content .page-area .log-amount {
	color: #e30612;
}

.page-content .page-area .page-submit {
	margin-top: 2em;
}

.page-content img.active {
	border: 2px solid #008a85;
}

.page-content .page-area .collapse .card {
	margin-bottom: 1em;
	padding: 1.5em 1em 1em 1em;
}

/* app-set */

.page-content .page-area .app-set {
	font-size: 1rem;
	padding: 0.3em;
}

@media (max-width: 576px) {
	.page-content .page-area .app-set {
		font-size: 0.9rem;
	}
}

.page-content .page-area .app-set label {
	cursor: pointer;
}

.page-content .page-area .app-set small {
	color: rgb(94, 94, 94);
	font-size: 0.8em;
}

.page-content .page-area .app-set-img {
	max-width: 5em;
	margin-left: 0.2em;
	filter: brightness(1);
	transition: all 0.5s;
}

.page-content .page-area .app-set-img:hover {
	filter: brightness(1.17);
	transition: all 0.2s;
}

@media (max-width: 576px) {
	.page-content .page-area .app-set-img {
		width: 4em;
	}
}

.view-word-list,
.view-word-box {
	cursor: pointer;
}

.view-word-box {
	background-color: rgba(255, 255, 255, 0.4);
}

.view-word-box .btn {
	padding: 0 5px;
	margin: 0;
}

.view-word-box h5 {
	color: #e30612;
	font-size: 1em;
}

/* mywords */

.page-content .page-area .mywords-item {
	clear: both;
}

.page-content .page-area .mywords-item .mywords-name {
	display: block;
	text-align: center;
	float: left;
	font-size: 1em;
	line-height: 1em;
	padding-top: 4.8em;
	width: 125px;
	height: 125px;
	color: rgb(255, 255, 255);
	border-radius: 0.6em;
	margin-right: 0.4em;
	margin-bottom: 0.2em;
	background-size: cover;
}

@media (max-width: 576px) {
	.page-content .page-area .mywords-item .mywords-name {
		padding-top: 4em;
		width: 100px;
		height: 100px;
	}
}

.page-content .page-area .mywords-item a:link {
	text-decoration: none;
	filter: brightness(1);
	margin: 0 5px 6px 5px;
	transition: all 0.5s;
}

.page-content .page-area .mywords-item a:hover {
	text-decoration: none;
	margin: -5px 5px 11px 5px;
	filter: brightness(1.17);
	transition: all 0.2s;
}

.page-content .page-area .mywords-item .mywords-cat {
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.2em;
	padding-bottom: 0.2em;
}

.page-content .page-area .mywords-item .mywords-title {
	text-align: left;
	font-size: 1.4em;
	line-height: 1em;
	font-weight: 500;
	margin-bottom: 0.2em;
	word-break: break-all;
}

@media (max-width: 576px) {
	.page-content .page-area .mywords-item .mywords-title {
		font-size: 1.2em;
	}
}

.page-content .page-area .mywords-item .mywords-title a:link,
.page-content .page-area .mywords-item .mywords-title a:visited {
	color: #000;
	text-decoration: underline;
}

.page-content .page-area .mywords-item .mywords-title a:hover,
.page-content .page-area .mywords-item .mywords-title a:active {
	color: #e30612;
	text-decoration: none;
}

.page-content .page-area .mywords-item .mywords-words {
	margin: -0.3em 0 1em 0;
	font-size: 0.8em;
	font-weight: 500;
	color: rgb(238, 235, 227);
	background: rgb(90, 85, 78);
}

.page-content .page-area .mywords-item a.mybox-1 {
	background: url("../h-images/bg-my-package-1.png") no-repeat left top;
}

.page-content .page-area .mywords-item a.mybox-fav {
	background: url("../h-images/bg-my-package-fav.png") no-repeat left top;
}

.page-content .page-area .mywords-item a.mybox-hard {
	background: url("../h-images/bg-my-package-hard.png") no-repeat left top;
}

.page-content .page-area .mywords-item a.mybox-easy {
	background: url("../h-images/bg-my-package-easy.png") no-repeat left top;
}

.page-content .page-area .mywords-item a.toeic {
	background: url("../h-images/bg-toeic-package.png") no-repeat left top;
}

.page-content .page-area .mywords-item a.win7k {
	background: url("../h-images/7k-bg-package.png") no-repeat left top;
}

.page-content .page-area .mywords-item a.vcard {
	background: url("../h-images/bg-vcard-package.png") no-repeat left top;
}

.page-content .page-area .mywords-item a.edu6k {
	background: url("../h-images/bg-edu6k-package.png") no-repeat left top;
}

.page-content .page-area .mywords-item a.package-hotwords {
	color: #000;
	background: url("../h-images/bg-hotwords-package.png") no-repeat left top;
}

.page-content .page-area .mywords-item a.package-hotwords-lt {
	color: #000;
	background: url("../h-images/bg-hotwords-package-lt.png") no-repeat left top;
}

.page-content .page-area .mywords-item a.package-hotwords-sc {
	color: #000;
	background: url("../h-images/bg-hotwords-package-sc.png") no-repeat left top;
}

.page-content .page-area .mywords-item a.package-hotwords-ad {
	color: #000;
	background: url("../h-images/bg-hotwords-package-ad.png") no-repeat left top;
}

@media (max-width: 576px) {
	.page-content .page-area .mywords-item .mywords-name {
		font-size: 0.95em;
		padding-top: 62px;
		width: 100px;
		height: 100px;
	}

	.page-content .page-area .mywords-item a.mybox-1,
	.page-content .page-area .mywords-item a.mybox-fav,
	.page-content .page-area .mywords-item a.mybox-easy,
	.page-content .page-area .mywords-item a.mybox-hard,
	.page-content .page-area .mywords-item a.toeic,
	.page-content .page-area .mywords-item a.win7k,
	.page-content .page-area .mywords-item a.edu6k,
	.page-content .page-area .mywords-item a.vcard,
	.page-content .page-area .mywords-item a.package-hotwords,
	.page-content .page-area .mywords-item a.package-hotwords-lt,
	.page-content .page-area .mywords-item a.package-hotwords-sc,
	.page-content .page-area .mywords-item a.package-hotwords-ad {
		background-size: 100px;
	}
}

/* pagination
===============================================================*/

.app-pagi nav {
	margin: 0.1em auto;
}

.pagination a.disabled:link,
.pagination a.disabled:visited {
	color: rgb(0, 0, 0, 0.15);
	cursor: none;
}
.navigation {
	border-radius: 1em;
}
.app-pagi .page-link {
	color: rgb(0, 0, 0, 0.6);
	cursor: pointer;
	padding: 0.1em 0.8em;
	text-decoration: none;
	background-color: rgb(255, 255, 255, 0.1);
	border: 1px solid rgb(54, 54, 54, 0.3);
}

.app-pagi .page-link:hover {
	border: 1px solid rgb(54, 54, 54, 0.6);
}

.app-pagi .page-item.active .page-link {
	z-index: 3;
	color: #464646;
	background-color: rgb(255, 255, 255, 0.4c);
	border: 1px solid rgb(0, 0, 0, 0.6);
}

/* Icon Note
===============================================================*/

.icon-note {
	text-align: center;
	font-size: 13px;
}

@media (max-width: 576px) {
	.icon-note {
		font-size: 11px;
	}
}

.icon-note img {
	width: 1.5em;
}

/* popper 
===============================================================*/

#tooltip {
	display: inline-block;
	background: #ffffff;
	color: #643045;
	font-weight: bold;
	padding: 5px 10px;
	font-size: 13px;
	border-radius: 4px;
}

#arrow,
#arrow::before {
	position: absolute;
	width: 8px;
	height: 8px;
	background: inherit;
}

#arrow {
	visibility: hidden;
}

#arrow::before {
	visibility: visible;
	content: "";
	transform: rotate(45deg);
}

#tooltip[data-popper-placement^="top"] > #arrow {
	bottom: -4px;
}

#tooltip[data-popper-placement^="bottom"] > #arrow {
	top: -4px;
}

#tooltip[data-popper-placement^="left"] > #arrow {
	right: -4px;
}

#tooltip[data-popper-placement^="right"] > #arrow {
	left: -4px;
}

/* sly */

.frame-content {
	position: relative;
	margin: 0.2em 0;
	padding: 0 1.2em;
}

.frame-content .nextPage {
	position: absolute;
	cursor: pointer;
	color: rgba(43, 43, 43, 0.5);
	background: rgb(0, 0, 0, 0);
	border: 0;
	top: 40%;
	right: -0.7em;
	transition: all 0.5s;
}

.frame-content .prevPage {
	position: absolute;
	cursor: pointer;
	color: rgba(43, 43, 43, 0.5);
	background: rgb(0, 0, 0, 0);
	border: 0;
	top: 40%;
	left: -0.7em;
}

.frame-content .nextPage:hover,
.frame-content .prevPage:hover {
	color: rgba(43, 43, 43, 0.8);
	transition: all 0.2s;
}

.frame {
	width: 100%;
	height: 130px;
	line-height: 130px;
	overflow: hidden;
}

.frame ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

.frame ul li {
	float: left;
	width: 125px;
	height: 100%;
	margin: 3px 0.5em 0 0;
	padding: 0;
	color: #ddd;
	text-align: center;
	filter: brightness(1);
	transition: all 0.3s;
}

.frame-content ul li:hover {
	margin: -3px 0.5em 0 0;
	filter: brightness(1.17);
	transition: all 0.3s;
}

.frame-content ul li a {
	display: block;
	font-size: 1em;
	line-height: 1.1em;
	padding-top: 4.6em;
	height: 125px;
	color: #fff;
	border-radius: 0.6em;
	text-decoration: none;
	transition: all 0.3s;
}

.frame-content .frame ul li a small {
	font-size: 0.8em;
}

.frame-content .frame ul li {
	position: relative;
	cursor: pointer;
}

.frame-content .frame ul .isDisabled {
	position: relative;
	cursor: not-allowed;
}

.frame-content .frame ul li .isDisabled,
.words-content .isDisabled {
	color: currentColor;
	pointer-events: none;
	opacity: 0.4;
	filter: saturate(0.4) blur(1px);
	color: rgb(80, 80, 80);
}

.frame-content ul li a.package-hotwords {
	color: #000;
	background: url("../h-images/bg-hotwords-package.png") no-repeat left top;
}

.frame-content ul li a.package-hotwords-lt {
	color: #000;
	background: url("../h-images/bg-hotwords-package-lt.png") no-repeat left top;
}

.frame-content ul li a.package-hotwords-sc {
	color: #000;
	background: url("../h-images/bg-hotwords-package-sc.png") no-repeat left top;
}

.frame-content ul li a.package-hotwords-ad {
	color: #000;
	background: url("../h-images/bg-hotwords-package-ad.png") no-repeat left top;
}

.frame-content ul li a.package-1 {
	background: url("../h-images/bg-hot-package-1.png") no-repeat left top;
}

.frame-content ul li a.package-2 {
	background: url("../h-images/bg-hot-package-2.png") no-repeat left top;
}

.frame-content ul li a.package-3 {
	background: url("../h-images/bg-hot-package-3.png") no-repeat left top;
}

.frame-content ul li a.toeic {
	background: url("../h-images/bg-toeic-package.png") no-repeat left top;
}

.frame-content ul li a.win7k {
	background: url("../h-images/7k-bg-package.png") no-repeat left top;
}

.frame-content ul li a.vcard {
	color: #414141;
	background: url("../h-images/bg-vcard-package.png") no-repeat left top;
}

.frame-content ul li a.edu6k {
	background: url("../h-images/bg-edu6k-package.png") no-repeat left top;
}

.frame-content ul li a.mybox-1 {
	background: url("../h-images/bg-my-package-1.png") no-repeat left top;
}

.frame-content ul li a.mybox-fav {
	background: url("../h-images/bg-my-package-fav.png") no-repeat left top;
}

.frame-content ul li a.mybox-easy {
	background: url("../h-images/bg-my-package-easy.png") no-repeat left top;
}

.frame-content ul li a.mybox-hard {
	background: url("../h-images/bg-my-package-hard.png") no-repeat left top;
}

@media (max-width: 576px) {
	.frame-content {
		position: relative;
		margin: 0.1em 0;
	}

	.frame-content .frame {
		width: 100%;
		height: 100px;
		line-height: 100px;
		overflow: hidden;
	}

	.frame-content .hotwords-package-box {
		height: 80px;
		line-height: 80px;
		overflow: hidden;
	}

	.frame-content .frame ul {
		list-style: none;
		margin: 0;
		padding: 0;
		height: 100%;
	}

	.frame-content .frame ul li {
		float: left;
		width: 102px;
		height: 100%;
		margin: 0 0.2em 1em 0;
		color: #ddd;
		text-align: center;
		cursor: pointer;
	}

	.frame-content .hotwords-package-box ul li {
		float: left;
		width: 82px;
		height: 100%;
		margin-right: 0.2em;
		color: #ddd;
		text-align: center;
		cursor: pointer;
	}

	.frame-content .frame ul li a {
		display: block;
		font-size: 0.8rem;
		padding-top: 4.8em;
		line-height: 1em;
		height: 100px;
		transition: all 0.3s;
	}

	.frame-content .hotwords-package-box ul li a {
		display: block;
		font-size: 0.8em;
		padding-top: 4em;
		line-height: 1em;
		height: 80px;
		transition: all 0.3s;
	}

	.frame-content ul li a.package-hotwords,
	.frame-content ul li a.package-hotwords-lt,
	.frame-content ul li a.package-hotwords-sc,
	.frame-content ul li a.package-hotwords-ad,
	.frame-content ul li a.package-1,
	.frame-content ul li a.package-2,
	.frame-content ul li a.package-3,
	.frame-content ul li a.toeic,
	.frame-content ul li a.win7k,
	.frame-content ul li a.vcard,
	.frame-content ul li a.edu6k,
	.frame-content ul li a.mybox-1,
	.frame-content ul li a.mybox-fav,
	.frame-content ul li a.mybox-easy,
	.frame-content ul li a.mybox-hard {
		background-size: 100px;
	}

	.frame-content .hotwords-package-box ul li a.package-hotwords-lt,
	.frame-content .hotwords-package-box ul li a.package-hotwords-sc,
	.frame-content .hotwords-package-box ul li a.package-hotwords-ad {
		background-size: 80px;
	}
}

.frame ul li.active {
	color: #fff;
	background: rgb(160, 50, 50, 0);
}

/* Scrollbar */

.scrollbar {
	margin: 0 0 1em 0;
	height: 2px;
	background: #ccc;
	line-height: 0;
}

.scrollbar .handle {
	width: 100px;
	height: 100%;
	background: #292a33;
	cursor: pointer;
}

.scrollbar .handle .mousearea {
	position: absolute;
	top: -9px;
	left: 0;
	width: 100%;
	height: 20px;
}

/* CSS Animate */

/* index */

.hot-content {
	animation-delay: 0.3s;
}

.hotwords-content {
	animation-delay: 0.5s;
}

.main-package {
	animation-delay: 0.7s;
}

.my-package {
	animation-delay: 0.9s;
}

/* package-set */

.words-set .set-area {
	animation-duration: 0.6s;
}

.package-selected .package-name {
	animation-delay: 0.2s;
	animation-duration: 1.3s;
}

.package-selected .package-cat {
	animation-delay: 0.2s;
}

.package-selected .package-title {
	animation-delay: 0.3s;
}

.package-selected .package-words {
	animation-delay: 0.4s;
}

.package-selected .package-note {
	animation-delay: 0.5s;
}

.item-content .btn-set-confirm {
	animation-delay: 0.5s;
	animation-duration: 1s;
}

.package-selected .btn-free {
	animation-delay: 1s;
	animation-duration: 0.5s;
}

.item-content .package-set {
	animation-delay: 0.6s;
	animation-duration: 2s;
}

.item-content .free-package {
	animation-delay: 0.6s;
	animation-duration: 2s;
}

.package-relate {
	animation-delay: 1s;
}

.promo-ad {
	animation-delay: 1.2s;
}

/* footer */

footer {
	border-top: 0em solid #f9d530;
	border-bottom: 0em solid #852b2b;
	background: #852b2b;
	color: #c2c2c2;
	margin: 0;
	padding: 0em 0 1em 0;
	font-size: 0.9rem;
}

footer h6 {
	color: #fff;
	font-size: 0.9rem;
}

footer h6 small {
	color: #c2c2c2;
	font-size: 0.7rem;
}

footer a:link,
footer a:visited {
	color: #f0f0f0;
	text-decoration: underline;
}

footer a:hover,
footer a:active {
	text-decoration: none;
}

@media (max-width: 576px) {
	footer a {
		font-size: 0.7rem;
		line-height: 2em;
		padding: 0;
	}
	footer .cs {
		font-size: 0.7rem;
	}
}

.custom-tooltip {
	--bs-tooltip-bg: var(--bs-secondary);
}

/* Vocabulary Card Page */
/* index */
.vcard-package-box ul li a.vcard {
	position: relative;
	font-size: 0.95rem;
	font-weight: 500;
	padding: 3.3rem 1.2rem 0 1.2rem;
	line-height: 1.2em;
	color: #42403f;
}

.vcard-package-box ul li a.vcard small {
	position: absolute;
	display: block;
	font-family: consolas;
	width: 90px;
	border: 0px solid #000;
	bottom: 1.3em;
	font-size: 0.6rem;
	font-weight: 400;
	color: #4d4d4d;
}
/* vc Header */
.vc-content .vc-header {
	padding: 0.2em 3em 0em 3em;
}
.vc-content .vc-theme {
	color: #22a095;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1em;
}
.vc-content .vc-theme .vc-theme-en {
	color: #424242;
	font-size: 0.9rem;
	display: inline-block;
	font-weight: 400;
}
.vc-content .vc-date {
	position: absolute;
	text-align: right;
	font-size: 0.8em;
	line-height: 1.2em;
	top: 0.5em;
	right: 3em;
	padding: 2px 5px;
	border-radius: 0.2em;
	background: rgb(54, 54, 54, 0.25);
	color: #fff;
}

/* v-card */
.vc-content .vc-card {
	position: relative;
	padding: 0;
}

.vc-content .vc-card .vc-card-bg {
	width: auto;
	min-height: 42rem;
	margin: 0 auto;
	padding: 4rem 3rem 3rem 3rem;
	background-size: contain;
	background-repeat: no-repeat;
	transition: all 0.3s;
}

.vc-content .vc-card .vc-card-img {
	border-radius: 1em;
	box-shadow: 2px 2px 5px rgb(0, 0, 0, 0.3);
}

.vc-content .vc-card .vc-card-list {
	position: absolute;
	top: 4em;
	font-size: 1.4rem;
	text-shadow: 3px 3px 5px #000;
	color: #fff;
	font-weight: 400;
	line-height: 1em;
}

.vc-content .vc-card .vc-card-list .row {
	padding-bottom: 1rem;
}

.vc-content .vc-card .vc-card-list a:link,
.vc-content .vc-card .vc-card-list a:visited {
	text-decoration: underline;
	color: #fff;
}

.vc-content .vc-card .vc-card-list a:hover,
.vc-content .vc-card .vc-card-list a:active {
	text-decoration: none;
	color: #fff069;
}

.vc-content .vc-card .vc-card-list .vc-en {
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1em;
	text-align: right;
	padding-left: 1.5em;
}

.vc-content .vc-card .vc-card-list .vc-ch {
	padding-left: 0;
	padding-right: 3em;
	line-height: 1.4em;
}

/* vc Nav */
.vc-content .vc-card .vc-nav {
	position: absolute;
	width: 78%;
	left: 11%;
	bottom: 6rem;
}

.vc-content .vc-card .btn-nav {
	font-size: 0.8rem;
	border-radius: 1.5rem;
	padding: 0.6rem 0.7rem;
	background: rgba(39, 39, 39, 0.7);
	color: #c7c7c7;
}

.vc-content .btn-nav:hover {
	color: #fff;
	background: rgba(39, 39, 39, 0.9);
}

.vc-content .vc-card .vc-nav .isDisabled {
	position: relative;
	cursor: not-allowed;
	background: rgba(39, 39, 39, 0.5);
	color: #9c9c9c;
}
.vc-content .vc-card .vc-nav .isDisabled:hover {
	position: relative;
	cursor: not-allowed;
	background: rgba(39, 39, 39, 0.5);
	color: #9c9c9c;
}

.vc-content .vc-hash {
	margin-top: 1em;
	text-align: right;
	font-size: 0.8em;
}
.vc-content .vc-hash a {
	color: #3a3a3a;
	margin: 0.2rem;
	font-size: 0.85rem;
}
.vc-content .vc-hash a:link,
.vc-content .vc-hash a:visited {
	text-decoration: underline;
}

.vc-content .vc-hash a:hover,
.vc-content .vc-hash a:active {
	text-decoration: none;
}

@media (max-width: 768.1px) {
	.vc-content .vc-card {
		padding: 0.5rem 0.5rem;
	}

	.vc-content .vc-card .vc-card-bg {
		padding: 3.5rem 1rem 1rem 1rem;
		min-height: 560px;
		max-width: 580px;
		border: 0px solid #000;
		transition: all 0.3s;
	}
	/* vc Card */
	.vc-content .vc-card .vc-card-list {
		top: 3em;
		font-size: 1.4rem;
		text-shadow: 2px 2px 3px #000;
		color: #fff;
		font-weight: 700;
		line-height: 1.4em;
	}

	.vc-content .vc-card .vc-card-list .vc-en {
		font-size: 2rem;
		line-height: 1.15em;
		text-align: right;
	}
	/* vc Nav */
	.vc-content .vc-card .vc-nav {
		bottom: 6em;
		width: 80%;
	}

	.vc-content .vc-card .btn-nav {
		font-size: 0.8rem;
		border-radius: 1.5rem;
		padding: 0.6rem 0.7rem;
		background: rgba(39, 39, 39, 0.7);
		color: #c7c7c7;
	}
}

@media (max-width: 576px) {
	.vcard-package-box ul li a.vcard {
		font-size: 0.9rem;
		padding: 2.7rem 0.5rem 0 0.5rem;
		line-height: 1.15em;
	}
	.vcard-package-box ul li a.vcard small {
		width: 84px;
		bottom: 0.9em;
	}
	/* vc Header */
	.vc-content .vc-header {
		padding: 0.2em 0.8em 0em 0.8em;
	}
	.vc-content .vc-theme {
		font-size: 1.3em;
		padding-bottom: 0;
	}
	.vc-content .vc-theme .vc-theme-en {
		font-size: 0.8rem;
		line-height: 1em;
	}
	.vc-content .vc-date {
		position: absolute;
		top: 0em;
		right: 1em;
	}

	/* vc Card */
	.vc-content .vc-card {
		padding: 0.5rem 0.5rem;
	}

	.vc-content .vc-card .vc-card-bg {
		margin: 0 auto;
		padding: 2.5rem 1rem 1rem 1rem;
		min-height: 350px;
		max-width: 350px;
		transition: all 0.3s;
	}

	.vc-content .vc-card .vc-card-list {
		top: 3em;
		font-size: 1em;
		text-shadow: 2px 2px 3px #000;
		color: #fff;
		font-weight: 400;
		line-height: 1em;
	}

	.vc-content .vc-card .vc-card-list .row {
		padding: 0 0 0.8em 0;
	}

	.vc-content .vc-card .vc-card-list .vc-en {
		font-weight: 700;
		font-size: 1.6em;
		line-height: 1em;
		text-align: right;
	}
	/* vc Nav */
	.vc-content .vc-card .vc-nav {
		width: 86%;
		left: 7%;
		bottom: 4.5em;
	}

	.vc-content .vc-card .btn-nav {
		font-size: 0.7rem;
		padding: 0.5rem 0.6rem;
	}

	.vc-content .vc-hash {
		font-size: 0.7em;
	}
}

/* Event Banner */

.event-area-bg {
	background: linear-gradient(
		90deg,
		rgba(236, 32, 32, 1) 0%,
		rgba(255, 111, 52, 1) 100%
	);
}

.event-banner {
	width: 100%;
}