@charset "UTF-8";

/* All */
body {
    background: #2b5f4b;
    font-family: Arial, sans-serif, "微軟正黑體";
    font-size: 16px;
    font-weight: 500;
}
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }
}
@media (max-width: 576px) {
    body {
        font-size: 13px;
    }
}

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

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

.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;
}

/* From Fix (btn,input,textarea) */
.btn {
    border-radius: 2em;
    padding: 0.4em 1.6em;
}
.col-2 .btn {
    border-radius: 2em;
    padding: 0.3em 0.5em;
}
.btn-primary {
    background: #06887d;
    border: 0;
}
.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus {
    background: #01b6a7;
    box-shadow: 0 0 5px 2px #62fff2;
    border: 0;
}
.btn-success {
    background: #25ceda;
    border: 0;
}
.btn-success:active,
.btn-success:hover,
.btn-success:focus {
    background: #25ceda;
    box-shadow: 0 0 5px 2px #7ef6ff;
    border: 0;
}
.btn-warning {
    background: #f3e142;
    border: 0;
}
.btn-warning:active,
.btn-warning:hover,
.btn-warning:focus {
    background: #f3e142;
    box-shadow: 0 0 5px 2px #fff389;
    border: 0;
}
.btn-danger {
    background: #f01c74;
    border: 0;
}
.btn-danger:active,
.btn-danger:hover,
.btn-danger:focus {
    background: #ff54b8;
    box-shadow: 0 0 5px 2px #ff93d2;
    border: 0;
}
input::placeholder {
    font-size: 0.86em;
    color: #000;
}
.page-area input[type="text"],
.page-area [type="name"],
.page-area input[type="password"],
.page-area .form-select,
.page-area .form-control {
    font-size: 1em;
    border-radius: 1.5em;
    border: 1px solid #a7a7a7;
}

input[type="text"]:focus,
input[type="name"]:focus,
input[type="password"]:focus,
.form-select:focus {
    background: #f6ea6a;
    box-shadow: 0 0 5px 2px rgb(223, 164, 2);
}
input[type="radio"],
input[type="checkbox"] {
    background: rgb(219, 219, 219);
}
.btn-primary,
input[type="radio"]:checked,
input[type="checkbox"]:checked {
    background: #06887d;
}

/* WebApp General
    ===============================================================*/
.webapp {
    padding: 0;
    margin: 0;
    overflow: auto;
    height: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

@media (max-width: 576px) {
    .webapp {
        min-height: auto;
        background-size: cover;
    }
}
/* Select first child or vcard page will fail */
.webapp > .container {
    max-width: 768px;
    overflow: auto;
}
@media (max-width: 768px) {
    .webapp > .container {
        margin-top: 6rem;
    }
}

@media (max-width: 576px) {
    .webapp > .container {
        margin-top: 4.2em;
        font-size: 15px;
    }
}

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

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

.webapp .webapp-header.webapp-header-hot {
    position: relative;
    color: #fff;
    background: linear-gradient(90deg, #08bdb7 15%, rgba(255, 255, 255, 0) 70%);
}

.webapp .webapp-header-jh2k {
    position: relative;
    background: linear-gradient(
        90deg,
        #8d550b 15%,
        rgba(235, 155, 36, 0.6) 50%,
        rgba(255, 255, 255, 0) 70%
    );
}
.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 .app-name {
    font-size: 1.16em;
    color: #ffffff;
}

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

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

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

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

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

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

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

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

@media (max-width: 768px) {
    header .title-webapp img {
        max-width: 27vw;
        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: 58%;
        margin-top: 0.7em;
        float: right;
    }
}

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

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

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

.header-menu .nav-webapp li a.nav-link {
    padding: 0 0.4em;
}

.header-menu .nav-webapp li a.nav-link:link,
.header-menu .nav-webapp li a.nav-link:visited {
    color: #2e2e2e;
    font-size: 1em;
    transition: all 0.1s;
}

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

.header-menu .nav-webapp li a .line {
    color: #06c755;
    font-size: 1em;
    transition: all 0.1s;
}
.header-menu .nav-webapp li a .line::before {
    content: "|";
    color: #000;
    padding: 0 0.5em;
    font-weight: 100;
}

.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 {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        padding: 0 1em;
        z-index: 999;
        background: rgb(8, 183, 168, 0.85);
        border-radius: 0 0 1em 1em;
        box-shadow: 0 2px 5px 2px rgb(0, 0, 0, 0.4);
    }
    .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.5em;
        right: 1em;
        width: 0;
        height: 0;
        border-left: 0.8em solid transparent;
        border-right: 0.8em solid transparent;
        border-bottom: 1em solid #fff;
    }

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

.navbar-toggler {
    border-radius: 0.3em;
    margin: 0.3em 0 0 0;
    padding: 0.4em 0.6em;
    background: rgb(255, 255, 255);
    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: cadetblue;
}

/* cloud alert  */
.webapp .cloudalert-box {
    display: none;
}
.webapp .cloudalert {
    font-size: 1em;
    position: relative;
    padding: 0.6em 0.5em;
    margin: 2px 0 5px 0;
    line-height: 1em;
    border-radius: 0.2em;
    text-align: center;
    transition: all 0.3s;
    box-shadow: 1px 1px 2px 2px rgb(122, 122, 122, 0.5);
}
.webapp .cloudalert:hover {
    margin: 0.8em 0 1.7em 0;
    box-shadow: 2px 2px 3px 4px rgb(122, 122, 122, 0.3);
    transition: all 0.3s;
}

.webapp .cloudalert-warning {
    background: rgba(255, 246, 118);
    color: #000;
}
.webapp .cloudalert-warning a:link,
.webapp .cloudalert-warning a:visited {
    color: #ce150f;
    text-decoration: underline;
}
.webapp .cloudalert-warning a:hover,
.webapp .cloudalert-warning a:active {
    color: #ce150f;
    text-decoration: none;
}

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

.hotwords-content .nav-webapp .nav-link {
    color: rgb(0, 0, 0);
    padding: 0px 8px;
    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;
    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;
    font-weight: 700;
    line-height: 1.1em;
    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 span img {
    margin-top: 0.5em;
}

.hotwords-content .noarticle .bubble {
    position: absolute;
    top: 0em;
    left: 0em;
    font-size: 0.8em;
    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-weight: 600;
    font-size: 1em;
    line-height: 1em;
    color: #0a8e8a;
}
.hotwords-content .noarticle .des a:link,
.hotwords-content .noarticle .des a:visited {
    font-size: 1em;
    font-weight: 600;
    line-height: 1em;
    color: #0a8e8a;
    text-decoration: underline;
}
.hotwords-content .noarticle .des a:hover,
.hotwords-content .noarticle .des a:active {
    font-size: 1em;
    font-weight: 600;
    line-height: 1em;
    color: #1b504e;
    text-decoration: none;
}

.hotwords-content .noarticle .btn {
    font-size: 1em;
    font-weight: 600;
    line-height: 1em;
    color: #0a8e8a;
    background: rgb(0, 0, 0, 0);
}
.hotwords-content .noarticle .btn:hover {
    font-size: 1em;
    font-weight: 600;
    line-height: 1em;
    color: #0a8e8a;
    text-decoration: underline;
    background: rgb(0, 0, 0, 0);
}

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

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

/* 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-size: 2.6rem;
    font-weight: 700;
    padding: 2.5rem 0 2rem 0;
}

@media (max-width: 576px) {
    .words-content .words-name {
        font-size: 2.4rem;
        padding: 2.5rem 0 2rem 0;
    }
}
@media (max-width: 415px) {
    .words-content .words-name {
        font-size: 2rem;
        padding: 2rem 0 1.5rem 0;
    }
}

.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;
    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-style: italic;
    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 {
    margin-top: 0;
    font-size: 1.4rem;
    font-weight: 600;
    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;
    cursor: pointer;
    padding: 0.3em;
}

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

.words-content .words-ch a:link,
.words-content .words-ch a:visited {
    color: rgb(187, 187, 187);
}

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

.words-content .words-sentences {
    font-size: 1.3rem;
    min-height: 8em;
    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: "Arial", "微軟正黑體";
        margin: 1em auto 0 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-family: "Arial", "微軟正黑體";
    letter-spacing: 0.01rem;
}

.words-content .words-sentences .sentences-en a:link,
.words-content .words-sentences .sentences-en a:visited {
    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;
    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;
    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 {
    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 {
    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 .icon-headphone {
    width: 6em;
    margin-top: 1.5em;
}

.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 (7K)
    ===============================================================*/

.words-set {
    padding-bottom: 1em;
}
@media (max-width: 768px) {
    .words-set {
        margin-top: 2em;
    }
}
@media (max-width: 576px) {
    .words-set {
        margin-top: 1.3em;
    }
}

.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(54, 54, 54);
}

.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, 253, 237, 0.7) 40%,
        rgb(36, 16, 7, 0.2) 80%
    );
    border-bottom: 3px solid #ebd973;
}

.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-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);
    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.7em;
    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;
    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;
    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;
    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);
    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 .ad-linesc {
    background: url("../h-images/promo-i-line.png") no-repeat left top;
    color: #fff;
}

.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/bg-win7k-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 .jh2k {
    color: #fff;
    background: url("../h-images/bg-jh2k-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 .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 .line {
    color: #06c755;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    border-left: 0px solid #929292;
}
.page-content .line::before {
    content: "|";
    color: #000;
    padding: 0 0.5em;
    font-weight: 100;
}

.page-content a:link {
    text-decoration: none;
}
/* page area image style */
.page-content .page-area .img-lg {
    max-width: 30%;
    border-radius: 1em;
    box-shadow: 0 0 0.3em 0 #4e4e4e;
    margin: 1em auto;
    display: block;
    transition: all 0.2s;
}
@media (max-width: 576px) {
    .page-content .page-area .img-lg {
        max-width: 75%;
    }
}
.page-content .page-area .img-sm {
    max-width: 36%;
    border-radius: 0.5em;
    box-shadow: 0 0 0.3em 0 #4e4e4e;
    margin: 1em;
    transition: all 0.2s;
}
@media (max-width: 576px) {
    .page-content .page-area .img-sm {
        max-width: 72%;
    }
}
.page-content .page-area .img-fit {
    max-width: 85%;
    border-radius: 1em;
    box-shadow: 0 0 0.3em 0 #4e4e4e;
    margin: 0.5em auto;
    display: block;
    transition: all 0.2s;
}
@media (max-width: 576px) {
    .page-content .page-area .img-fit {
        max-width: 90%;
    }
}
.page-content .page-area .img-lg:hover {
    transform: scale(1.37);
    transition: all 0.2s;
    box-shadow: 0 0 0.6em 0 #8a8a8a;
}
.page-content .page-area .img-sm:hover {
    transform: scale(1.42);
    transition: all 0.2s;
    box-shadow: 0 0 0.6em 0 #8a8a8a;
}
.page-content .page-area .img-fit:hover {
    transform: scale(1.1);
    transition: all 0.2s;
    box-shadow: 0 0 0.6em 0 #8a8a8a;
}

.page-content .page-title {
    color: #494949;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: left;
    margin: 0 0 0.2em 0;
    border-bottom: 0px solid #c5c5c5;
}

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

.page-content .page-title h3 small {
    color: #383838;
    font-size: 0.8em;
}

.page-content .page-title small {
    color: #383838;
    font-size: 0.5em;
}

.page-content .page-area {
    border-bottom: 0px solid #bcb59c;
    background: rgb(255, 255, 255, 0.85);
    padding: 0.65em;
    line-height: 1.4em;
    border-radius: 1.5em;
    box-shadow: 0px 0px 0.7em #c7c5c3;
}

@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 h5 {
        font-size: 0.9rem;
    }
}

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

.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;
}

/* CheckOut */

.page-content .page-area .page-checkout-pg {
    font-size: 0.9em;
}
.page-content .page-area .page-checkout-pg .border {
    border: 1px solid #000;
}
.page-content .page-area .page-checkout-pg .pg-check {
    background: #f6ea6a;
    border-top: 2px solid #06887d;
}
.page-content .page-area .page-checkout-plan {
    margin: 0.3em 0.1em 0.3em 0.1em;
    padding: 1.3em 0.2em;
    line-height: 1em;
    border: 1px solid #dbdbdb;
    border-radius: 1em;
    box-shadow: 2px 2px 3px #888888;
    cursor: pointer;
    background: linear-gradient(
        0deg,
        rgba(255, 242, 174, 1) 0%,
        rgba(255, 253, 227, 1) 100%
    );
    transition: all 0.1s;
}

.page-content .page-area .page-checkout-plan:hover {
    margin: 0em 0.1em 0.6em 0.1em;
    box-shadow: 3px 3px 6px #a3a3a3;
    background: rgb(255, 255, 255);
    transition: all 0.1s;
}
.page-content .page-area .page-checkout-plan:active {
    margin: 0em 0.1em 0.6em 0.1em;
    box-shadow: -2px -2px 3px #888888;
    background: linear-gradient(180deg, #fddd4d 0%, #fff7a0 100%);
    transition: all 0.1s;
}
.page-content .page-checkout .page-checkout-plan-active {
    margin: 0.3em 0.1em 0.3em 0.1em;
    box-shadow: -2px -2px 2px #a3a3a3;
    background: linear-gradient(180deg, #fddd4d 0%, #fff7a0 100%);
    transition: all 0.3s;
}
.page-content .page-area .page-checkout-plan-confirm {
    margin: 0.3em 0.1em 0.3em 0.1em;
    padding: 1em 1em 0.5em 1em;
    background: #f6ea6a;
    color: #06887d;
    border: 0px solid #dbdbdb;
    box-shadow: 5px 5px 0px 0px #06887d;
}
.page-content .page-area .page-checkout-plan-confirm .start-date {
    font-size: 0.8em;
    color: #555555;
}

.page-content .page-area .page-checkout-plan-active:hover {
    margin: 0.3em 0.1em 0.3em 0.1em;
    box-shadow: -2px -2px 2px #a3a3a3;
    background: linear-gradient(180deg, #fddd4d 0%, #fff7a0 100%);
    transition: all 0.3s;
}
.page-content .page-area .page-checkout-plan h3 {
    font-weight: bold;
    padding: 0;
    margin: 0 0 0.1em 0;
}
.page-content .page-area .page-checkout-plan .des {
    padding: 0.5em;
    margin: 0 auto;
    width: 90%;
    font-size: 0.9em;
    border: 1px solid #cccccc;
    background: #fff;
    border-radius: 1.5em;
    box-shadow: 1px 1px 2px #adadad;
}
.page-content .page-area .page-checkout-plan .month {
    font-weight: bolder;
    padding: 0 0.2em;
    color: #06887d;
}
.page-content .page-area .page-checkout-plan .price {
    font-size: 1.4em;
    font-weight: bolder;
    padding: 0 0.2em;
    color: crimson;
}
.page-content .page-area .page-checkout-plan .note {
    padding-top: 0.5em;
    font-size: 0.88rem;
}
.page-content .page-area .page-checkout-warning {
    background: #f6ea6a;
    padding: 1em 0.8em;
    size: 0.95em;
    line-height: 1.2em;
}
.page-content .page-area .page-checkout-plan-selectstart {
    padding: 0.8em 2em;
    border-radius: 1.5em;
}

/* 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;
    border-radius: 0.6em;
    margin-left: 0.2em;
    filter: brightness(1);
    box-shadow: 1px 1px 3px 1px #6d6d6d;
    transition: all 0.2s;
}

.page-content .page-area .app-set-img:hover {
    filter: brightness(1.15);
    transform: scale(1.1);
    margin: -0.5em 0 0.3em 0;
    box-shadow: 0 0 6px 0px #9c9c9c;
    transition: all 0.2s;
}
.page-content .page-area .app-set-img:active {
    max-width: 5em;
    border-radius: 0.6em;
    margin-left: 0.2em;
    filter: brightness(1);
    box-shadow: 1px 1px 3px 1px #6d6d6d;
    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: 0.96em;
    line-height: 1.2em;
    padding-top: 4.6em;
    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 {
        font-size: 0.95em;
        padding-top: 62px;
        width: 100px;
        height: 100px;
        background-size: 100px !important;
    }
}

.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: 1em;
    line-height: 1.2em;
    margin: 0.5rem 0 0.2rem 0;
}

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

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

.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;
    color: rgb(238, 235, 227);
    background: cadetblue;
    border-radius: 1em;
}

.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/bg-win7k-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.jh2k {
    background: url("../h-images/bg-jh2k-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;
}

/* 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;
    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: rgb(165, 165, 165);
    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(165, 165, 165);
    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-content .frame {
    width: 100%;
    height: 130px;
    line-height: 130px;
    overflow: hidden;
}

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

.frame-content .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: 0.95em;
    line-height: 1.25em;
    padding-top: 4.75em;
    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.ad-linesc {
    background: url("../h-images/promo-i-line.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/bg-win7k-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.jh2k {
    background: url("../h-images/bg-jh2k-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 .frame ul li a {
        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;
}

/* footer */

footer {
    border-top: 0em solid #f9d530;
    border-bottom: 0em solid #056b68;
    background: #2b5f4b;
    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 {
    color: #fdf46d;
    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;
    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;
    color: #4d4d4d;
}
/* vc Header */
.vc-content .vc-header {
    padding: 0.2em 0.5em 0.5em 0.5em;
}
.vc-content .vc-theme {
    color: #22a095;
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1em;
}
.vc-content .vc-theme .vc-theme-en {
    color: #424242;
    font-size: 0.75em;
    display: inline-block;
}
.vc-content .vc-date {
    position: absolute;
    text-align: right;
    font-size: 0.8em;
    line-height: 1em;
    top: 0;
    right: 0;
    padding: 0.5em 1em;
    border-radius: 1.5em;
    background: cadetblue;
    color: #fff;
}

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

.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: 0 0 0.5em 0.1em rgb(0, 0, 0, 0.3);
}

.vc-content .vc-card .vc-card-list {
    position: absolute;
    top: 10%;
    font-size: 1.4rem;
    text-shadow: 3px 3px 5px #000;
    color: #fff;
    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-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: 7rem;
}

.vc-content .vc-card .btn-nav {
    font-size: 1rem;
    border-radius: 1.5rem;
    padding: 0.6rem 3rem;
    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 {
        margin: 0 1rem;
    }

    .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 {
        font-size: 1.4em;
        text-shadow: 2px 2px 3px #000;
        color: #fff;
        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: 7em;
        width: 80%;
    }

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

@media (max-width: 576px) {
    .vc-content .vc-card {
        margin: 0 0.2rem;
    }
    .vcard-package-box ul li a.vcard {
        font-size: 0.9em;
        padding: 3.2em 0.5em 0 0.5em;
        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.2em 0em 0.2em;
    }
    .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.5em 0.6em;
    }

    .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 {
        font-size: 1em;
        text-shadow: 2px 2px 3px #000;
        color: #fff;
        line-height: 1em;
    }

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

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

    .vc-content .vc-card .btn-nav {
        font-size: 0.9rem;
        padding: 0.2rem 2rem;
    }

    .vc-content .vc-hash {
        margin-top: 0.5rem;
        font-size: 0.7em;
    }
}

/* Event Banner */

.event-area-bg {
    background: linear-gradient(90deg, #0ab7a8 0%, #faca2a 100%);
    box-shadow: 2px 2px 2px 2px rgb(77, 77, 77, 0.5);
}
.event-area-bg svg {
    color: fff;
}

.event-banner {
    width: 100%;
}

/* Icon Style */
.icon-star {
    color: #f32626;
}

/* LINE area */
.page-area-line .line-title {
    font-size: 1.2em;
    font-weight: 600;
    margin-top: 1em;
    padding: 0.5em 0;
}
.page-area-line .line-total {
    color: #08b7a8;
    font-size: 1.4em;
    padding: 0 0.2em;
}
.page-area-line .line-value {
    font-size: 2em;
    font-weight: 300;
    padding: 0.2em 0 0.2em 0;
}
.page-area-line .line-count {
    border-radius: 0.6em;
    padding: 1em 0;
}
@media (max-width: 576px) {
    .page-area-line .line-count {
        padding: 0.5em 0;
        transition: all 0.2s;
    }
}
.page-area-line .line-cat {
    padding: 0.5em 0;
    margin: 0 0.2em 0 0.2em;
    border-bottom: 1px solid #a3a3a3;
}

.page-area-line .line-new {
    color: #c99300;
    border: 1px solid #c99300;
    background: rgb(201, 147, 0, 0.1);
}
.page-area-line .line-re {
    color: #0095da;
    border: 1px solid #0095da;
    background: rgb(0, 149, 218, 0.1);
}
.page-area-line .line-correct {
    color: #00b400;
    border: 1px solid #00b400;
    background: rgb(0, 180, 0, 0.1);
}
.page-area-line .line-wrong {
    color: #da3300;
    border: 1px solid #da3300;
    background: rgb(218, 51, 0, 0.1);
}

.page-area-line .line-word {
    font-size: 1em;
    border-radius: 2em;
    padding: 0.2em 1em;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    cursor: pointer;
    transition: all 0.2s;
}
@media (max-width: 576px) {
    .page-area-line .line-word {
        font-size: 0.8em;
        transition: all 0.2s;
    }
}
.page-area-line .line-word:hover {
    filter: brightness(1.2);
    transform: scale(1.1);
    transition: all 0.2s;
    box-shadow: 0 0 2px 2p #5f5f5f;
}
.page-area-line .line-word.line-new {
    color: #c99300;
    background: rgb(201, 147, 0, 0.1);
}
.page-area-line .line-word.line-re {
    color: #0095da;
    background: rgb(0, 149, 218, 0.1);
}
.page-area-line .line-word.line-correct {
    color: #00b400;
    background: rgb(0, 180, 0, 0.1);
}
.page-area-line .line-word.line-wrong {
    color: #da3300;
    background: rgb(218, 51, 0, 0.1);
}

/* promo page */
.page-area-promo .content {
    padding: 1em 0.4em;
}
.page-area-promo .title {
    font-size: 1.4em;
    font-weight: 600;
    padding: 1em 0 0.3em 0;
    color: #222222;
}
.page-area-promo .box {
    font-size: 1em;
}
.page-area-promo b,
.page-area-promo strong {
    font-weight: bolder;
    color: #e06500;
}
.page-area-promo a:link,
.page-area-promo a:visited {
    text-decoration: underline;
    color: #e06500;
    padding: 0 3px;
    font-weight: 600;
}
.page-area-promo a:hover,
.page-area-promo a:active {
    text-decoration: none;
}