@media only screen and (max-width: 1599px) {
    /* -- Header | Nav
    --------------------------------------------------*/
    .site-nav nav ul.nav-list>li>a,
    .site-nav nav ul.nav-list>li>a:visited {
        padding: 0 0.75em;
    }
    /* -- Section
    --------------------------------------------------*/
    .section-container.fixed-width {
        width: 1200px;
    }
    /* -- Main Content
    --------------------------------------------------*/
    #searchKeyboardContainer {
        font-size: 14px;
    }
    #keyboardRadical {
        width: -webkit-calc((3em + 4px) * 10 + 1em * (10 - 1) + 5.75em * 2);
        width: -moz-calc((3em + 4px) * 10 + 1em * (10 - 1) + 5.75em * 2);
        width: calc((3em + 4px) * 10 + 1em * (10 - 1) + 5.75em * 2);
    }
    #keyboardRadical .styled-keys-container .styled-key-1:nth-child(12n + 1) {
        margin-left: 1em;
        clear: none;
    }
    #keyboardRadical .styled-keys-container .styled-key-1:nth-child(10n + 1) {
        margin-left: 0;
        clear: both;
    }
    
    /* -- Components
    --------------------------------------------------*/
    /* -- Pagination -- */
    .styled-pagination-1 {
        font-size: 14px;
    }
}

@media only screen and (max-width: 1199px) {
    /* -- Universal Setting
    --------------------------------------------------*/
    body {
        font-size: 14px;
    }
    /* -- Header | Nav
    --------------------------------------------------*/
    .site-nav nav ul.nav-list>li>a,
    .site-nav nav ul.nav-list>li>a:visited {
        padding: 0 0.5em;
    }
    /* -- Section
    --------------------------------------------------*/
    .section-container.fixed-width {
        width: 1000px;
    }
    /* -- Main Content
    --------------------------------------------------*/
    #searchKeyboardContainer {
        font-size: 12px;
    }
    #keyboardRadical {
        width: -webkit-calc((3em + 4px) * 9 + 1em * (9 - 1) + 5.75em * 2);
        width: -moz-calc((3em + 4px) * 9 + 1em * (9 - 1) + 5.75em * 2);
        width: calc((3em + 4px) * 9 + 1em * (9 - 1) + 5.75em * 2);
    }
    #keyboardRadical .styled-keys-container .styled-key-1:nth-child(10n + 1) {
        margin-left: 1em;
        clear: none;
    }
    #keyboardRadical .styled-keys-container .styled-key-1:nth-child(9n + 1) {
        margin-left: 0;
        clear: both;
    }
    /* -- Components
    --------------------------------------------------*/
    /* -- Styled keyboard -- */
    .styled-keyboard-1 {
        padding-left: 5em;
        padding-right: 5em;
    }
    .styled-keyboard-1 .text-btn {
        left: 5em;
    }
    .styled-keyboard-1 .circle-btn {
        font-size: 12px;
    }
    .styled-keyboard-2 {
        padding-left: 5em;
        padding-right: 5em;
    }
    .styled-keyboard-2 .text-btn {
        left: 5em;
    }
    .styled-keyboard-2 .circle-btn {
        font-size: 12px;
    }
    .styled-keyboard-2 .keyboard-keys-container {
        padding: 0 1em;
    }
    .styled-keyboard-2 .keyboard-keys-container~.keyboard-keys-container {
        padding-left: 0.625em;
    }
    /* -- Components
    --------------------------------------------------*/
    /* -- Pagination -- */
    .fixed-bottom-pagination {
        padding: 0.5em 1em;
    }
    .fixed-bottom-pagination>.inner {
        padding: 0.5em 0 0;
    }
    .fixed-bottom-pagination .title-wrapper {
        display: inline-block;
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        height: auto;
        text-align: center;
        vertical-align: bottom;
        overflow: hidden;
    }
    .fixed-bottom-pagination .title-wrapper .title {
        float: left;
        line-height: 1.125em;
    }
    .fixed-bottom-pagination .title-wrapper p {
        float: left;
        padding: 0 0 0 1em;
    }
    .fixed-bottom-pagination .pagination>li~li {
        margin-left: 0.5em;
    }
    .fixed-bottom-pagination .pagination>li~li::before {
        display: none;
    }
    .fixed-bottom-pagination .pagination>li.prev {
        padding-right: 0;
    }
    .fixed-bottom-pagination .pagination>li.next {
        padding-left: 0;
    }
    .fixed-bottom-pagination .pagination>li.prev::after,
    .fixed-bottom-pagination .pagination>li.next::after {
        display: none;
    }
    .styled-pagination-1 {
        font-size: 1em;
    }
    .styled-pagination-1 .wrapper {
        display: block;
    }
    #sourcePagination.styled-pagination-1 .wrapper {
        width: -webkit-calc(8.5em * 6 + 10px * 5 + 2.5em * 2);
        width: -moz-calc(8.5em * 6 + 10px * 5 + 2.5em * 2);
        width: calc(8.5em * 6 + 10px * 5 + 2.5em * 2);
    }
}

@media only screen and (max-width: 991px) {
    /* -- Universal Setting
    --------------------------------------------------*/
    body {
        font-size: 15px;
    }
    /* -- Header | Nav
    --------------------------------------------------*/
    #siteHeader .section-container,
    #siteHeader .section-container .section-main-content {
        width: 100%;
        padding: 0;
    }
    #pseudoHeader {
        height: 4em;
    }
    .site-nav {
        height: 4em;
        background: #f1f3ed;
    }
    .site-nav .brand {
        left: 1em;
        height: 2em;
    }
    .site-nav .nav-mobile {
        display: block;
    }
    .site-nav nav {
        width: 100%;
        height: 4em;
    }
    .site-nav nav ul.nav-list {
        display: none;
        position: relative;
        top: 100%;
        padding: 1em 0;
        text-align: left;
        background-color: #f1f3ed;
        box-shadow: 1px 1px 20px 0 #ebeae2, 1px 1px 3px 0 rgba(122, 122, 119, 0.23);
    }
    .site-nav nav ul.nav-list>li {
        float: none;
        width: 100%;
    }
    .site-nav nav ul.nav-list>li>a,
    .site-nav nav ul.nav-list>li>a:visited {
        padding: 0 1em;
    }
    .site-nav nav ul.nav-list>li.active ul.nav-dropdown {
        background-color: #ebeae2;
    }
    .site-nav nav ul.nav-list>li>a {
        line-height: 3em;
    }
    .site-nav nav ul.nav-list>li>a::after {
        display: none;
    }
    .site-nav nav ul.nav-list>li>a:hover~.nav-dropdown,
    .site-nav nav ul.nav-dropdown:hover {
        display: none;
    }
    .site-nav nav ul.nav-dropdown {
        position: relative;
        text-align: left;
    }
    .site-nav nav ul.nav-dropdown>li>a {
        padding: 0.5em 5em;
    }
    .site-nav .social-media-container {
        top: 0;
    }
    /* -- Section
    --------------------------------------------------*/
    .section-container {
        padding: 3.5em 0 4em 0;
    }
    .section-container.fixed-width {
        width: 100%;
    }
    .section-block {
        padding: 0 0 5em 0;
    }
    .section-container .section-main-content {
        padding-left: 1em;
        padding-right: 1em;
    }
    .section-container .section-main-content.tiny-padding {
        padding-left: 0;
        padding-right: 0;
    }
    /* -- Footer
    --------------------------------------------------*/
    #siteFooter .footer-top ul.contact-container {
        width: 100%;
    }
    #siteFooter .footer-top ul.contact-container>li {
        width: 50%;
        padding: 0 1em;
    }
    #siteFooter .footer-top ul.contact-container>li:not(:last-child) {
        margin-right: 0;
    }
    #siteFooter .footer-top ul.contact-container>li.with-v-line-left {
        padding-left: 1em;
        border-left: none;
    }
    #siteFooter .footer-top ul.contact-container>li>a {
        line-height: 2em;
    }
    #siteFooter .footer-top ul.contact-container>li>a img.icon {
        display: none;
    }
    #siteFooter .footer-bottom ul.copyright-container {
        display: block;
    }
    #siteFooter .footer-bottom ul.copyright-container>li:not(:last-child) {
        margin-right: 0;
        margin-bottom: 1em;
    }
    #siteFooter .footer-bottom ul.copyright-container>li {
        display: block;
        float: none;
    }
    /* -- Main Content
    --------------------------------------------------*/
    #siteContainer {
        padding: 0 30px;
    }
    #radicalKeyboardContainer .styled-keyboard-3 {
        padding-left: 6.5em;
        padding-right: 6.5em;
    }
    #keyboardRadical {
        width: -webkit-calc((3em + 4px) * 8 + 1em * (8 - 1) + 1.5em * 2);
        width: -moz-calc((3em + 4px) * 8 + 1em * (8 - 1) + 1.5em * 2);
        width: calc((3em + 4px) * 8 + 1em * (8 - 1) + 1.5em * 2);
        padding: 1.5em 1.5em 0;
    }
    #keyboardRadical .styled-keys-container .styled-key-1:nth-child(9n + 1) {
        margin-left: 1em;
        clear: none;
    }
    #keyboardRadical .styled-keys-container .styled-key-1:nth-child(8n + 1) {
        margin-left: 0;
        clear: both;
    }
    #sxDifference .flip-card {
        width: -webkit-calc((100% - 1em * 3) / 3);
        width: -moz-calc((100% - 1em * 3) / 3);
        width: calc((100% - 1em * 3) / 3);
    }
    #sxDifference .flip-card:not(:last-child) {
        margin-right: 0;
    }
    #sxDifference .flip-card {
        margin-left: 0.5em !important;
        margin-right: 0.5em !important;
    }
    #sxNews .card-container {
        width: 50%;
    }
    #sxSource .card {
        width: 50%;
    }
    #sxSource .card:nth-child(2n+1) {
        clear: both;
    }
    #sxResearch .card {
        width: 33.33%;
    }
    #sxHistory .card-container {
        width: 100%;
    }
    #sxHistory .styled-timeline-container {
        margin: 0 -30px;
        padding: 4em 4em 0;
    }
    #sxHistory .styled-timeline-container._fixed {
        margin: 0 auto;
    }
    #wordWriting {
        display: block;
        width: 100%;
    }
    #wordWriting .card {
        width: 14.28%;
    }
    #openKeyboard {
        display: none;
    }
    .tab-content {
        width: 100%;
    }
    .about-content,
    .disclaimer-content {
        width: auto;
        margin: 0 3.125%;
        padding: 40px 60px 60px 60px;
    }
    .about-content-p,
    .disclaimer-content-p {
        width: 100%;
    }
    .about-content.cooperation-content {
        width: auto;
    }
    .units .unit-logo {
        width: 45%;
        margin: 1em 2.5%;
    }
    /* resources */
    .resour-list {
        width: 100%;
    }
    /* audio */
    .theme p {
        min-height: 12em;
        padding: 0 2em;
    }
    /* -- Components
    --------------------------------------------------*/
    /* -- Pagination -- */
    #sitePagination.styled-pagination-1 .wrapper {
        width: -webkit-calc(8.5em * 3 + 10px * 2 + 8.5em * 2);
        width: -moz-calc(8.5em * 3 + 10px * 2 + 8.5em * 2);
        width: calc(8.5em * 3 + 10px * 2 + 8.5em * 2);
    }
    #sourcePagination.styled-pagination-1 .wrapper {
        width: -webkit-calc(8.5em * 4 + 10px * 3 + 2.5em * 2);
        width: -moz-calc(8.5em * 4 + 10px * 3 + 2.5em * 2);
        width: calc(8.5em * 4 + 10px * 3 + 2.5em * 2);
    }
    /* -- Styled Block -- */
    .styled-block-container {
        display: block;
    }
    .styled-block-1 .block-right {
        width: -webkit-calc(100% - 11em);
        width: -moz-calc(100% - 11em);
        width: calc(100% - 11em);
    }
    .styled-block-2 {
        display: inline-block;
        vertical-align: bottom;
    }
    .styled-block-2.no-block-left .block-right {
        float: none;
    }
    .styled-block-2.no-block-left .block-right .content-wrapper {
        float: none;
        width: 100%;
        margin: 0 auto;
    }
    .styled-block-2.no-block-left .block-right .content-wrapper~.content-wrapper {
        margin: 2em auto 0;
    }
    .styled-block-2.no-block-left .block-right .content-wrapper .img-wrapper {
        display: inline-block;
        float: none;
        margin: 0 0.5em 1em;
        vertical-align: bottom;
    }
    .styled-block-3 .block-left .block-btn {
        margin-left: 2.5em;
    }
    .styled-block-3 .block-left .block-btn.auto-width {
        width: 8em;
        min-width: auto;
        margin: 0 auto;
    }
    .styled-block-3 .block-right {
        width: -webkit-calc(100% - 10.75em);
        width: -moz-calc(100% - 10.75em);
        width: calc(100% - 10.75em);
    }
    .styled-block-3.no-block-left .block-right {
        width: 100%;
    }
    /* -- Styled Heading -- */
    .styled-heading-1 {
        margin-bottom: 1.5em;
    }
    /* -- Styled Timeline -- */
    .styled-timeline-1 {
        padding: 0;
    }
    .styled-timeline-1 .line {
        display: none;
    }
    .styled-timeline-1 .dots-group {
        margin: 0 auto;
    }
    .styled-timeline-1 .dots-group .wrapper {
        display: block;
        overflow: hidden;
    }
    .styled-timeline-1 .dots-group .dot {
        width: 14.28%;
        margin: 0 auto 2.5em;
    }
    .styled-timeline-1 .dots-group .dot .dot-wording {
        left: 0;
        right: 0;
    }
    /* -- Styled Card -- */
    .styled-card-6 .main-img-wrapper .play-btn>img,
    .styled-card-9 .main-img-wrapper .download-btn>img,
    .styled-card-10 .main-img-wrapper .download-btn>img {
        opacity: 1;
    }
    .styled-card-2 .main-img-wrapper {
        display: block;
        float: none;
        width: 100%;
        padding-top: initial;
    }
    .styled-card-2 .main-img-wrapper .main-img {
        position: relative;
        width: 100%;
        height: auto;
        min-width: initial;
        min-height: initial;
    }
    .styled-card-2 .main-content {
        display: block;
        float: none;
        width: 100%;
        padding: 1em;
    }
    .styled-card-2 .main-content .title {
        height: auto;
        margin: 0 auto 1em;
    }
    .styled-card-2 .main-content .date {
        height: auto;
    }
    .styled-card-2 .main-content .description {
        height: auto;
    }
    .styled-card-10 {
        width: 47.5%;
        margin: 0 auto 1.5em;
    }
    .styled-card-10:nth-child(3n) {
        margin-left: auto;
        margin-right: auto;
    }
    .styled-card-10:nth-child(3n+1) {
        clear: none;
    }
    .styled-card-10:nth-child(2n) {
        margin-left: 2.5%;
    }
    .styled-card-10:nth-child(2n+1) {
        margin-right: 2.5%;
        clear: both;
    }
    
    @media only screen and (orientation: portrait) {
        /* -- Main Content
        --------------------------------------------------*/
        /* audio */
        .audio-frame .video-div {
            width: 90vw;
            max-width: auto;
            height: 50.625vw;
            max-height: auto;
        }
        .audio-frame .circle-btn {
            top: -6em;
            right: 0;
            bottom: auto;
        }
    }
    @media only screen and (orientation: landscape) {}
}

@media only screen and (max-width: 767px) {
    /* -- Bootstrap
    --------------------------------------------------*/
    .text-left,
    .text-right {
        text-align: center;
    }
    
    /* -- Universal Setting
    --------------------------------------------------*/
    body {
        font-size: 14px;
    }
    
    /* -- Main Banner
    --------------------------------------------------*/
    .main-banner-container {
        height: -webkit-calc(100vh - 12em);
        height: -moz-calc(100vh - 12em);
        height: calc(100vh - 12em);
    }
    
    /* -- Section
    --------------------------------------------------*/
    .section-block {
        padding: 0 0 3em 0;
    }
    .toggle-more-hidden-content {
        display: none;
    }
    .toggle-more {
        display: block;
    }
    
    /* -- Main Content
    --------------------------------------------------*/
    #siteContainer {
        padding: 0 15px;
    }
    #radicalKeyboardContainer .styled-keyboard-3 {
        width: 100%;
        padding-left: 1.25em;
        padding-right: 1.25em;
    }
    #radicalKeyboardContainer .styled-keyboard-3 .circle-btn {
        display: none;
        position: fixed;
        top: auto;
        right: 1em;
        bottom: 1em;
        left: auto;
        z-index: 99999;
    }
    #keyboardRadical {
        width: 100%;
        padding: 1.5em 1.25em;
    }
    #keyboardRadical .styled-keys-container .styled-key-1:nth-child(8n + 1) {
        margin-left: 1em;
        clear: none;
    }
    #keyboardRadical .styled-keys-container .styled-key-1:nth-child(4n + 1) {
        margin-left: 0;
        clear: both;
    }
    #keyboardRadical .radicals-container,
    #radicalsContainer .radicals-container,
    #radicalsContainer .words-container,
    #literacyStrokeList .radicals-container {
        max-height: 9em;
        padding-right: 2em;
    }
    #keyboardRadical .radicals-container.open,
    #radicalsContainer .radicals-container.open,
    #radicalsContainer .words-container.open,
    #literacyStrokeList .radicals-container.open {
        max-height: initial;
    }
    #keyboardRadical .strokes-number,
    #radicalsContainer .strokes-number,
    #literacyStrokeList .strokes-number {
        margin-top: 0;
        margin-bottom: 1em;
    }
    #keyboardRadical .toggle-btn-wrapper,
    #radicalsContainer .toggle-btn-wrapper,
    #literacyStrokeList .toggle-btn-wrapper {
        display: inline-block;
        position: absolute;
        top: 3.75em;
        right: 0;
        width: 2em;
        height: 2em;
        margin: auto;
    }
    #keyboardRadical .toggle-btn-wrapper .toggle-btn,
    #radicalsContainer .toggle-btn-wrapper .toggle-btn,
    #literacyStrokeList .toggle-btn-wrapper .toggle-btn {
        display: inline-block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 1em;
        height: 1em;
        margin: auto;
        vertical-align: bottom;
        border-right: 2px solid #d25f32;
        border-top: 2px solid #d25f32;
        cursor: pointer;
        -webkit-transform: rotateZ(45deg);
        -moz-transform: rotateZ(45deg);
        -ms-transform: rotateZ(45deg);
        -o-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
        -webkit-transition: transform 0.3s ease-in-out;
        -moz-transition: transform 0.3s ease-in-out;
        -ms-transition: transform 0.3s ease-in-out;
        -o-transition: transform 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out;
    }
    #keyboardRadical .radicals-container.open .toggle-btn-wrapper .toggle-btn,
    #radicalsContainer .radicals-container.open .toggle-btn-wrapper .toggle-btn,
    #radicalsContainer .words-container.open .toggle-btn-wrapper .toggle-btn,
    #literacyStrokeList .radicals-container.open .toggle-btn-wrapper .toggle-btn {
        -webkit-transform: rotateZ(135deg);
        -moz-transform: rotateZ(135deg);
        -ms-transform: rotateZ(135deg);
        -o-transform: rotateZ(135deg);
        transform: rotateZ(135deg);
    }
    #sxDifference .flip-card {
        width: -webkit-calc((100% - 0.25em * 2) / 2);
        width: -moz-calc((100% - 0.25em * 2) / 2);
        width: calc((100% - 0.25em * 2) / 2);
    }
    #sxDifference .flip-card:nth-child(odd) {
        margin-left: 0 !important;
        margin-right: 0.25em !important;
    }
    #sxDifference .flip-card:nth-child(even) {
        margin-left: 0.25em !important;
        margin-right: 0 !important;
    }
    #sxNews .card-container {
        width: 100%;
    }
    #sxSource .card {
        width: 100%;
    }
    #sxSource .card ~ .card {
        margin-top: 2em;
    }
    #sxSource .card:nth-child(2n+1) {
        clear: none;
    }
    #sxResearch .card {
        width: 100%;
    }
    #sxHistory .card {
        margin-bottom: 2em;
    }
    #sxHistory .styled-timeline-container {
        margin: 0 -15px;
        padding: 2em 2em 0;
    }
    #radicalIndex,
    #literacyStrokeList {
        margin: 1.5em auto;
        padding: 1.5em 1.25em;
    }
    #literacyImgList {
        margin: 1.5em auto 0;
    }
    #wordWriting .card {
        width: 50%;
        margin: 0.5em auto;
    }
    #wordWriting .card:nth-child(2n+1) {
        clear: both;
    }
    #wordSource {
        width: 100%;
        max-width: 35em;
        padding-bottom: 3em;
        overflow: hidden;
    }
    #explanationCategories .card-container,
    #differenceCategories .card-container,
    #academyCategories .card-container {
        display: block;
        width: 100vw;
        max-width: 100%;
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
        -moz-column-gap: 20px;
        -webkit-column-gap: 20px;
        column-gap: 20px;
    }
    #explanationCategories .card,
    #differenceCategories .card,
    #academyCategories .card {
        display: inline-block;
        float: none;
        width: 50vw;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        vertical-align: top;
        /* width: 45%;
        margin-left: 2.5%;
        margin-right: 2.5%; */
    }
    #differenceCategories .card~.card {
        width: 50vw;
        max-width: 100%;
        /* width: 45%;
        margin-left: 2.5%;
        margin-right: 2.5%; */
    }
    #explanationCategories .card {
        height: auto;
    }
    .search-wrapper {
        top: -3.25em;
        width: auto;
        margin: 0 10px;
    }
    .search-wrapper>.inner {
        overflow: initial;
    }
    .search-wrapper .input-title {
        position: absolute;
        left: 0.625em;
        width: 6em;
        margin: auto;
    }
    .search-wrapper .input-title ~ input {
        width: -webkit-calc(100% - 6.5em) !important;
        width: -moz-calc(100% - 6.5em) !important;
        width: calc(100% - 6.5em) !important;
        margin-right: 0;
        text-align: left;
    }
    .search-wrapper input {
        display: block;
        float: none;
        width: 100% !important;
        margin: 0 auto;
        text-align: center;
    }
    .search-wrapper .icon-btn {
        float: none;
    }
    .search-wrapper .btn-container {
        float: none;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -4em;
        margin: auto;
    }
    .search-wrapper.with-search-method-switch .btn-container {
        bottom: -5.5em;
    }
    .search-wrapper .btn-container > .wrapper {
        display: inline-block;
        vertical-align: bottom;
    }
    .search-wrapper button {
        width: 125px;
        max-width: 100%;
        margin: auto;
        background-color: transparent;
    }
    .search-wrapper .text-btn {
        margin-top: 1em;
    }
    .search-wrapper .noresults {
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 0;
    }
    .about-content,
    .disclaimer-content {
        width: 100%;
        margin: 0 auto;
        padding: 30px;
    }
    .units .unit-logo {
        float: none;
        width: 80%;
        max-width: 250px;
        margin: 1em auto;
    }
    .banner-tabs {
        margin-bottom: 0;
        padding-bottom: 2em;
    }

    .banner-tabs > .wrapper {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
    }
    
    /* resources */
    .resour-list {
        width: 100%;
    }
    .resour-div {
        width: 100%;
        min-height: auto;
        text-align: center;
    }
    .resour-div .resour-img {
        width: 100px;
        float: none;
        margin: 0 auto;
    }
    .resour-div .resour-content {
        margin: 0 auto;
    }
    .resour-div .resour-title-wrapper .resour-title {
        text-align: left;
    }
    
    /* audio */
    .audio-content {
        width: 100%;
    }

    .audio-content .audio-content-top {
        width: 100%;
        max-width: 360px;
    }
    .theme {
        float: none;
        width: 100%;
        max-width: 360px;
        margin: 0 auto 2em;
        padding: 2em 0;
    }
    .theme p {
        min-height: auto;
        padding: 0 1em;
    }
    
    /* -- Components
    --------------------------------------------------*/
    /* -- Pagination -- */
    .fixed-bottom-pagination {
        font-size: 13px;
    }
    .fixed-bottom-pagination .pagination>li:not(.active) {
        display: none;
    }
    .fixed-bottom-pagination .pagination>li.prev,
    .fixed-bottom-pagination .pagination>li.next {
        display: inline-block;
    }
    .fixed-bottom-pagination .pagination>li.prev.hidden,
    .fixed-bottom-pagination .pagination>li.next.hidden {
        visibility: hidden;
    }
    .fixed-bottom-pagination .pagination>li~li {
        margin-left: 1em;
    }
    .styled-pagination-1 {
        font-size: 12px;
    }
    .styled-pagination-1 .wrapper {
        padding: 0 3em;
    }
    .styled-pagination-1 a.pagination-item-prev {
        left: 0;
    }
    .styled-pagination-1 a.pagination-item-next {
        right: 0;
    }
    #sitePagination.styled-pagination-1 .wrapper {
        width: -webkit-calc(8.5em * 1 + 10px * 0 + 8em * 2);
        width: -moz-calc(8.5em * 1 + 10px * 0 + 8em * 2);
        width: calc(8.5em * 1 + 10px * 0 + 8em * 2);
        height: 6em;
        padding: 0 8em;
    }
    #sourcePagination {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
    #sourcePagination.styled-pagination-1 .wrapper {
        width: -webkit-calc(6.5em * 3 + 5px * 2 + 2.5em * 2);
        width: -moz-calc(6.5em * 3 + 5px * 2 + 2.5em * 2);
        width: calc(6.5em * 3 + 5px * 2 + 2.5em * 2);
        padding: 0 2.5em;
    }
    #sourcePagination.styled-pagination-1 .pagination-item > a {
        width: 6.5em;
        padding-left: 0.25em;
        padding-right: 0.25em;
    }
        
    /* -- Styled Block -- */
    .styled-block-1 .block-left {
        width: 7em;
        padding: 0.75em 1em;
        font-size: 1em;
        /* line-height: 1em; */
    }
    .styled-block-1 .block-right {
        width: -webkit-calc(100% - 7.5em);
        width: -moz-calc(100% - 7.5em);
        width: calc(100% - 7.5em);
        height: 3em;
        min-height: 3em;
        margin-left: 0.5em;
        padding: 0.875em 4em 0.875em 1em
    }
    .styled-block-1 .block-right .toggle-btn {
        right: 1em;
        top: 0.875em;
    }
    .styled-block-2 {
        display: block;
    }
    .styled-block-2 .block-left,
    .styled-block-2 .block-right {
        float: none;
    }
    .styled-block-2 .block-left {
        margin-bottom: 2em;
    }
    .styled-block-2 .block-left .top {
        height: 0;
    }
    .styled-block-2 .block-left .content-wrapper {
        float: left;
        width: 47.5%;
        min-width: auto;
        margin: 0 auto;
    }
    .styled-block-2 .block-left .content-wrapper~.content-wrapper {
        margin-left: 5%;
    }
    .styled-block-2 .block-left .content-wrapper.auto-width {
        float: left;
        width: 47.5%;
        min-width: auto;
        min-height: 8em;
        margin: 0 auto;
    }
    .styled-block-2 .block-left .content-wrapper.auto-width~.content-wrapper.auto-width {
        margin-left: 5%;
    }
    .styled-block-2 .block-right .content-wrapper {
        float: left;
        width: 47.5%;
        margin: 0 auto;
    }
    .styled-block-2 .block-right .content-wrapper~.content-wrapper {
        margin-left: 5%;
    }
    .styled-block-2 .block-right .content-wrapper .img-wrapper {
        float: none;
    }
    .styled-block-2 .block-right .content-wrapper .img-wrapper img {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .styled-block-2 .block-right .content-wrapper.auto-width {
        float: none;
        width: 100%;
        /* float: left;
        width: 47.5%; */
        margin: 0 auto;
    }
    .styled-block-2 .block-right .content-wrapper.auto-width~.content-wrapper.auto-width {
        margin-top: 1.5em;
        margin-left: auto;
    }
    .styled-block-2 .block-right .content-wrapper.auto-width .wording-container {
        min-width: auto;
        padding: 2em 1em;
    }
    .styled-block-2 .block-right .content-wrapper.auto-width .wording-container .wording {
        line-height: 1.5em;
    }
    .styled-block-2 .block-right .content-wrapper.auto-width .img-wrapper {
        float: none;
    }
    .styled-block-2 .block-right .content-wrapper.auto-width .img-wrapper img {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .styled-block-2.no-block-left .block-right .content-wrapper~.content-wrapper {
        margin: 2em auto 0;
    }
    .styled-block-2.no-block-left .block-right .content-wrapper .img-wrapper {
        margin: 0 0.25em 0.5em;
    }
    .styled-block-2.no-block-left .block-right .content-wrapper .img-wrapper img {
        width: auto;
        height: 4.21875em;
    }
    .styled-block-2.no-block-left .block-right .content-wrapper .img-wrapper .wording {
        font-size: 3em;
    }
    .styled-block-2.no-block-left.block-sm .block-right .content-wrapper .img-wrapper img {
        height: 5.625em;
    }
    .styled-block-2.no-block-left.block-sm .block-right .content-wrapper .img-wrapper .wording {
        font-size: 4em;
    }
    .styled-block-3 .block-left,
    .styled-block-3 .block-right {
        float: none;
    }
    .styled-block-3 .block-left {
        margin-bottom: 0.25em;
    }
    .styled-block-3 .block-right {
        width: 100%;
        min-width: auto;
        min-height: auto;
        margin: 0 auto;
    }
    .styled-block-3 .block-left .block-btn,
    .styled-block-3 .block-left .block-btn.auto-width {
        width: 100%;
        min-width: auto;
        min-height: auto;
        margin: 0 auto;
        text-align: center;
    }
    .styled-block-3 .block-right .block-header {
        padding-right: 3.75em;
    }
    .styled-block-3 .block-right .wording-wrapper {
        width: auto;
        max-width: 100%;
        margin: 0 auto;
    }
    .styled-block-3 .block-right .toggle-btn-wrapper {
        position: absolute;
        top: 0;
        right: 0;
    }
    .styled-block-3 .block-right .btn-container {
        display: inline-block;
        margin-right: -3.75em;
        padding-top: 0.5em;
        clear: both;
    }
    
    .styled-block-3 .block-right .btn-container .icon-btn {
        margin-left: 0.25em;
    }
    
    /* -- Styled Nav -- */
    .styled-nav-container {
        padding-bottom: 1.5em;
        overflow: hidden;
    }
    .styled-nav-container .styled-nav-container {
        padding-bottom: 0;
    }
    ul.styled-nav-1 {
        padding: 0;
    }
    ul.styled-nav-1>li {
        width: -webkit-calc((100% - 1em * 3) / 3);
        width: -moz-calc((100% - 1em * 3) / 3);
        width: calc((100% - 1em * 3) / 3);
        margin-left: auto;
        margin-right: 1em;
    }
    ul.styled-nav-1>li ._underline {
        top: 2.5em;
    }
    ul.styled-nav-1>li>a {
        font-size: 1.5em;
    }
    ul.styled-nav-1>li>ul>li>a::after,
    ul.styled-nav-1>li>ul>li>ul>li>a::after {
        display: none;
    }
    ul.styled-nav-2 li {
        margin-left: auto;
        margin-right: 10px;
        padding: 10px 0;
    }
    ul.styled-nav-2 ul {
        padding-left: 1em;
        padding-right: 1em;
    }
    
    /* -- Styled Tab -- */
    .styled-tab-container {
        padding-bottom: 1.5em;
        overflow: hidden;
    }
    .styled-tab-container .styled-tab-container {
        padding-bottom: 0;
    }
    ul.styled-tab-1 li {
        margin-right: 10px;
        margin-bottom: 10px;
    }
    ul.styled-tab-1 li.active {
        border-color: #d25f32;
    }
    ul.styled-tab-1 a>li.active>div {
        color: #d25f32;
    }
    ul.styled-tab-1 a>li>div::before,
    ul.styled-tab-1 a>li>div::after,
    ul.styled-tab-1 a>li.active>div::after {
        display: none;
    }
    ul.styled-tab-1 a>li>div>span {
        margin-left: 0;
    }
    ul.styled-tab-2 {
        display: block;
        font-size: 13px;
        padding: 1em 1.5em;
    }
    ul.styled-tab-2 > li,
    ul.styled-tab-2 > li ~ li {
        min-width: auto;
        margin: 0 auto;
        padding-top: 0.5em;
    }
    ul.styled-tab-2 > li > a {
        display: inline-block;
        padding-left: 0.25em;
        padding-right: 0.25em;
        font-size: 1em;
        line-height: 2em;
        vertical-align: bottom;
    }

    /* -- Styled Card -- */
    .styled-card-6 .main-img-wrapper .play-btn>img,
    .styled-card-9 .main-img-wrapper .download-btn>img,
    .styled-card-10 .main-img-wrapper .download-btn>img {
        opacity: 1;
    }
    .styled-card-0>.inner {
        padding: 0.375em 0.25em 1.5em;
    }
    .styled-card-1>.inner {
        padding: 1em;
    }
    .styled-card-1 .title {
        margin: 0.5em auto;
    }
    .styled-card-4 .half-block {
        width: -webkit-calc((100% - 12px * 2.5) * 1);
        width: -moz-calc((100% - 12px * 2.5) * 1);
        width: calc((100% - 12px * 2.5) * 1);
    }
    .styled-card-7 {
        display: block;
        margin-bottom: 1.5em;
    }
    .styled-card-7 .content.column-2 {
        -moz-column-count: auto;
        -webkit-column-count: auto;
        column-count: auto;
    }
    .styled-card-7 .item-child-container {
        height: 0;
    }
    .styled-card-7 .item-parent.with-child>span::after {
        display: inline-block;
    }
    .styled-card-7 .item-parent.with-child.open {
        color: #d25f32;
        background-color: #ebeae2;
    }
    .styled-card-8>.inner {
        padding: 2em 1.5em;
    }
    .styled-card-8 .card-heading {
        margin: 0 auto 0.5em;
        font-size: 1.75em;
    }
    .styled-card-8 .content .full-block .info-container {
        float: none;
        max-width: none;
        margin: 0 auto;
    }
    .styled-card-8 .content .full-block p.block-description {
        padding: 1em 0;
    }
    .styled-card-8 .content .left-side {
        float: none;
        width: 100%;
    }
    .styled-card-8 .content .right-side {
        float: none;
        width: 100%;
        padding: 1em 0 0;
    }
    .styled-card-10 .card-text {
        font-size: 1em;
    }
    
    /* -- Table -- */
    .table-rwd {
        min-width: 100%;
    }
    tr.tr-only-hide {
        display: none !important;
    }
    .table-rwd tr {
        display: block;
    }
    .table-rwd.with-stripes tr:nth-of-type(2n) {
        color: #fff;
        background: #4a5565;
    }
    .table-rwd td {
        display: block;
        width: 100%;
        text-align: left;
        overflow: hidden;
    }
    .table-rwd td::before {
        content: attr(data-th);
        display: inline-block;
        min-width: 5em;
        padding-right: 1em;
        font-weight: bold;
    }
    .table-rwd.with-stripes tr:nth-of-type(2n) {
        color: #fff;
        background: #4a5565;
    }
    .styled-table-1 {
        table-layout: fixed;
    }
    .styled-table-1 tbody>tr {
        display: table-row;
    }
    .styled-table-1 tbody>tr>td {
        display: table-cell;
        padding: 30px 10px 10px;
        font-size: 14px;
        line-height: 1.71em;
        letter-spacing: 1.1px;
    }
    .styled-table-1 tbody>tr>td>img.wording-img {
        width: auto;
        height: 1em;
        margin-top: 0.355em;
        margin-bottom: 0.355em;
    }
    .styled-table-1 tbody>tr>td:nth-child(1) {
        width: 2.5em;
        padding: 0;
    }
    .styled-table-1 tbody>tr>td:nth-child(2) {
        width: 30%;
    }
    .styled-table-1 tbody>tr>td:nth-child(3) {
        width: 30%;
    }
    .styled-table-1 tbody>tr>td:not(:first-child)::before {
        content: attr(data-th);
        position: absolute;
        left: 0;
        top: 8px;
        width: 8em;
        max-width: 100%;
        margin: auto;
        padding: 0 10px;
        font-size: 12px;
        color: #bebfbb;
    }
    .styled-table-1 tbody>tr>td:not(:first-child)::after {
        content: '';
        width: 1px;
        margin: 10px auto;
    }
    .styled-table-1 tbody>tr>td:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .styled-table-1 tbody>tr>td:last-child {
        font-size: 12px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .styled-table-4 .each-row.row-header {
        display: none;
    }
    .styled-table-4 .each-row/* ,
    .styled-table-4 .content-page:nth-child(2) .each-row:nth-child(1) */ {
        margin-top: 0;
    }
    .styled-table-4 .each-row~.each-row {
        margin-top: 1em;
    }
    .styled-table-4 .each-row .row-item-container {
        display: block;
        overflow: hidden;
    }
    .styled-table-4 .each-row:not(.row-header) .row-item-container .row-item {
        float: left;
        min-height: auto;
        overflow: hidden;
    }
    .styled-table-4 .each-row:not(.row-header) .row-item-container .row-item ~ .row-item {
        margin-left: 5px;
    }
    .styled-table-4.row-style-1 .each-row .row-item-container .row-item:nth-child(1) {
        width: 2em;
    }

    .styled-table-4.row-style-1 .each-row .row-item-container .row-item:nth-child(2) {
        width: -webkit-calc(100% - 2em - 3.5em - 5px * 2);
        width: -moz-calc(100% - 2em - 3.5em - 5px * 2);
        width: calc(100% - 2em - 3.5em - 5px * 2);
    }

    .styled-table-4.row-style-1 .each-row .row-item-container .row-item:nth-child(3) {
        width: 100%;
        height: auto;
        margin: 5px auto 0;
        clear: both;
    }

    .styled-table-4.row-style-1 .each-row .row-item-container .row-item:nth-child(4) {
        position: absolute;
        top: 0;
        right: 0;
        width: 3.5em;
    }
    .styled-table-4.row-style-2 .each-row .row-item-container .row-item:nth-child(1) {
        width: 2em;
    }
    .styled-table-4.row-style-2 .each-row .row-item-container .row-item:nth-child(2) {
        width: -webkit-calc(100% - 2em - 8em - 3.5em - 5px * 3);
        width: -moz-calc(100% - 2em - 8em - 3.5em - 5px * 3);
        width: calc(100% - 2em - 8em - 3.5em - 5px * 3);
    }
    .styled-table-4.row-style-2 .each-row .row-item-container .row-item:nth-child(3) {
        width: 100%;
        height: auto;
        margin: 5px auto 0;
        clear: both;
    }
    .styled-table-4.row-style-2 .each-row .row-item-container .row-item:nth-child(4) {
        position: absolute;
        top: 0;
        right: -webkit-calc(3.5em + 5px);
        right: -moz-calc(3.5em + 5px);
        right: calc(3.5em + 5px);
        width: 8em;
    }
    .styled-table-4.row-style-2 .each-row .row-item-container .row-item:nth-child(5) {
        position: absolute;
        top: 0;
        right: 0;
        width: 3.5em;
    }
    .styled-table-4.row-style-3 .each-row .row-item-container .row-item:nth-child(1) {
        width: 2em;
    }

    .styled-table-4.row-style-3 .each-row .row-item-container .row-item:nth-child(2) {
        width: 8em;
    }
    .styled-table-4.row-style-3 .each-row .row-item-container .row-item:nth-child(3) {
        width: -webkit-calc(100% - 2em - 8em - 5px * 2);
        width: -moz-calc(100% - 2em - 8em - 5px * 2);
        width: calc(100% - 2em - 8em - 5px * 2);
    }
    .styled-table-4.row-style-3 .each-row .row-item-container .row-item:nth-child(4) {
        width: 100%;
        height: auto;
        margin: 5px auto 0;
        clear: both;
    }
    .styled-table-4.row-style-1 .each-row .row-item-container .row-item:nth-child(1) .item-content {
        padding: 0;
        line-height: 50px;
    }
    .styled-table-4.row-style-2 .each-row .row-item-container .row-item:nth-child(1) .item-content {
        padding: 0;
        line-height: 50px;
    }
    .styled-table-4.row-style-2 .each-row .row-item-container .row-item:nth-child(3) .item-content {
        padding: 0;
        height: auto;
    }
    .styled-table-4.row-style-2 .each-row .row-item-container .row-item:nth-child(5) .item-content {
        padding: 0;
        line-height: 50px;
    }
    .styled-table-4.row-style-3 .each-row .row-item-container .row-item:nth-child(1) .item-content {
        padding: 0;
        line-height: 50px;
    }
    .styled-table-4.row-style-3 .each-row .row-item-container .row-item:nth-child(4) .item-content {
        padding: 0;
        height: auto;
    }
    .styled-table-4.row-style-1 .each-row:not(.row-header) .row-item-container .row-item:nth-child(2) .item-content::before {
        display: block;
    }
    .styled-table-4.row-style-2 .each-row:not(.row-header) .row-item-container .row-item:nth-child(2) .item-content::before {
        display: block;
    }
    .styled-table-4.row-style-2 .each-row:not(.row-header) .row-item-container .row-item:nth-child(4) .item-content::before {
        display: block;
    }
    .styled-table-4.row-style-3 .each-row:not(.row-header) .row-item-container .row-item:nth-child(2) .item-content::before {
        display: block;
    }
    .styled-table-4.row-style-3 .each-row:not(.row-header) .row-item-container .row-item:nth-child(3) .item-content::before {
        display: block;
    }
    .styled-table-4 .each-row:not(.row-header) .row-item-container .row-item .item-content {
        display: block;
        min-height: 50px;
        padding: 25px 10px 8px;
        line-height: 1.25em;
        border-radius: 4px;
        overflow: hidden;
    }
    .styled-table-4 .each-row:not(.row-header) .row-item-container .row-item .item-content img.wording-img {
        width: auto;
        height: 1em;
        margin-top: 0.125em;
        margin-bottom: 0.125em;
    }
    .styled-table-4 .each-row .row-item-container .row-item .item-content .circle-link {
        width: 1.75em;
        height: 1.75em;
        vertical-align: middle;
    }
    .styled-table-4 .each-row .row-item-container .row-item .item-content .circle-link>span {
        width: 1.75em;
        height: 1.75em;
        line-height: 1.75em;
        letter-spacing: 0;
        color: #dedccc;
        border-color: #dedccc;
    }
    .styled-table-4 .each-row .row-item-container .row-item .item-content .circle-link>span::before {
        display: block;
    }
    .styled-table-4 .each-row .row-item-container .row-item .item-content .circle-link.active>span {
        color: #d25f32;
        border-color: #d25f32;
        background-color: transparent;
    }
    .styled-table-4 .each-row .row-item-container .row-item table,
    .styled-table-4 .each-row .row-item-container .row-item table tbody,
    .styled-table-4 .each-row .row-item-container .row-item table tr,
    .styled-table-4 .each-row .row-item-container .row-item table tr td {
        display: block;
        position: relative;
        width: 100%;
        height: auto;
    }
    .styled-table-4 .each-row .row-item-container .row-item table tr td,
    .styled-table-4 .each-row .row-item-container .row-item table td:not(:first-child) {
        padding: 0;
    }
    .styled-table-4 .each-row:not(.row-header) .row-item-container .row-item table td:not(:first-child)::after {
        content: '';
        position: absolute;
        left: 10px;
        right: 10px;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
        margin: auto;
        background-color: #dedccc;
    }
    .styled-table-4 .each-row:not(.row-header) .row-item-container .row-item table td {
        min-height: 50px;
        padding: 25px 10px 8px;
    }
    .styled-table-4 .each-row:not(.row-header) .row-item-container .row-item table td::before {
        display: block;
    }
    
    @media only screen and (orientation: portrait) {
        /* -- Main Content
        --------------------------------------------------*/
        /* audio */
        .audio-frame .circle-btn {
            top: -4.5em;
            width: 3em;
            height: 3em;
            border-radius: 1.5em;
        }
        #literacyImgList .card {
            width: 41%;
            margin: 0.75em auto;
        }
        #literacyImgList .card ~ .card {
            margin: 0.75em auto;
        }
        #literacyImgList .card:nth-child(6n+1) {
            margin: 0.75em auto;
            clear: none;
        }
        #literacyImgList .card:nth-child(2n) {
            margin-left: 3%;
            margin-right: 6%;
        }
        #literacyImgList .card:nth-child(2n+1) {
            margin-left: 6%;
            margin-right: 3%;
            clear: both;
        }
        
        /* -- Components
        --------------------------------------------------*/
        /* -- Styled Tab -- */
        ul.styled-tab-2.tabs-group-3 > li,
        ul.styled-tab-2.tabs-group-3 > li ~ li {
            width: 33.33%;
        }
        ul.styled-tab-2.tabs-group-4 > li,
        ul.styled-tab-2.tabs-group-4 > li ~ li {
            width: 33.33%;
            text-align: left;
        }
    }
    @media only screen and (orientation: landscape) {
        /* -- Components
        --------------------------------------------------*/
        /* -- Styled Tab -- */
        ul.styled-tab-2.tabs-group-3 {
            max-width: 60%;
        }
        ul.styled-tab-2.tabs-group-3 > li,
        ul.styled-tab-2.tabs-group-3 > li ~ li {
            width: 33.33%;
        }
        ul.styled-tab-2.tabs-group-4 > li,
        ul.styled-tab-2.tabs-group-4 > li ~ li {
            width: 25%;
        }
    }
}