.productTab {
    position: relative;
    z-index: 20;
}

.nav-bar {
    position: relative;
    min-width: 768px;
}

.nav-bar .product-box {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 15;
    background: #fff;
    box-shadow: 0 -20px 80px -80px black;
    /* background: #fff url('../imgs/product/dropdown_word.png') left -1.0714285714285714rem center no-repeat; */
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-left: 10.857142857142856rem;
    display: flex;
    flex-flow: row nowrap;
    transition: height .3s;
}

.nav-bar .product-box .product-box-left {
    margin-top: 1.7857142857142856rem;
    width: 33.357142857142854rem;
    overflow: hidden;
}

.nav-bar .product-box .product-box-left .product-caption {
    height: 1.0714285714285714rem;
    text-align: left;
    font-size: 0.6428571428571428rem;
    color: #C0C0C0;
    font-weight: 500;
    line-height: 1.0714285714285714rem;
    border-bottom: 0.03571428571428571rem dashed #D4A5FF;
}

.nav-bar .product-box .product-box-left .product-container {
    padding-top: 1.25rem;
    box-sizing: border-box;
}

.nav-bar .product-box .product-box-left .product-container ul {
    display: flex;
    flex-flow: row nowrap;
}

.nav-bar .product-box .product-box-left .product-container ul .product-item {
    flex: 1;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    cursor: pointer;
}

.nav-bar .product-box .product-box-left .product-container ul .product-item .iconfont {
    width: 1.7857142857142856rem;
    height: 1.7857142857142856rem;
    margin-right: 0.5714285714285714rem;
    line-height: 1.7857142857142856rem;
    text-align: center;
    font-size: 1.7857142857142856rem;
    color: #9B88EC;
}

.nav-bar .product-box .product-box-left .product-container ul .product-item .product-item-container {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

.nav-bar .product-box .product-box-left .product-container ul .product-item .product-item-container b {
    font-size: 0.6428571428571428rem;
    color: #6D6C6C;
    font-weight: 500;
}

.nav-bar .product-box .product-box-left .product-container ul .product-item .product-item-container p {
    margin-top: 0.14285714285714285rem;
    color: #7F7F7F;
    font-size: 0.5rem;
}

.nav-bar .product-box .product-box-right {
    padding-left: 5.535714285714286rem;
    margin-top: 0.7857142857142857rem;
    overflow: hidden;
}

.nav-bar .product-box .product-box-right img {
    width: 11.785714285714285rem;
    height: 8.642857142857142rem;
}

.nav-bar .product-box::before {
    content: '';
    display: block;
    width: 5rem;
    height: 3.571428571428571rem;
    position: absolute;
    top: -3.571428571428571rem;
    left: 23.21428571428571rem;
    cursor: pointer;
}

.nav-bar .product-box::after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.nav-bar .product-box:hover {
    /* height: 10.786rem; */
    /* height: auto; */
    height: 11.9986rem;
}


@media screen and (max-width: 1680px) {
    .nav-bar .product-box {
        /* background: #fff url('../imgs/product/dropdown_word.png') left -2.8571428571428568rem center no-repeat; */
        background-size: 100% 100%;
    }
}

@media screen and (max-width: 1024px) {
    .nav-bar .product-box {
        /* background: #fff url('../imgs/product/dropdown_word.png') left -1.7857142857142856rem center no-repeat; */
        background-size: 100% 100%;
    }
}

.nav-bar-container {
    box-sizing: border-box;
    height: 3.571428571428571rem;
    width: 100%;
}

.nav-bar-container .nav-menu {
    padding-top: 0.14285714285714285rem;
    box-sizing: border-box;
    height: 2.214285714285714rem;
    position: relative;
}

.nav-bar-container .nav-menu .nav-menu-container {
    height: 1.7857142857142856rem;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.nav-bar-container .nav-menu .nav-menu-item {
    width: 5rem;
    height: 100%;
    line-height: 1.7857142857142856rem;
    color: #060606;
    font-size: 0.7857142857142857rem;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}
.nav-bar-container .nav-menu .nav-menu-item:hover{
    color: #4A96EA;
}

.nav-bar-container .nav-menu .nav-menu-active {
    color: #4A96EA;
}

.nav-bar-container .nav-menu .nav-menu-active::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%);
    height: 0.14285714285714285rem;
    width: 2.321428571428571rem;
    border-radius: 0.07142857142857142rem;
    background-color: #4A96EA;
}

.nav-bar-container .nav-center {
    box-sizing: border-box;
    float: left;
    width: 100%;
    height: 100%;
}

.nav-bar-container .content {
    box-sizing: border-box;
    margin-left: 12.5rem;
    margin-right: 15rem;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 1.9642857142857142rem;
}

.nav-bar-container .nav-left {
    box-sizing: border-box;
    float: left;
    margin-left: -100%;
    width: 12.5rem;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.nav-bar-container .nav-left .nav-log {
    width: 5.7142857142857135rem;
    height: 1.9285714285714284rem;
    background: url('../imgs/home/yunhao_log.png') center no-repeat;
    background-size: 100%;
}

.nav-bar-container .nav-right {
    box-sizing: border-box;
    float: left;
    /*width: 15rem;*/
    width: 14rem;
    /*margin-left: -15rem;*/
    margin-left: -14rem;
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.nav-bar-container .nav-right .button-group {
    width: 7.142857142857142rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.nav-bar-container .nav-right .button-group .button-item {
    box-sizing: border-box;
    width: 3.214285714285714rem;
    height: 1.607142857142857rem;
    border-radius: 1rem;
    text-align: center;
    /*line-height: 1.607142857142857rem;*/
    font-size: 0.7857142857142857rem;
    cursor: pointer;
    position: relative;
}

.nav-bar-container .nav-right .button-group .button-item:first-child {
    line-height: 1.607142857142857rem;
    background: linear-gradient(87deg, #26B0F9 0%, #0893DE 100%);
    color: #fff;
}

.nav-bar-container .nav-right .button-group .button-item:last-child {
    line-height: 1.464285714285714rem;
    border: 2px solid #4A96EA;
    background-color: #fff;
    color: #4A96EA;
}

.nav-bar-container .nav-right .button-group .button-item:last-child:hover .log-menu {
    /*height: 10.714285714285714rem;*/
    /* height: 16.75rem; */
    height: auto;
}

.nav-bar-container .nav-right .button-group .log-menu {
    width: 8.928571428571429rem;
    height: 0;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 0.7857142857142857rem;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin: auto;
    z-index: 30;
    border-radius: 0px 0px 1.4285714285714284rem 1.4285714285714284rem;
    transition: height .3s;
}

.nav-bar-container .nav-right .button-group .log-menu .menu-item-wrap {
    background: #fff;
    height: 100%;
    width: 100%;
    margin: 0;
}

.nav-bar-container .nav-right .button-group .log-menu ul {
    box-sizing: border-box;
    padding-top: 10px;
    background: #fff;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.nav-bar-container .nav-right .button-group .log-menu li {
    color: #3F3F3F;
    font-size: 0.7142857142857142rem;
    line-height: 0.7142857142857142rem;
    margin: 1.25rem 0;
    cursor: pointer;
    white-space: nowrap;
}

.nav-bar-container .nav-right .button-group .log-menu li a{
    color: #3F3F3F;
    display: inline-block;
}

.nav-bar-container .nav-right .button-group .log-menu li:hover a{
    color: #4a96ea;
}

@media screen and (max-width: 1024px) {
    .nav-bar-container .nav-right .button-group .log-menu li {
        transform: scale(.85);
    }
}

.nav-bar-container .nav-right .button-group .log-menu:hover {
    height: 7.142857142857142rem;
}

.nav-bar-container .nav-right .old-website {
    box-sizing: border-box;
    width: 4.642857142857142rem;
    height: 100%;
    background: url('../imgs/home/nav_right.png') no-repeat;
    background-size: cover;
    position: relative;
    display: none;
}

.nav-bar-container .nav-right .old-website-text {
    position: absolute;
    top: 0.5357142857142857rem;
    right: 0.2857142857142857rem;
    color: #939393;
    font-size: 0.5714285714285714rem;
    font-weight: 400;
    transform: rotate(42deg);
}

@media screen and (max-width: 1024px) {
    .nav-bar-container .nav-right .old-website-text {
        top: 0.5357142857142857rem;
        right: -2px;
        transform: scale(.8) rotate(42deg);
    }
}

@media screen and (max-width: 1024px) {
    .product-item-container,
    .nav-menu-item {
        transform: scale(.8);
    }
}