:root{
    --primary-color:#c49a38;
    --second-text-color:#65758B;
    --color-green:#00AF69;
    --color-red:#FF0036;
    --color-grey: #BBBBBB;
    --body-bg:#FFFFFF;
    --second-bg:#f9f9fa;
    --navbar-bg:rgba(255, 255, 255, 0.95);
    --sub-menu-bg:#FFFFFF;
    font-family:system-ui,Arial,sans-serif;
    font-size:14px;
    --container-width:1170px;
    --mobile-size:768px;
    --text-color:#000000;
    --navbar-height:53px;
    --navbar-line-color:rgba(0, 0, 0, 0.5);
    --bg-white:#FFFFFF;
    --body-spacing:13px;
    --shadow-color:rgba(0, 0, 0, 0.1);
    --text-desc-color:#65758B;
    --grid-bg-color:#FFFFFF;
    --grid-bg-line-color:rgba(0, 0, 0, 0.08);
    --gradient-bg:linear-gradient(-37.46deg, rgb(45, 222, 229) 10.005%, rgb(51, 111, 255) 97.405%);

    --white:#FFFFFF;
    --light-green:rgba(162, 236, 230, 0.06);
    --border-color:#E8E8D8;
    --gold:#c49a38;
    --gold-light: #dbb55a;

    --footer-height:50px;
    --border-2:#cdd3de;
    
}
:root[theme="dark"] {
  --body-bg: #000000;
  --second-text-color:#999999;
  --color-grey: #666666;
  --second-bg: #181818;
  --navbar-bg:rgba(20, 20, 20, 0.95);
  --sub-menu-bg:#181818;
  --text-color:#FFFFFF;
  --navbar-line-color:rgba(255, 255, 255, 0.38);
  --bg-white:#000000;
  --shadow-color:rgba(255, 255, 255, 0.16);
  --text-desc-color:#666666;
  --grid-bg-color:#111111;
  --grid-bg-line-color:rgba(255, 255, 255, 0.18);
  --gradient-bg:linear-gradient(-37.46deg, rgb(10, 10, 10) 10.005%, rgb(20, 20, 20) 97.405%);
  --border-color:#333333;
}

*{padding:0; margin:0; color:var(--text-color); -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
div{box-sizing:border-box; overflow:hidden;}
img{line-height:0; border-style:none;}
body{background-color:var(--body-bg); display:flex; flex-direction:column; min-height:100vh;}
.body-wrapper{flex:1; display:flex; flex-direction:column;}
a{text-decoration:none; color:var(--text-color);}
.under-line{text-decoration:underline;}
.second-bg{background-color:var(--second-bg);}
.container{width:100%; margin:0 auto; max-width:var(--container-width);}
iframe{border:0; margin:0; padding:0;}

/* flex */
.flex{display:flex;}
.row{flex-direction:row;}
.column{flex-direction:column;}
.wrap{flex-direction:row; flex-wrap:wrap;}
.nowrap{flex-direction:row; flex-wrap:nowrap;}
.justify-content-around{justify-content:space-around;}
.justify-content-between{justify-content:space-between;}
.justify-content-start{justify-content:flex-start;}
.justify-content-center{justify-content:center;}
.justify-content-end{justify-content:flex-end;}
.align-items-start{align-items:flex-start;}
.align-items-center{align-items:center;}
.align-items-end{align-items:flex-end;}
.flex1{flex:1;}
.flex0{flex-shrink:0;}

/* only */
.small-only{display:none;}
.large-only{display:block;}
.hide{display:none;}

/* text */
.text-center{text-align:center;}

/* text-color */
.text-primary{color:var(--primary-color) !important;}
.text-desc{color:var(--text-desc-color) !important;}
.text-second{color:var(--second-text-color) !important;}
.text-danger{color:var(--color-red) !important;}
.text-success{color:var(--color-green) !important;}
.text-white{color:var(--white) !important;}
.text-gold{color:#c49a38 !important;}
.gradient-text{background:linear-gradient(135deg, #a0b4ea 0%, var(--primary-color) 52%, #00e5cc 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 5s ease infinite}
@keyframes gradient-shift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}


/* background */
.bg-white, .-white-bg{background-color:var(--bg-white) !important;}
.bg-second, .second-bg{background-color:var(--second-bg) !important;}
.gradient-bg{background:var(--gradient-bg);}
.grid-bg {
    background-color:var(--grid-bg-color); 
    background-image:linear-gradient(to right, var(--grid-bg-line-color) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-bg-line-color) 1px, transparent 1px);
    background-size:30px 30px;
}
.diagonal-bg-45{
    background-color: var(--grid-bg-color);
    background-image: linear-gradient(135deg, transparent 49.5%, var(--grid-bg-line-color) 49.5%, var(--grid-bg-line-color) 50.5%, transparent 50.5%);
    background-size:15px 15px;
}
.diagonal-bg-small{
    background-size:10px 10px;
}

.section-card {background: #FFFFFF; border: 1px solid var(--border-color); border-radius:12px; animation: fadeUp 0.32s ease both;}
@keyframes fadeUp {
    0% {opacity:0; transform:translateY(12px);}
    100% {opacity:1; transform:translateY(0);}
}
.section-card .title{padding:20px; border-bottom:1px solid var(--border-color); display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between;}
.section-card .title .h5{display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center;}
.section-card .title .h5::before{content:""; width:15px; height:2px; background-color:var(--primary-color); margin-right:16px;}
.section-card .body{padding:20px; gap:20px;}

/* size */
.w-100{width:100%;}
.h-100{height:100%;}
.space-h{height:25px;}
.space-h-large{height:60px;}
.padding{padding:var(--body-spacing);}
.bold{font-weight:bold;}
.bolder{font-weight:bolder;}

/* rounded */
.rounded{border-radius:6px;}
.rounded-lg{border-radius:12px;}
.rounded-circle{border-radius:50%;}

/* text-size */
.h1{font-size:56px !important;}
.h2{font-size:46px !important;}
.h3{font-size:38px !important;}
.h4{font-size:30px !important;}
.h5{font-size:20px !important;}
.h6{font-size:14.5px;}

/* layout */
.main-area{flex:1; margin-left:25px;}

/* center dialog */
.center-dialog{width:500px; padding:25px; margin:0 auto; margin-bottom:100px;}
.center-dialog .content{font-size:14.5px; line-height:1.6em; margin-top:3px; padding:10px 20px; padding-left:38px;}
.center-dialog .foot{margin-top:10px; display:flex; flex-direction:row; justify-content:space-between; align-items:center;}

/* pendant */
.pendant{width:44px; border-radius:6px; position:fixed; right:var(--body-spacing); bottom:80px; z-index:8;}
.pendant .item{width:44px; cursor:pointer; margin-bottom:10px; background-color:var(--primary-color);}
.pendant .item:last-child{margin-bottom:0;}
.pendant .item i{display:block; width:100%; line-height:44px; background-color:var(--primary-color); color:#FFFFFF; text-align:center; font-size:26px;}
.pendant .item span{display:block; width: 100%; line-height:22px; text-align:center; font-size:10px;}
.pendant .item:hover{background-color:var(--primary-color);}

/* button */
.button{display:flex; cursor: pointer;
    user-select: none;
    flex-direction:row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    color: #FFFFFF;
    background:var(--primary-color);
    border:none;
    padding:10px 15px;
    font-size:14.5px;
    line-height:20px;
    border-radius:6px;
    outline:none;
    opacity:0.92;
    transition: all 0.2s;
}
.button:hover{opacity:1;}
.button .iconfont, .button .bicon{font-size:18px; line-height:20px; color:#FFFFFF; font-style: normal;}
.button span{color:#FFFFFF; font-size:15px; line-height:20px; display:block; padding:0 6px;}
.button-small{padding:8px 10px;}
.button-small .iconfont, .button .bicon{font-size:16px;}
.button-small span{font-size:14px; line-height:20px;}
.button-large{padding:15px 25px; font-size:16px; line-height:20px;}
.button-outline{background-color:transparent; border:1px solid rgba(255, 255, 255, 0.15); color:rgba(255, 255, 255, 0.6);}
.button-outline *{color:rgba(255, 255, 255, 0.6) !important;}
.button-outline:hover{border-color:rgba(255, 255, 255, 0.3);}
.button-outline:hover, .button-outline:hover *{color:rgba(255, 255, 255, 0.8) !important;}

.btn-success{background-color:#069E61;}
.btn-loading{animation:button-breath 1.2s infinite;}
@keyframes button-breath{0%, 100% {background-color: rgba(3, 124, 7, 0.8); } 50% { background-color: rgba(3, 124, 7, 1);}}

/* tag */
.tag{color:#8896ae;
    background:#F5F6F8;
    border:1px solid #e2e6ed;
    border-radius: 100px;
    padding:6px 11px;
    font-size:12.5px;
    letter-spacing: 0.02em;}

/* table */
.table-wrap{width:100%; overflow-x:auto;}
.table{width:100%; border-top:1px solid var(--border-color); border-left:1px solid var(--border-color); padding:0; border-collapse: collapse;}
.table th{padding:12px 18px; font-size:14px; line-height:20px; text-align:left; background-color:var(--second-bg); border-bottom:1px solid var(--border-color); border-right:1px solid var(--border-color); font-weight:600;}
.table td{padding:12px 18px; font-size:14px; line-height:20px; text-align:left; border-bottom:1px solid var(--border-color); border-right:1px solid var(--border-color); background:var(--bg-white);}

/* loadMore */
.load-more{display:flex; flex-direction:row; justify-content:center; align-items:center; margin-top:18px; cursor:pointer;}
.load-more-body{background-color:#00AF6955; padding:5px 12px 6px 12px; border-radius:20px; display:flex; flex-direction:row; justify-content:center; align-items:center;}
.load-more-body > .loading-icon{color:var(--color-green); display:none; font-size:16px; width:20px; height:20px; text-align:center; line-height:20px;}
.load-more-body > span{font-size:12.2px; line-height:20px; padding:0 6px; color:var(--color-green);}
.load-empty{display:none; flex-direction:column; justify-content:center; align-items:center; padding:35px 0px; width:100%; border-radius:10px;}
.load-empty > .load-empty-icon{margin-bottom:15px; width:120px; height:120px; background-color:var(--second-bg); border-radius:50%; text-align:center; line-height:120px;}
.load-empty > .load-empty-icon i{font-size:38px; color:var(--color-grey);}
.load-empty > .load-empty-text *{font-size:14.5px; line-height:1.8em; color:var(--color-grey); text-align:center; padding:10px 0;}
.load-empty > .load-empty-text a{color:var(--primary-color);}
.load-empty > .load-empty-text a *{color:var(--primary-color);}

/* 旋转动画 */
@keyframes rotate360{0% { transform: rotate(0deg); }100% { transform: rotate(360deg);}}
.rotate360{animation:rotate360 1.2s linear infinite;}
@keyframes breath{0%, 100% { opacity: 1; }50% { opacity: .5; }}
.animation-breath{animation:breath 1.2s infinite;}


/* 水波纹效果横向扩展 */
.water-ripple-horizontal{position:relative;}
.water-ripple-horizontal::after{content:"";display:block;position:absolute;width:0;height:100%;top:0;left:0;bottom:0;background:rgba(255,255,255,.1);background-repeat:no-repeat;opacity:1;}
.water-ripple-horizontal:active::after{animation:animate-width-group 100ms ease-in forwards;}
.water-ripple-scale{position:relative;}
.water-ripple-scale::after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;bottom:0;background:rgba(255,255,255,0.2);background-repeat:no-repeat;transform:scale(0);}
.water-ripple-scale:active::after{transform: scale(3.6); transition: 1.2s;}
@keyframes animate-breathe{0%{opacity:0;}25%{opacity:1;}50%{opacity:0;}75%{opacity:.8;}100%{opacity:1;}}
@keyframes animate-width-group{0%{width:0;}100%{width:100%;}}

/* navbar */
.navbar{background-color:var(--navbar-bg); height:var(--navbar-height); border-bottom: 1px solid rgba(0, 0, 0, 0.06); display:flex; flex-direction:row; align-items:center; position:fixed; width:100%; left:0; top:0; right:0; z-index:90;}
.navbar .logo{width:138px;}
.navbar .logo img{width:100%;}
.navbar-menu{display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; flex:1;}
.navbar-item{height:var(--navbar-height); font-size:14.5px; line-height:var(--navbar-height); cursor:pointer;}
.navbar-item > a{display:block; height:var(--navbar-height); line-height:var(--navbar-height); padding:0 20px;}
.navbar-item > a:hover{color:var(--primary-color);}
.navbar .has-child{padding:0 20px;}
.navbar .has-child .label{font-size:14.5px; line-height:var(--navbar-height); position:relative; padding-right:18px;}
.navbar .has-child .label::after{font-family:"bicon" !important; content:"\e648"; font-size:10px; color:var(--navbar-line-color); transform:rotate(0deg); transition: transform 0.2s; display:block; position:absolute; z-index:91; right:0; top:20px; width:12px; height:12px; line-height:12px; overflow:hidden; transform-origin: center;}
.navbar .has-child.open .label::after{transform: rotate(180deg);}
.navbar-item > .sub-menu{width:128px; padding:10px; border-radius:8px; position:fixed; z-index:99; left:0; top:var(--navbar-height); box-shadow:0 0 1px 0 var(--shadow-color), 0 20px 20px -15px var(--shadow-color); background-color:var(--sub-menu-bg); display:none;}
.navbar-item > .sub-menu > a{font-size:14.5px; height:46px; line-height:46px; overflow:hidden; display:block; width:100%; text-align:center; border-radius:5px;}
.navbar-item > .sub-menu > a:hover{background-color:var(--second-bg);}
.navbar-item > .sub-menu > a > i{padding-right:4px; color:var(--second-text-color);}
.navbar-line {width:1px; height:5px; margin:0 5px; overflow: hidden; padding: 0 !important; opacity: 0.5; background-color:var(--navbar-line-color);}
.navbar-right-area{display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-end; width:40px;}
.navbar-space{width:100%; height:var(--navbar-height);}
.navbar-icon-button{width:38px; height:var(--navbar-height); line-height:var(--navbar-height); text-align:center; cursor:pointer; font-size:20px !important;}
#navbar-swicth-button{font-size:20px; font-weight:bold; text-align:center;}
.icon-link{display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; justify-content: center;}
.icon-link > i{padding-right:6px; color:var(--second-text-color); font-size:16px;}
.icon-link > span{font-size:14.2px; line-height:20px; color:var(--second-text-color);}
.icon-link:hover *{color:var(--primary-color) !important;}


/* list */
.list{display:flex; flex-direction:column;}
.list > .item{display:flex; flex-direction:row; flex-wrap:nowrap; border-radius:6px; padding:6px; margin:6px 0; align-items:center;}
.list > .item:hover{background-color:var(--second-bg);}
.list > .item > .icon{width:44px; height:44px; line-height:44px; text-align:center; font-size:20px; margin-right:12px; background-color:var(--second-bg); display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:6px; color:var(--primary-color); font-weight:bold;}
.list > .item:hover .icon{background-color:var(--bg-white);}
.list > .item > .icon img{width:22px;}
.list > .item > .body{flex:1;}
.list > .item > .body > .title{font-size:14.2px; line-height:20px;}
.list > .item > .body > .desc{font-size:12px; line-height:18px; color:var(--text-desc-color);}

/* card */
.card-grid{display:grid; grid-template-columns:repeat(2, 1fr); background-color:var(--second-bg); width:var(--container-width); margin:0 auto; border-radius:10px; gap:20px;}
.card-grid > .item{background-color:var(--bg-white); border-radius:10px; padding:28px; border:1px solid var(--border-color); transition: all 0.22s; position:relative; overflow: hidden;}
.card-grid > .item::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height:3px;
  z-index:1;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  opacity: 0;
  transition: opacity 0.22s;
  border-radius:16px 16px 0 0;
  width:100%;
}
.card-grid > .item .icon{width:44px; height:44px; border-radius:8px; text-align:center; line-height:40px; font-size:24px;}
.card-grid > .item .icon > i{font-size:24px; color:var(--primary-color);}
.card-grid > .item .title{font-size:18px; font-weight:400; margin-top:18px;}
.card-grid > .item .flex-title{display:flex; flex-direction:row; align-items:center; margin-bottom:0px;}
.card-grid > .item .flex-title > .icon{margin-right:12px;}
.card-grid > .item .flex-title > i{font-size:30px; line-height:38px; padding-right:10px;}
.card-grid > .item .flex-title > span{font-size:18px; line-height:20px;}
.card-grid > .item .desc{font-size:14.5px; font-weight:400; line-height:1.8em; margin-top:10px; color:var(--text-desc-color);}
.card-grid > .item h5{margin-top:15px; font-size:17px;}
/* .card-grid > .item:hover .icon{animation:breath 1.5s infinite;} */
.card-grid > .item:hover{
    opacity: 1;
    border-color: var(--border-2);
    box-shadow: 0 8px 32px rgba(13,27,53,0.07);
    transform: translateY(-2px);
}
.card-grid > .item:hover::after{ opacity: 1; }
.card-grid > .no-hover-border:hover{
    box-shadow:none;
}
.card-grid > .item .tag{
    color:#8896ae;
    background:#F5F6F8;
    border: 1px solid #e2e6ed;
    border-radius: 100px;
    letter-spacing: 0.02em;
}
.card-grid > .item .card-footer{display:flex; flex-direction:row; align-items:center; justify-content:space-between; border-top:1px solid var(--border-color); margin-top:25px; padding-top:20px;}
.card-grid > .item .card-footer .button{background-color:#0d1b35;}
.card-grid > .item:hover .footer .icon-link{animation:breath 1.2s infinite;}
.card-grid > .item:hover .footer .icon-link *{color:var(--primary-color) !important;}
.card-grid-list{margin:0; margin-top:12px; padding:0; list-style-type:none; padding-bottom:8px;}
.card-grid-list li{margin:0; padding:0; line-height:1.8rem; list-style-type:none; position:relative; margin-top:8px; display:flex; flex-direction:row; flex-wrap: nowrap;}
.card-grid-list li .iconfont, .card-grid .list li .bicon{font-size:14.2px; color:var(--primary-color); padding-right:6px; display:block; width:20px; text-align:center; line-height:26px;}
.card-grid-list li p{font-size:14.3px; line-height:20px; flex:1; line-height:1.66em;}
.card-grid-tag{background:rgba(51, 111, 255, 0.66) !important; padding:3px 6px; font-size:12.5px;}
/* drawer */
.drawer{width:300px; min-height:calc(100vh - var(--footer-height) - var(--navbar-height) - 50px); padding:20px; border-radius:8px; overflow-y:auto;}
.drawer .title{font-size:18px; font-weight:bold; margin-bottom:10px;}
.drawer .menus{padding:8px 0;}
.drawer .menus > .item{display:flex; flex-direction:row; align-items:center; padding:12px 14px; border-radius:6px; margin:3px 0;}
.drawer .menus > .item:hover{background-color:#F5F6F8;}
.drawer .menus > .item *{line-height:24px;}
.drawer .menus > .item i{font-size:18px; color:var(--second-text-color); padding-right:8px;}
.drawer .menus > .item > .body{flex:1;}
.drawer .menus > .item > .body h5{font-size:14.2px; font-weight:600;}
.drawer .menus > .item > .body .desc{color: rgba(255, 255, 255, 0.5); font-size:11.5px; line-height:1.35em; display:none;}
.drawer .menus > .item.active{color:#FFFFFF; background-color:#0d1b35;}
.drawer .menus > .item.active *{color:#FFFFFF; font-weight:bold;}
.drawer .menus > .item.active .desc{display:block;}
.drawer .menus > .item.active{align-items:flex-start;}
#drawer_switch{display:none;}
.drawer > .sub-menus > .item h5{font-size:14.5px; padding:5px 0; margin-bottom:3px;}
.drawer > .sub-menus > .item > h5{font-size:14.5px; padding:5px 0; margin-bottom:3px;}
.drawer > .sub-menus > .item > .sub-menu{padding:6px 6px 6px 22px;}
.drawer > .sub-menus > .item > .sub-menu a{font-size:14.2px; line-height:20px; padding:6px 0; width:100%; display: block;}
.drawer > .sub-menus > .item.active  h5{color:var(--primary-color);}
.drawer > .sub-menus > .item.active > h5{color:var(--primary-color);}
/* avatar */
.avatar{width:38px; height:38px; border-radius:50%; background-color:var(--second-bg); background-size:cover; background-position:center;}

/* mask */
.mask{background:rgba(0,0,0,0.06); position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; z-index:110; display:none;}
.modal{position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:115; background-color:var(--bg-white); border-radius:8px; padding:20px; width:600px;}
.modal .close-button{position:absolute; top:6px; right:6px; width:30px; height:30px; line-height:30px; text-align:center; cursor:pointer; font-size:22px; color:var(--second-text-color); z-index:116;}
.modal-title{font-size:18px; font-weight:bold; margin-bottom:10px;}
.modal-body{padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.modal-footer{margin-top:10px; display:flex; flex-direction:row; justify-content:space-between; align-items:center; border-top:1px solid var(--border-color); padding-top:15px;}

/* toast */
#toast{background-color:#131213; color:#FFFFFF; border-radius:20px; padding:8px 18px; min-width:100px; text-align:center; display:flex; flex-direction:row; align-items:center; justify-content:center; font-size:14px; z-index:112;}

/* position */
.position-fixed{position:fixed;}
.top-50{top:50%;}
.left-50{left:50%;}
.translate-middle{transform:translate(-50%, -50%);}

/* animation */
.left-in-animation{animation:left-in 0.3s forwards;}
@keyframes left-in { 
    0%{transform:translateX(-100%);}
    100%{transform:translateX(0);}
}

/* input */
.input-item{position:relative; border:1px solid var(--border-color); border-radius:5px;}
.input{
    width: 100%;
    padding:12px;
    font-size:14px;
    font-weight:400;
    line-height:20px;
    background-clip: padding-box;
    border:0;
    appearance: none;
    border-radius:6px;
    outline:0;
    box-sizing: border-box;
    border-radius:5px;
    background-color:var(--bg-white);
}
.validate-error-message{position:absolute; z-index:1; bottom:0; left:0; width:100%; background-color:#FF0036; font-size:12px; line-height:18px; height:18px; padding:0px 12px; box-sizing:border-box; color:#FFFFFF; border-bottom-left-radius:6px; border-bottom-right-radius:6px;}

/* shadow */
.shadow{box-shadow:0 5px 5px 0 rgba(0,0,0,0.08);}

/* line title */
.line-title{display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; gap:12px;}
.line-title .title{font-size:13.5px; line-height:20px; color:var(--gold);}
.line-title .line{
    width: 32px;
    height:1px;
    background: var(--gold);
    opacity:0.8;
}
/* footer */
.footer{padding:10px 25px; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; background-color:var(--second-bg); color:var(--text-desc-color); font-size:14.2px; line-height:18px; height:var(--footer-height); border-top:1px solid var(--border-color); width:100%;}
.footer .item{display:block; padding:0 3px; font-size:13.5px; line-height:18px; color:#8896AE;}
.footer .item *{color:#8896AE !important; font-size:13.5px; line-height:18px;}
/* mobile */
@media (max-width:768px){
    /* flex */
    .sm-flex{display:flex;}
    .sm-row{flex-direction:row;}
    .sm-column{flex-direction:column;}
    .sm-wrap{flex-direction:row; flex-wrap:wrap;}
    .sm-nowrap{flex-direction:row; flex-wrap:nowrap;}
    .sm-justify-content-around{justify-content:space-around;}
    .sm-justify-content-between{justify-content:space-between;}
    .sm-justify-content-start{justify-content:flex-start;}
    .sm-justify-content-center{justify-content:center;}
    .sm-justify-content-end{justify-content:flex-end;}
    .sm-align-items-start{align-items:flex-start;}
    .sm-align-items-center{align-items:center;}
    .sm-align-items-end{align-items:flex-end;}
    .container{padding:0 12px;}
    .sm-w100{width:100%;}
    .sm-w50{width:50%;}

    .small-only{display:block;}
    .large-only{display:none !important;}
    /* text-size */
    .h1{font-size:40px !important;}
    .h2{font-size:36px !important;}
    .h3{font-size:24px !important;}
    .h4{font-size:20px !important;}
    .h5{font-size:18px !important;}
    .h6{font-size:14.2px !important;}

    .card-grid{display:flex; flex-direction:column; gap:0; width:100%; border-radius:0; padding:13px;}
    .card-grid > .item{width:100%; margin-bottom:16px; box-sizing: border-box;}

    .navbar-menu{position:fixed; left:0; top:54px; top:calc(var(--navbar-height) + 1px); right:0; bottom:0; flex-direction:column; align-items:center; padding:10px 5px; height:100%; display:none; overflow-y:auto; background-color:var(--bg-white);}
    .navbar-item{height:44px;}
    .navbar .has-child{height:auto;}
    .navbar-item > .sub-menu{width:100% !important; padding:0 15px;}
    .navbar-item > .sub-menu > a{text-align:left;}
    .navbar-item > a{line-height:44px; height:44px;}
    .navbar-line{height:0; width:0; display:none;}
    .navbar-right-area{width:80px;}
    .navbar-item > .sub-menu{position:static; clear:both; box-shadow:none; z-index:0;}

    .card-grid > .item > .icon > i{font-size:30px; }
    .card-grid > .item > .title{font-size:16px; font-weight:400; margin-top:15px;}
    .card-grid > .item > .desc{font-size:13px; font-weight:400; margin-top:8px;}

    .drawer{position: fixed; width:60%; padding:20px; background-color:#FFFFFF; top:var(--navbar-height); bottom:0; left:0; z-index:111; display:none; border-radius:0;}
    #drawer_switch{display:flex; flex-direction:column;}

    .main-area{margin-left:0;}
    .center-body > .message{width:92%;}
    .footer{padding:10px 15px;}

    .section-card {background: #FFFFFF; border: 1px solid var(--border-color); border-radius:12px; animation: fadeUp 0.32s ease both;}
    @keyframes fadeUp {
        0% {opacity:0; transform:translateY(12px);}
        100% {opacity:1; transform:translateY(0);}
    }
.section-card .title{padding:15px;}
.section-card .body{padding:15px;}
}