/* -- 外部字型
--------------------------------------------------*/


/* @font-face {
    font-family: 文鼎黑體;
    src: url(../font/arheib5_lt.ttf) format('opentype');
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: 文鼎黑體;
    src: url(../font/arheib5_md.ttf) format('opentype');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 文鼎黑體;
    src: url(../font/arheib5_bd.ttf) format('opentype');
    font-style: normal;
    font-weight: 700;
}*/

@font-face {
    font-family: 思源宋體;
    src: url(../font/NotoSerifCJKtc-Regular.otf) format('opentype');
    font-style: normal;
    /*font-weight: 900;*/
}


/* -- Universal Setting
--------------------------------------------------*/

html {
    display: block;
    position: relative;
    width: 100%;
}

body {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    font-family: "Roboto", "Noto Sans", "PingFang TC", "微軟雅黑體", "Microsoft YaHei", "微軟正黑體", "Microsoft JhengHei", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    letter-spacing: 1.5px;
    word-wrap: break-word;
    color: #141414;
    background-color: #f1f3ed;
    overflow-x: hidden;
}

header,
section,
footer {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

pre {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    border: none;
    background: none;
    overflow: initial !important;
}

a,
a:focus,
a:visited,
a:hover,
a:active {
    outline: none;
    text-decoration: none;
    color: #d25f32;
}

a:hover {
    color: #aa4425;
}

img {
    width: 100%;
    height: auto;
}


/* -- Common Usage
--------------------------------------------------*/

.uppercase {
    text-transform: uppercase !important;
}

.lowercase {
    text-transform: lowercase !important;
}

.capitalize {
    text-transform: capitalize !important;
}

.hide {
    display: none !important;
}

.clear {
    clear: both !important;
}

.line-through {
    text-decoration: line-through !important;
}

div.no-content-div-15px {
    margin: 0 !important;
    padding-bottom: 15px !important;
}

div.no-content-div-30px {
    margin: 0 !important;
    padding-bottom: 30px !important;
}

div.no-content-div-45px {
    margin: 0 !important;
    padding-bottom: 45px !important;
}

div.no-content-div-60px {
    margin: 0 !important;
    padding-bottom: 60px !important;
}

div.no-content-div-90px {
    margin: 0 !important;
    padding-bottom: 90px !important;
}


/* -- Transitions
--------------------------------------------------*/

a,
a:hover {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

a.img-link>img {
    -webkit-transition: transform 0.5s ease-in-out;
    -moz-transition: transform 0.5s ease-in-out;
    -ms-transition: transform 0.5s ease-in-out;
    -o-transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}

a.img-link:hover>img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}


/* -- Color & Font
--------------------------------------------------*/

.primary-font-color {
    color: #4a5565;
}

.primary-bg-color {
    background-color: #f1f3ed;
}

.light-bg-color {
    background-color: #fafafa;
}

.dark-bg-color {
    background-color: #ebeae2;
}


/* -- Header | Nav
--------------------------------------------------*/

#siteHeader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #f1f3ed;
    z-index: 88888;
}

#pseudoHeader {
    position: relative;
    width: 100%;
    height: 5em;
}

#siteHeader .window-overlay {
    display: none;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #f1f3ed;
    opacity: 0.58;
}

#siteHeader .window-overlay._open {
    display: block;
}

.site-nav {
    height: 5em;
    text-align: right;
}

.site-nav .brand {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: 2.5em;
    margin: auto;
    z-index: 1;
}

.site-nav .brand img {
    width: auto;
    height: 100%;
}

.site-nav .nav-container {
    margin: 0 auto;
}

.site-nav nav {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
}

.site-nav nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav nav ul li {
    position: relative;
}

.site-nav nav ul li>a,
.site-nav nav ul li>a:visited {
    display: block;
    position: relative;
    color: initial;
}

.site-nav nav ul.nav-list>li {
    float: left;
}

.site-nav nav ul.nav-list>li>a,
.site-nav nav ul.nav-list>li>a:visited {
    padding: 0 1.5em;
    line-height: 5em;
    letter-spacing: 2px;
    text-indent: 2px;
}

.site-nav nav ul.nav-list>li.active>a,
body.hasHover .site-nav nav ul.nav-list>li>a:hover,
.site-nav nav ul.nav-list>li>a:active,
body.hasHover .site-nav nav ul.nav-list>li>a:visited:hover {
    color: #d25f32;
}

.site-nav nav ul.nav-list>li>a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1em;
    width: 0;
    height: 0.25em;
    margin: auto;
    background-color: #d25f32;
}

.site-nav nav ul.nav-list>li.active>a::after,
body.hasHover .site-nav nav ul.nav-list>li>a:hover::after,
.site-nav nav ul.nav-list>li>a:active::after {
    width: 75%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

body.hasHover .site-nav nav ul.nav-list>li>a:hover~.nav-dropdown,
.site-nav nav ul.nav-list>li>a:active~.nav-dropdown,
body.hasHover .site-nav nav ul.nav-dropdown:hover,
.site-nav nav ul.nav-dropdown:active {
    display: block;
}

.site-nav nav ul.nav-dropdown {
    display: none;
    position: absolute;
    z-index: 1000;
    left: 50%;
    right: auto;
    text-align: center;
    white-space: nowrap;
    padding: 0 0 0.5em;
    background-color: #f1f3ed;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    z-index: 1;
}

.site-nav nav ul.nav-dropdown>li>a,
.site-nav nav ul.nav-dropdown>li>a:visited {
    padding: 0.375em 2.5em;
    font-size: 0.875em;
    line-height: 1.75em;
    letter-spacing: 1.8px;
    text-indent: 1.8px;
}

body.hasHover .site-nav nav ul.nav-dropdown>li>a:visited:hover,
body.hasHover .site-nav nav ul.nav-dropdown>li>a:hover,
.site-nav nav ul.nav-dropdown>li>a:active {
    color: #d25f32;
    background-color: #ebeae2;
}

.site-nav .nav-mobile {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    height: 4em;
    width: 4em;
}

#navToggle {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1.25em;
    height: 1.4em;
    margin: auto;
    cursor: pointer;
}

#navToggle .bar {
    display: block;
    width: 100%;
    height: 0.2em;
    margin: 0.2em auto;
    background-color: #ff0000;
    border-radius: 33.33%;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#navToggle.active .bar.top {
    -webkit-transform: translateY(0.4em) rotateZ(45deg);
    -moz-transform: translateY(0.4em) rotateZ(45deg);
    -ms-transform: translateY(0.4em) rotateZ(45deg);
    -o-transform: translateY(0.4em) rotateZ(45deg);
    transform: translateY(0.4em) rotateZ(45deg);
}

#navToggle.active .bar.bottom {
    -webkit-transform: translateY(-0.4em) rotateZ(-45deg);
    -moz-transform: translateY(-0.4em) rotateZ(-45deg);
    -ms-transform: translateY(-0.4em) rotateZ(-45deg);
    -o-transform: translateY(-0.4em) rotateZ(-45deg);
    transform: translateY(-0.4em) rotateZ(-45deg);
}

#navToggle.active .bar.middle {
    width: 0;
}


/* -- Main Banner
--------------------------------------------------*/

.main-banner-container {
    position: relative;
    width: 100%;
    height: 565px;
    overflow: hidden;
}

.main-banner-container .main-banner {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    margin: auto;
}


/* -- Main Background Banner
--------------------------------------------------*/

.main-bg-banner {
    position: relative;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.main-bg-banner .banner-heading {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 18.75em;
    height: auto;
    margin: auto;
}

.main-bg-banner .banner-wording {
    position: absolute;
    left: 0;
    right: 0;
    top: 3em;
    height: 3em;
    margin: auto;
}

.main-bg-banner .banner-wording._cent {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}


/* -- Main Description
--------------------------------------------------*/

.main-description-container {
    position: relative;
    width: 35em;
    max-width: 100%;
    margin: 0 auto;
    padding: 1.5em 0;
    overflow: hidden;
}

.main-description-container p,
.main-description-container pre {
    font-family: '思源宋體';
    font-size: 0.875em;
}


/* -- Section
--------------------------------------------------*/

.section-container {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 7em 0 8em 0;
}

.section-container.no-padding {
    padding: 0;
}

.section-container.fixed-width {
    width: 1440px;
    max-width: 100%;
}

.section-container.fixed-width-two-third {
    width: 66.67%;
}

.section-container.fixed-width-60em {
    width: 60em;
    max-width: 100%;
}

.section-block {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0 8em 0;
}

.section-container .section-main-content {
    position: relative;
    width: 100%;
    padding-left: 5em;
    padding-right: 5em;
}

.section-container .section-main-content.no-padding {
    padding-left: 0;
    padding-right: 0;
}

.section-container .section-main-content.tiny-padding {
    padding-left: 1em;
    padding-right: 1em;
}

.section-read-more {
    display: inline-block;
    position: relative;
    margin: 0 1.25em;
    padding-right: 1.5em;
    font-size: 1em;
    line-height: 1.5em;
    vertical-align: bottom;
    -webkit-transition: initial;
    -moz-transition: initial;
    -ms-transition: initial;
    -o-transition: initial;
    transition: initial;
    overflow: hidden;
}

.section-read-more::before {
    content: '';
    position: absolute;
    left: -1.5em;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #d25f32;
}

.section-read-more::after {
    content: '';
    position: absolute;
    left: -1.5em;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: #aa4425;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

body.hasHover .section-read-more:hover::before,
.section-read-more:active::before {
    display: none;
}

body.hasHover .section-read-more:hover::after,
.section-read-more:active::after {
    width: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.section-read-more img {
    position: absolute;
    right: 0.25em;
    top: 0;
    bottom: 0;
    width: 1em;
    height: auto;
    margin: auto;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

body.hasHover .section-read-more:hover img,
.section-read-more:active img {
    right: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.toggle-more-hidden-content {
    display: block;
}

.toggle-more {
    display: none;
    font-size: 1em;
    line-height: 1.5em;
    text-indent: 1.7px;
    letter-spacing: 1.7px;
    text-align: center;
    color: #d25f32;
}

.toggle-more > .toggle-more-btn {
    display: inline-block;
    vertical-align: bottom;
    cursor: pointer;
}

.toggle-more .dots-container {
    position: relative;
    line-height: 4px;
    overflow: hidden;
}

.toggle-more .dots-container > .wrapper {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    overflow: hidden;
}

.toggle-more .dots-container .dot {
    float: left;
    width: 4px;
    height: 4px;
    background-color: #d25f32;
    border-radius: 2px;
}

.toggle-more .dots-container .dot ~ .dot {
    margin-left: 4px;
}

.timeline-wrapper {
    position: relative;
    width: 100%;
}

.timeline-wrapper .line {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: #d25f32;
}

.timeline-wrapper .line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100vw;
    width: 100vw;
    height: 2px;
    background-color: #d25f32;
}

.timeline-wrapper .line::after {
    content: '';
    display: inline-block;
    position: absolute;
    right: 0.15em;
    top: -0.5em;
    width: 1em;
    height: 1em;
    margin: 1px auto 0;
    vertical-align: bottom;
    border-right: 2px solid #d25f32;
    border-top: 2px solid #d25f32;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.timeline-wrapper .line .dot {
    display: inline-block;
    position: relative;
    float: left;
    left: 0;
    top: 0;
    height: 2px;
}

.timeline-wrapper .line .dot.dot-1 {
    width: 100%;
}

.timeline-wrapper .line .dot.dot-2 {
    width: 50%;
}

.timeline-wrapper .line .dot.dot-3 {
    width: 33.33%;
}

.timeline-wrapper .line .dot.dot-4 {
    width: 25%;
}

.timeline-wrapper .line .dot.dot-5 {
    width: 20%;
}

.timeline-wrapper .line .dot.dot-6 {
    width: 16.66%;
}

.timeline-wrapper .line .dot::after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    height: 8px;
    margin: auto;
    background-color: #d25f32;
    vertical-align: bottom;
    border-radius: 50%;
}


/* -- Footer
--------------------------------------------------*/

#siteFooter .footer-top {
    padding: 1em 0;
    color: #d25f32;
    background-color: transparent;
}

#siteFooter .footer-top ul.contact-container>li:not(:last-child) {
    margin-right: 2.5em;
}

#siteFooter .footer-top ul.contact-container>li.with-v-line-left {
    padding-left: 2.5em;
    border-left: 2px solid #d25f32;
}

#siteFooter .footer-top ul.contact-container>li>a {
    font-size: 1em;
    line-height: 1.5em;
    color: inherit;
}

#siteFooter .footer-top ul.contact-container>li>a img.icon {
    position: relative;
    top: 0.25em;
    float: left;
    width: auto;
    height: 1em;
    margin-right: 0.625em;
}

#siteFooter .footer-bottom {
    padding: 0.875em 0;
    color: #fff;
    background-color: #d25f32;
}

#siteFooter .footer-bottom ul.copyright-container>li:not(:last-child) {
    margin-right: 2.8125em;
}

#siteFooter .footer-bottom ul.copyright-container>li {
    font-size: 1em;
    line-height: 1em;
    color: inherit;
}


/* -- Main Content
--------------------------------------------------*/

#siteContainer {
    background-image: url(../images/background-02.png);
    background-repeat: repeat-y;
    background-size: 100%;
}

#searchKeyboardContainer,
#radicalKeyboardContainer {
    padding-bottom: 10vh;
}

#radicalKeyboardContainer .styled-keyboard-3 {
    padding-left: 8.1875em;
    padding-right: 8.1875em;
    padding-bottom: 2em;
}

#keyboardRadical {
    width: -webkit-calc((3em + 4px) * 12 + 1em * (12 - 1) + 5.75em * 2);
    width: -moz-calc((3em + 4px) * 12 + 1em * (12 - 1) + 5.75em * 2);
    width: calc((3em + 4px) * 12 + 1em * (12 - 1) + 5.75em * 2);
    margin: 0 auto;
    padding: 1.5em 5.75em 0;
}

#keyboardRadical .horizontal-divider span {
    font-size: 0.875em;
}

#keyboardRadical .styled-keys-container .styled-key-1:nth-child(12n + 1) {
    margin-left: 0;
    clear: both;
}

#keyboardRadical .strokes-number {
    margin-bottom: 2.5em;
}

#keyboardRadical .toggle-btn-wrapper,
#radicalsContainer .toggle-btn-wrapper,
#literacyStrokeList .toggle-btn-wrapper {
    display: none;
}

#radicalsContainer .styled-heading-1 {
    padding-top: 2em;
}

#sxDifference .flip-card {
    width: -webkit-calc((100% - 1.25em * 5) / 6);
    width: -moz-calc((100% - 1.25em * 5) / 6);
    width: calc((100% - 1.25em * 5) / 6);
}

#sxDifference .flip-card:not(:last-child) {
    margin-right: 1.25em;
}

#sxArt .art-slider-container .item img {
    box-shadow: 1px 1px 20px 0 #ebeae2, 1px 1px 3px 0 rgba(122, 122, 119, 0.23);
}

#sxNews .card-container {
    width: 680px;
    margin-left: auto;
    margin-right: auto;
}

#sxSource .card {
    width: 16.66%;
}

#sxResearch .card {
    width: 33.33%;
}

#sxHistory .card-container {
    width: 50em;
    margin-left: auto;
    margin-right: auto;
}

#sxHistory .card {
    margin-bottom: 5em;
}

#sxHistory .styled-timeline-container {
    padding: 4em 15% 2em;
}

#radicalIndex,
#literacyStrokeList {
    width: -webkit-calc(57em + 4px * 12);
    width: -moz-calc(57em + 4px * 12);
    width: calc(57em + 4px * 12);
    max-width: 100%;
    margin: 3.75em auto;
    padding: 3.75em 5em 6.25em;
}

#literacyImgList {
    position: relative;
    width: -webkit-calc(57em + 4px * 12);
    width: -moz-calc(57em + 4px * 12);
    width: calc(57em + 4px * 12);
    max-width: 100%;
    margin: 3.75em auto 0;
    overflow: hidden;
}

#literacyImgList .card {
    float: left;
    width: 15%;
    margin: 1.25em auto;
}

#literacyImgList .card ~ .card {
    margin-left: 2%;
}

#literacyImgList .card:nth-child(6n+1) {
    margin-left: 0;
    clear: both;
}

#radicalIndex .horizontal-divider span,
#literacyStrokeList .horizontal-divider span {
    font-size: 0.875em;
}

#radicalIndex .strokes-number,
#literacyStrokeList .strokes-number {
    margin-top: 2.5em;
}

#radicalIndexResults {
    position: relative;
    max-width: 60em;
    /* width: 60em; */
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

#radicalIndexResults #resultMostRelated {
    position: relative;
    padding: 0.625em 0 1.5em;
    overflow: hidden;
}

#radicalIndexResults #resultMostRelated>a {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    width: 100%;
}

body.hasHover #radicalIndexResults #resultMostRelated a:hover .styled-card-4,
#radicalIndexResults #resultMostRelated a:active .styled-card-4 {
    background-color: rgba(255, 255, 255, 0.4);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

body.hasHover #radicalIndexResults #resultMostRelated a:hover .styled-card-5,
#radicalIndexResults #resultMostRelated a:active .styled-card-5 {
    background-color: rgba(235, 234, 226, 0.4);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/* #radicalIndexResults #resultMostRelated .bordered-card {
    height: 100%;
} */

#radicalIndexResults #resultMostRelated .bordered-card:first-child {
    float: left;
    width: -webkit-calc((100% - 1.25em) * 2 / 3);
    width: -moz-calc((100% - 1.25em) * 2 / 3);
    width: calc((100% - 1.25em) * 2 / 3);
}

#radicalIndexResults #resultMostRelated .bordered-card:last-child {
    float: left;
    width: -webkit-calc((100% - 1.25em) * 1 / 3);
    width: -moz-calc((100% - 1.25em) * 1 / 3);
    width: calc((100% - 1.25em) * 1 / 3);
    margin-left: 1.25em;
}

#searchResult {
    text-align: center;
}

#wordDefinition {
    text-align: center;
}

.cn-special {
    float: left;
    font-size: 12px;
    padding: 1.7em 0;
    display: none;
}

.cn-special img {
    float: left;
    width: 14px;
    margin: 4px;
}

.cn-special p {
    float: left;
    line-height: 2em;
}

#resultMostRelated .cn-special {
    padding: 1.7em;
}

#wordWriting {
    display: inline-block;
    vertical-align: bottom;
}

#wordWriting .card {
    width: 9em;
}

#wordSource {
    width: 1000px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#wordSourceM > .wrapper ~ .wrapper {
    margin-top: 3em;
}

#relatedVideos .card-container {
    width: 1150px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#relatedVideos .card {
    width: 48%;
    margin-top: 1.25em;
}

#relatedVideos .card:nth-child(2n) {
    margin-left: 4%;
}

#relatedExplanations {
    text-align: center;
}

#relatedExplanations .block-left {}

#relatedNouns {
    text-align: center;
}

#explanationCategories,
#differenceCategories,
#academyCategories {
    text-align: center;
}

#explanationCategories .card-container,
#differenceCategories .card-container,
#academyCategories .card-container {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    overflow: hidden;
}

#explanationCategories .card,
#differenceCategories .card,
#academyCategories .card {
    float: left;
    width: 11.875em;
    max-width: -webkit-calc(100% / 5 - 0.5em * 2);
    max-width: -moz-calc(100% / 5 - 0.5em * 2);
    max-width: calc(100% / 5 - 0.5em * 2);
    margin-left: 0.5em;
    margin-right: 0.5em;
}

#differenceCategories .card {
    width: 23.75em;
    max-width: -webkit-calc((100% - 0.5em * 2 * 5) / 6 * 2);
    max-width: -moz-calc((100% - 0.5em * 2 * 5) / 6 * 2);
    max-width: calc((100% - 0.5em * 2 * 5) / 6 * 2);
}

#differenceCategories .card~.card {
    width: 11.875em;
    max-width: -webkit-calc((100% - 0.5em * 2 * 5) / 6);
    max-width: -moz-calc((100% - 0.5em * 2 * 5) / 6);
    max-width: calc((100% - 0.5em * 2 * 5) / 6);
}

#explanationCategories .card {
    height: 27.125em;
}

.noresults {
    /*position: absolute;
    left: 16em;*/
    float: right;
    padding: 0.75em 0.25em;
    display: none;
}

.noresults img {
    width: 1em;
    float: left;
    line-height: 1.43;
}

.noresults p {
    float: left;
    padding-left: 0.25em;
    font-size: 1em;
    line-height: 1em;
    letter-spacing: 0.5px;
    text-align: left;
    color: #aa4425;
}

.search-wrapper.no-results .noresults {
    display: block;
}

.search-wrapper.no-results .inner {
    border: solid 2px #aa4425;
    padding: 0.5em;
}

.search-wrapper.no-results input.length-long {
    width: 15em;
}

.search-wrapper {
    position: relative;
    top: -5.25em;
    width: 37.5em;
    min-height: 7.5em;
    margin: 0 auto -5.25em;
    padding: 1.25em 1.25em 0.75em;
    vertical-align: bottom;
}

.search-wrapper>.inner {
    position: relative;
    width: 100%;
    padding: 0.625em;
    background-color: #fff;
    overflow: hidden;
    border: none;
}

.search-wrapper .input-title {
    display: inline-block;
    float: left;
    margin-right: 0.5em;
    padding: 1em 0.5em;
    font-size: 0.875em;
    line-height: 1em;
    letter-spacing: 2px;
    text-indent: 2px;
    color: initial;
    background-color: #f1f3ed;
}

.search-wrapper input {
    display: inline-block;
    float: left;
    width: 18em;
    /*width: 25.5em;*/
    margin-right: 0;
    padding: 0.75em 0;
    font-size: 1em;
    line-height: 1em;
    letter-spacing: 1px;
    outline: none;
    border: none;
}

.search-wrapper input.length-long {
    width: 20em;
}

.search-wrapper input.length-short {
    width: 13.5em;
}

.search-wrapper input:focus {
    outline: none;
}

.search-wrapper .icon-btn {
    display: inline-block;
    float: right;
    /* float: left; */
    width: auto;
    height: 2.25em;
    margin: 0.25em 0.75em 0.25em auto;
    cursor: pointer;
}

.search-wrapper .icon-btn._close {
    visibility: hidden;
    z-index: -1;
}

.search-wrapper .btn-container {
    float: right;
}

.search-wrapper .btn-container > .wrapper {
    position: relative;
    overflow: hidden;
}

.search-wrapper button {
    float: right;
    /* float: left; */
    font-size: 0.875em;
}

.search-wrapper button._close {
    visibility: hidden;
    z-index: -1;
}

.search-wrapper button~button {
    margin-right: 0.5em;
}

.search-wrapper .text-btn {
    display: inline-block;
    position: relative;
    margin-top: 0.75em;
    font-size: 1em;
    line-height: 1em;
    vertical-align: bottom;
    color: #d25f32;
    cursor: pointer;
    overflow: hidden;
}

.search-wrapper .text-btn img {
    display: inline-block;
    float: left;
    height: 1em;
    width: auto;
    margin-right: 0.5625em;
}

.search-wrapper .text-btn span {
    display: inline-block;
    float: left;
}

.flip-card {
    display: inline-block;
    position: relative;
    float: left;
    vertical-align: bottom;
}

.flip-card .card.front-side,
.flip-card .card.back-side {
    display: none;
}

.flip-card .card.front-side._show,
.flip-card .card.back-side._show {
    display: block;
}

body.hasHover .flip-card .inner:hover {
    -webkit-animation-name: hvr-bob-float, hvr-bob;
    animation-name: hvr-bob-float, hvr-bob;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}

.social-media-container {
    position: relative;
    top: 1.5em;
    margin-left: 1.5em;
    overflow: hidden;
}

.social-media-container>a {
    display: inline-block;
    float: left;
    height: 1em;
    margin: 0.5em auto;
    color: initial;
}

body.hasHover .social-media-container>a:hover,
.social-media-container>a:active {
    color: #d25f32;
}

.social-media-container>a:not(:last-child) {
    margin-right: 0.75em;
}

.social-media-container .link {
    display: table;
    height: 2em;
    margin: 0 auto;
    padding: 0.25em 0;
    -webkit-transition: initial;
    -moz-transition: initial;
    -ms-transition: initial;
    -o-transition: initial;
    transition: initial;
}

.social-media-container .link>span {
    display: table-cell;
    padding: 0 0.5em;
    font-size: 12px;
    line-height: 1em;
    vertical-align: middle;
    border: 1px solid #141414;
}

body.hasHover .social-media-container .link>span:hover {
    border-color: #d25f32;
}

.social-media-container .icon {
    display: block;
    width: auto;
    height: 100%;
}

.section-img-heading {
    position: relative;
    padding: 1.5em 0;
    overflow: hidden;
}

.section-img-heading img {
    float: left;
    width: 8%;
}

.section-img-heading .heading {
    float: left;
    width: 20%;
    height: 1px;
}

.section-img-heading .heading>p {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 1.5em;
    margin: auto;
    line-height: 1.5em;
    letter-spacing: 2px;
    text-align: center;
    color: #a4a288;
}

p.block-description {
    font-size: 0.875em;
    line-height: 1.71em;
    text-align: justify;
    letter-spacing: 1.5px;
    color: #141414;
    overflow: hidden;
}

p.block-description._cent {
    font-family: '思源宋體';
    max-width: 40em;
    /* width: 40em; */
    margin-left: auto;
    margin-right: auto;
}


/*-- pipi literacy --*/

.literacy-example {
    max-width: 40em;
    /* width: 40em; */
    margin: 0 auto;
    font-size: 0.875em;
    line-height: 1.71em;
    margin-top: 31px;
}

.title-remark {
    margin-top: .7em;
}

.card-text {
    width: 100%;
    height: 38px;
    border-radius: 8px;
    background-color: #ebeae2;
    margin-bottom: 10px;
    line-height: 38px;
    text-align: center;
    font-size: 18px;
    letter-spacing: 1.9px;
    color: #141414;
}

.card-img-div {
    width: 100%;
    height: 8.33em;
    border-radius: 8px;
    background-color: #ebeae2;
}

.example-img {
    width: 100%;
    margin-top: .35em;
}

.banner-tabs {
    position: relative;
    margin-bottom: 2.5em;
}

.banner-tabs > .wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

.about-content,
.disclaimer-content {
    width: 800px;
    margin: 0 auto;
    padding: 40px 60px 60px 60px;
    background-color: #ebeae2;
    border-radius: 8px;
}

.disclaimer-content {
    padding: 60px;
}

.about-content.cooperation-content {
    background: none;
    width: 840px;
    padding: 0;
}

.about-content-p,
.disclaimer-content-p {
    width: 680px;
    font-size: 14px;
    margin: 1em 0;
    line-height: 1.71;
    letter-spacing: 1.5px;
    text-align: justify;
    color: #141414;
}

.about-content-p span {
    font-size: 1.4em;
}

.disclaimer-content img {
    width: 100px;
}

.about-remark {
    width: 680px;
    font-size: 14px;
    line-height: 1.71;
    letter-spacing: 1.5px;
    text-align: right;
    color: #a4a288;
    margin-top: 2.85em;
}

.about-office {
    font-size: 28px;
    line-height: 1.29;
    letter-spacing: 1.8px;
    color: #726f51;
}

.about-position {
    font-size: 18px;
    line-height: 1.33;
    letter-spacing: 1.4px;
    color: #726f51;
    margin-bottom: 5px;
    margin-top: 20px;
}

.about-name {
    font-size: 14px;
    line-height: 1.71;
    letter-spacing: 1.5px;
    text-align: justify;
    color: #141414;
}

.about-person {
    font-size: 14px;
    line-height: 1.71;
    letter-spacing: 1.5px;
    text-align: justify;
    color: #141414;
    margin-top: 20px;
}

.about-part {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 1.5px;
    color: #d25f32;
    margin-top: 1.6em;
}

.blank-60px {
    width: 100%;
    height: 60px;
}

.units {
    overflow: hidden;
    /* width: 840px; */
    text-align: center;
}

.unit-logo {
    float: left;
    width: 200px;
    margin: 10px 40px;
}

.unit-logo-organizer {
    width: 200px;
    margin: 0 auto;
}

.flip {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20%;
    opacity: 0;
}

.flip-show {
    opacity: 1;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.card-container.height-fixed {
    overflow: visible;
    height: 143px;
}


/* resources */

.resour-list {
    width: 760px;
    margin: 0 auto;
}

.resour-link {
    width: 100%;
    background-color: #ebeae2;
}

.resour-div {
    position: relative;
    width: 100%;
    min-height: 160px;
    background-color: #ebeae2;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

body.hasHover .resour-div:hover {
    background-color: #fafafa;
    transition: all .3s ease;
}

.resour-div .resour-img {
    width: 100px;
    float: left;
    margin-right: 15px;
}

.resour-div .resour-content {
    position: relative;
    margin-left: 115px;
}

.resour-div .resour-title-wrapper {
    position: relative;
    margin-bottom: 15px;
    overflow: hidden;
}

.resour-div .resour-title-wrapper .resour-icon {
    width: 22px;
    float: left;
    margin: 4px 5px 0 0;
}

.resour-div .resour-title-wrapper .resour-title {
    margin-left: 27px;
    font-size: 20px;
    line-height: 1.5em;
    letter-spacing: 1.5px;
    color: #d25f32;
}

.resour-div .intro {
    font-size: 14px;
    line-height: 1.71;
    letter-spacing: 1.5px;
    text-align: justify;
    color: #141414;
}


/* audio */

.audio-content {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

.audio-content .audio-content-top {
    width: 560px;
}

.theme {
    width: 43.75%;
    float: left;
    margin: 0 3.125% 60px;
    padding: 40px 0;
    border-radius: 8px;
    background-color: #ebeae2;
}

.theme p {
    font-family: '思源宋體';
    min-height: 9em;
    padding: 0 3em;
    font-size: 14px;
    line-height: 1.71;
    letter-spacing: 1.5px;
    text-align: justify;
    color: #141414;
    margin: 0 auto 1em auto;
}

.theme-img {
    width: 100%;
    height: auto;
    margin-bottom: 25px;
}

.theme-more {
    width: 100%;
    text-align: center;
}

#text>.section-block>p,
#daily_word>.section-block>p,
#animation>.section-block>p,
#poetry>.section-block>p {
    font-family: '思源宋體';
    font-size: 14px;
    line-height: 1.71;
    letter-spacing: 1.5px;
    text-align: justify;
    color: #141414;
}

.to-youtube {
    width: 100%;
    margin-top: .6em;
    text-align: center;
}

.audio-img {
    width: 100%;
}

.to-youtube>img {
    width: 1em;
}

.audio-yt {
    margin-left: .4em;
}

.audio-frame {
    display: none;
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    margin: auto;
    background-color: rgba(235, 234, 226, 0.8);
    z-index: 88889;
}

.audio-frame .video-div {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 60vw;
    max-width: 960px;
    height: 33.75vw;
    max-height: 540px;
    margin: auto;
}

.audio-frame .video-div > iframe {
    display: block;
    width: 100%;
    height: 100%;
}

/* .audio-frame>.video-div>img {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 900px;
} */

.audio-frame .circle-btn {
    display: inline-block;
    position: absolute;
    top: 0;
    right: -6em;
    bottom: 0;
    width: 4.5em;
    height: 4.5em;
    margin: auto;
    padding: 1em;
    font-size: 1.125em;
    line-height: 1.25em;
    text-align: center;
    vertical-align: bottom;
    background-color: #f1f3ed;
    box-shadow: 1px 1px 20px 0 #ebeae2, 1px 1px 3px 0 rgba(122, 122, 119, 0.23);
    border-radius: 2.25em;
    -webkit-transition: initial;
    -moz-transition: initial;
    -ms-transition: initial;
    -o-transition: initial;
    transition: initial;
}

.audio-frame .circle-btn img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    height: auto;
    margin: auto;
}

.audio-frame .circle-btn ._hover {
    opacity: 0;
}

body.hasHover .audio-frame .circle-btn:hover,
.audio-frame .circle-btn:active {
    color: #fff;
    background-color: #d25f32;
}

body.hasHover .audio-frame .circle-btn:hover img,
.audio-frame .circle-btn:active img {
    display: none;
}

body.hasHover .audio-frame .circle-btn:hover ._hover,
.audio-frame .circle-btn:active ._hover {
    opacity: 1;
}


/* slider */

.slick-dots {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0 0 10px 0;
    padding: 0;
    overflow: hidden;
}

.slick-dots li {
    display: inline-block;
    margin-left: 4px;
    margin-right: 4px;
    float: left;
}


/*
.slick-dots li.slick-active a {
    background-color: #d25f32;
}


/*.slick-dots li a {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background-color: #d25f32;
    border: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    padding: 6px;
}

.slick-dots li :hover {
    background-color: #d25f32;
}*/

.more_less {
    text-align: center;
    width: 100%;
}

.audio-div {
    overflow: hidden;
}

.load-3 {
    height: 2em;
    text-align: center;
    visibility: hidden;
    margin-top: 1em;
}

.load-3._visible {
    visibility: visible;
}

.line {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #d25f32;
}

.load-3 .line:nth-last-child(1) {
    animation: loadingC .6s .1s linear infinite;
}

.load-3 .line:nth-last-child(2) {
    animation: loadingC .6s .2s linear infinite;
}

.load-3 .line:nth-last-child(3) {
    animation: loadingC .6s .3s linear infinite;
}

.sound_read {
    float: left;
    height: 100%;
    text-align: right;
    width: -webkit-calc(28em/12);
    width: -moz-calc(28em/12);
    width: calc(28em/12);
    font-size: 12px;
    line-height: 13px;
    padding: 5px -webkit-calc(2em/3);
    padding: 5px -moz-calc(2em/3);
    padding: 5px calc(2em/3);
    color: #a4a288;
    border-left: 1px solid #cccab6;
}

.sound_read.read_second {
    margin-left: 1.6em;
}

.read_second_multiple {
    clear: left;
}

.sound_read p {
    margin: 0;
}


/* -- Components
--------------------------------------------------*/


/* -- UI -- */

.horizontal-divider {
    text-align: center;
    overflow: hidden;
}

.horizontal-divider span {
    display: inline-block;
    position: relative;
    color: #d25f32;
}

.horizontal-divider span::before,
.horizontal-divider span::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 1px;
    margin: auto;
    background: #d25f32;
}

.horizontal-divider span::before {
    right: 100%;
    margin-right: 0.85em;
}

.horizontal-divider span::after {
    left: 100%;
    margin-left: 0.85em;
}

.horizontal-divider.only-l-side {
    text-align: right;
}

.horizontal-divider.only-r-side {
    text-align: left;
}

.horizontal-divider.only-l-side span::after {
    display: none;
}

.horizontal-divider.only-r-side span::before {
    display: none;
}

.tooltip>.tooltip-inner {
    padding: 13px;
    width: 150px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.5em;
    text-align: left;
    letter-spacing: 1.5px;
    background-color: #b3b19f;
    border-radius: 8px;
}

.tooltip.bottom>.tooltip-arrow {
    top: 10px;
    margin-left: -10px;
    border-width: 0 10px 15px;
    border-bottom-color: #b3b19f;
}


/* -- Text Button -- */

.text-btn {
    display: inline-block;
    position: relative;
    line-height: 1em;
    vertical-align: bottom;
    overflow: hidden;
}

.text-btn:hover {}

.text-btn img {
    display: inline-block;
    float: left;
    height: 1em;
    width: auto;
    margin-right: 0.5625em;
}

.text-btn span {
    display: inline-block;
    float: left;
}


/* -- Breadcrumb -- */


/* -- Pagination -- */

.fixed-bottom-pagination {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #deddcc;
    z-index: 88888;
}

.fixed-bottom-pagination+.pseudo-container {
    position: relative;
    width: 100%;
}

.fixed-bottom-pagination>.inner {
    position: relative;
    padding: 1em 0;
}

.fixed-bottom-pagination .title-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2.5em;
    height: 3em;
    margin: auto;
    text-align: left;
    color: #726f51;
    letter-spacing: 1.5px;
    z-index: 1;
}

.fixed-bottom-pagination .title-wrapper .title {
    font-size: 1.25em;
    line-height: 1em;
}

.fixed-bottom-pagination .title-wrapper p {
    padding-top: 0.5em;
    font-size: 0.875em;
    line-height: 1.5em;
}

.pagination {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    vertical-align: bottom;
}

.pagination>li {
    display: inline-block;
    position: relative;
    float: left;
    padding: 1.25em 0;
}

.pagination>li~li {
    margin-left: 1.875em;
}

.pagination>li~li::before {
    content: '>';
    position: absolute;
    left: -1.875em;
    top: 0;
    bottom: 0;
    width: 1.875em;
    height: 1em;
    margin: auto;
    line-height: 1em;
}

/* .source_page {
    position: relative;
}

.source_page .pagination>li~li::before {
    content: '';
}

.source_page a {
    position: absolute;
}

.source_page #prev {
    left: 0px;
}

.source_page #next {
    right: 0px;
}

.source_page ul {
    overflow: hidden;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.source_page ul li {
    display: inline-block;
} */

.prev.hidden,
.next.hidden {
    display: none;
}

.pagination>li.prev+li::before,
.pagination>li.next::before {
    display: none;
}

.pagination>li.prev+li,
.pagination>li.prev,
.pagination>li.next {
    margin: 0 auto;
}

.pagination>li.prev {
    padding-right: 3em;
}

.pagination>li.next {
    padding-left: 3em;
}

.pagination>li.prev::after,
.pagination>li.next::after {
    content: '';
    position: absolute;
    right: 1.5em;
    top: 0.875em;
    bottom: 0.875em;
    width: 1px;
    margin: auto;
    background-color: #a4a288;
}

.pagination>li.next::after {
    left: 1.5em;
    right: auto;
}

.pagination>li>a,
.pagination>li>a:focus {
    display: block;
    position: static;
    min-width: 6em;
    padding: 1em 0.5em;
    line-height: 1em;
    text-align: center;
    color: #726f51;
    background-color: rgba(235, 234, 226, 0.53);
    border: 0;
    border-radius: 0.5em;
}

.pagination>li>a::before {
    content: '';
    display: none;
    position: absolute;
    top: 1px;
    /* top: 0; */
    left: 0;
    right: 0;
    width: 0.5em;
    height: 0.5em;
    margin: auto;
    background-color: #d25f32;
    border-radius: 0.25em;
}

.pagination>li>a::after {
    content: '目前所在';
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.875em;
    text-align: center;
    color: #d25f32;
}

.pagination>li.active>a::before,
.pagination>li.active>a::after {
    display: inline-block;
}

.pagination>li.active>a {
    pointer-events: none;
}

.pagination>li.active>a,
body.hasHover .pagination>li>a:hover,
.pagination>li>a:active {
    color: #fff;
    background-color: #d25f32;
}

.pagination>li.prev>a,
.pagination>li.next>a {
    background-color: #cccab6;
    border-radius: 0.5em;
}

.pagination>li:first-child>a,
.pagination>li:last-child>a {
    border-radius: 0.5em;
}

body.hasHover .pagination>li.prev>a:hover,
.pagination>li.prev>a:active,
body.hasHover .pagination>li.next>a:hover,
.pagination>li.next>a:active {
    color: #fff;
    /* color: #726f51; */
}

/* .source_page>a {
    font-size: 45px;
    text-decoration: none;
    line-height: 88px;
    margin: 0 1em;
} */

.pagination>.active>a,
.pagination>.active>a:focus,
body.hasHover .pagination>.active>a:hover,
.pagination>.active>a:active,
.pagination>.active>span,
.pagination>.active>span:focus,
body.hasHover .pagination>.active>span:hover {
    background-color: #d25f32;
}


/* .pagination > li:first-child > a {
    margin-left: 0;
}

.pagination > li:last-child > a {
    margin-right: 0;
}

.pagination.inverted > li > a {
    color: #fff;
}

.pagination > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    margin: auto;
    background: #bd2e2a;
}

.pagination.inverted > li > a::after {
    content: '';
    background: #fff;
}

.pagination > li > a:focus,
.pagination > li > a:hover {
    color: #bd2e2a;
    background: none;
    border: none;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.pagination.inverted > li > a:focus,
.pagination.inverted > li > a:hover {
    color: #fff;
}

.pagination > li > a:focus::after,
.pagination > li > a:hover::after {
    width: 100%;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.pagination > li.prev > a:focus::after,
.pagination > li.prev > a:hover::after,
.pagination > li.next > a:focus::after,
.pagination > li.next > a:hover::after,
.pagination > li.first > a:focus::after,
.pagination > li.first > a:hover::after,
.pagination > li.last > a:focus::after,
.pagination > li.last > a:hover::after {
    width: 0;
}

.pagination > li.active > a,
.pagination > li.active > a:focus,
.pagination > li.active > a:hover {
    font-weight: 700;
    color: #bd2e2a;
    background: none;
    border: none;
}

.pagination.inverted > li.active > a,
.pagination.inverted > li.active > a:focus,
.pagination.inverted > li.active > a:hover {
    color: #fff;
}

.pagination > li.active > a::after,
.pagination > li.active > a:focus::after,
.pagination > li.active > a:hover::after {
    width: 100%;
} */

.styled-pagination-1 {
    text-align: center;
}

.styled-pagination-1 .wrapper {
    display: inline-block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5em 2.5em;
    max-width: 100%;
    vertical-align: bottom;
}

.styled-pagination-1 .pagination-prev {
    display: inline-block;
    position: absolute;
    left: 0.5em;
    top: 0;
    bottom: 0;
    width: 1em;
    height: 1em;
    margin: auto;
    vertical-align: bottom;
    border-left: 2px solid #d25f32;
    border-top: 2px solid #d25f32;
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    -ms-transform: rotateZ(-45deg);
    -o-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}

.styled-pagination-1 .pagination-next {
    display: inline-block;
    position: absolute;
    right: 0.5em;
    top: 0;
    bottom: 0;
    width: 1em;
    height: 1em;
    margin: auto;
    vertical-align: bottom;
    border-right: 2px solid #d25f32;
    border-top: 2px solid #d25f32;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.styled-pagination-1 .pagination-item {
    position: relative;
    padding: 1.5em 0;
    overflow: hidden;
}

.styled-pagination-1 a.pagination-item-prev,
.styled-pagination-1 a.pagination-item-next,
.styled-pagination-1 .pagination-item > a {
    display: inline-block;
    position: relative;
    width: 8.5em;
    height: 3em;
    padding: 1em 0.5em;
    line-height: 1em;
    text-align: center;
    color: #726f51;
    background-color: rgba(235, 234, 226, 0.53);
    border: 0;
    border-radius: 0.5em;
    vertical-align: bottom;
}

.styled-pagination-1 a.pagination-item-prev {
    display: inline-block;
    position: absolute;
    left: 0.5em;
    top: 0;
    bottom: 0;
    width: 6em;
    margin: auto;
    margin-right: 1em;
    vertical-align: bottom;
}

.styled-pagination-1 a.pagination-item-prev::before {
    content: '';
    position: absolute;
    right: -1em;
    top: -0.25em;
    bottom: -0.25em;
    width: 1px;
    margin: auto;
    background-color: #a4a288;
}

.styled-pagination-1 a.pagination-item-next {
    display: inline-block;
    position: absolute;
    right: 0.5em;
    top: 0;
    bottom: 0;
    width: 6em;
    margin: auto;
    margin-left: 1em;
    vertical-align: bottom;
}

.styled-pagination-1 a.pagination-item-next::before {
    content: '';
    position: absolute;
    left: -1em;
    top: -0.25em;
    bottom: -0.25em;
    width: 1px;
    margin: auto;
    background-color: #a4a288;
}

.styled-pagination-1 a.pagination-item-prev.active,
body.hasHover .styled-pagination-1 a.pagination-item-prev:hover,
.styled-pagination-1 a.pagination-item-prev:active,
.styled-pagination-1 a.pagination-item-next.active,
body.hasHover .styled-pagination-1 a.pagination-item-next:hover,
.styled-pagination-1 a.pagination-item-next:active,
.styled-pagination-1 .pagination-item.active > a,
body.hasHover .styled-pagination-1 .pagination-item > a:hover,
.styled-pagination-1 .pagination-item > a:active {
    color: #fff;
    background-color: #d25f32;
}

.styled-pagination-1 .pagination-item > a::before {
    content: '';
    display: none;
    position: absolute;
    top: -0.875em;
    left: 0;
    right: 0;
    width: 0.5em;
    height: 0.5em;
    margin: auto;
    background-color: #d25f32;
    border-radius: 0.25em;
}

.styled-pagination-1 .pagination-item > a::after {
    content: '目前所在';
    display: none;
    position: absolute;
    bottom: -1.5em;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.875em;
    text-align: center;
    color: #d25f32;
    cursor: default;
    pointer-events: none;
}

.styled-pagination-1 .pagination-item.active > a::before,
.styled-pagination-1 .pagination-item.active > a::after {
    display: inline-block;
}

#sitePagination.styled-pagination-1 .wrapper {
    width: -webkit-calc(8.5em * 5 + 10px * 4 + 8.5em * 2);
    width: -moz-calc(8.5em * 5 + 10px * 4 + 8.5em * 2);
    width: calc(8.5em * 5 + 10px * 4 + 8.5em * 2);
    max-width: 100%;
    height: 7em;
    padding: 0.5em 8.5em;
    overflow: hidden;
}

#sitePagination.styled-pagination-1 .owl-carousel.owl-loaded,
#sitePagination.styled-pagination-1 .owl-carousel .owl-stage-outer,
#sitePagination.styled-pagination-1 .owl-carousel .owl-stage {
    height: 100%;
}

#sourcePagination.styled-pagination-1 .wrapper {
    width: -webkit-calc(8.5em * 8 + 10px * 7 + 2.5em * 2);
    width: -moz-calc(8.5em * 8 + 10px * 7 + 2.5em * 2);
    width: calc(8.5em * 8 + 10px * 7 + 2.5em * 2);
    max-width: 100%;
    padding: 0.5em 2.5em;
    overflow: hidden;
}


/* -- Owl Carousel -- */
/* 
.owl-controls {
    position: absolute;
    top: 17.5%;
    left: 0;
    width: 100%;
    height: 0;
}

.owl-controls .carousel-nav-container {
    position: relative;
}

.owl-controls .carousel-nav-container .nav-prev,
.owl-controls .carousel-nav-container .nav-next {
    display: inline-block;
}

.owl-controls .carousel-nav-container .nav-prev {
    float: left;
}

.owl-controls .carousel-nav-container .nav-next {
    float: right;
}

.owl-controls .carousel-nav-container .nav-prev a,
.owl-controls .carousel-nav-container .nav-next a {
    display: block;
    position: relative;
    width: 4.6875em;
    height: 9.375em;
    background-color: #fafafa;
    box-shadow: 1px 1px 20px 0 #ebeae2, 1px 1px 3px 0 rgba(122, 122, 119, 0.23);
}

.owl-controls .carousel-nav-container .nav-prev a {
    border-bottom-right-radius: 4.6875em;
    border-top-right-radius: 4.6875em;
    border-left: 0;
}

.owl-controls .carousel-nav-container .nav-next a {
    border-bottom-left-radius: 4.6875em;
    border-top-left-radius: 4.6875em;
    border-right: 0;
}

body.hasHover .owl-controls .carousel-nav-container .nav-prev a:hover,
body.hasHover .owl-controls .carousel-nav-container .nav-next a:hover {
}

.owl-controls .carousel-nav-container .nav-prev a img,
.owl-controls .carousel-nav-container .nav-next a img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2.625em;
    height: auto;
    margin: auto;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

body.hasHover .owl-controls .carousel-nav-container .nav-prev a:hover img {
    left: -0.75em;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

body.hasHover .owl-controls .carousel-nav-container .nav-next a:hover img {
    right: -0.75em;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
} */


/* -- Styled Container -- */


/* -- Styled Block -- */

.styled-block-container {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    overflow: hidden;
}

.styled-block-container .styled-block {
    margin-top: 0;
}

.styled-block-container .styled-block~.styled-block {
    margin-top: 1em;
}

.styled-block-1 {
    position: relative;
    overflow: hidden;
}

.styled-block-1.open .block-right {
    height: auto;
}

.styled-block-1.open .block-right .toggle-btn ._less,
.toggle-btn.audio_more ._less {
    display: block;
}

.styled-block-1.open .block-right .toggle-btn ._more,
.toggle-btn.audio_more ._more {
    display: none;
}

.styled-block-1 .block-left {
    position: relative;
    float: left;
    width: 8em;
    padding: 0.75em 1.25em;
    font-size: 1.25em;
    line-height: 1.5em;
    text-align: center;
    color: #a4a288;
}

.styled-block-1 .block-right {
    position: relative;
    float: left;
    width: 40em;
    height: 3.75em;
    min-height: 3.75em;
    margin-left: 1em;
    padding: 1.25em 4.25em 1.25em 1.25em;
}

.styled-block-1 .block-right ul {
    display: block;
    height: 100%;
    overflow: hidden;
}

.styled-block-1 .block-right ul>li {
    margin-left: -0.75em;
    margin-bottom: 1.25em;
    padding: 0 1.5em 0 0.75em;
}

.styled-block-1 .block-right ul>li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    margin: auto;
    background-color: #cccab6;
}

.styled-block-1 .block-right ul>li>a {
    font-size: 0.875em;
    line-height: 1.42857em;
}

.styled-block-1 .block-right .toggle-btn,
.toggle-btn.audio_more {
    position: absolute;
    right: 1.25em;
    top: 1.25em;
    height: 1.25em;
    margin: auto;
    color: #d25f32;
    cursor: pointer;
}

body.hasHover .styled-block-1 .block-right .toggle-btn:hover,
body.hasHover .toggle-btn.audio_more:hover {
    color: #aa4425;
}

body.hasHover .styled-block-1 .block-right .toggle-btn:hover .dots-container .dot,
body.hasHover .toggle-btn.audio_more:hover .dots-container .dot {
    background-color: #aa4425;
}

.styled-block-1 .block-right .toggle-btn ._more,
.styled-block-1 .block-right .toggle-btn ._less,
.toggle-btn.audio_more ._more,
.toggle-btn.audio_more ._less {
    display: block;
    font-size: 12px;
    line-height: 1em;
    text-indent: 1.5px;
    letter-spacing: 1.5px;
}

.styled-block-1 .block-right .toggle-btn ._less,
.toggle-btn.audio_more ._less {
    display: none;
}

.styled-block-1 .block-right .toggle-btn .more-dots,
.toggle-btn.audio_more .more-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    margin: auto;
    line-height: 4px;
    text-align: center;
}

.styled-block-1 .block-right .toggle-btn .dots-container,
.toggle-btn.audio_more .dots-container {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    overflow: hidden;
}

.styled-block-1 .block-right .toggle-btn .dots-container .dot,
.toggle-btn.audio_more .dots-container .dot {
    float: left;
    width: 4px;
    height: 4px;
    background-color: #d25f32;
    border-radius: 2px;
}

.styled-block-1 .block-right .toggle-btn .dots-container .dot~.dot,
.toggle-btn.audio_more .dots-container .dot~.dot {
    margin-left: 4px;
}


/* audio-more */

.toggle-btn.audio_more {
    position: relative;
}

.styled-block-2 {
    position: relative;
    text-align: center;
    overflow: hidden;
}

.styled-block-2 .block-left,
.styled-block-2 .block-right {
    position: relative;
    float: left;
    overflow: hidden;
}

.styled-block-2 .block-left .top {
    height: 1.875em;
}

.styled-block-2 .block-left .content-wrapper {
    width: 5em;
    height: 5em;
    margin-bottom: 1.25em;
    padding: 0.875em 0;
    overflow: hidden;
}

.styled-block-2 .block-left .content-wrapper.auto-width {
    width: auto;
    min-width: 9.375em;
    height: auto;
    padding: 1.5em 2em;
}

.styled-block-2 .block-left .content-wrapper~.content-wrapper {
    margin-bottom: 0;
}

.styled-block-2 .block-left .content-wrapper .title-wrapper {
    height: 1em;
    overflow: hidden;
}

.styled-block-2 .block-left .content-wrapper .title-wrapper .title {
    font-size: 12px;
    line-height: 1em;
    color: #b3b19f;
}

.styled-block-2 .block-left .content-wrapper .wording,
.styled-block-2 .block-left .content-wrapper .wording-lg,
.styled-block-2 .block-left .content-wrapper .wording-sm {
    height: 1.375em;
    font-size: 2em;
    line-height: 1.375em;
    color: #d25f32;
    overflow: hidden;
}

.styled-block-2 .block-left .content-wrapper .wording-lg {
    height: auto;
    font-size: 1.25em;
    line-height: 1.5em;
}

.styled-block-2 .block-left .content-wrapper .wording-sm {
    height: auto;
    margin-top: 0.25em;
    font-size: 1em;
    line-height: 1.5em;
}

.styled-block-2 .block-right .content-wrapper {
    position: relative;
    float: left;
    margin-left: 1.25em;
}

.styled-block-2 .block-right .content-wrapper .title-wrapper {
    height: 1.875em;
}

.styled-block-2 .block-right .content-wrapper .title-wrapper .title {
    font-size: 0.875em;
    color: #999894;
}

.styled-block-2 .block-right .content-wrapper .img-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.styled-block-2 .block-right .content-wrapper .img-wrapper {
    position: relative;
    float: left;
}

.styled-block-2 .block-right .content-wrapper .img-wrapper~.img-wrapper {
    margin-left: 0.625em;
}

.styled-block-2 .block-right .content-wrapper .img-wrapper img {
    display: block;
    width: auto;
    height: 11.25em;
}

.styled-block-2 .block-right .content-wrapper .img-wrapper img.wording-img {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    margin: auto !important;
}

.styled-block-2 .block-right .content-wrapper .img-wrapper .wording {
    font-family: '思源宋體';
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 1em;
    margin: auto;
    font-size: 8em;
    line-height: 1em;
    overflow: hidden;
}

.styled-block-2 .block-right .content-wrapper .wording-container {
    min-width: 15.625em;
    padding: 2em 3.5em;
}

.styled-block-2 .block-right .content-wrapper .wording-container .wording,
.styled-block-2 .block-right .content-wrapper .wording-container img.wording-img {
    font-size: 2em;
    line-height: 1em;
}

.styled-block-2 .block-right .content-wrapper .wording-container img.wording-img {
    width: auto;
    height: 1em;
}

.styled-block-2 .block-right .content-wrapper .wording-container .wording~.wording {
    margin-top: 0.75em;
}

.styled-block-2.no-block-left .block-right .content-wrapper {
    margin-left: 0;
}

.styled-block-2.no-block-left .block-right .content-wrapper~.content-wrapper {
    margin-left: 1.25em;
}

.styled-block-2.block-md .block-right .content-wrapper {
    float: none;
    margin-bottom: 2.5em;
}

.styled-block-2.block-lg .block-right .content-wrapper {
    float: none;
    margin-bottom: 1.5em;
}

.styled-block-2.block-md .block-right .content-wrapper~.content-wrapper,
.styled-block-2.block-lg .block-right .content-wrapper~.content-wrapper {
    margin-bottom: 0;
}

.styled-block-2.block-sm .block-right .content-wrapper~.content-wrapper {
    margin-left: 5em;
}

.styled-block-2.block-md .block-right .content-wrapper~.content-wrapper,
.styled-block-2.block-lg .block-right .content-wrapper~.content-wrapper {
    margin-left: 0;
}

.styled-block-2.block-lg .block-right .content-wrapper .img-container {
    max-width: 42.5em;
}

.styled-block-2.block-lg .block-right .content-wrapper .img-wrapper {
    margin-left: 0.3125em;
    margin-right: 0.3125em;
    margin-bottom: 1em;
}

.styled-block-2.block-sm .block-right .content-wrapper .img-wrapper img {
    height: 7.1875em;
}

.styled-block-2.block-sm .block-right .content-wrapper .img-wrapper .wording {
    font-size: 5.11em;
}

.styled-block-2.block-md .block-right .content-wrapper .img-wrapper img,
.styled-block-2.block-lg .block-right .content-wrapper .img-wrapper img {
    height: 4.6875em;
}

.styled-block-2.block-md .block-right .content-wrapper .img-wrapper .wording,
.styled-block-2.block-lg .block-right .content-wrapper .img-wrapper .wording {
    font-size: 3.33em;
}

.styled-block-3 {
    position: relative;
    overflow: hidden;
}

.styled-block-3.open .block-left .block-btn,
.styled-block-3.open .block-left .block-btn.auto-width {
    color: #fafafa;
    background-color: #d25f32;
}

.styled-block-3.open .block-left .block-btn .top-title {
    color: #fafafa;
}

.styled-block-3.open .block-right .major-btn {
    display: none;
}

.styled-block-3.open .block-right .btn-container {
    display: inline-block;
}

.styled-block-3.open .block-right .wording-wrapper .wording {
    color: #d25f32;
}

.styled-block-3.open .block-right .toggle-btn-wrapper .toggle-btn {
    -webkit-transform: rotateZ(135deg);
    -moz-transform: rotateZ(135deg);
    -ms-transform: rotateZ(135deg);
    -o-transform: rotateZ(135deg);
    transform: rotateZ(135deg);
}

.styled-block-3 hr {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    border-top: 1px solid #deddcc;
}

.styled-block-3 .block-left {
    position: relative;
    float: left;
}

.styled-block-3 .block-left .block-btn {
    display: inline-block;
    width: 3em;
    padding: 0.7em 1em;
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.2em;
    vertical-align: bottom;
    color: #b3b19f;
    background-color: #ebeae2;
    border-radius: 9px;
    -webkit-transition: initial;
    -moz-transition: initial;
    -ms-transition: initial;
    -o-transition: initial;
    transition: initial;
}

.styled-block-3 .block-left .block-btn > img {
    display: block;
    width: auto;
    height: 1.2em;
    margin-left: auto;
    margin-right: auto;
    font-size: inherit;
    line-height: 1.2em;
}

.styled-block-3 .block-left .block-btn.auto-width {
    width: auto;
    min-width: 7.5em;
    min-height: 5em;
    padding: 1.25em 1em;
    text-align: left;
    letter-spacing: 1.7px;
    color: #726f51;
}

body.hasHover .styled-block-3 .block-left .block-btn:hover {
    color: #fafafa;
    background-color: #d25f32;
}

.styled-block-3 .block-left .block-btn .top-title {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    font-size: 0.7em;
    font-weight: 400;
    line-height: 1em;
    letter-spacing: 1px;
    color: #a4a288;
}

body.hasHover .styled-block-3 .block-left .block-btn:hover .top-title {
    color: #fafafa;
}

.styled-block-3 .block-right {
    position: relative;
    float: left;
    width: 38em;
    min-height: 6.25em;
    margin-left: 0.75em;
    padding: 1.25em;
}

.styled-block-3 .block-right .block-header {
    position: relative;
    overflow: hidden;
}

.styled-block-3 .block-right .block-content {
    display: none;
    text-align: left;
}

.styled-block-3 .block-right .block-content p {
    font-size: 0.875em;
    line-height: 1.42857em;
}

.styled-block-3 .block-right .block-content .block-content-detail {
    display: none;
}

.styled-block-3 .block-right .block-content .block-content-detail._shown {
    display: block;
}

.styled-block-3 .block-right .wording-wrapper {
    float: left;
    margin-left: 1.25em;
    text-align: left;
}

.styled-block-3 .block-right .wording-wrapper .wording {
    font-family: '思源宋體';
    font-size: 1.25em;
    line-height: 1.5em;
}

.styled-block-3 .block-right .btn-container {
    display: none;
    position: relative;
    float: right;
    overflow: hidden;
}

.styled-block-3 .block-right .btn-container .icon-btn {
    margin-left: 0.625em;
}

.styled-block-3 .block-right .icon-btn {
    display: inline-block;
    position: relative;
    float: left;
    width: 4.25em;
    height: 4.25em;
    /* width: 3.75em;
    height: 3.75em; */
    padding-left: 0.125em;
    padding-right: 0.125em;
    text-align: center;
    background-color: #f1f3ed;
    border-radius: 0.5em;
}

.styled-block-3 .block-right .icon-btn img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: 1em;
    margin: auto;
}

.styled-block-3 .block-right .icon-btn.with-title {
    padding-top: 2.5em;
    /* padding-top: 2.25em; */
    cursor: pointer;
}

.styled-block-3 .block-right .icon-btn.with-title>span {
    display: block;
    font-size: 12px;
    line-height: 1em;
    color: #b3b19f;
}

.styled-block-3 .block-right .icon-btn.with-title.active>span,
body.hasHover .styled-block-3 .block-right .icon-btn.with-title:hover>span {
    color: #d25f32;
}

.styled-block-3 .block-right .icon-btn.with-title img {
    bottom: 1em;
}

.styled-block-3 .block-right .icon-btn.with-title img+img {
    display: none;
}

.styled-block-3 .block-right .icon-btn.with-title.active img,
body.hasHover .styled-block-3 .block-right .icon-btn.with-title:hover img {
    display: none;
}

.styled-block-3 .block-right .icon-btn.with-title.active img+img,
body.hasHover .styled-block-3 .block-right .icon-btn.with-title:hover img+img {
    display: inline-block;
}

.styled-block-3 .block-right .toggle-btn-wrapper {
    position: relative;
    float: right;
    width: 4.25em;
    height: 4.25em;
    /* width: 3.75em;
    height: 3.75em; */
    margin-right: -1em;
}

.styled-block-3 .block-right .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;
}

.styled-block-3.no-block-left .block-right {
    margin-left: 0;
}

.styled-block-3.no-block-left .block-right .block-content {
    display: block;
}


/* -- Styled Nav -- */

ul.styled-nav {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: bottom;
    list-style-type: none;
}

ul.styled-nav>li {
    display: inline-block;
    position: relative;
    float: left;
}

ul.styled-nav>li>a {
    display: block;
    color: initial;
}

body.hasHover ul.styled-nav>li>a:hover,
ul.styled-nav>li>a:active {
    color: #d25f32;
}

ul.styled-nav-1 {
    position: relative;
    margin: 0;
    padding: 0 9em 7.5em 0;
    list-style: none;
    overflow: hidden;
}

ul.styled-nav-1 .link {
    position: absolute;
    right: 0;
    top: 1em;
    color: #d25f32;
    cursor: pointer;
}

ul.styled-nav-1 ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.styled-nav-1 li {
    position: relative;
    float: left;
}

ul.styled-nav-1 li>a/* ,
ul.styled-nav-1 li>a:visited */ {
    display: block;
    position: relative;
    color: #a4a288;
    -webkit-transition: initial;
    -moz-transition: initial;
    -ms-transition: initial;
    -o-transition: initial;
    transition: initial;
    /* -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; */
}


/* 專科解釋tab */

ul.styled-nav-1 li.active>a,
body.hasHover ul.styled-nav-1 li:hover>a {
    color: #d25f32;
}

ul.styled-nav-1>li {
    position: initial;
    margin-right: 2.5em;
    margin-bottom: 1em;
    padding-bottom: 1em;
}

ul.styled-nav-1>li ._underline {
    position: relative;
    top: 3em;
    height: 4px;
}

ul.styled-nav-1>li ._underline::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100vw;
    right: -100vw;
    height: 100%;
    margin: auto;
    background-color: #cccab6;
}


/* ul.styled-nav-1 > li ~ li ._underline::before {
    display: none;
} */

ul.styled-nav-1>li ._underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 0;
    height: 100%;
    margin: auto;
    background-color: #d25f32;
    z-index: 1;
}

ul.styled-nav-1>li.active ._underline::after,
ul.styled-nav-1>li._hover ._underline::after,
body.hasHover ul.styled-nav-1>li:hover ._underline::after {
    width: 100%;
}


/* ul.styled-nav-1 > li::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100vw;
    right: -100vw;
    height: 4px;
    margin: auto;
    background-color: #cccab6;
} */


/* ul.styled-nav-1 > li ~ li::before {
    display: none;
} */


/* ul.styled-nav-1 > li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 0;
    height: 4px;
    margin: auto;
    background-color: #d25f32;
}

ul.styled-nav-1 > li.active::after,
ul.styled-nav-1 > li:hover::after {
    width: 100%;
} */

ul.styled-nav-1>li>a {
    font-size: 2em;
    line-height: 1em;
    letter-spacing: 1.8px;
    color: #726f51;
}

ul.styled-nav-1>li.active>a,
ul.styled-nav-1>li._hover>a,
body.hasHover ul.styled-nav-1>li:hover>a {
    color: #d25f32;
}

ul.styled-nav-1>li>ul {
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 7.5em;
}

ul.styled-nav-1>li>ul._shown {
    display: block;
}

ul.styled-nav-1>li>ul>li {
    margin-right: 1.5em;
    margin-bottom: 0.25em;
}

ul.styled-nav-1>li>ul>li>a {
    float: left;
    padding-bottom: 0.5em;
    font-size: 1.125em;
    line-height: 1.5em;
    letter-spacing: 1.5px;
}

ul.styled-nav-1>li>ul>li>a::after,
ul.styled-nav-1>li>ul>li>ul>li>a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 0.39em;
    height: 0.39em;
    margin: auto;
    background-color: #d25f32;
    border-radius: 0.195em;
    opacity: 0;
}

ul.styled-nav-1>li>ul>li.active>a::after,
body.hasHover ul.styled-nav-1>li>ul>li:hover>a::after,
ul.styled-nav-1>li>ul>li>ul>li.active>a::after,
body.hasHover ul.styled-nav-1>li>ul>li>ul>li:hover>a::after {
    opacity: 1;
}

ul.styled-nav-1>li>ul>li>ul {
    overflow: hidden;
}

ul.styled-nav-1>li>ul>li>ul::before,
ul.styled-nav-1>li>ul>li>ul::after {
    content: '(';
    float: left;
    padding-left: 0.5em;
    line-height: 1.6875em;
    color: #a4a288;
}

ul.styled-nav-1>li>ul>li>ul::after {
    content: ')';
    padding-left: 0;
}

ul.styled-nav-1>li>ul>li>ul>li {
    padding: 0 0.5em;
}

ul.styled-nav-1>li>ul>li>ul>li>a {
    padding-bottom: 0.5625em;
    line-height: 1.6875em;
}

ul.styled-nav-2 {
    display: none;
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.styled-nav-2._shown {
    display: block;
}

ul.styled-nav-2 ul {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0.5em auto 0;
    padding: 0.5em;
    font-size: 13px;
    list-style: none;
    background-color: #fafafa;
    border-radius: 4px;
    z-index: 1;
    overflow: hidden;
}

ul.styled-nav-2 li {
    float: left;
    padding: 10px;
}

ul.styled-nav-2 .with-child {
    position: initial;
}

ul.styled-nav-2 li>a/* ,
ul.styled-nav-2 li>a:visited */ {
    display: block;
    position: relative;
    color: #a4a288;
}

ul.styled-nav-2 li.active>a {
    color: #d25f32;
}

ul.styled-nav-2 .with-child>a {
    padding-right: 18px;
}

ul.styled-nav-2 .with-child>a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: #cccab6 transparent transparent transparent;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

ul.styled-nav-2 .with-child.active>a::after {
    border-color: #d25f32 transparent transparent transparent;
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    -ms-transform: rotateZ(90deg);
    -o-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

ul.styled-nav-2 .with-child.active ul {
    display: block;
}

ul.styled-nav-2 .with-child ul>li.active>a {
    color: #d25f32;
}


/* -- Styled Tab -- */

.styled-tab-container>.title {
    margin-bottom: 1em;
    line-height: 1.125em;
    letter-spacing: 1.1px;
    color: #726f51;
}

.styled-tab-container>.title img {
    float: left;
    width: auto;
    height: 1.125em;
    margin-right: 0.3125em;
}

ul.styled-tab-1 {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: bottom;
    overflow: hidden;
}

ul.styled-tab-1 li {
    position: relative;
    float: left;
    margin-right: 1em;
    margin-bottom: .4em;
    padding: 1.0625em 0.9375em;
    border: 1px solid #b3b19f;
    cursor: pointer;
}

body.hasHover ul.styled-tab-1 li:hover {
    border-color: #d25f32;
}

ul.styled-tab-1 a>li>div,
ul.styled-tab-1 a>li>div:visited {
    display: block;
    position: relative;
    line-height: 1em;
    letter-spacing: 1px;
    color: initial;
    overflow: hidden;
}

body.hasHover ul.styled-tab-1 a>li:hover>div {
    color: #d25f32;
}

ul.styled-tab-1 a>li>div::before {
    content: '';
    display: inline-block;
    float: left;
    width: 1em;
    height: 1em;
    line-height: 1em;
    border: 1px solid #b3b19f;
    border-radius: 0.5em;
}

ul.styled-tab-1 a>li>div::after {
    content: '';
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.1875em;
    width: 0.625em;
    height: 0.625em;
    margin: auto;
    background-color: #d25f32;
    border-radius: 0.3125em;
}

ul.styled-tab-1 a>li.active>div::before {
    border-color: #d25f32;
}

ul.styled-tab-1 a>li.active>div::after {
    display: inline-block;
}

ul.styled-tab-1 a>li>div>span {
    display: inline-block;
    float: left;
    margin-left: 0.625em;
}

ul.styled-tab-2 {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    vertical-align: bottom;
    background: #f1f3ed;
    overflow: hidden;
}

ul.styled-tab-2 > li {
    float: left;
    min-width: 6.5em;
    margin: 1.5em 0;
    margin-left: 2.5em;
    margin-right: 2.5em;
}

ul.styled-tab-2 > li ~ li {
    margin-left: 0;
}

ul.styled-tab-2 > li > a {
    display: block;
    font-size: 1.25em;
    line-height: 1.5em;
    letter-spacing: 1.1px;
    color: #726f51;
    box-shadow: 0 0 1px transparent;
    -webkit-transform: perspective(1px) translateZ(0);
    -moz-transform: perspective(1px) translateZ(0);
    -ms-transform: perspective(1px) translateZ(0);
    -o-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
}

ul.styled-tab-2 > li.active > a {
    color: #d25f32;
}

ul.styled-tab-2 > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    margin: auto;
    background: #d25f32;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

body.hasHover ul.styled-tab-2 > li > a:hover::after,
ul.styled-tab-2 > li > a:active::after,
ul.styled-tab-2 > li > a:focus::after,
ul.styled-tab-2 > li.active > a::after,
ul.styled-tab-2 > li > a.active::after {
    width: 100%;
}


/* -- Styled Order List -- */

ol.styled-ol {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

ol.styled-ol li {
    counter-increment: item;
    margin-bottom: 12px;
    padding-left: 28px;
    font-size: 14px;
    line-height: 20px;
}

ol.styled-ol li::before {
    content: counter(item);
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: -28px;
    margin-right: 8px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: #a4a288;
    border: 1px solid #a4a288;
    border-radius: 10px;
}


/* -- Styled Heading -- */

.styled-heading-1 {
    margin-bottom: 3em;
    text-align: center;
}

.styled-heading-1>.inner {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    overflow: hidden;
}

.styled-heading-1 p {
    font-size: 0.875em;
}

.styled-heading-1 .icon {
    float: left;
    width: auto;
    height: 3em;
    margin-right: 1em;
}

.styled-heading-1 .heading-wrapper {
    float: left;
}

.styled-heading-1 .heading-wrapper .heading {
    font-family: '思源宋體';
    font-size: 2.25em;
    line-height: 1em;
    letter-spacing: 2px;
    text-indent: 2px;
}

.styled-heading-1.heading-color-1 .heading-wrapper .heading {
    color: #a4a288;
}

.styled-heading-1 .sub-heading-wrapper {
    padding-top: 0.5em;
    clear: both;
}

.styled-heading-1 .dots-container {
    position: relative;
    width: 100%;
    height: 0.75em;
    overflow: hidden;
}

.styled-heading-1 .dots-container .dot {
    display: inline-block;
    position: relative;
    float: left;
    width: -webkit-calc(2.25em + 2px);
    width: -moz-calc(2.25em + 2px);
    width: calc(2.25em + 2px);
    height: 100%;
}

.styled-heading-1 .dots-container .dot::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 3px;
    height: 3px;
    margin: auto;
    background-color: #d25f32;
    border-radius: 50%;
}

.styled-heading-1.heading-color-1 .dots-container .dot::after {
    background-color: #a4a288;
}

.styled-heading-1 .dots-container .dot._empty::after {
    visibility: hidden;
}

.styled-heading-1.size-sm {
    margin-bottom: 1.25em;
}

.styled-heading-1.size-sm .heading-wrapper .heading {
    font-size: 1.5em;
}

.styled-heading-1.size-sm .dots-container .dot {
    width: -webkit-calc(1.5em + 2px);
    width: -moz-calc(1.5em + 2px);
    width: calc(1.5em + 2px);
}

.styled-heading-1.size-md .heading-wrapper .heading {
    font-size: 1.75em;
}

.styled-heading-1.size-md .dots-container .dot {
    width: -webkit-calc(1.75em + 2px);
    width: -moz-calc(1.75em + 2px);
    width: calc(1.75em + 2px);
}

.styled-heading-1.size-lg .heading-wrapper .heading {
    font-size: 2.25em;
}

.styled-heading-1.size-lg .dots-container .dot {
    width: -webkit-calc(2.25em + 2px);
    width: -moz-calc(2.25em + 2px);
    width: calc(2.25em + 2px);
}

.styled-heading-2 {
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 1px solid #cccab6;
}

.styled-heading-2>p {
    line-height: 1.5em;
    color: #726f51;
}

.styled-heading-2 .heading-lg {
    font-size: 1.75em;
    line-height: 1em;
    letter-spacing: 2px;
    color: #d25f32;
}

.styled-heading-2 .heading-sm {
    font-size: 1.5em;
    line-height: 1em;
    letter-spacing: 1.5px;
    color: #d25f32;
}


/* -- Styled Timeline -- */

.styled-timeline-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.styled-timeline-container._fixed {
    position: fixed;
    left: 0;
    right: 0;
    background-color: #f1f3ed;
    z-index: 100;
}

.pseudo-styled-timeline-container {
    position: relative;
    width: 100%;
}

.styled-timeline-1 {
    position: relative;
    width: 100%;
    padding-bottom: 1.3125em;
}

.styled-timeline-1 .line {
    position: relative;
    width: 100%;
    height: 1px;
    background-color: #726f51;
}

.styled-timeline-1 .line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100vw;
    width: 100vw;
    height: 100%;
    background-color: #726f51;
}

.styled-timeline-1 .line::after {
    content: '';
    display: inline-block;
    position: absolute;
    right: 0;
    top: -0.5em;
    width: 1em;
    height: 1em;
    margin: 1px auto 0;
    vertical-align: bottom;
    border-right: 1px solid #726f51;
    border-top: 1px solid #726f51;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.styled-timeline-1 .dots-group {
    position: relative;
    margin: -1em auto 0;
    line-height: 1em;
    text-align: center;
}

.styled-timeline-1 .dots-group .wrapper {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
}

.styled-timeline-1 .dots-group .dot {
    display: inline-block;
    position: relative;
    float: left;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    margin: 0 1.125em;
    cursor: pointer;
}

.styled-timeline-1 .dots-group .dot::before {
    content: '';
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    margin: auto;
    background-color: #d25f32;
    border-radius: 50%;
}

.styled-timeline-1 .dots-group .dot::after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    height: 8px;
    margin: auto;
    background-color: #726f51;
    border-radius: 50%;
}

.styled-timeline-1 .dots-group .dot.active::before,
body.hasHover .styled-timeline-1 .dots-group .dot:hover::before {
    display: inline-block;
}

.styled-timeline-1 .dots-group .dot.active::after,
body.hasHover .styled-timeline-1 .dots-group .dot:hover::after {
    background-color: #fafafa;
}

.styled-timeline-1 .dots-group .dot .dot-wording {
    position: absolute;
    left: -50%;
    right: -50%;
    bottom: -1.5em;
    margin: auto;
    font-size: 0.875em;
    line-height: 1.5em;
    text-align: center;
    white-space: nowrap;
    color: #726f51;
}

.styled-timeline-1 .dots-group .dot.active .dot-wording,
body.hasHover .styled-timeline-1 .dots-group .dot:hover .dot-wording {
    color: #d25f32;
}


/* -- Styled Card -- */

.card-container {
    position: relative;
    overflow: hidden;
}

.card-container .card {
    float: left;
}

.card-container.no-float .card {
    float: none;
}

.bordered-card {
    border-radius: 0.5em;
    margin-left: auto;
    margin-right: auto;
}

.card-container>.inner,
.bordered-card>.inner {
    position: relative;
    overflow: hidden;
}

.styled-card-video {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.styled-card-video .video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
}

.styled-card-video .video-container iframe {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
}

.styled-card-0 {
    position: relative;
    width: 100%;
    margin-bottom: 1em;
    text-align: center;
    cursor: pointer;
}

.styled-card-0>.inner {
    position: relative;
    margin: 0 5px 5px auto;
    padding: 0.375em 0.375em 1.5em;
    background-color: #ebeae2;
    box-shadow: 1px 1px 20px 0 #ebeae2, 1px 1px 3px 0 rgba(122, 122, 119, 0.23);
    overflow: hidden;
}

.styled-card-0>.inner.white-bg {
    background-color: #fff;
}

.styled-card-0 .label-img {
    float: left;
    width: 1.5em;
    height: auto;
}

.styled-card-0 .main-content {
    position: relative;
    clear: both;
}

.styled-card-0 .main-content .sub-wording {
    font-size: 0.75em;
    line-height: 2em;
    color: #52534b;
}

.styled-card-0 .wording-wrapper {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
}

.styled-card-0 .wording-wrapper .wording {
    font-size: 2em;
    line-height: 1em;
    letter-spacing: 2px;
    text-indent: 2px;
}

.styled-card-0 .wording-wrapper .dots-container {
    position: relative;
    width: 100%;
    height: 0.75em;
    overflow: hidden;
}

.styled-card-0 .wording-wrapper .dots-container .dot {
    display: inline-block;
    position: relative;
    float: left;
    width: -webkit-calc(2em + 2px);
    width: -moz-calc(2em + 2px);
    width: calc(2em + 2px);
    height: 100%;
}

.styled-card-0 .wording-wrapper .dots-container .dot::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 3px;
    height: 3px;
    margin: auto;
    background-color: #d25f32;
    border-radius: 50%;
}

.styled-card-1 {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.styled-card-1>.inner {
    position: relative;
    padding: 2.5em 1.25em;
    overflow: hidden;
}

.styled-card-1 .main-img {
    display: block;
    width: 60%;
    max-width: 10em;
    height: auto;
    margin: auto;
}

.styled-card-1 .title {
    margin: 0.75em auto;
    font-size: 1.5em;
    line-height: 1.5em;
    letter-spacing: 3px;
    text-indent: 3px;
    text-align: center;
    color: #d25f32;
}

.styled-card-1 .description {
    font-size: 1em;
    letter-spacing: 2px;
    line-height: 1.5em;
    text-align: justify;
}

.styled-card-2 {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.styled-card-2>.inner {
    position: relative;
    margin-bottom: 2em;
    overflow: hidden;
}

.styled-card-2 .main-img-wrapper {
    display: inline-block;
    position: relative;
    float: left;
    width: 17.5em;
    padding-top: 11.25em;
    overflow: hidden;
}

.styled-card-2 .main-img-wrapper .main-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    margin: auto;
}

.styled-card-2 .main-content {
    display: inline-block;
    float: left;
    width: -webkit-calc(100% - 17.5em);
    width: -moz-calc(100% - 17.5em);
    width: calc(100% - 17.5em);
    padding-left: 2em;
}

.styled-card-2 .main-content .title {
    height: 1.5em;
    margin: 0 auto 1.7em;
    font-size: 1.25em;
    line-height: 1.5em;
    color: #d25f32;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}

.styled-card-2 .main-content .date {
    height: 1.25em;
    font-size: 1em;
    line-height: 1.25em;
    color: #595957;
}

.styled-card-2 .main-content .description {
    height: 6em;
    font-size: 1em;
    line-height: 1.5em;
    text-align: justify;
    overflow: hidden;
}

.styled-card-3 {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.styled-card-3>.inner {
    position: relative;
    padding: 2.5em 1.5em;
    overflow: hidden;
}

.styled-card-3 .main-img-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%;
}

.styled-card-3 .main-img-wrapper .main-img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    max-width: 80%;
    max-height: 80%;
    margin: auto;
}

.styled-card-3 .main-img {
    display: block;
    width: 60%;
    height: auto;
    margin: auto;
}

.styled-card-3 .title {
    margin: 0 auto 1em;
    font-size: 1.25em;
    line-height: 1.5em;
    color: #d25f32;
}

.styled-card-3 .description {
    font-size: 1em;
    line-height: 1.5em;
}

.styled-card-4 {
    position: relative;
    width: 100%;
    text-align: center;
    color: initial;
    background-color: #fafafa;
    overflow: hidden;
}

.styled-card-4>.inner {
    position: relative;
    padding: 1.5em 1.25em;
    overflow: hidden;
}

.styled-card-4 .left-title {
    position: relative;
    float: left;
    width: 2.5em;
    padding-right: 1.5em;
    font-size: 12px;
    line-height: 1.5em;
    color: #d25f32;
}

.styled-card-4 .left-title::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2px;
    margin: 1.25em auto;
    background-color: #d25f32;
}

.styled-card-4 .half-block {
    position: relative;
    float: right;
    width: -webkit-calc((100% - 12px * 2.5) * 0.5);
    width: -moz-calc((100% - 12px * 2.5) * 0.5);
    width: calc((100% - 12px * 2.5) * 0.5);
    /* width: calc((100% - 1.875em) * 0.5); */
    padding: 1em 0.5em 0;
}

.styled-card-4 .half-block .block-title {
    font-size: 0.875em;
    line-height: 1em;
    color: #999894;
}

.styled-card-4 .half-block .block-content {
    font-size: 1.75em;
    line-height: 1.5em;
    padding-top: 0.25em;
}

.styled-card-4 .half-block .block-content img.wording-img {
    display: block;
    width: auto;
    height: 1em;
    margin: 0.25em auto;
}

.styled-card-5 {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    position: relative;
    width: 100%;
    text-align: center;
    color: initial;
    background-color: #ebeae2;
    overflow: hidden;
}

.styled-card-5>.inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 1em;
}

.styled-card-5 .content {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

.styled-card-5 .content .content-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.styled-card-5 .content .top-title {
    font-size: 0.875em;
    line-height: 1.5em;
}

.styled-card-5 .content .bottom-content {
    font-size: 1.125em;
    line-height: 1.5em;
}

.styled-card-6 {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.styled-card-6>.inner {
    position: relative;
    padding: 0 0.5em;
    overflow: hidden;
}

.styled-card-6 .main-img-wrapper {
    position: relative;
}

.styled-card-6 .main-img-wrapper .main-img {
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
}

.styled-card-6 .main-img-wrapper .play-btn>img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    height: auto;
    margin: auto;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

body.hasHover .styled-card-6 .main-img-wrapper:hover .play-btn>img {
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.styled-card-6 .title {
    margin: 1em auto 0;
    font-size: 1em;
    line-height: 1.5em;
    color: #d25f32;
}

.styled-card-7 {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.styled-card-7>.inner {
    position: relative;
    height: 100%;
    padding: 0 0 1em;
    background-color: #ebeae2;
    overflow: hidden;
}

body.hasHover .styled-card-7:hover>.inner {
    background-color: #fff;
}

.styled-card-7 .main-img {
    display: block;
    width: 100%;
    max-width: 12em;
    height: auto;
    margin: auto;
}

.styled-card-7 .title {
    margin: 0 auto 0.75em;
    color: #d25f32;
}

.styled-card-7 .content {
    position: relative;
    overflow: hidden;
}

.styled-card-7 .content.column-2 {
    width: 100vw;
    max-width: 100%;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 0;
    -webkit-column-gap: 0;
    column-gap: 0;
}

.styled-card-7 .content.column-2 .item-parent,
.styled-card-7 .content.column-2 .item-child {
    display: inline-block;
    width: 50vw;
    max-width: 100%;
    vertical-align: top;
}

.styled-card-7 .item-child-container {
    position: relative;
    overflow: hidden;
}

.styled-card-7 .item-parent,
.styled-card-7 .item-child {
    display: block;
    position: relative;
    width: 100%;
    padding: 0.6875em 0;
    line-height: 1em;
    text-align: center;
    color: #141414;
}

.styled-card-7 .item-child {
    padding: 0.5em 0;
    color: #726f51;
}

body.hasHover .styled-card-7 .item-parent:hover,
.styled-card-7 .item-parent:active {
    color: #d25f32;
    background-color: #ebeae2;
}

body.hasHover .styled-card-7 .item-child:hover,
.styled-card-7 .item-child:active {
    color: #d25f32;
    background-color: #ebeae2;
}

.styled-card-7 .item-parent>span,
.styled-card-7 .item-child>span {
    display: inline-block;
    position: relative;
    padding: 0 1.5em;
    font-size: 1.125em;
    line-height: 1.25em;
    /* line-height: 1em; */
    vertical-align: bottom;
    text-indent: 1.3px;
    letter-spacing: 1.3px;
}

.styled-card-7 .item-child>span {
    padding: 0 2em;
    font-size: 0.875em;
}

.styled-card-7 .item-parent.with-child>span::after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: #cccab6 transparent transparent transparent;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.styled-card-7 .item-parent.with-child.open>span::after {
    border-color: #d25f32 transparent transparent transparent;
    -webkit-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.styled-card-7 .item-parent.with-child.open + .item-child-container {
    height: auto;
}

.styled-card-7 .item-parent>span>img,
.styled-card-7 .item-child>span>img {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1em;
    height: auto;
    margin: auto;
}

body.hasHover .styled-card-7 .item-parent:hover>span>img,
body.hasHover .styled-card-7 .item-child:hover>span>img {
    display: inline-block;
}

.styled-card-8 {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.styled-card-8 hr {
    margin-top: 2.5em;
    margin-bottom: 1.5em;
    border-top: 1px solid #cccab6;
}

.styled-card-8>.inner {
    position: relative;
    padding: 2.5em 3.75em 5em;
    background-color: #ebeae2;
    border-radius: 0.5em;
    overflow: hidden;
}

.styled-card-8.no-background>.inner {
    background: none;
    border-radius: initial;
}

.styled-card-8 .card-heading {
    position: relative;
    margin-top: 1em;
    margin-bottom: 1.5em;
    padding-left: 1.35em;
    font-size: 2em;
    line-height: 1.5em;
    color: #d25f32;
}

.styled-card-8 .card-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1em;
    height: 1em;
    margin: auto;
    border: 1px solid #d25f32;
    border-radius: 0.5em;
}

.styled-card-8 .card-heading::after {
    content: '';
    position: absolute;
    left: 0.25em;
    top: 0;
    bottom: 0;
    width: 0.5em;
    height: 0.5em;
    margin: auto;
    border: 1px solid #d25f32;
    border-radius: 0.25em;
}

.styled-card-8 .content {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.styled-card-8 .content .full-block {
    position: relative;
    overflow: hidden;
}

.styled-card-8 .content .full-block .info-container {
    float: left;
    max-width: 12em;
    margin-right: 1.25em;
    padding: 1.25em;
    background-color: #ebeae2;
}

.styled-card-8 .content .full-block .info-container .info {
    font-size: 0.875em;
    line-height: 1.71em;
    color: #726f51;
}

.styled-card-8 .content .title-wrapper {
    margin-bottom: 1.5em;
}

.styled-card-8 .content .main-title {
    font-size: 1.375em;
    line-height: 1.5em;
    letter-spacing: 2px;
}

.styled-card-8 .content .sub-title {
    font-size: 0.875em;
    line-height: 1.5em;
    letter-spacing: 1.5px;
    color: #726f51;
}

.styled-card-8 .content .left-side {
    display: inline-block;
    float: left;
    width: 37.5%;
}

.styled-card-8 .content .right-side {
    display: inline-block;
    float: left;
    width: 62.5%;
    padding-left: 1.25em;
}

.styled-card-8 .content p img {
    display: block;
    width: 65%;
    margin: 0 auto;
}

.styled-card-9 {
    position: relative;
    color: initial;
    overflow: hidden;
}

.styled-card-9 * {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.styled-card-9 > .inner {
    position: relative;
    text-align: center;
    overflow: hidden;
}

.styled-card-9 .link {
    display: block;
    color: initial;
}

body.hasHover .styled-card-9 .link:hover {
    color: #d25f32;
}

.styled-card-9 .title {
    padding: 0.25em 0.5em;
    font-size: 1.125em;
    font-weight: 400;
    line-height: 1.5em;
    border-radius: 0.5em;
    background-color: #ebeae2;
}

body.hasHover .styled-card-9 .link:hover .title {
    background-color: #fafafa;
}

.styled-card-9 .main-img-wrapper {
    position: relative;
    margin-top: 0.625em;
    border-radius: 0.5em;
    background-color: #ebeae2;
    overflow: hidden;
}

.styled-card-9 .main-img-wrapper .main-img {
    width: 100%;
    height: auto;
}

.styled-card-9 .main-img-wrapper .img-filter-cover {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #726f51;
    opacity: 0.15;
}

.styled-card-9 .main-img-wrapper .download-btn {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #fafafa;
    opacity: 0;
}

body.hasHover .styled-card-9 .link:hover .main-img-wrapper .download-btn {
    opacity: 0.91;
}

.styled-card-9 .main-img-wrapper .download-btn > img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2.5em;
    height: auto;
    margin: auto;
}

.styled-card-10 .main-img-wrapper {
    position: relative;
    height: 100%;
    text-align: center;
}

.card-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.styled-card-10 .main-img-wrapper .download-btn>img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    height: auto;
    margin: auto;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.styled-card-10 .main-img-wrapper .download-btn>img {
    width: 30%;
}

body.hasHover .styled-card-10 .main-img-wrapper:hover .download-btn>img {
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.styled-card-10 {
    position: relative;
    width: 290px;
    float: left;
    margin-right: 45px;
    margin-bottom: 40px;
}

.styled-card-10:nth-child(3n) {
    margin-right: 0;
}

.styled-card-10:nth-child(3n+1) {
    clear: both;
}

.styled-card-10 .card-img-div {
    height: auto;
}

.styled-card-10 .card-img {
    width: 100%;
    height: auto;
}

.styled-card-10 .card-text {
    height: auto;
    margin-bottom: 0.5em;
    padding: 0.25em 0.5em;
    font-size: 1.125em;
    line-height: 1.5em;
    text-align: center;
    letter-spacing: 1.9px;
    color: #141414;
    background-color: #ebeae2;
    border-radius: 0.5em;
}


/* -- Styled Key (Keyboard) -- */

.styled-keys-container {
    position: relative;
    overflow: hidden;
}

.styled-key-1 {
    display: inline-block;
    float: left;
    margin-left: 1em;
    margin-top: 1em;
}

.styled-key-1>span {
    display: block;
    width: -webkit-calc(2em + 4px);
    width: -moz-calc(2em + 4px);
    width: calc(2em + 4px);
    padding: 0.5em;
    font-family: '思源宋體';
    font-size: 1.5em;
    line-height: 1em;
    color: initial;
    background-color: #f1f3ed;
    border: 2px solid transparent;
    border-radius: 0.25em;
    box-shadow: 1px 1px 20px 0 #ebeae2, 1px 1px 3px 0 rgba(122, 122, 119, 0.23);
    /* -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; */
}

.styled-key-1.white-key>span {
    background-color: #fafafa;
}

body.hasHover .styled-key-1:hover>span {
    border: 2px solid #d25f32;
}

.styled-key-1:focus>span {
    background-color: #e6e5dd;
    border: 2px solid transparent;
    box-shadow: inset 2px 1px 19px 0 #e1dfd8, inset 1px 1px 3px 0 rgba(122, 122, 119, 0.23);
}

.styled-key-2 {
    display: inline-block;
    float: left;
}

.styled-key-2>span {
    display: block;
    padding: 1em 0;
    font-size: 1em;
    line-height: 1em;
    text-align: center;
    color: initial;
    background-color: #f1f3ed;
    border: 2px solid transparent;
    border-radius: 0.25em;
    box-shadow: 1px 1px 20px 0 #ebeae2, 1px 1px 3px 0 rgba(122, 122, 119, 0.23);
}

body.hasHover .styled-key-2:hover>span {
    border: 2px solid #d25f32;
}

.styled-key-2:focus>span {
    background-color: #e6e5dd;
    border: 2px solid transparent;
    box-shadow: inset 2px 1px 19px 0 #e1dfd8, inset 1px 1px 3px 0 rgba(122, 122, 119, 0.23);
}

.styled-key-3 {
    display: inline-block;
    float: left;
}

.styled-key-3>span {
    display: block;
    width: -webkit-calc(4.5em + 4px);
    width: -moz-calc(4.5em + 4px);
    width: calc(4.5em + 4px);
    padding: 0.75em 0;
    font-size: 0.875em;
    line-height: 1em;
    color: #52534b;
    background-color: #f1f3ed;
    border: 2px solid transparent;
    border-radius: 0.25em;
    box-shadow: 1px 1px 20px 0 #ebeae2, 1px 1px 3px 0 rgba(122, 122, 119, 0.23);
}

.styled-key-3>span img {
    display: block;
    width: auto;
    height: 1em;
    margin: 0 auto 1em;
}

body.hasHover .styled-key-3:hover>span {
    border: 2px solid #d25f32;
}

.styled-key-3:focus>span {
    background-color: #e6e5dd;
    border: 2px solid transparent;
    box-shadow: inset 2px 1px 19px 0 #e1dfd8, inset 1px 1px 3px 0 rgba(122, 122, 119, 0.23);
}


/* -- Styled Button -- */
.styled-btn-container>.title {
    margin-bottom: 1em;
    line-height: 1.125em;
    letter-spacing: 1.1px;
    color: #a4a288;
}

.styled-btn-container>.title img {
    float: left;
    width: auto;
    height: 1.125em;
    margin-right: 0.3125em;
}

ul.styled-btn-group {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: bottom;
    overflow: hidden;
}

ul.styled-btn-group li {
    position: relative;
    float: left;
    margin-right: 1em;
    margin-bottom: 0.625em;
}

ul.styled-btn-group li>a,
ul.styled-btn-group li>a:visited {
    display: block;
    position: relative;
    padding: 1em 1.25em;
    line-height: 1em;
    letter-spacing: 1.2px;
    color: initial;
    border: 1px solid #b3b19f;
    overflow: hidden;
}

body.hasHover ul.styled-btn-group li:hover>a,
ul.styled-btn-group li:active>a {
    color: #d25f32;
    border-color: #d25f32;
}

button.styled-btn-1,
button.styled-btn-1:focus {
    display: inline-block;
    padding: 1em 0.5em;
    line-height: 1em;
    letter-spacing: 2px;
    text-indent: 2px;
    color: #d25f32;
    background-color: #fff;
    outline: none;
    border: 1px solid #d25f32;
    border-radius: 0;
}

body.hasHover button.styled-btn-1:hover {
    color: #fff;
    background-color: #d25f32;
}

button.styled-btn-1.inverted,
button.styled-btn-1.inverted:focus {
    color: #fff;
    background-color: #d25f32;
    border: 1px solid #d25f32;
}

body.hasHover button.styled-btn-1.inverted:hover {
    color: #d25f32;
    background-color: #fff;
}

a.styled-btn-2 {
    color: #726f51;
}

body.hasHover .styled-btn-2:hover {
    color: #d25f32;
}

.styled-btn-3 {
    background-color: #deddcc;
    font-size: 14px;
    letter-spacing: 2px;
    color: #726f51;
    padding: 10px 29px;
    margin: 0 auto;
}

.styled-btn-3,
.styled-btn-3:focus,
.styled-btn-3:visited,
body.hasHover .styled-btn-3:hover,
.styled-btn-3:active {
    color: #726f51;
}


/* -- Styled keyboard -- */

.styled-keyboard-container {
    display: none;
    text-align: center;
}

.styled-keyboard-container._open {
    display: block;
}


/* .styled-keyboard-container {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    z-index: 99999;
}

.styled-keyboard-container._open {
    display: block;
} */

.styled-keyboard-1 {
    display: inline-block;
    position: relative;
    padding-left: 8.1875em;
    padding-right: 8.1875em;
    padding-bottom: 2em;
    vertical-align: bottom;
}

.styled-keyboard-1>.inner {
    position: relative;
    padding: 1em;
    background-color: #ebeae2;
    border-radius: 0.5em;
    overflow: hidden;
}

.styled-keyboard-1 .text-btn {
    position: absolute;
    left: 8.1875em;
    bottom: 0;
    color: #d25f32;
    cursor: pointer;
}

.styled-keyboard-1 .circle-btn {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 2em;
    width: 4.5em;
    height: 4.5em;
    margin: auto;
    padding: 1em;
    font-size: 1.125em;
    line-height: 1.25em;
    text-align: center;
    vertical-align: bottom;
    background-color: #f1f3ed;
    box-shadow: 1px 1px 20px 0 #ebeae2, 1px 1px 3px 0 rgba(122, 122, 119, 0.23);
    border-radius: 2.25em;
    -webkit-transition: initial;
    -moz-transition: initial;
    -ms-transition: initial;
    -o-transition: initial;
    transition: initial;
}

.styled-keyboard-1 .circle-btn img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    height: auto;
    margin: auto;
}

.styled-keyboard-1 .circle-btn ._hover {
    opacity: 0;
}

body.hasHover .styled-keyboard-1 .circle-btn:hover {
    color: #fff;
    background-color: #d25f32;
}

body.hasHover .styled-keyboard-1 .circle-btn:hover img {
    display: none;
}

body.hasHover .styled-keyboard-1 .circle-btn:hover ._hover {
    opacity: 1;
}

.styled-keyboard-1 .keyboard-key {
    margin: 0;
}

.styled-keyboard-1 .keyboard-key._empty {
    height: -webkit-calc(3em + 2px * 2);
    height: -moz-calc(3em + 2px * 2);
    height: calc(3em + 2px * 2);
    cursor: default;
    pointer-events: none;
}

.styled-keyboard-1 .keyboard-key._empty>span {
    display: none;
}

.styled-keyboard-1 .keyboard-key~.keyboard-key {
    margin-left: 1.25em;
}

.styled-keyboard-1 .keyboard-label-container {
    float: left;
    padding: 0.25em 0 0 0.25em;
}

.styled-keyboard-1 .keyboard-label-container .keyboard-label {
    width: 1.75em;
    font-size: 1.125em;
    line-height: 1.5em;
    text-align: center;
    color: #d25f32;
    border: 1px solid #d25f32;
}

.styled-keyboard-1 .keyboard-keys-container {
    float: left;
    padding: 0 2em;
}

.styled-keyboard-1 .keyboard-keys-container .each-row:nth-child(2) {
    padding-left: -webkit-calc((1.5em + 2px) * 1);
    padding-left: -moz-calc((1.5em + 2px) * 1);
    padding-left: calc((1.5em + 2px) * 1);
}

.styled-keyboard-1 .keyboard-keys-container .each-row:nth-child(3) {
    padding-left: -webkit-calc((1.5em + 2px) * 2);
    padding-left: -moz-calc((1.5em + 2px) * 2);
    padding-left: calc((1.5em + 2px) * 2);
}

.styled-keyboard-1 .keyboard-keys-container .each-row:nth-child(4) {
    padding-left: -webkit-calc((1.5em + 2px) * 3);
    padding-left: -moz-calc((1.5em + 2px) * 3);
    padding-left: calc((1.5em + 2px) * 3);
}

.styled-keyboard-1 .keyboard-btns-container {
    float: left;
}

.styled-keyboard-1 .keyboard-btns-container .keyboard-key {
    width: 6.25em;
}

.styled-keyboard-1 .each-row {
    position: relative;
    padding: 0.25em;
    overflow: hidden;
}

.styled-keyboard-1 .each-row~.each-row {
    margin-top: 0.5em;
}

.styled-keyboard-2 {
    display: inline-block;
    position: relative;
    padding-left: 8.1875em;
    padding-right: 8.1875em;
    padding-bottom: 2em;
    vertical-align: bottom;
}

.styled-keyboard-2>.inner {
    position: relative;
    padding: 1em;
    background-color: #ebeae2;
    border-radius: 0.5em;
    overflow: hidden;
}

.styled-keyboard-2 .text-btn {
    position: absolute;
    left: 8.1875em;
    bottom: 0;
    color: #d25f32;
    cursor: pointer;
}

.styled-keyboard-2 .circle-btn {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 2em;
    width: 4.5em;
    height: 4.5em;
    margin: auto;
    padding: 1em;
    font-size: 1.125em;
    line-height: 1.25em;
    text-align: center;
    vertical-align: bottom;
    background-color: #f1f3ed;
    box-shadow: 1px 1px 20px 0 #ebeae2, 1px 1px 3px 0 rgba(122, 122, 119, 0.23);
    border-radius: 2.25em;
    -webkit-transition: initial;
    -moz-transition: initial;
    -ms-transition: initial;
    -o-transition: initial;
    transition: initial;
}

.styled-keyboard-2 .circle-btn img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    height: auto;
    margin: auto;
}

.styled-keyboard-2 .circle-btn ._hover {
    opacity: 0;
}

body.hasHover .styled-keyboard-2 .circle-btn:hover {
    color: #fff;
    background-color: #d25f32;
}

body.hasHover .styled-keyboard-2 .circle-btn:hover img {
    display: none;
}

body.hasHover .styled-keyboard-2 .circle-btn:hover ._hover {
    opacity: 1;
}

.styled-keyboard-2 .keyboard-key {
    margin: 0;
}

.styled-keyboard-2 .keyboard-key._empty {
    height: -webkit-calc(3em + 2px * 2);
    height: -moz-calc(3em + 2px * 2);
    height: calc(3em + 2px * 2);
    cursor: default;
    pointer-events: none;
}

.styled-keyboard-2 .keyboard-key._empty>span {
    display: none;
}

.styled-keyboard-2 .keyboard-key.styled-key-1>span {
    width: -webkit-calc(3em + 4px);
    width: -moz-calc(3em + 4px);
    width: calc(3em + 4px);
    padding: 1em 0;
    font-size: 1em;
}

.styled-keyboard-2 .keyboard-key~.keyboard-key {
    margin-left: 1.25em;
}

.styled-keyboard-2 .keyboard-label-container {
    float: left;
    padding: 0.25em 0 0 0.25em;
}

.styled-keyboard-2 .keyboard-label-container .keyboard-label {
    width: 1.75em;
    font-size: 1.125em;
    line-height: 1.5em;
    text-align: center;
    color: #d25f32;
    border: 1px solid #d25f32;
}

.styled-keyboard-2 .keyboard-keys-container {
    float: left;
    padding: 0 2em;
}

.styled-keyboard-2 .keyboard-keys-container~.keyboard-keys-container {
    padding-left: 1.25em;
}

.styled-keyboard-2 .keyboard-btns-container {
    float: left;
}

.styled-keyboard-2 .keyboard-btns-container .keyboard-key {
    width: 6.25em;
}

.styled-keyboard-2 .each-row {
    position: relative;
    padding: 0.25em;
    overflow: hidden;
}

.styled-keyboard-2 .each-row~.each-row {
    margin-top: 0.5em;
}

.styled-keyboard-3 {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
}

.styled-keyboard-3 .circle-btn {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 6.5em;
    width: 4.5em;
    height: 4.5em;
    margin: auto;
    padding: 1em;
    font-size: 1.125em;
    line-height: 1.25em;
    text-align: center;
    vertical-align: bottom;
    background-color: #f1f3ed;
    box-shadow: 1px 1px 20px 0 #ebeae2, 1px 1px 3px 0 rgba(122, 122, 119, 0.23);
    border-radius: 2.25em;
    -webkit-transition: initial;
    -moz-transition: initial;
    -ms-transition: initial;
    -o-transition: initial;
    transition: initial;
}

.styled-keyboard-3 .circle-btn img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    height: auto;
    margin: auto;
}

.styled-keyboard-3 .circle-btn ._hover {
    opacity: 0;
}

body.hasHover .styled-keyboard-3 .circle-btn:hover {
    color: #fff;
    background-color: #d25f32;
}

body.hasHover .styled-keyboard-3 .circle-btn:hover img {
    display: none;
}

body.hasHover .styled-keyboard-3 .circle-btn:hover ._hover {
    opacity: 1;
}


/* -- Table -- */

.table-rwd {}

tr.tr-only-hide {
    border-bottom: 1px solid #9b9b9b;
}

.table-rwd th,
.table-rwd td {
    text-align: center;
    vertical-align: middle !important;
    border: none !important;
}

table.table-fixed-width {
    table-layout: fixed;
}

.styled-table-1 {
    border-collapse: separate;
    border-spacing: 0 1em;
}

.styled-table-1 tbody > tr > th,
.styled-table-1 tbody > tr > td {
    text-align: center;
    vertical-align: middle;
    border: none;
}

.styled-table-1 tbody > tr > th {
    color: #9e9c80;
    text-align: left;
}

.styled-table-1 tbody > tr {
    background-color: #ebeae2;
    cursor: pointer;
}

body.hasHover .styled-table-1 tbody > tr:hover {
    background-color: #fafafa;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.styled-table-1 tbody > tr.tr-only-hide {
    background-color: rgba(0, 0, 0, 0);
    cursor: inherit;
}

body.hasHover .styled-table-1 tbody > tr:first-child:hover {
    background-color: rgba(0, 0, 0, 0);
}

.styled-table-1 tbody > tr > td {
    position: relative;
    padding: 25px 20px;
    font-size: 1.25em;
    line-height: 1.5em;
    text-align: left;
}

.styled-table-1 tbody > tr > td > img.wording-img {
    display: block;
    width: auto;
    height: 1em;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

.styled-table-1 tbody > tr > td:nth-child(1) {
    width: 3.5em;
}

.styled-table-1 tbody > tr > td:nth-child(2) {
    width: 12.25em;
}

.styled-table-1 tbody > tr > td:nth-child(3) {
    width: 12.25em;
}

.styled-table-1 tbody > tr > td:first-child {
    font-size: 0.875em;
    color: #9e9c80;
    text-align: center;
}

.styled-table-1 tbody > tr > td:not(:first-child)::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    margin: 15px auto;
    background-color: #b3b19f;
}

.styled-table-1 tbody > tr > td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.styled-table-1 tbody > tr > td:last-child {
    font-size: 0.875em;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.styled-table-2 tr th {
    padding: 1em 0 !important;
    color: #d25f32;
    font-weight: 400;
}

.styled-table-2 tr.tr-only-hide {
    border-bottom: none;
}

.styled-table-2 tr td {
    font-size: 0.875em;
    vertical-align: top !important;
}

.styled-table-2 tr td img {
    display: block;
    width: auto;
    height: 6.25em;
    margin: 0.75em auto 0;
}

.styled-table-3 {
    border-collapse: separate;
    border-spacing: 0.625em 0.5em;
}

.styled-table-3 tr th {
    color: #9e9c80;
    text-align: left;
}

.styled-table-3 tr.hidden-row td {
    padding: 0 !important;
}

.styled-table-3 tr.hidden-row .content-wrapper {
    display: none;
}

.styled-table-3 tr:not(:first-child) {
    background-color: #ebeae2;
    cursor: pointer;
}

body.hasHover .styled-table-3 tr:not(:first-child):hover {
    background-color: #fafafa;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.styled-table-3 tr td {
    position: relative;
    padding: 25px 20px !important;
    font-size: 1.25em;
    line-height: 1.5em;
    text-align: left;
}

.styled-table-3 tr td {
    border-radius: 8px;
}

.styled-table-4 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.styled-table-4 .each-row.row-header {
    margin-bottom: 1em;
    padding-bottom: 0.625em;
    border-bottom: 2px solid #cccab6;
}

.styled-table-4 .each-row~.each-row {
    margin-top: 1em;
}

/* .styled-table-4 .content-page:nth-child(2) .each-row:nth-child(1) {
    margin-top: 1em;
} */

.styled-table-4 .each-row.open:not(.row-header) .row-item-container .row-item .item-content {
    background-color: #fafafa;
}

.styled-table-4 .each-row.open .row-item-container .row-item .item-content.row-toggle-btn .icon-wrapper>div img {
    border-color: #d25f32;
    -webkit-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
}

.styled-table-4 .each-row .row-hidden-content {
    display: none;
    width: 47.8125em;
    max-width: 100%;
    margin-top: 0.625em;
    margin-left: auto;
    margin-right: 0;
    padding: 1.25em 1em;
    background-color: #fafafa;
    border-radius: 8px;
}

.styled-table-4 .each-row .row-hidden-content>.inner {
    position: relative;
    overflow: hidden;
}

.styled-table-4 .each-row .row-hidden-content hr {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    border-top: 1px solid #deddcc;
}

.styled-table-4 .each-row .row-hidden-content .wording-container {
    margin-bottom: 1.25em;
    padding-bottom: 1.25em;
    border-bottom: 2px solid #b3b19f;
}

.styled-table-4 .each-row .row-hidden-content .wording-container .wording {
    font-size: 1.25em;
    line-height: 1.2em;
    color: #d25f32;
}

.styled-table-4 .each-row .row-hidden-content .description {
    font-size: 0.875em;
}

.styled-table-4 .each-row .row-hidden-content .note {
    margin-top: 1em;
    font-size: 0.875em;
    line-height: 1em;
    letter-spacing: 1.1px;
    color: #726f51;
}

.styled-table-4 .each-row .row-hidden-content .link {
    display: block;
    position: relative;
    width: 100%;
    font-size: 0.875em;
    line-height: 1.5em;
    color: #141414;
    overflow: hidden;
}

.styled-table-4 .each-row .row-hidden-content .link~.link {
    margin-top: 0.25em;
}

body.hasHover .styled-table-4 .each-row .row-hidden-content .link:hover {
    color: #d25f32;
}

.styled-table-4 .each-row .row-hidden-content .link img {
    display: inline-block;
    float: left;
    width: auto;
    height: 1.5em;
    margin-right: 0.3125em;
}

.styled-table-4 .each-row .row-hidden-content .link span {
    display: inline-block;
    float: left;
}

.styled-table-4 .each-row .row-item-container {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    position: relative;
}

.styled-table-4 .each-row:not(.row-header) .row-item-container .row-item {
    position: relative;
    min-height: 5em;
}

.styled-table-4 .each-row .row-item-container .row-item~.row-item {
    margin-left: 0.625em;
}

.styled-table-4.row-style-1 .each-row .row-item-container .row-item:nth-child(1) {
    width: 3.125em;
    color: #9e9c80;
}

.styled-table-4.row-style-1 .each-row .row-item-container .row-item:nth-child(2) {
    width: 7.8125em;
}

.styled-table-4.row-style-1 .each-row .row-item-container .row-item:nth-child(3) {
    width: 43.4375em;
}

.styled-table-4.row-style-1 .each-row .row-item-container .row-item:nth-child(4) {
    width: 3.75em;
}

.styled-table-4.row-style-2 .each-row .row-item-container .row-item:nth-child(1) {
    width: 3.125em;
    color: #9e9c80;
}

.styled-table-4.row-style-2 .each-row .row-item-container .row-item:nth-child(2) {
    width: 7.8125em;
}

.styled-table-4.row-style-2 .each-row .row-item-container .row-item:nth-child(3) {
    width: 35.625em;
}

.styled-table-4.row-style-2 .each-row .row-item-container .row-item:nth-child(4) {
    width: 5.9375em;
}

.styled-table-4.row-style-2 .each-row .row-item-container .row-item:nth-child(5) {
    width: 5em;
}

.styled-table-4.row-style-3 .each-row .row-item-container .row-item:nth-child(1) {
    width: 3.125em;
    color: #9e9c80;
}

.styled-table-4.row-style-3 .each-row .row-item-container .row-item:nth-child(2) {
    width: 6.25em;
}

.styled-table-4.row-style-3 .each-row .row-item-container .row-item:nth-child(3) {
    width: 12.5em;
}

.styled-table-4.row-style-3 .each-row .row-item-container .row-item:nth-child(4) {
    width: 36.25em;
}

.styled-table-4 .each-row:not(.row-header) .row-item-container .row-item:nth-child(1) .item-content {
    font-size: 0.875em;
    padding: 1.75em 0;
    justify-content: center;
}

.styled-table-4.row-style-2 .each-row.row-header .row-item-container .row-item:nth-child(5) .item-content {
    padding: 0 0.5em;
}

.styled-table-4.row-style-2 .each-row:not(.row-header) .row-item-container .row-item:nth-child(4) .item-content {
    justify-content: center;
}

.styled-table-4.row-style-2 .each-row:not(.row-header) .row-item-container .row-item:nth-child(5) .item-content {
    justify-content: space-between;
}

.styled-table-4 .each-row.row-header .row-item-container .row-item .item-content {
    position: relative;
    width: 100%;
    padding: 0 0 0 0.9375em;
    color: #9e9c80;
}

.styled-table-4 .each-row:not(.row-header) .row-item-container .row-item .item-content {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 1.75em 0.9375em;
    line-height: 1.5em;
    letter-spacing: 1.2px;
    background-color: #ebeae2;
    border-radius: 8px;
}

.styled-table-4 .each-row:not(.row-header) .row-item-container .row-item .item-content img.wording-img {
    display: inline-block;
    width: auto;
    height: 1em;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    vertical-align: bottom;
}

.styled-table-4 .each-row:not(.row-header) .row-item-container .row-item .item-content::before {
    content: attr(data-th);
    display: none;
    position: absolute;
    left: 6px;
    top: 8px;
    font-size: 12px;
    line-height: 1em;
    vertical-align: bottom;
    color: #bebfbb;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}

body.hasHover .styled-table-4 .each-row:not(.row-header) .row-item-container:hover .row-item .item-content,
.styled-table-4 .each-row:not(.row-header) .row-item-container:active .row-item .item-content {
    background-color: #fafafa;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.styled-table-4 .each-row .row-item-container .row-item .item-content a {
    color: initial;
}

body.hasHover .styled-table-4 .each-row .row-item-container .row-item .item-content a:hover,
.styled-table-4 .each-row .row-item-container .row-item .item-content a:active {
    color: #d25f32;
}

.styled-table-4 .each-row.row-header .row-item-container .row-item .item-content .circle-wording {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    vertical-align: bottom;
    border: 1px solid #a4a288;
    border-radius: 1em;
    cursor: default;
}

.styled-table-4 .each-row.row-header .row-item-container .row-item .item-content .circle-wording {
    float: left;
}

.styled-table-4 .each-row.row-header .row-item-container .row-item .item-content .circle-wording~.circle-wording {
    float: right;
}

.styled-table-4 .each-row .row-item-container .row-item .item-content .circle-link {
    display: inline-block;
    position: relative;
    width: 1em;
    height: 1em;
    vertical-align: bottom;
    cursor: default;
    pointer-events: none;
}

.styled-table-4 .each-row .row-item-container .row-item .item-content .circle-link.active {
    cursor: pointer;
    pointer-events: initial;
}

.styled-table-4 .each-row .row-item-container .row-item .item-content .circle-link>span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid #b3b19f;
    border-radius: 50%;
}

.styled-table-4 .each-row .row-item-container .row-item .item-content .circle-link>span::before {
    content: attr(data-th);
    display: none;
}

.styled-table-4 .each-row .row-item-container .row-item .item-content .circle-link::before {
    content: '';
    display: none;
    position: absolute;
    left: -100vw;
    right: -100vw;
    top: 0;
    bottom: 0;
    width: 2.25em;
    height: 2.25em;
    margin: auto;
    background-color: #cccab6;
    border-radius: 1.125em;
}

body.hasHover .styled-table-4 .each-row .row-item-container .row-item .item-content .circle-link:hover::before {
    display: inline-block;
}

.styled-table-4 .each-row .row-item-container .row-item .item-content .circle-link.active>span {
    background-color: #d25f32;
    border-color: #d25f32;
}

.styled-table-4 .each-row .row-item-container .row-item .item-content.row-toggle-btn {
    cursor: pointer;
}

body.hasHover .styled-table-4 .each-row .row-item-container .row-item .item-content.row-toggle-btn:hover {
    background-color: #d25f32;
}

.styled-table-4 .each-row .icon-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1em;
    height: 1em;
    margin: auto;
}

.styled-table-4 .each-row .icon-wrapper>div img {
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 0.707em;
    height: 0.707em;
    margin: auto;
    vertical-align: bottom;
    cursor: pointer;
    -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;
}

.styled-table-4 .each-row .row-item-container .row-item table {
    width: 100%;
    height: 100%;
}

.styled-table-4 .each-row .row-item-container .row-item table td {
    position: relative;
    vertical-align: top;
}

.styled-table-4 .each-row .row-item-container .row-item table td.content-en {
    font-size: 0.8125em;
    line-height: 1.8em;
    letter-spacing: 0.5px;
}

.styled-table-4 .each-row .row-item-container .row-item table td:not(:first-child) {
    padding-left: 0.875em;
}

.styled-table-4 .each-row:not(.row-header) .row-item-container .row-item table td:not(:first-child)::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    margin: -0.75em auto;
    background-color: #b3b19f;
}

.styled-table-4 .each-row:not(.row-header) .row-item-container .row-item table td::before {
    content: attr(data-th);
    display: none;
    position: absolute;
    left: 6px;
    top: 8px;
    font-size: 12px;
    line-height: 1em;
    vertical-align: bottom;
    color: #bebfbb;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}

.js-definition-container-tw img {
    width: 19px;
}

.styled-table-5 {
    width: 100%;
}

.styled-table-5 tr th {
    padding: 1em 0;
    font-weight: 400;
    text-align: center;
    color: #d25f32;
}

.styled-table-5 tr.tr-only-hide {
    border-bottom: none;
}

.styled-table-5 tr td {
    font-size: 0.875em;
    text-align: center;
    vertical-align: top;
}

.styled-table-5 tr td img {
    display: block;
    width: auto;
    height: 6.25em;
    margin: 0.75em auto 0;
}


/* -- Form -- */