/*
@File: Maxon Template Styles

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

This files table contents are outlined below>>>>>

*******************************************
*******************************************

** - Default CSS
** - Default btn CSS
** - Section Title CSS
** - Preloader Area CSS
** - Top Header Area CSS
** - Middle Header Area CSS
** - Navbar Area CSS
** - Main Slider Area CSS
** - Main Banner Area CSS
** - Support Area CSS
** - Products Area CSS
** - Coming Soon Area CSS
** - Top Products Area CSS
** - Categories Area CSS
** - Newsletter Area CSS
** - Trending Products Area CSS
** - Blog Area CSS
** - Partner Area CSS
** - Work Area CSS
** - Testimonials Area CSS
** - Page Banner CSS
** - Story Area CSS
** - Mission Area CSS
** - Vision Area CSS
** - Fun Facts Area CSS
** - Team Area CSS
** - Gallery Area CSS
** - Compare CSS
** - Track Order CSS
** - My Account Area CSS
** - FAQ Area CSS
** - Terms of Service Area CSS
** - Privacy policy Area CSS
** - 404 Error Area CSS
** - Contact Info Area CSS
** - Contact Area CSS
** - Map Area CSS
** - Pagination Area CSS
** - Widget Sidebar CSS
** - Blog Details Area CSS
** - Shop Area CSS
** - Cart Area CSS
** - Wishlist Area CSS
** - Checkout Area CSS
** - Products Details Area CSS
** - Footer Area CSS
** - Copy Right Area CSS
** - Go Top CSS

*/


/*================================================
Default CSS
=================================================*/

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Prata&family=Roboto:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap");



html,
body {
    height: 100%;
    background: white !important;
}

body {
    padding: 0;
    margin: 0;
    font-family: PingFang SC, "Prata", serif;
    font-size: 16px;
}

a {
    text-decoration: none;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    color: #000;
}

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

button {
    outline: 0 !important;
}

i {
    line-height: normal;
}


img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #000;
    font-family: "Prata", serif;
    font-weight: bold;
}

.h1:last-child,
.h2:last-child,
.h3:last-child,
.h4:last-child,
.h5:last-child,
.h6:last-child,
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
    margin-bottom: 0;
}

.ellipsis {
    word-break: keep-all;
    /* 不换行 */
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis;
}


/*================================================
Default btn CSS
=================================================*/
.default-btn {
    cursor: pointer;
    background: #F4E7D7;
    border-radius: 20px;
    min-width: 280px;
    height: 72px;
    line-height: 72px;
    text-align: center;
    font-size: 28px;
    letter-spacing: 0.1em;
    color: #B78C76;
    font-family: 'PingFang HK';
    font-style: normal;
    font-weight: 500;
    text-decoration: none;
    word-break: keep-all;
    /* 不换行 */
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis;
}

.default-btn:hover {
    color: #B78C76;
    text-decoration: none;
    background: #F4E7D7;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.default-btn.btn-disabled {
    background: #9B9B9B;
    color: #FFFFFF;
}

.plus-btn-add-circle {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    line-height: 32px;
    text-align: center;
    color: white;
    font-size: 20px;
    background: #B78C76;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

.plus-btn-add-circle i {
    color: #fff;
    font-size: 20px;
}

/*================================================
Section Title CSS
=================================================*/
.section-title {
    font-weight: 500;
    font-size: 28px;
    letter-spacing: 0.1em;
    color: #000000;
    text-align: center;
    margin-bottom: 100px;
}

/*================================================
Radio CSS
=================================================*/
.input-radio {
    position: relative;
    display: flex;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #B78C76;
    box-sizing: border-box;
    padding: 1px;
}

.input-radio input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.input-radio input:checked+.input-radio-label {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #2E140F !important;
}

/*================================================
Form custom CSS
============================================*/
.custom-modal-style {}

.custom-modal-style .modal-header .close {
    opacity: 1;
}

.custom-modal-style .modal-header .close span {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1 !important;
    background: #F4E7D7;
    color: #B78C76;
    border-radius: 50%;
    opacity: 1;
    width: 32px;
    height: 32px;
    line-height: 32px;
    line-height: 32px;
    margin: 0;
    padding: 0;
}

.custom-modal-style .modal-content {}

.custom-modal-style .modal-footer .btn-primary {
    background: #F4E7D7;
    border-color: #B78C76;
    color: #B78C76;
}

.custom-modal-style .modal-footer .btn-primary:active {
    background: #2F1606;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/*================================================
Form custom CSS
=================================================*/
.custom-form input {
    background: none;
    color: #5B5B5B;
    font-size: 22px;
    padding: 10px 4%;
    border: 1px solid #C5C5C5;
    border-radius: 15px;
}

.custom-form input:focus {
    background: none;
    outline: none;
    box-shadow: none;
    border: 1px solid #C5C5C5;
}

.custom-form .btn {
    height: 60px;
    width: 100%;
    border: none;
    background: #fcb3fc;
    border-radius: 10px;
    font-size: 28px;
    letter-spacing: 0.1em;
    margin-top: 50px;
    color: #411b41;
    outline: none;
    box-shadow: none;
}

.custom-form .btn-primary.disabled,
.custom-form .btn-primary:disabled {
    color: #fff;
    background-color: #9B9B9B;
    border-color: #9B9B9B;
}

.custom-form .btn-primary.disabled:hover {
    background-color: #9B9B9B;
}

.custom-form .btn:hover {
    background: #facbfa;
    color: #864886;
    outline: none;
    box-shadow: none
}

.custom-form .btn:focus {
    background: #facbfa;
    color: #ab61b9;
    outline: none;
    box-shadow: none
}

.custom-form .form-group {
    margin-bottom: 18px;
}

.custom-form .btn-primary:not(:disabled):not(.disabled).active,
.custom-form .btn-primary:not(:disabled):not(.disabled):active,
.custom-form .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #facbfa;
    border-color: #9A5F42;
    outline: none;
    box-shadow: none;
}

.custom-form .btn-primary:not(:disabled):not(.disabled).active:focus,
.custom-form .btn-primary:not(:disabled):not(.disabled):active:focus,
.custom-form .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem #F4E7D705;
}

/*================================================
Pagination Custom CSS
=================================================*/
.custom-pagination .pagination {
    font-size: 28px;
}

.custom-pagination .pagination li,
.custom-pagination .pagination li a {
    width: 55px;
    height: 55px;
    color: #B78C76;
    text-align: center;
    line-height: 55px;
    border-radius: 7px;
}

.custom-pagination .pagination li {
    margin-right: 10px;
}

.custom-pagination .pagination li.active {
    background: #F4E7D7;
    color: #B78C76;
}

.custom-pagination .pagination li.disabled {
    color: gray;
}

.custom-pagination .pagination li a:hover {
    text-decoration: none
}

/*================================================
Dropdown Coustom CSS
=================================================*/
.dropdown-coustom {
    display: flex;
    width: 100%;
}

.dropdown-coustom .btn {
    width: 100% !important;
    border: 1px solid #C5C5C5;
    border-radius: 15px;
    padding: 14px 20px;
    color: #2D2D2D;
    font-weight: 400;
    margin: 0;
    /*font-size: 28px;*/
    font-size: inherit;
    text-align: left;
    background: none;
    display: flex;
    align-items: center;
}

.dropdown-coustom .btn:hover {
    background: none;
    color: #2D2D2D
}

.dropdown-coustom .btn-secondary:not(:disabled):not(.disabled).active,
.dropdown-coustom .btn-secondary:not(:disabled):not(.disabled):active,
.dropdown-coustom.show>.btn-secondary.dropdown-toggle {
    color: #2D2D2D !important;
    background-color: #fffaf4 !important;
    ;
    border: 1px solid #C5C5C5 !important;
}

.dropdown-coustom .dropdown-menu {
    width: 100%;
}

/*================================================
Middle Area CSS
=================================================*/


/*================================================
Common Flex CSS
=================================================*/
.flex {
    display: flex
}

.flex-y-center {
    display: flex;
    align-items: center
}

.flex-col {
    display: flex;
    flex-direction: column
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center
}

.flex-x-between {
    display: flex;
    justify-content: space-between
}

.flex-x-center {
    display: flex;
    flex-direction: column;
    align-items: center
}

/*================================================
Header Area CSS
=================================================*/
.header-area {
    width: 100%;
    padding-bottom: 6.746%;
    position: relative;
    min-height: 102px;
}

.header-area>div {
    width: 92%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 5%;
    margin-right: 3%;
}

.header-area .header-logo {
    height: 87.25%;
    min-height: 89px;
    margin-top: 0.529%;
    flex-shrink: 0
}

.header-area .header-logo img {
    height: 100%;
}

.header-area .header-optional {
    height: 100%;
    font-size: 26px;
    font-family: 'PingFang HK';
    font-style: normal;
    font-weight: 500;
    flex-grow: 1;
}

.header-area .header-optional>div {
    height: 100%;
    justify-content: flex-end
}

.header-area .header-optional-language {}

.header-area .header-optional-language .fa-globe {
    width: 30px;
    height: 30px;
    color: #000;
    font-size: 30px;
    margin-right: 23px;
}

.header-area .header-optional-language .header-langop {
    color: #000;
    margin-right: 12px;
    text-decoration: none
}

.header-area .header-optional-language .header-langop:last-child {
    margin-right: 0;
}

.header-area .header-optional-wishlist {
    letter-spacing: 0.1em;
    color: #000000;
    margin-left: 60px;
    text-decoration: none;
}

.header-area .header-optional-cart {
    letter-spacing: 0.1em;
    color: #000000;
    margin-left: 36px;
    text-decoration: none;
}

.header-area .header-optional-user-btn {
    margin-left: 26px;
    background: #F4E7D7;
    border-radius: 90px;
    padding: 0 20px;
    height: 56px;
    line-height: 56px;
    color: #B78C76 !important;
    font-size: 22px;
    letter-spacing: 0.1em;
    word-break: keep-all;
    /* 不换行 */
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis;
    text-decoration: none;
}

.header-area .header-optional-user-btn .flaticon-enter {
    margin-right: 3px;
    text-decoration: none;
}

.header-area .mobile {
    font-size: 30px;
    display: none
}

.header-area .mobile .header-langop:first-child {}

.header-area .mobile .header-langop {
    font-size: 30px;
    color: #000;
    margin-right: 12px;
}

.header-area .mobile .bi-justify {
    color: #362636;
    font-size: 40px;
}

.header-area .mobile .dropdown-channel {
    margin: .25rem 1.5rem;
    display: none
}

/*================================================
Footer Area CSS
=================================================*/
.footer-area {
    background: #f9a9f7;
    font-size: 24px;
    color: #656565;
    padding: 7.5% 5%;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-area>div {
    flex-shrink: 0;
    width: 50%;
}

.footer-area-logo-info {
    align-items: center;
    width: 60%;
}

.footer-area-logo-info-pic {
    width: 274px;
    /* height: 137px; */
    padding: 12px 23px;
    background: #fff;
    border-radius: 45px;
}

.footer-area-logo-info-pic img {
    height: 100%;
}

.footer-area-map {
    width: 294px;
}

.footer-area-link,
.footer-area-contact {
    align-items: center;
    width: 50%;
}

.footer-area-link span,
.footer-area-contact span {
    text-decoration: none
}

.footer-area-link a,
.footer-area-contact a {
    color: #656565;
    margin-bottom: 20px;
    text-decoration: none
}

.footer-area-link a:hover,
.footer-area-contact a:hover {
    color: #929292;
    text-decoration: none;
}

.footer-area-contact a img {}

.footer-area-contact-ico {
    width: 32px;
    overflow: hidden;
    margin-right: 12px;
}

.footer-gmap-canvas {
    position: relative;
    width: 100%;
    padding-bottom: 35%;
    background: #eee;
    overflow: hidden;
    background: none !important;
}

.footer-gmap-canvas>div {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

/*================================================
Middle Area CSS
=================================================*/
.middle-area {
    width: 80%;
}

/*================================================
Home Banner CSS
=================================================*/
.common-banner {
    position: relative;
    width: 100%;
    background: #fafafa;
    overflow: hidden;
    min-height: 76px;
}

.common-banner-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.3);
}

.common-banner-pic {
    position: relative;
    z-index: 0;
    width: 100%;
}

.common-banner-con {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.common-navbar {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 76px;
    justify-content: center;
    font-family: 'PingFang HK';
    font-style: normal;
    font-weight: 500;
}

.common-navbar-dark .common-navbar {
    background: #f9a9f7;
}

.common-navbar-item,
.common-navbar>a {
    font-size: 24px;
    color: #656565;
    margin-left: 4%;
    position: relative;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 1;
}

.common-navbar-item .common-navbar-dropdown {
    position: absolute;
    left: -20px;
    top: 0px;
    min-width: 260px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    display: none;
    z-index: 999;
}

.common-navbar-item:hover .common-navbar-dropdown {
    display: block
}

.common-navbar-item .common-navbar-dropdown>div {
    margin-top: 76px;
    background: white;
    border-radius: 10px;
    width: 100%;
    padding: 0 20px;
    padding-bottom: 20px;
    box-shadow: 0px 4px 4px 0px #0000001A;
}

.common-navbar-item .common-navbar-dropdown a {
    color: #656565;
    font-size: 22px;
    text-decoration: none;
    margin-top: 20px;
    border-bottom: 1px solid #E3E3E3;
    padding-bottom: 4%;
    padding-left: 2%;
}

.common-navbar>a:first-child {
    margin-left: 0;
}

.common-navbar a:hover,
.common-navbar-item:hover,
.common-navbar-item .common-navbar-dropdown:hover {
    color: #8E8E8E;
    text-decoration: none;
}

.common-banner-middle {
    position: relative;
    z-index: 1;
    flex-grow: 1;
    height: 0;
    color: #FFFFFF;
    flex-direction: column;
    font-family: 'PingFang HK';
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    letter-spacing: 0.1em;
}

.home-banner-middle-title {
    font-family: 'Gloock';
    font-size: 100px;
    letter-spacing: 0.1em;
    font-weight: 400;
}

.home-banner-middle-descript {
    font-size: 28px;
    letter-spacing: 0.1em;
}


/*================================================
Home Opening Times CSS
=================================================*/
.home-opening-times {
    margin: 6.5% 0;
    padding: 0 5%;
    font-family: 'Gloock';
    font-style: normal;
    font-weight: 400;
}

.home-opening-times-booking {
    width: 41%;
    flex-direction: column;
    font-family: 'PingFang HK';
    font-style: normal;
}

.home-opening-times-booking>span {
    font-size: 26px;
}

.home-opening-times-booking>span:nth-child(1) {
    letter-spacing: 0.080em;
    font-size: 36px;
    color: #000000;
    margin-bottom: 28px
}

.home-opening-times-booking>span:nth-child(2),
.home-opening-times-booking>span:nth-child(3) {
    font-size: 26px;
    color: #003731;
    margin-bottom: 14px;
}

.home-opening-times-booking .default-btn:hover {
    font-size: 30px;
}

.home-opening-times-pic {
    width: 47%;
    overflow: hidden;
    border-radius: 10px;
    background: #eee;
}

.home-opening-times-pic img {
    width: 100%;
}

/*================================================
Home Product Ad CSS
=================================================*/
.home-product-ad {
    padding: 0 5%;
    margin-bottom: 2%;
    font-family: 'Gloock';
    font-style: normal;
    font-weight: 400;
    flex-wrap: wrap;
}

.home-product-ad:hover {
    text-decoration: none
}

.home-product-ad:last-child {
    margin-bottom: 0
}

.home-product-ad-img {
    width: 40%;
    padding-bottom: 35%;
    overflow: hidden;
    position: relative;
    flex-shrink: 0
}

.home-product-ad-img img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.home-product-ad-txt {
    flex-grow: 1;
}

.home-product-ad-bd {
    align-self: stretch;
    width: 9%;
    border: 6px solid #D0D0D0;
}

.home-product-ad-txt>span:nth-child(1) {
    font-weight: 500;
    font-size: 22px;
    letter-spacing: 0.1em;
    color: #000000;
}

.home-product-ad-txt>span:nth-child(2) {
    font-size: 40px;
    letter-spacing: 0.1em;
    color: #003731;
    margin-top: 6%;
}

.home-product-ad-txt>span:nth-child(3) {
    font-size: 40px;
    letter-spacing: 0.1em;
    color: #003731;
    margin-top: 6%;
}

.home-product-ad-left .home-product-ad-bd {
    border-left: none;
}

.home-product-ad-left .home-product-ad-txt {
    margin-left: 6%;
    padding-left: 6%;
}

.home-product-ad-right {
    flex-direction: row-reverse
}

.home-product-ad-right>div:nth-child(1) {}

.home-product-ad-right>div:nth-child(2) {}

.home-product-ad-right>div:nth-child(3) {}

.home-product-ad-right .home-product-ad-bd {
    border-right: none;
}

.home-product-ad-right .home-product-ad-txt {
    margin-right: 20%;
    text-align: right;
}

/*================================================
Home Category CSS
=================================================*/
.home-category {
    margin-top: 10.5%;
    position: relative;
    width: 100%;
    padding-bottom: 61%;
}

.home-category>img {
    z-index: 1;
}

.home-category>div {
    z-index: 3
}

.home-category>img,
.home-category>div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.home-category .bgmask {
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
}

.home-category-title {
    font-size: 68px;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    text-align: center;
    padding-top: 6.0%;
    margin-bottom: 4%;
    font-family: 'Gloock';
    font-weight: 400;
}

.home-category-list {
    flex-grow: 1;
    height: 0;
    padding: 0 3%;
    overflow-y: auto;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.home-category-item {
    width: 50%;
}

.home-category-item a:hover {
    text-decoration: none
}

.home-category-item>div {
    margin: 0 9%;
    border-bottom: 1px solid #C2C2C2;
    padding-bottom: 2.6%;
}

.home-category-cover {
    position: relative;
    width: 17.85%;
    padding-bottom: 17.85%;
    overflow: hidden;
    border-radius: 50%;
}

.home-category-cover>div {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden
}

.home-category-cover>div img {
    width: 100%;
    height: 100%;
}

.home-category-name {
    margin-left: 16px;
    font-family: 'Gloock';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    color: #D0D0D0;
    flex-grow: 1;
    width: 0;
    word-break: keep-all;
    /* 不换行 */
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis;
}

.home-category-item>div a {
    font-family: 'Gloock';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: 0.1em;
    color: #D0D0D0;
}

/*================================================
About Content CSS
=================================================*/
.about-area {
    font-family: 'PingFang HK';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: 0.1em;
    color: #000000;
}

.about-content {
    font-weight: 400;
    color: #000000;
    word-break: break-all;
}

.about-content p {
    line-height: 39px;
}

/*================================================
Contact Area CSS
=================================================*/
.contact-area {
    margin-top: 10%;
    margin-bottom: 5%
}

.contact-area .section-title {
    font-size: 48px;
}

.contact-area>.flex-x-between {
    flex-wrap: wrap
}

.contact-white-box {
    background: #FFFEFC;
    border-radius: 10px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    width: 32%;
    padding-bottom: 18.6%;
    position: relative;
}

.contact-white-box div {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.contact-white-box .bx,
.contact-white-box .fa,
.contact-white-box .bi {
    font-size: 36px;
    margin-top: 13%;
}

.contact-tel,
.contact-time,
.contact-map {
    font-family: 'Gloock';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: 0.1em;
    color: #202020;
    padding: 0 6%;
    margin-top: 10%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.contact-time+span {
    font-size: 24px;
}

.contact-tel {}

.contact-time {}

/*================================================
Course Area CSS
=================================================*/
.course-area .section-title {
    margin-top: 5%;
    font-weight: 400;
    font-size: 40px;
    margin-bottom: 2%;
}

.course-area .course-content p {
    font-family: 'PingFang HK';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 39px;
    color: #000000;
}

.course-area .course-video {
    width: 100%;
    padding-bottom: 48%;
    position: relative;
    margin-bottom: 3%;
    background: #000;
}

.course-area .course-video div {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.course-area .course-video-control {
    background: rgba(0, 0, 0, .5);
    z-index: 3;
    display: none;
}

.course-area .course-video:hover .course-video-control {
    display: flex;
    align-items: center;
    justify-content: center
}

.course-area .course-item {
    margin-bottom: 5%;
}

.course-area .course-cover {
    width: 57%;
    min-width: 221px;
    padding-bottom: 35%;
    background: #eee;
    position: relative;
    margin-right: 8%;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
}

.course-area .course-cover>img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.course-area .course-info {
    flex-grow: 1;
    width: 0;
    padding-bottom: 35%;
    position: relative;
}

.course-area .course-info>div {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    font-size: 28px;
    color: #000000;
    justify-content: space-around;
    letter-spacing: 0.1em;
}

.course-area .course-name {
    margin-top: 0%;
}

.course-area .course-name,
.course-people {
    font-weight: 600;
}

.course-area .course-people {
    margin-top: 0%;
}

.course-area .course-date,
.course-price {
    font-weight: 400;
}

.course-area .course-price {
    margin-top: 7%;
}

.course-area .course-info .default-btn {
    margin-top: 7%;
}


/*================================================
Category Area CSS
=================================================*/
.category-area {
    padding: 0;
    margin-top: 5%;
    margin-bottom: 15%;
}

.category-area .category-list {
    width: 17%;
    flex-shrink: 0;
    font-family: 'PingFang HK';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0.1em;
    color: #5B5B5B;
    margin-right: 10%;
}

.category-area .category-list .category-headtitle {
    width: 92%;
    font-weight: 500;
    font-size: 28px;
    color: #000000;
    border-bottom: 1px solid #000000;
    padding-bottom: 3px;
}

.category-area .category-list .category-item {
    margin-top: 28px;
    color: #5B5B5B;
    word-break: keep-all;
    /* 不换行 */
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis;
}

.category-area .category-list .category-item:hover {
    color: #000;
    text-decoration: none
}

.category-area .category-list .category-item.on {
    color: #000;
}

.category-area .product-list {
    flex-grow: 1;
    width: 0;
}

.category-area .product-list .product-filter {
    align-items: center;
    margin-right: 3%;
}

.category-area .product-list .product-search {
    width: 42%;
    padding-bottom: 5.5%;
    position: relative;
}

.category-area .product-list .product-search>div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 20px;
    border: 1px solid #ced4da
}

.category-area .product-list .product-search .fa-search {
    font-size: 20px;
    margin-left: 5%;
    color: #aaa;
}

.category-area .product-list .product-search input {
    flex-grow: 1;
    width: 0;
    margin: 0 3%;
    font-size: 20px;
    outline: none;
    border: none;
    color: rgba(91, 91, 91, 1);
}

.category-area .product-item {
    margin-bottom: 8%;
}

.category-area .product-list>div:nth-child(2) {
    flex-wrap: wrap;
    align-items: flex-start;
}

.category-area .product-item:hover {
    text-decoration: none
}

@media only screen and (min-width: 1000px) {
    .category-area .product-item {
        width: 27.5%;
        margin-right: 8.7%;
        position: relative;
        font-size: 28px;
    }

    .category-area .product-item:nth-child(3n+3) {
        margin-right: 0
    }
}

.category-area .product-item .product-cover {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
}

.category-area .product-item .product-cover>img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.category-area .product-item .product-name-mask,
.category-area .product-item .product-name {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20%;
}

.category-area .product-item .product-name-mask {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

.category-area .product-item .product-name {
    color: #FFFFFF;
    display: flex;
}

.category-area .product-item .product-name span {
    flex-grow: 1;
    width: 0;
    padding: 0 2%;
    text-align: center;
}

.category-area .product-item .product-price {
    font-family: 'PingFang HK';
    font-style: normal;
    font-weight: 500;
    color: #000000;
    padding-top: 19px;
    text-align: center;
}

/*================================================
Product Area CSS
=================================================*/
.product-area {
    margin-top: 5%;
    width: 100%;
}

.product-area .product-cover {
    margin-right: 8%;
    width: 46%;
    padding-bottom: 40%;
    position: relative;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    overflow: hidden;
}

.product-area .product-cover>img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.product-area .product-info {
    flex-grow: 1;
    width: 0;
    font-family: 'PingFang HK';
    font-style: normal;
    color: #000000;
    font-weight: 500;
    font-size: 24px;
}

.product-area .product-info .add-cart-btn {
    margin-top: 28%
}

.product-area .product-title {
    margin-top: 5%;
    font-weight: 600;
    font-size: 36px;
}

.product-area .product-price,
.product-area .collect-btn i {
    font-weight: 500;
    font-size: 32px;
}

.product-type {
    margin-bottom: 3%;
}

.product-type>span:first-child {
    width: 20%;
}

.product-area .product-info .product-num {
    margin-top: 5%;
}

.product-area .product-info .product-sku {
    margin-top: 5%;
}

.product-detail {
    margin-top: 74px;
    margin-bottom: 400px;
    font-style: normal;
    letter-spacing: 0.1em;
    font-weight: 500;
    font-size: 24px;
    color: #2D2D2D;
}

.product-detail>span:first-child {
    font-weight: 500;
    font-size: 28px;
    margin-bottom: 30px;
    color: #000000;
}

/*================================================
Cart Area CSS
=================================================*/
.cart-area {
    margin-top: 50px;
    margin-bottom: 260px;
}

.cart-area-payment {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.cart-area-payment>div {
    position: relative;
    width: 100%;
    height: 100%;
}

.cart-area-payment .cart-area-payment-mask,
.cart-area-payment .cart-area-payment-body {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.cart-area-payment .cart-area-payment-mask {
    background: rgba(0, 0, 0, .5);
    z-index: 1;
}

.cart-area-payment .cart-area-payment-body {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-area-payment .cart-area-payment-body .cart-area-payment-option .cart-area-payment-other-tip {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 10%;
    overflow: auto;
}

.cart-area-payment .cart-area-payment-body .cart-area-payment-option .cart-area-payment-other-tip>div:nth-child(1) {
    margin-top: 13%;
    font-size: 18px;
}

.cart-area-payment .cart-area-payment-body .cart-area-payment-option .cart-area-payment-other-tip>div:nth-child(2) {
    margin-top: 5%;
    font-size: 16px;
    color: #4D4D4D;
    text-indent: 20px;
}

.cart-area-payment .cart-area-payment-body .cart-area-payment-option .cart-area-payment-other-tip>a {
    display: flex;
    align-items: center;
    font-size: 18px;
    flex-shrink: 0;
    justify-content: center;
    margin: 8% 0;
    color: #fff;
    width: 25%;
    height: 12%;
    background: #280D08;
    border-radius: 20px;
}

.cart-area-payment .cart-area-payment-body .cart-area-payment-option .cart-area-payment-other-tip>a img {
    width: 15%;
    margin-right: 8%;
}

.cart-area-payment .cart-area-payment-body .cart-area-payment-option {
    width: 800px;
    height: 380px;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.cart-area-payment .cart-area-payment-body .cart-area-payment-option a {
    text-decoration: none;
    color: #000000;
}

.cart-area-payment .cart-area-payment-body .cart-area-payment-option .cart-area-payment-close {
    position: absolute;
    display: flex;
    top: 5%;
    right: 5%;
}

.cart-area-payment .cart-area-payment-body .cart-area-payment-option .cart-area-payment-close a {
    transform: rotate(45deg);
    color: #F4E7D7;
}

.cart-area-payment .cart-area-payment-body .cart-area-payment-option .cart-area-payment-close .bi-plus-circle-fill {
    font-size: 40px;
}

.cart-area-payment .cart-area-payment-body .cart-area-payment-option .cart-area-payment-item {
    padding: 10px;
    height: 170px;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    font-weight: bold;
}

.cart-area-payment .cart-area-payment-body .cart-area-payment-option .cart-area-payment-item img {
    height: 60%;
}

.cart-area-payment .cart-area-payment-body .cart-area-payment-option .cart-area-payment-item:hover {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
}

.cart-area .cart-area-left {
    margin-left: 8.5%;
    margin-right: 2.3%;
    width: 55%;
}

.cart-area .cart-area-right {
    margin-right: 8.5%;
    flex-grow: 1;
    width: 0;
}

.cart-product-grid>div {
    flex-shrink: 0
}

.cart-product-grid>div:nth-child(1) {
    width: 80px;
}

.cart-product-grid>div:nth-child(2) {
    flex-grow: 1;
    width: 0;
}

.cart-product-grid>div:nth-child(3) {
    width: 15%;
}

.cart-product-grid>div:nth-child(4) {
    width: 14%;
    min-width: 110px;
}

.cart-product-grid>div:nth-child(5) {
    width: 18%;
}

.cart-uniPrice-750 {
    display: none;
    font-size: 12px;
}

.cart-product-head {
    font-size: 20px;
    color: #B78C76;
    background: #F4E7D7;
    border-radius: 10px;
    height: 60px;
    margin-bottom: 20px;
}

.cart-product-item {
    width: 100%;
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 32px;
}

.cart-product-del {
    width: 36px;
    height: 36px;
    border-radius: 36px;
    line-height: 36px;
    text-align: center;
    background: #E6E6E6;
    margin: 0;
    padding: 0;
    font-size: 16px;
}

.cart-product-del i {
    color: #000000;
    font-size: 16px;
    font-weight: bold;
}

.cart-product-cover {
    width: 114px;
    height: 114px;
    border-radius: 10px;
}

.cart-product-title {
    flex-grow: 1;
    width: 0;
    flex-wrap: wrap;
    margin-left: 31px;
    text-decoration: none;
    color: #7B7B7B;
    font-size: 16px;
}

.cart-product-title:hover {
    text-decoration: none;
}

.cart-product-title>span:first-child {
    color: #000;
    font-size: 24px;
    margin-bottom: 5px
}

.cart-product-price {}

.cart-product-reduce,
.cart-product-increase {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    line-height: 32px;
    text-align: center;
    color: white;
    font-size: 20px;
    background: #F4E7D7;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

.cart-product-reduce i,
.cart-product-increase i {
    color: #B78C76;
    font-size: 20px;
}

.cart-product-num>span {
    margin: 0 20px;
}

.cart-address {
    margin-top: 130px;
}

.cart-address-head {
    padding-left: 24px;
    height: 60px;
    background: #F4E7D7;
    border-radius: 10px;
    color: #B78C76;
    font-size: 20px;
}

.cart-address-head .new-btn {
    width: 180px;
    height: 40px;
    background: #FFFAF4;
    border-radius: 10px;
    margin-right: 28px;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.095em;
    color: #B78C76;
    text-decoration: none;
}

.cart-address-head .new-btn:hover {
    color: #B78C76;
}

.cart-address-list {
    padding-top: 14px;
}

.cart-address-item {
    margin: 0 24px;
    padding: 1.2% 0;
    padding-right: 3%;
    font-family: 'PingFang HK';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    color: #2D2D2D;
    border-bottom: 1px solid #8E8E8E;
    text-decoration: none;
}

.cart-address-item .fa-truck {
    margin-right: 5px;
}

.cart-address-item:hover {
    color: #2D2D2D;
    text-decoration: none;
}

.cart-address-item>div:nth-child(1) {
    color: #2E140F
}

.cart-address-item>div:nth-child(2)>.flex-col {
    justify-content: center;
    flex-grow: 1
}

.cart-address-default {
    color: #E3A23B;
    transform: translateX(9px);
}

.cart-address-item .input-radio {
    flex-shrink: 0
}

.cart-address-item .input-radio:hover {
    cursor: pointer
}

.cart-checkout,
.cart-freight {
    border: 1px solid #161616;
    border-radius: 10px;
    padding: 20px 17px;
    font-style: normal;
    font-size: 28px;
    letter-spacing: 0.1em;
    color: #000000;
}

.cart-checkout .dropdown-coustom {
    margin-top: 20px;
}

.cart-subtotal,
.cart-topay {
    font-size: 24px;
}

.cart-subtotal {
    margin-top: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #000000;
}

.cart-topay {
    margin-top: 25px;
}

.cart-checkout .default-btn {
    width: 180px;
    height: 52px;
    line-height: 52px;
    border-radius: 20px;
    font-size: 24px;
    margin-top: 78px;
    margin-bottom: 20px;
}

.cart-area .cart-freight {
    margin-top: 10%;
}

.cart-area .cart-freight .cart-freight-price {
    font-size: 22px;
    margin-top: 20%;
    color: rgb(188, 188, 188)
}

.cart-area .cart-freight .cart-freight-price .fa-truck {
    font-size: 80px;
}

.cart-area .cart-freight>input {
    padding: 12px 24px;
    font-size: 22px;
    margin-top: 4%;
    border: 1px solid #C5C5C5;
    border-radius: 15px;
    background: none;
}

/*================================================
Login CSS
=================================================*/
.login-form {
    width: 66%;
    margin-top: 5%;
    margin-bottom: 15%;
    font-family: 'PingFang HK';
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    color: #2D2D2D;
}

.login-form-head {
    font-size: 36px;
    margin-bottom: 48px;
}

.login-form-head>div span {
    height: 18px
}

.login-form-head>div span:first-child {
    width: 150px;
    border-bottom: 1px solid #854927
}

.login-form-head>div span:last-child {
    flex-grow: 1;
    width: 0;
    border-bottom: 1px solid #C5C5C5
}

.login-form .reg-btn {
    color: #854927;
}

.login-form .getpwd-btn {
    text-decoration-line: underline;
    color: #8E8E8E
}

.login-form .login-by-mobile {
    padding: 5% 0;
}

.login-form .login-by-mobile a {
    color: #2D2D2D;
    text-decoration: underline;
}

.register-agreement {
    margin-top: 6%;
    padding: 2% 1.5%;
    border: 1px solid #F4E7D7;
    border-radius: 10px;
    text-align: center;
}

/*================================================
Order Detail Area CSS
=================================================*/
.order-detail-area {
    margin-top: 5%;
    margin-bottom: 15%;
    font-family: 'PingFang HK';
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
}

.order-detail-area .title-bar {
    height: 60px;
    background: #F4E7D7;
    border-radius: 10px;
    position: relative;
    color: #FFFFFF;
}

.order-detail-area .title-bar .export-btn {
    color: #fff;
    position: absolute;
    right: 5%;
    top: 0;
    height: 60px;
    width: 25px;
}

.order-detail-area .content-box {
    background: white;
    border-radius: 10px;
    margin: 4px;
    color: #7B7B7B;
    font-size: 24px;
    padding: 26px;
}

.order-detail-area .order-no {
    font-size: 30px;
}

.order-detail-area .order-base {
    margin-top: 5%;
    flex-wrap: nowrap
}

.order-detail-area .order-base-column {
    flex-shrink: 0
}

.order-detail-area .order-base-column:nth-child(1) {
    width: 40%;
}

.order-detail-area .order-base-column:nth-child(2) {
    width: 30%;
    padding-right: 3%;
}

.order-detail-area .order-base-column>span:first-child {
    font-size: 32px;
    flex-shrink: 0;
    font-weight: bold;
    color: #000;
    margin-bottom: 30px;
}

.order-detail-area .order-base-column>div {
    margin-bottom: 20px;
}

.order-detail-area .order-base-column>div>span:first-child {
    flex-shrink: 0;
    align-self: flex-start
}

.order-product {
    margin-top: 30px;
}

.order-product .order-product-head>span:first-child {
    font-size: 32px;
    font-weight: bold;
    color: #000;
    flex-grow: 1
}

.order-product .order-product-head>span:nth-child(2) {
    font-size: 22px;
    margin-right: 22px;
}

.order-product .order-product-head>a,
.order-product .order-product-head>a i {
    color: #F4E7D7;
}

.order-product .table {
    margin-top: 30px;
    color: #7B7B7B
}

.order-product .table thead {
    font-size: 26px;
}

.order-product .table thead th {
    text-align: center
}

.order-product .table .product-cover {
    position: relative;
    width: 12%;
    padding-bottom: 10.4%;
}

.order-product .table .product-cover>div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.order-product .table .product-cover>div img {
    width: 100%;
    height: 100%;
}

.order-product .table .product-title,
.order-product .table .product-price,
.order-product .table .product-num,
.order-product .table .product-total {
    width: 22%;
    text-align: center
}

.order-product .table .product-total {
    color: red;
}

.order-total {
    margin-top: 30px;
    border-top: 1px solid #7B7B7B;
    padding-top: 35px;
}

.order-total .order-discount {
    width: 30%;
    text-align: right;
    margin-bottom: 50px;
}

.order-total .order-num {
    width: 20%;
    text-align: center;
}

.order-total .amount-paid {
    width: 30%;
    text-align: center;
}

.order-total .order-total-price {
    flex-grow: 1;
    text-align: right;
    margin-right: 4%;
    color: red;
}

/*================================================
Wishlist Area CSS
=================================================*/
.wishlist-area {
    width: 82%;
    margin-top: 50px;
}

.wishlist-area .title-bar {
    height: 60px;
    background: #F4E7D7;
    border-radius: 10px;
    position: relative;
    color: #FFFFFF;
    letter-spacing: 0.1em;
    padding-left: 24px;
}

.wishlist-area .wishlist-content {
    margin-top: 15px;
    margin-bottom: 425px;
    font-family: 'PingFang HK';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    color: #000000;
}

.wishlist-area .wishlist-content .wishlist-item {
    margin-bottom: 32px;
}

.wishlist-area .wishlist-content .product-del {
    width: 36px;
    height: 36px;
    border-radius: 36px;
    line-height: 36px;
    text-align: center;
    background: #E6E6E6;
    margin: 0;
    padding: 0;
    font-size: 16px;
    color: #000;
}

.wishlist-area .wishlist-content .product-grid>div {
    flex-shrink: 0
}

.wishlist-area .wishlist-content .product-grid>div:nth-child(1) {
    width: 80px;
}

.wishlist-area .wishlist-content .product-grid>div:nth-child(2) {
    flex-grow: 1;
    width: 0;
}

.wishlist-area .wishlist-content .product-grid>div:nth-child(3) {
    width: 50%;
}

.wishlist-area .wishlist-content .product-grid>div:nth-child(4) {
    width: 20%;
}

.wishlist-area .wishlist-content .product-cover {
    width: 114px;
    height: 114px;
    border-radius: 10px;
}

.wishlist-area .wishlist-content .product-title {
    flex-grow: 1;
    width: 0;
    flex-wrap: wrap;
    margin-left: 31px;
}

.wishlist-area .wishlist-content .product-grid>div:nth-child(4) a:hover {
    color: white;
    text-decoration: none
}

/*================================================
Promote Area CSS
=================================================*/
.promote-area {
    margin-top: 2.8%;
    margin-bottom: 5%;
}

.promote-item {
    width: 100%;
    padding-bottom: 38%;
    position: relative;
    margin-bottom: 5.5%;
    font-family: 'PingFang HK';
    font-style: normal;
    letter-spacing: 0.1em;
}

.promote-item>div {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #161616;
}

.promote-item .promote-pic {
    width: 66%;
    height: 100%;
}

.promote-item .promote-pic img {
    width: 100%;
    height: 100%;
}

.promote-item .promote-info {
    flex-grow: 1;
    height: 100%;
    position: relative;
    justify-content: center
}

.promote-item .promote-info .promote-info-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #161616;
    z-index: 1;
}

.promote-item .promote-info .promote-info-bg>div {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.promote-item .promote-info-bg .circle-i {
    position: relative;
}

.promote-item .promote-info-bg .circle-i.big {
    width: 25%;
    padding-bottom: 25%;
    margin-left: 8%;
    margin-top: 5%;
}

.promote-item .promote-info .circle-i.small {
    width: 15.4%;
    padding-bottom: 15.4%;
    margin-left: 72%;
    margin-top: 55%
}

.promote-item .promote-info .circle-i img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.promote-item .promote-title {
    word-break: keep-all;
    /* 不换行 */
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis;
}

.promote-item .promote-title,
.promote-item .promote-desc {
    position: relative;
    z-index: 2;
    font-weight: 500;
    font-size: 28px;
    color: #FFFFFF;
    margin: 0 20%;
    margin-bottom: 5%;
}

.promote-item .promote-title {
    font-size: 48px;
    margin-bottom: 4%;
}

.promote-item .promote-desc {
    padding-bottom: 5%;
    border-bottom: 1px solid #CBA644;
}

/*================================================
Order Area CSS
=================================================*/
.order-area {
    width: 82%;
    margin-top: 4%;
}

.order-area .title-bar {
    background: #F4E7D7;
    border-radius: 10px;
    position: relative;
    color: #B78C76;
    padding: 1.2% 0;
    padding-left: 24px;
}

.order-area .order-tabs {
    box-sizing: content-box;
    margin-top: 1.5%;
    font-size: 20px;
    height: 40px;
    line-height: 40px;
    padding-bottom: 0.5%;
    width: 50%;
    border-bottom: 1px solid #000000;
}

.order-area .order-tabs .order-tab-active {
    background: #F4ECEA;
    border-radius: 50px;
    text-align: center;
    padding: 0 6%;
}

.order-area .order-tabs a {
    color: #000;
    text-decoration: none;
    margin-right: 6%;
}

.order-area .order-content {
    margin-top: 3%;
    margin-bottom: 10%;
    font-family: 'PingFang HK';
    font-style: normal;
    font-size: 24px;
    color: #000000;
}

.order-area .order-content .order-item {
    margin-bottom: 3%;
}

.order-area .order-content .order-item .order-item-date {
    width: 16%;
    size: 20px;
}

.order-area .order-content .order-item .order-item-info {
    width: 45%;
    color: #B78C76;
    font-size: 24px;
    flex-shrink: 0
}

.order-area .order-content .order-item .order-item-pic {
    background: #eee;
    position: relative;
    width: 20%;
    padding-bottom: 20%;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 3%;
    flex-shrink: 0;
}

.order-area .order-content .order-item .order-item-pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.order-area .order-content .order-item .order-item-pic+div {
    justify-content: space-between;
    width: 100%;
}

.order-area .order-content .order-item .order-item-pic+div>div:first-child {
    width: 100%;
}

.order-area .order-content .order-item .order-item-title {
    font-size: 24px;
    flex-grow: 1;
    font-weight: 600;
}

.order-area .order-content .order-item .order-item-paystatus,
.order-area .order-content .order-item .order-item-voucher {
    color: #0C9823;
    font-size: 20px;
}

.order-area .order-content .order-item-action {
    flex-grow: 1;
    justify-content: flex-end
}


/*================================================
Account Area CSS
=================================================*/
.account-area {
    width: 79%;
    margin-top: 5%;
    margin-bottom: 8%;
    font-family: 'PingFang HK';
    font-style: normal;

}

.account-user {
    align-items: flex-start;
}

.account-user-avatar {
    margin-left: 12%;
    width: 20%;
    padding-bottom: 20%;
    position: relative;
}

.account-user-avatar>div {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

.account-user-avatar>div img {
    width: 100%;
    height: 100%;
}

.account-user-base {
    margin-left: 11%;
    flex-grow: 1;
    width: 0;
    align-self: stretch;
    justify-content: center;
    font-weight: 500;
    font-size: 24px;
}

.account-user-base .nickname {
    font-weight: 600;
    font-size: 36px;
}

.account-user-base .memberid {
    margin: 1.5% 0;
}

.account-user-base .integral {
    margin-top: 3%;
}

.account-user-base .integral>span:nth-child(1) {}

.account-user-base .integral>span:nth-child(2) {
    width: 1px;
    height: 22px;
    background: #666;
    margin: 0 3%;
}

.account-user-address {
    width: 218px;
    height: 50px;
    position: relative;
    font-weight: 400;
    font-size: 20px;
    color: #FFFAF4;

}

.account-user-address>div {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    background: #F4E7D7;
}

.account-user-address a,
.account-user-address a:hover {
    color: #B78C76;
    text-decoration: none;
}

.account-user-address .triangle-blank {
    position: relative;
    width: 22.93577%;
    padding-bottom: 22.93577%;
}

.account-user-address .triangle-blank>div {
    position: absolute;
    left: -68%;
    top: 0;
    width: 100%;
    height: 100%;
    background: white;
    transform: rotate(45deg);
}

.account-menus {
    margin-top: 5%;
    justify-content: space-between;
}

.account-menus>div {
    width: 31.7%;
    padding-bottom: 19%;
    position: relative;
    background: white;
    border-radius: 10px;
}

.account-menus>div>a {
    text-decoration: none
}

.account-menus>div>.flex-col {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

.account-menus i {
    font-size: 45px;
    color: #6A6A6A;
}

.account-menus i+span {
    font-weight: 600;
    font-size: 24px;
    color: #000000;
    margin-top: 22px;
}

.account-menus i+span+span {
    color: #6A6A6A;
    margin-top: 10px;
}

/*================================================
Address List Area CSS
=================================================*/
.address-list-area {
    width: 82%;
    margin-top: 50px;
}

.address-list-area .title-bar {
    height: 60px;
    background: #F4E7D7;
    border-radius: 10px;
    position: relative;
    color: #B78C76;
    letter-spacing: 0.1em;
    padding-left: 24px;
    justify-content: space-between;
}

.address-list-area .title-bar .new-btn {
    width: 180px;
    height: 40px;
    background: #FFFAF4;
    border-radius: 10px;
    margin-right: 28px;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.095em;
    color: #B78C76;
    text-decoration: none;
}

.address-list-area .title-bar .new-btn:hover {
    color: #B78C76;
}

.address-list-area .address-list-content {
    margin-top: 15px;
    margin-bottom: 20%;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    color: #000000;
    padding-top: 2.1%;
}

.address-list-area .address-list-item {
    margin-bottom: 5.3%;
}

.address-list-area .address-list-info {
    flex-grow: 1;
    margin-right: 10%;
}

.address-list-area .address-list-item .name,
.address-list-area .address-list-item .tel {
    margin-right: 5.6%;
    flex-shrink: 0
}

.address-list-area .address-list-item .address {
    margin-right: 3%;
}

.address-list-area .address-list-item .address+span {
    font-weight: 400;
    font-size: 18px;
    color: #E3A23B;
}

/*================================================
Address Area CSS
=================================================*/
.address-area {
    width: 82%;
    margin-top: 50px;
    letter-spacing: 0.1em;
    background: white;
    padding: 0px 10%;
    border-radius: 10px;
    margin-bottom: 200px;
    font-family: 'PingFang HK';
    font-style: normal;
}

.address-area .address-head {
    font-weight: 500;
    font-size: 24px;
    color: #000000;
    margin-top: 3.6%;
    margin-bottom: 2.4%;
}

.address-area .title-bar {
    height: 60px;
    background: #EEEEEE;
    border-radius: 10px;
    position: relative;
    font-size: 24px;
    color: #000000;
    padding: 7px 28px;
}

.address-area .address-form {}

.address-area .address-content {
    padding: 0 28px;
    font-size: 22px;
    color: #5B5B5B;
}

.address-area .address-content .form-group {
    padding: 0px 36px;
    margin-top: 2.6%;
}

.address-area .address-content .form-group.border {
    border: 1px solid #C5C5C5;
    border-radius: 15px;
}

.address-area .address-content .form-group label {
    flex-shrink: 0;
}

.address-area .address-content .form-group>div {
    flex-grow: 1;
    padding: 9px 0px;
}

.address-area .address-content .form-group input,
.address-area .address-content .form-group select {
    margin: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 22px;
    color: #202020;
}

.address-area .address-content .form-group .form-control {
    border: none;
}

.address-area .address-content .form-group .form-control:focus {
    box-shadow: none;
}

.address-area .address-content .take-offline .form-group {
    margin: 0 !important;
    margin-left: 40px !important;
    ;
    padding: 0 20px;
}

.address-area .address-content .take-offline .form-group select {
    color: #5B5B5B
}

.address-area .address-content .address-detail {
    justify-content: space-between
}

.address-area .address-content .address-detail .form-group label {}

.address-area .address-content .address-detail .form-group {
    margin-right: 0px;
}

/*================================================
Coupon Area CSS
=================================================*/
.coupon-area {
    width: 59%;
    margin-top: 3.2%;
    margin-bottom: 30%;
    font-family: 'PingFang HK';
    font-style: normal;
    letter-spacing: 0.1em;
    color: #000000;
}

.coupon-area .head-title {
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 16px;
}

.coupon-area .coupon-item {
    border: 1px solid #000000;
    border-radius: 10px;
    padding: 1.6% 2%;
    margin-bottom: 4%;
}

.coupon-area .coupon-item .cover-img {
    width: 17.7%;
    padding-bottom: 17.7%;
    position: relative;
    flex-shrink: 0;
}

.coupon-area .coupon-item .cover-img img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.coupon-area .coupon-item .info {
    margin-left: 4.4%;
    width: 0;
    flex-grow: 1;
}

.coupon-area .coupon-item .info>span {
    font-family: 'PingFang HK';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    color: #000000;
    word-break: keep-all;
    /* 不换行 */
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis;
}

.coupon-area .coupon-item .info>span:nth-child(1) {
    color: #4B4848;
    margin: 0% 0;
}

.coupon-area .coupon-item .info>span:nth-child(2) {
    font-weight: 500;
    font-size: 28px;
}

.coupon-area .coupon-item .info>span:nth-child(3) {
    color: #4B4848;
}

.coupon-area .coupon-item .info>span:nth-child(4) {
    font-size: 14px;
    margin: 1.3% 0;
}

.coupon-area .coupon-item .coupon-btn {
    align-items: flex-end;
    width: 20%;
}

.coupon-area .coupon-item .coupon-btn .default-btn {
    min-width: 100% !important;
    height: 52px;
    font-weight: 500;
    font-size: 24px;
    color: #B78C76;
}

.coupon-area .coupon-item .coupon-btn a:hover {
    text-decoration: none;
}

.coupon-area .coupon-item .coupon-desc {
    margin-top: 2%;
    font-size: 18px;
}

/*================================================
Course Detail Area CSS
=================================================*/
.course-detail-area {
    width: 55.5%;
    margin-top: 1.8%;
    margin-bottom: 7%;
    font-family: 'PingFang HK';
    font-style: normal;
}

.course-detail-area .course-pic {
    width: 100%;
    border-radius: 10px;
}

.course-detail-area .course-pic img {
    width: 100%;
}

.course-detail-area .course-info {
    font-family: 'Gloock';
    font-weight: 400;
    font-size: 28px;
    color: #000000;
    border-bottom: 1px solid #8E8E8E;
}

.course-detail-area .course-info .course-title {
    font-weight: 600;
    font-size: 32px;
    margin: 1.5% 0;
}

.course-detail-area .course-info>div {
    margin-bottom: 1.3%;
}

.course-detail-area .course-info-i {
    width: 4%;
    margin-right: 1%;
    flex-shrink: 0;
    text-align: center;
}

.course-detail-content {
    font-weight: 400;
    font-size: 24px;
}

.course-detail-content>div:nth-child(1) {
    margin: 4% 0 2% 0;
    font-size: 28px;
}

.course-detail-content>div:nth-child(2) {
    color: #2D2D2D;
}

/*================================================
Course Checkout Area CSS
=================================================*/
.course-checkout-area {
    width: 82.8%;
    margin-top: 5.6%;
    margin-bottom: 10%;
    font-family: 'PingFang HK';
    font-style: normal;
    letter-spacing: 0.1em;
    color: #000000;
    font-weight: 400;
}

.course-checkout-area .c-title {
    font-size: 40px;
}

.course-checkout-area .goback {
    margin-top: 4.6%;
    margin-bottom: 10px;
    font-size: 28px;
}

.course-checkout-area .goback i {
    margin-right: 25px;
}

.course-checkout-left,
.course-checkout-right {
    padding: 20px 0
}

.course-checkout-left {
    width: 51%;
    padding-right: 4.8%;
    border-right: 1px solid #8E8E8E;
    flex-shrink: 0
}

.course-checkout-left .i-text {
    border: 1px solid #C5C5C5;
    border-radius: 15px;
    padding: 16px 24px;
    font-family: 'Gloock';
    font-size: 28px;
    color: #2D2D2D;
    margin-top: 24px;
}

.course-checkout-right {
    margin-left: 4.8%;
}

.course-checkout-right .i-text {
    font-weight: 500;
    font-size: 32px;
    color: #000000;
    margin-bottom: 20px;
}

.course-checkout-right .i-text span {
    flex-shrink: 0
}

.course-checkout-right .dropdown-coustom {
    font-family: 'Gloock';
    font-size: 28px;
    color: #8E8E8E;
}

.course-checkout-right .total-price {
    font-weight: 600;
    font-size: 36px;
    color: #003731;
    text-align: right;
}

.course-checkout-btn {
    justify-content: flex-end;
    margin-top: 37px;
}

.course-checkout-btn .default-btn {}

.course-checkout-term {}

.course-checkout-term>div:nth-child(1) {
    font-size: 28px;
    margin-top: 5%;
    margin-bottom: 24px;
}

.course-checkout-term>div:nth-child(2) {
    font-size: 20px;
    color: #5B5B5B;
}

/*================================================
Course Order Log CSS
=================================================*/
.course-order-log {
    min-height: 100px;
}

.course-order-log .course-order-item {
    margin-bottom: 3%;
}

.course-order-log .course-order-item .course-cover {
    width: 56%;
    padding-bottom: 35%;
    flex-shrink: 0;
    margin-right: 8%;
    position: relative;
}

.course-order-log .course-order-item .course-cover img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.course-order-log .course-order-item .course-info {
    font-family: 'PingFang HK';
    font-style: normal;
    font-size: 28px;
    color: #000000;
    letter-spacing: 0.1em;
    flex-grow: 1;
    width: 0;
    position: relative;
    padding-bottom: 35%;
}

.course-order-log .course-order-item .course-info>div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: space-around;
}

.course-order-log .course-order-item .course-info .default-btn {
    width: 18% !important;
}

/*================================================
Course Order Detail CSS
=================================================*/
.course-order-detail {
    width: 82.8%;
    margin-top: 5.6%;
    margin-bottom: 10%;
    font-family: 'PingFang HK';
    font-style: normal;
    letter-spacing: 0.1em;
    color: #000000;
    font-weight: 400;
}

.course-order-detail .c-title {
    font-size: 40px;
    margin-bottom: 7%;
}

.course-order-detail .course-term>div:nth-child(1) {
    font-size: 28px;
    margin-top: 5%;
    margin-bottom: 24px;
}

.course-order-detail .course-term>div:nth-child(2) {
    font-size: 20px;
    color: #5B5B5B;
}

.course-order-detail-info .i-text {
    font-weight: 500;
    font-size: 32px;
    color: #000000;
    margin-bottom: 20px;
}

.course-order-detail-info .i-text span {
    flex-shrink: 0
}

.course-order-detail-info .total-price {
    font-weight: 600;
    font-size: 36px;
    color: #003731;
    margin-top: 3%;
}

.course-order-detail-info .discount {
    border: 1px solid #C5C5C5;
    border-radius: 15px;
    width: 40%;
    height: 67px;
    line-height: 67px;
    padding: 0 1.9%;
    font-family: 'Gloock';
    font-size: 28px;
    color: #8E8E8E;
    word-break: keep-all;
    /* 不换行 */
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis;
}