{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation
}

.header {
    height: 100px;
    left: 0;
    overflow: visible;
    position: fixed;
    top: 0;
    transition: background-color .3s ease,box-shadow .3s ease;
    width: 100%;
    z-index: 999
}

.header.header-home {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background-image: linear-gradient(180deg,#dbdbdbb3,#fff3)
}

.header.header-home .nav-item:before {
    color: #000000bf
}

.header.header-home .nav-item:after {
    color: #0d438c
}

.header.header-other {
    background-color: #fff;
    box-shadow: 0 2px 10px #0000001a
}

.header.header-other .nav-item:before {
    color: #000000bf
}

.header.header-other .nav-item:after {
    color: #0d438c
}

.header .header-content {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 85%;
    padding: 0 40px;
    position: relative;
    width: 100%
}

.header .header-content .logo {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    height: 100%;
    justify-content: flex-start;
    margin-right: 40px;
    max-width: 250px;
    overflow: hidden;
    z-index: 101
}

.header .header-content .logo a {
    align-items: center;
    display: flex;
    height: 100%
}

.header .header-content .logo .logo-image {
    display: block;
    height: auto;
    max-height: 60px;
    max-width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: auto
}

.header .header-content .hamburger {
    cursor: pointer;
    display: none;
    flex-direction: column;
    height: 18px;
    justify-content: space-between;
    position: relative;
    width: 24px;
    z-index: 101
}

.header .header-content .hamburger span {
    background: #333;
    border-radius: 3px;
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    transition: all .3s ease;
    width: 100%
}

.header .header-content .hamburger span:first-child {
    top: 0
}

.header .header-content .hamburger span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%)
}

.header .header-content .hamburger span:nth-child(3) {
    bottom: 0
}

.header .header-content .hamburger.hamburger-active span:first-child {
    top: 50%;
    transform: translateY(-50%) rotate(45deg)
}

.header .header-content .hamburger.hamburger-active span:nth-child(2) {
    opacity: 0
}

.header .header-content .hamburger.hamburger-active span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg)
}

.header .header-content .nav {
    align-items: center;
    display: flex;
    flex: 1;
    font-size: 19px;
    gap: 2vw;
    height: 100%;
    justify-content: flex-end;
    z-index: 9
}

.header .header-content .nav .nav-item {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    height: 100%;
    justify-content: center;
    padding: 0 5px;
    perspective: 600px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transform-style: preserve-3d;
    transition: transform .4s cubic-bezier(.5,.8,.5,1)
}

.header .header-content .nav .nav-item span {
    opacity: 1;
    pointer-events: none
}

.header .header-content .nav .nav-item:after,.header .header-content .nav .nav-item:before {
    backface-visibility: hidden;
    content: attr(data-text);
    height: 100%;
    left: 0;
    line-height: 100px;
    position: absolute;
    text-align: center;
    top: 0;
    white-space: nowrap;
    width: 100%;
    pointer-events: none;
}

.header .header-content .nav .nav-item:before {
    transform: translateZ(20px)
}

.header .header-content .nav .nav-item:after {
    transform: rotateX(-90deg) translateZ(20px)
}

.header .header-content .nav .nav-item.active,.header .header-content .nav .nav-item:hover {
    /*transform: rotateX(90deg)*/
}

@media(min-width:769px)and (max-width:1536px) {
    .header .header-content {
        padding: 0 20px
    }

    .header .header-content .logo {
        margin-right: 15px
    }

    .header .header-content .logo .logo-image {
        max-height: 50px
    }

    .header .header-content .nav {
        font-size: 15px;
        gap: 0
    }

    .header .header-content .nav .nav-item {
        padding: 0 8px
    }

    .header .header-content .nav .nav-item:before {
        transform: translateZ(15px)
    }

    .header .header-content .nav .nav-item:after {
        transform: rotateX(-90deg) translateZ(15px)
    }
}

@media(max-width:768px) {
    .header {
        background-color: transparent;
        height: 60px;
        width: 100%
    }

    .header.header-mobile-open {
        background-color: #fff!important;
        background-image: none!important;
        box-shadow: 0 2px 10px #0000000d
    }

    .header.header-home:not(.header-mobile-open):not(.header-scrolled) {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: transparent!important;
        background-image: none!important;
        box-shadow: none
    }

    .header.header-home.header-scrolled:not(.header-mobile-open) {
        background: #fff;
        background-image: none;
        box-shadow: 0 2px 10px #0000001a
    }

    .header.header-other {
        background: #fff;
        height: 60px
    }

    .header .header-content {
        height: 100%;
        justify-content: space-between;
        max-width: 95%;
        padding: 0 16px
    }

    .header .header-content .logo {
        height: 100%;
        margin-right: 0;
        max-width: none;
        padding: 10px 0;
        width: auto
    }

    .header .header-content .logo .logo-image {
        height: 100%;
        max-height: 32px;
        -o-object-fit: contain;
        object-fit: contain;
        width: auto
    }

    .header .header-content .hamburger {
        display: flex;
        margin-right: 0
    }

    .header .header-content .nav {
        background: #fff;
        box-shadow: 0 10px 20px #0000000d;
        display: block;
        gap: 0;
        height: 0;
        left: 0;
        overflow: hidden;
        padding: 0;
        position: fixed;
        top: 60px;
        transition: height .3s cubic-bezier(.4,0,.2,1);
        width: 100%;
        z-index: 90
    }

    .header .header-content .nav.mobile-open {
        height: calc(100vh - 60px);
        overflow-y: auto;
        padding-bottom: 40px
    }

    .header .header-content .nav .nav-item {
        border-bottom: 1px solid #f5f5f5;
        display: block;
        height: 50px;
        line-height: 50px;
        margin: 0;
        padding: 0 30px;
        perspective: none!important;
        text-align: left;
        transform: none!important;
        transform-style: flat!important;
        transition: none!important;
        width: 100%
    }

    .header .header-content .nav .nav-item:after,.header .header-content .nav .nav-item:before {
        display: none!important
    }

    .header .header-content .nav .nav-item span {
        color: #333;
        display: block;
        font-size: 15px;
        font-weight: 500;
        opacity: 1!important;
        pointer-events: auto!important;
        width: 100%
    }

    .header .header-content .nav .nav-item.active,.header .header-content .nav .nav-item:hover {
        background-color: #f8fbff;
        transform: none
    }

    .header .header-content .nav .nav-item.active span,.header .header-content .nav .nav-item:hover span {
        color: #0d438c
    }
}