/* #header{background-color: #FFF;width: 100%;height: 82px;display: flex;position: relative;z-index: 999;box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);position: sticky; top: 0;} */
#header{background-color: #FFF;width: 100%;height: 82px;display: flex;position: relative;z-index: 999;background-color: rgba(255, 255, 255, 0);}
#header .header_box{width: 100%;height: 100%;display: grid;grid-template-columns: repeat(3, 1fr);align-items: center;}
#header .header_box a{color: #333;font-weight: bold;font-size: 16px;}
#header .left{display: flex;justify-content: left;align-items: center;}
#header .left .logo{display: flex;justify-content: center;align-items: center;font-size: 0;}
#header .left .logo img{max-width: 90%;max-height: 65px;min-width: 131px;}
#header .left .logo a{color: #333; font-weight: bold; font-size: 0;}

#header .middle{flex: 1;margin: 0 20px;height: inherit;display: flex;justify-content: center;align-items: center;}
#header .middle .item{float: left;padding:0 20px;font-size: 18px;height: inherit;display: flex;justify-content: center;align-items: center;}
#header .middle .item.current .item_a{font-weight: bold;}
#header .middle .item .item_a{height: auto;display: flex;justify-content: center;align-items: center;position: relative;white-space: nowrap;}
#header .middle .item .item_a:hover{text-decoration: none;color: #000;}
#header .middle .item span{display: inline-block;}
#header .middle .item .sub_nav{width: 100%;padding: 30px;background-color: #fff;position: absolute;top: 100%;left: 0;box-sizing: border-box;display: none;box-shadow: 0 0 10px #00000050;}
#header .middle .item:hover .sub_nav{display: block;}
#header .middle .item .sub_nav .list{margin-top: 20px;}
#header .middle .item .sub_nav .list:first-child{margin-top: 0;}
#header .middle .item .sub_nav .list .list_title{font-size: 16px;font-weight: bold;border-bottom: 1px solid #ddd;padding-bottom: 7px;text-transform: uppercase;}
#header .middle .item .sub_nav .list .list_items_box{display: flex;flex-wrap: wrap;gap: 30px;padding: 20px 0;}
#header .middle .item .sub_nav .list .list_items_box .list_items{width: calc((100% - 30px) / 2); display: flex;align-items: center;}
#header .middle .item .sub_nav .list .list_items_box .list_items .icon{width: 40px;height: 40px;background-color: #ebebeb;border-radius: 5px;display: flex;justify-content: center;align-items: center;}
#header .middle .item .sub_nav .list .list_items_box .list_items .info{margin-left: 20px;flex: 1;}
#header .middle .item .sub_nav .list .list_items_box .list_items .info .name{font-size: 16px;font-weight: bold;color: #001439;}
#header .middle .item .sub_nav .list .list_items_box .list_items .info .name a{color: #001439;}
#header .middle .item .sub_nav .list .list_items_box .list_items .info .desc{font-size: 14px;color: #666;margin-top: 2px;}

#header .right{display: flex;justify-content: right;align-items: center;gap: 10px;}
#header .right .login{font-size: 14px;margin-right: 15px;}
#header .right .signup{font-size: 14px;}
#header .right .signup .signup-btn{background-color: #f65a07; color: #FFF; padding: 13px 20px; border-radius: 15px; text-decoration: none; display: inline-block; font-weight: bold;}
#header .nav{display: none;}
#header .nav_bar{display:none;}
#header .nav_bar .sub_bar{display: none;}
#header .account{display: none;}

#header .user{display: flex;align-items: center;flex-direction: row;column-gap: 10px;}
#header .user .head{width: 32px;height: 32px;border-radius: 50%;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);display: flex;align-items: center;justify-content: center;font-size: 16px;font-weight: bold;color: #fff;}
#header .user .name{font-size: 14px;max-width: 120px;overflow: hidden;text-overflow: ellipsis;}
.user-point{ height: 30px; padding: 0 10px; border-radius: 5px; background: linear-gradient(to right, #c0c3fc 5px, #9cc4fc 100%); background-color: #e5e6fe; text-align: center; display: flex; object-fit: contain; justify-content: center; align-items: center; gap: 6px; }
.user-point .point-header { display: flex; justify-content: center; align-items: center; width: 15px; height: 15px; }
.user-point .point-content{flex: 1;display: flex; justify-content: center; align-items: center; gap: 7px;font-size: 16px; color: #1e377f;}
.user-point .point-name{max-width: 90px; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
.user-point .point-interval { color: #89a2f7; line-height: 1;}
.user-point .point-buy{font-size: 14px; color: #1e377f;}

@media (max-width: 1150px) {
    .user-point .point-name span{display: none;}
}
@media (max-width: 1024px) {
    #header{width: 100%;height: 65px;display: flex;}
    #header .middle{display:none;}
    #header .right{display:none;}
    
    #header .nav{display: flex;width: 15%;align-items: center;}
    #header .nav-icon {width: 24px;height: 18px;position: relative;cursor: pointer;display: inline-block;}
    #header .nav-icon span {background-color: #333;position: absolute;border-radius: 2px;transition: .3s cubic-bezier(.8, .5, .2, 1.4);width: 100%;height: 3px;transition-duration: 500ms;}
    #header .nav-icon span:nth-child(1) {top: 0;left: 0;}
    #header .nav-icon span:nth-child(2) {top: 8px;left: 0;}
    #header .nav-icon span:nth-child(3) {bottom: 0;left: 0;}

    #header .header_box{display: flex;justify-content: space-between;align-items: center;}
    #header .left{width: 70%;justify-content: center;}
    #header .left .logo{width: 85%;}
    
    #header .account{width: 15%;display: flex;justify-content: right;align-items: center;}
    #header .account .user .head{width: 28px;height: 28px;font-size: 14px;}
    #header .account .icon_account { display: flex; width: 28px; height: 28px; background: url(../images/icon_account.png) no-repeat center; background-size: cover; /* filter: brightness(0) invert(1); */ }
    
    #header .nav_bar{display:none;position: fixed;top: 0;left: 0;transition: left 0.5s ease;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);z-index: 999;align-items: center;justify-content: center;}
    #header .nav_bar .bar .nav_logo { width: 90%; }
    #header .nav_bar .bar{position: absolute;z-index:1000;left: -100%;top: 0;width: 80%;height:100vh;background-color: #fff;padding: 20px 15px;box-sizing: border-box;}
    #header .nav_bar .bar .items{margin-top:30px;display: flex;flex-direction: column;row-gap: 20px;}
    #header .nav_bar .bar .items a{width: 100%;justify-content:left;text-decoration:unset;color: #333;}
}