/*
@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: rgb(213,145,27);
    border-radius: 20px;
    min-width:280px;
    height:72px;
    line-height: 72px;
    text-align: center;
    font-size: 28px;
    letter-spacing: 0.1em;
    color:#656565;
    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:#656565;text-decoration: none;background: rgb(213,145,27);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:#656565;
    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 #656565;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:rgb(213,145,27);color:#656565;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:rgb(213,145,27);border-color:#656565;color:#656565;}
.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: rgb(213,145,27);
    border-radius: 10px;
    font-size: 28px;
    letter-spacing: 0.1em;
    margin-top: 50px;
    color:#656565;
    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: rgb(213,145,27);color:#656565;outline: none;box-shadow: none}
.custom-form .btn:focus{background: rgb(213,145,27);color:#656565;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: #9A5F42;
    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 rgb(213,145,27)05;
}

/*================================================
Pagination Custom CSS
=================================================*/
.custom-pagination .pagination{font-size: 28px;}
.custom-pagination .pagination li,
.custom-pagination .pagination li a{width:55px;height:55px;color:#656565;text-align: center;line-height: 55px;border-radius: 7px;}
.custom-pagination .pagination li{margin-right:10px;}
.custom-pagination .pagination li.active{background:rgb(213,145,27);color:#656565;}
.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: rgb(213,145,27);
    border-radius: 90px;
    padding:0 20px;
    height:56px;
    line-height: 56px;
    color:#656565 !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:rgb(213,145,27);font-size: 40px;}
.header-area .mobile  .dropdown-channel{margin:.25rem 1.5rem;display: none}

/*================================================
Footer Area CSS
=================================================*/
.footer-area{
    background:rgb(213,145,27);
    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{width:100%;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:#656565;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:rgb(213,145,27);}
.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:rgb(213,145,27);}
.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: #656565;
    background: rgb(213,145,27);
    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:rgb(213,145,27);
    padding:0;
    margin:0;
    flex-shrink: 0;
}
.cart-product-reduce i,.cart-product-increase i{
    color:#656565;
    font-size: 20px;
}
.cart-product-num > span{margin:0 20px;}
.cart-address{margin-top:130px;}
.cart-address-head{
    padding-left:24px;
    height:60px;
    background: rgb(213,145,27);
    border-radius: 10px;
    color:#656565;
    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: #656565;
    text-decoration: none;
}
.cart-address-head .new-btn:hover{color: #656565;}

.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 rgb(213,145,27);
    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: rgb(213,145,27);
    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:rgb(213,145,27);}
.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: rgb(213,145,27);
    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: rgb(213,145,27);
    border-radius: 10px;
    position: relative;
    color: #656565;
    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:#656565;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:rgb(213,145,27);
}
.account-user-address a, .account-user-address a:hover{color: #656565;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: rgb(213,145,27);
    border-radius: 10px;
    position: relative;
    color: #656565;
    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: #656565;
    text-decoration: none;
}
.address-list-area .title-bar .new-btn:hover{color: #656565;}
.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: #656565;
}
.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;
}