#header{background-color: #161616;width: 100%;height: 82px;display: flex;position: relative;z-index: 12;}
#header .header_box{padding: 0 2%;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
#header .left{width: 24%;display: flex;justify-content: left;align-items: center;}
#header .left .logo{float: left;width: 90%;display: flex;justify-content: center;align-items: center;}
#header .left .logo img{max-width: 100%;max-height: 82px;padding: 10px;min-width: 140px;}
#header .middle{float: left;width: 60%;height: inherit;display: flex;justify-content: center;align-items: center;}
#header .middle .item{float: left;padding:0 1.5%;font-size: 16px;height: inherit;display: flex;justify-content: center;align-items: center;}
#header .middle .item.current .item_a{color: var(--primaryColor);border-bottom: 4px solid var(--primaryColor);}
#header .middle .item:first-child{padding-left: 0;}
#header .middle .item:last-child{padding-right: 0;}
#header .middle .item .item_a{height: inherit;display: flex;justify-content: center;align-items: center;position: relative;color: #ffffff;}
#header .middle .item .item_a:hover{text-decoration: none;color: var(--primaryColor);}
#header .middle .item span{display: inline-block;}
#header .middle .item i{display: inline-block;margin-left:7px;width: 59px;height: 20px;background: url('../images/icon_free.png') no-repeat center;}
#header .right{float: left;width: 16%;display: flex;justify-content: right;align-items: center;gap: 30px;padding-right: 20px;}
#header .login{float: left;}
#header .login a{color: #ffffff;}
#header .signup{float: left;padding-left:6%;}
#header .signup a{display:block;text-decoration:none;width:100%;padding: 14px 24px;border-radius: 6px;background-color:var(--primaryColor);border-color:var(--primaryColor);color: #fff;line-height: 14px;}
#header .nav{display: none;}
#header .nav_bar{display:none;}
#header .user{position: relative;}
#header .user .my{cursor: pointer;font-size:18px;line-height:18px;font-weight:bold;color: #ffffff;}
#header .user .my:hover{color: var(--primaryColor);}
#header .user .my::before {content: "";position: absolute;top: 8px;right: -18px;transform: rotate(180deg);border-style: solid;border-width: 0 6px 6px 6px;border-color: transparent transparent #ffffff transparent;}
#header .user .my::after {content: "";position: absolute;top: 8px;right: -16px;transform: rotate(180deg);border-style: solid;border-width: 0 4px 4px 4px;border-color: transparent transparent #161616 transparent;}
#header .user .my:hover::before {border-color: transparent transparent var(--primaryColor) transparent;}
#header .user .my_card{display:none;position: absolute;right:-28px;top:100%;padding-top:10px;}
#header .user .my_card .card{min-width:240px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);background-color:#fff;border:1px solid var(--primaryColor);border-radius: 6px;padding:20px;}
#header .user .my .name{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 390px;}
#header .user .my .version{position: relative;margin-top:10px;width: 50px;overflow: hidden;padding:5px 5px 5px 8px;color: #fff;font-size: 12px;line-height: 12px;font-weight: bold;}
#header .user .my .version::after {content: "";position: absolute;top: 0;right: -80px;width: 85px;height: 100%;background-color: #161616;transform: skewX(-15deg);}
#header .user .my .version.free{background-color: var(--primaryColor);}
#header .user .my .version.personal{background-color: #1d13e5;width: 75px;}
#header .user .my .version.enterprise{background-color: #ffde00;color:#5c5303;width: 85px;}
#header .user .my_card .card .tabs li{padding:12px 10px;}
#header .user .my_card .card .tabs li:hover{background-color: #f2f5f6;border-radius: 4px;}
#header .user .my_card .card .tabs li a{text-decoration: none;display: flex;align-items: center;}
#header .user .my_card .card .tabs li span{color: #5f5f5f;margin-left: 20px;}
#header .user .my_card .card .icon{display: inline-block;}
#header .user .my_card .card .icon_profile{width: 13px;height: 15px;background: url('../images/profile.png') center no-repeat;background-size: cover;}
#header .user .my_card .card .icon_codes{width: 15px;height: 15px;background: url('../images/codes.png') center no-repeat;background-size: cover;}
#header .user .my_card .card .icon_plans{width: 14px;height: 10px;background: url('../images/plans.png') center no-repeat;background-size: cover;}
#header .user .my_card .card .icon_statistics{width: 15px;height: 13px;background: url('../images/statistics.png') center no-repeat;background-size: cover;}
/*导航子菜单*/
#header .middle .item.select{padding-right: calc(1.5% + 15px);}
#header .middle .item.select .item_a::before {content: "";position: absolute;top: 40px;right: -15px;transform: rotate(180deg);border-style: solid;border-width: 0 5px 5px 5px;border-color: transparent transparent #333 transparent;}
#header .middle .item.select .item_a::after {content: "";position: absolute;top: 40px;right: -14px;transform: rotate(180deg);border-style: solid;border-width: 0 4px 4px 4px;border-color: transparent transparent #fff transparent;}
#header .middle .item.current.select .item_a::before {border-color: transparent transparent var(--primaryColor) transparent;}
#header .middle .item.select .item_a:hover::before{border-color: transparent transparent var(--primaryColor) transparent;}
#header .mask{display:none;width: 100%;height: 100vh;position: absolute;background-color: #00000040;top: 82px;left: 0;}
#header .sub_menu{display:none;padding: 40px 50px 50px;color:#000;background-color: #fff;box-shadow: 0 20px 15px rgba(0, 0, 0, 0.1);width: 100%;position: absolute;top: 82px;left: 0;z-index:1;border-top: 1px solid #e1e6e8;}
#header .solutions_menu{display: grid;grid-template-columns: 28% 72%;}
#header .solutions_menu .menu_l{padding-right: 20px;}
#header .solutions_menu .menu_l .title{font-size: 38px;line-height: 1.2em;color: #000;font-weight: bold;}
#header .solutions_menu .menu_l .desc{margin-top:20px;font-size: 14px;}
#header .solutions_menu .menu_r{display: grid;grid-template-columns: repeat(2, 1fr);}
#header .solutions_menu .menu_r .title{font-size: 16px;line-height: 1.2em;font-weight: bold;padding-left:6px;}
#header .solutions_menu .menu_r .application{border-right: 1px solid #d5d5d5;padding-right: 48px;}
#header .solutions_menu .menu_r .application .title{border-left:3px solid var(--primaryColor);}
#header .solutions_menu .menu_r .industry{padding-left:48px;}
#header .solutions_menu .menu_r .industry .title{border-left:3px solid #ffd75c;}
#header .solutions_menu .menu_r .items{margin-top:28px;display: grid;grid-template-columns: repeat(2, 1fr);gap: 25px;}
#header .solutions_menu .menu_r .items .sub_title{font-size: 14px;line-height: 1.2em;font-weight: bold;}
#header .solutions_menu .menu_r .items .sub_title a{text-decoration: unset;}
#header .solutions_menu .menu_r .items .sub_desc{margin-top:10px;font-size: 12px;color: #5f5f5f;}
/*language*/
#header .language{float: left;margin-left: 10px;padding:5px 20px 5px 10px;border:1px solid var(--primaryColor);border-radius: 4px;width: 32%;display: flex;align-items: center;min-width: 80px;cursor: pointer;position: relative;}
#header .language .icon{width: 17px;height: 17px;}
#header .language .icon i{display: inline-block;width: 100%;height: 100%;background: url('../images/icon_global.png') no-repeat center;background-size: contain;}
#header .language .curr_lang{cursor: pointer;color: #fff;padding-left:5px;position: relative;width: calc(100% - 17px);}
#header .language .curr_lang::before {content: "";position: absolute;top: 8px;right: -10px;transform: rotate(180deg);border-style: solid;border-width: 0 6px 6px 6px;border-color: transparent transparent #333 transparent;}
#header .language .curr_lang::after {content: "";position: absolute;top: 8px;right: -8px;transform: rotate(180deg);border-style: solid;border-width: 0 4px 4px 4px;border-color: transparent transparent #fff transparent;}
#header .language .lang_items{display:none;position: absolute;left: 0;top:100%;padding-top:10px;width: 100%;min-width: 115px;}
#header .language .lang_items ul{box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);background-color:#fff;border:1px solid var(--primaryColor);border-radius: 6px;padding:12px 18px;}
#header .language .lang_items li{padding:8px 10px;}
#header .language .lang_items li:hover{background-color: #f2f5f6;border-radius: 4px;}
#header .language .lang_items li a{text-decoration: none;display: flex;align-items: center;}
#header .language:hover .curr_lang{color: var(--primaryColor);}
#header .language:hover .icon{width: 17px;height:17px;text-indent: -17px;overflow: hidden;}
#header .language:hover .icon i{filter: drop-shadow(17px 0px var(--primaryColor));}

@media (max-width: 768px) {
    #header{width: 100%;height: 62px;display: flex;}
    #header .middle{display:none;}
    #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%;}
    #header .left .language{display: none;}
    #header .left .logo{width: 100%;}
    #header .account{width: 15%;display: flex;justify-content: right;}
    #header .icon_account{display: flex;width: 28px;height: 28px;background: url('../images/icon_account.png') no-repeat center;background-size: cover;filter: 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: 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 .items .item{width: 100%;float: none;justify-content:left;;margin-top:46px;padding-left: 0;}
    #header .nav_bar .bar .items a{width: 100%;justify-content:left;text-decoration:unset;}
    #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;}
}
@media (min-width: 769px) and (max-width: 950px) {
    #header .signup a{padding:14px 10px;}
    #header .user .my .name{max-width: 120px;}
}
@media (min-width: 1201px) and (max-width: 1440px) {
    #header .user .my .name{max-width: 260px;}
}
@media (min-width: 951px) and (max-width: 1200px) {
    #header .user .my .name{max-width: 195px;}
}