#header{background-color: #4f46e5;width: 100%;height: 82px;display: flex;position: relative;z-index: 12;}
#header .header_box{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
#header .header_box a{color: #FFF;font-weight: bold;}
#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: 100%;max-height: 82px;min-width: 140px;filter: brightness(0) invert(1);width: 235px;height: 38px;}

#header .middle{flex: 1;margin: 0 20px;height: inherit;display: flex;justify-content: center;align-items: center;}
#header .middle .item{float: left;padding:0 35px;font-size: 16px;height: inherit;display: flex;justify-content: center;align-items: center;}
#header .middle .item.current .item_a{font-weight: bold;border-bottom: 4px solid #FFF;}
#header .middle .item:first-child{padding-left: 0;}
#header .middle .item:last-child{padding-right: 0;}
#header .middle .item .item_a{height: auto;padding-bottom: 5px;display: flex;justify-content: center;align-items: center;position: relative;}
#header .middle .item .item_a:hover{text-decoration: none;color: #eae7e7;}
#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: 30px;}
#header .login{font-size: 16px;}
#header .signup a{display:block;text-decoration:none;padding: 14px 24px;border-radius: 999px;background-color:#ffc55f;border-color:#fff;color: #000;line-height: 14px;font-size: 14px;}
#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: 5px;}
#header .user .head{width: 43px;height: 43px;border-radius: 999px;background: #ffc55f;display: flex;align-items: center;justify-content: center;color: #000000;font-size: 18px;font-weight: bold;}
#header .user .name{font-size: 16px;max-width: 90px;overflow: hidden;text-overflow: ellipsis;}

@media screen and (max-width: 1340px) {
    #header .wide {width: 100%;padding: 0 20px;}
}
@media (max-width: 1024px) {
    #header{width: 100%;height: 62px;display: flex;}
    #header .middle{display:none;}
    #header .middle .item{padding: 0 2.5vw;}

    #header .right{display:none;}
    #header .nav{width: 15%;display: flex;}
    #header .nav-icon {width: 27px;height: 22px;position: relative;cursor: pointer;display: inline-block;}
    #header .nav-icon span {background-color: #FFF;position: absolute;border-radius: 2px;transition: .3s cubic-bezier(.8, .5, .2, 1.4);width: 100%;height: 4px;transition-duration: 500ms;}
    #header .nav-icon span:nth-child(1) {top: 0;left: 0;}
    #header .nav-icon span:nth-child(2) {top: 9px;left: 0;}
    #header .nav-icon span:nth-child(3) {bottom: 0;left: 0;}

    #header .left{width: 70%;justify-content: center;}
    #header .left .language{display: none;}
    #header .left .logo{width: 85%;}
    #header .account{width: 15%;display: flex;justify-content: right;}
    #header .icon_account{display: flex;width: 28px;height: 28px;background: url('/frontend/widgets/header/web/images/icon_account.png') no-repeat center;background-size: cover;filter: brightness(0) invert(1);}
    #header .user .head{width: 28px;height: 28px;font-size: 16px;}

    #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: 3;align-items: center;justify-content: center;}
    #header .nav_bar .bar{position: absolute;z-index:6;left: -100%;top: 0;width: 60%;height:100vh;background-color: #fff;padding: 22px 15px;}
    #header .nav_bar .bar .nav_logo{width: 90%;}
    #header .nav_bar .bar .nav_logo img{filter: brightness(1) invert(1);}
    #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: #000;}
    #header .nav_bar .bar .items .item i{margin-left:10px;}
    #header .nav_bar .bar .nav_language .curr_lang{margin-top:38px;padding:10px;float:none;background-color: #f5f7f8;border-radius: 10px;justify-content:left;position: relative;width: 100%;margin-left:0;}
    #header .nav_bar .bar .nav_language .curr_lang span{padding-left:10px;}
    #header .nav_bar .bar .nav_language .curr_lang span::before {content: "";position: absolute;top: 17px;right: 10px;transform: rotate(90deg);border-style: solid;border-width: 0 8px 8px 8px;border-color: transparent transparent #d5d5d6 transparent;}
    #header .nav_bar .bar .nav_language .curr_lang span::after {content: "";position: absolute;top: 18px;right: 13px;transform: rotate(90deg);border-style: solid;border-width: 0 6px 6px 6px;border-color: transparent transparent #f5f7f8 transparent;}
    #header .nav_bar .bar .nav_language .sub_menu{display:block;border-top:unset;height: 100vh;box-shadow: unset;padding:20px 15px;}
    #header .nav_bar .bar .nav_language .sub_menu{position: absolute;z-index: 6;left: -100%;top: 82px;}
    #header .nav_bar .bar .nav_language .sub_menu .item:first-child{margin-top:0;}
    #header .nav_bar .bar .nav_language .sub_menu .item a{display: block;width: 100%;text-decoration: unset;}
    #header .nav_bar .bar .items .item .sub_menu{display:block;border-top:unset;height: 100vh;box-shadow: unset;padding:20px 15px;}
    #header .nav_bar .bar .items .item .sub_menu{position: absolute;z-index: 6;left: -100%;top: 82px;}
    #header .nav_bar .bar .items .item .sub_menu .item{margin-top: 20px;}
    #header .nav_bar .bar .items .item .sub_menu .s_box{margin-top:30px;}
    #header .nav_bar .bar .items .item .sub_menu .s_box:first-child{margin-top:0;}
    #header .nav_bar .bar .items .item .sub_menu .s_box .s_title{font-size: 18px;font-weight: bold;padding-left: 10px;}
    #header .nav_bar .bar .items .item .sub_menu .s_box.application .s_title{border-left:4px solid var(--primaryColor);}
    #header .nav_bar .bar .items .item .sub_menu .s_box.industry .s_title{border-left:4px solid #ffd75c;}
    #header .nav_bar .bar .sub_bar{position: absolute;z-index:7;left: -100%;top: 0;width: 100%;height:100vh;background-color: #fff;padding: 22px 15px;box-sizing: border-box;overflow: auto;}
    #header .nav_bar .bar .sub_bar .back{width: 8px;height: 8px;border-color: #000;border-style: solid;border-width: 2px 2px 0 0;transform: rotate(-135deg);}
    #header .nav_bar .bar .sub_bar .list{margin-top: 15px;}
    #header .nav_bar .bar .sub_bar .list:first-child{margin-top: 0;}
    #header .nav_bar .bar .sub_bar .list .list_title{font-size: 16px;font-weight: bold;border-bottom: 1px solid #ddd;padding-bottom: 7px;text-transform: uppercase;}
    #header .nav_bar .bar .sub_bar .list .list_items_box{display: flex;flex-wrap: wrap;}
    #header .nav_bar .bar .sub_bar .list .list_items_box .list_items{width: 100%;display: flex;align-items: center;margin-top: 10px;}
    #header .nav_bar .bar .sub_bar .list .list_items_box .list_items .icon{width: 30px;height: 30px;background-color: #ebebeb;border-radius: 5px;display: flex;justify-content: center;align-items: center;}
    #header .nav_bar .bar .sub_bar .list .list_items_box .list_items .icon img{width: 50%;}
    #header .nav_bar .bar .sub_bar .list .list_items_box .list_items .info{margin-left: 15px;flex: 1;}
    #header .nav_bar .bar .sub_bar .list .list_items_box .list_items .info .name{font-size: 14px;font-weight: bold;color: #001439;}
    #header .nav_bar .bar .sub_bar .list .list_items_box .list_items .info .name a{color: #001439;}
    #header .nav_bar .bar .sub_bar .list .list_items_box .list_items .info .desc{font-size: 14px;color: #666;margin-top: 2px;}
}