.top-banner {
    position: sticky;
    z-index: 999;
    top: calc(-50vh + 80px + 9em);
    height: 50vh;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(/assets/img/top1.685be1e.jpg);
}
.top-banner-left,
.top-banner-right {
    position: absolute;
    z-index:10;
    height: calc(100vw * 0.3420201433256687 + 50vh * 0.9396926207859084);  /* w*sin(20deg) + h * cos(20deg) */
    width: calc(50vw * 0.9396926207859084 + 50vh * 0.3420201433256687);   /* w*cos(20deg) + h * sin(20deg) */
    box-sizing: border-box;
    overflow: hidden;
    left: 50%;
    top: 50%;
    cursor: pointer;
}

/* rotate 20 deg */
.top-banner-left {      
    left:50%;
    transform: translate(-100%, -50%) rotate(20deg);
    transform-origin: right;
    border-right: 4px solid white;
}
.top-banner-right {
    left:50%;
    transform: translate(0%, -50%) rotate(20deg);
    transform-origin: left;
    border-left: 4px solid white;
}
.top-banner .top-banner-inner {
    position: absolute;
    top: 50%;
    width: calc(50vw + 25vh * 0.3420201433256687);
    height: 50vh;
}
.top-banner-left .top-banner-inner {
    right: -4px;
    transform: translate(0%, -50%) rotate(-20deg);
    transform-origin: right;
}
.top-banner-right .top-banner-inner {
    left: -4px;
    transform: translate(0%, -50%) rotate(-20deg);
    transform-origin: left;
}
.top-banner .top-banner-body {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
.top-banner-left .top-banner-body {
    right: calc(25vh * -0.36397023426620234);
}
.top-banner-right .top-banner-body {
    left: calc(25vh * -0.36397023426620234);
}
.top-banner .top-banner-mask {
    z-index:1;
    background:linear-gradient(transparent, rgba(0,0,0,0.4) 80%);
}
.top-banner:hover .top-banner-left.hovered .top-banner-mask,
.top-banner:hover .top-banner-right.hovered .top-banner-mask {
    border-bottom: 0px solid transparent !important;
}
.top-banner-left.hovered .top-banner-mask,
.top-banner-right.hovered .top-banner-mask,
.top-banner:hover .top-banner-left:hover .top-banner-mask,
.top-banner:hover .top-banner-right:hover .top-banner-mask {
    border-bottom: 8px solid rgb(207, 182, 29) !important;
}
.top-banner-slogan {
    position: sticky;
    z-index: 999;
    top: 88px;
    margin-top: calc(-25vh - 50px);
    height: calc(25vh + 50px);
    overflow: hidden;
    pointer-events: none;
}
.top-banner-slogan h1,
.top-banner-slogan h2 {
    color: white;
}
@media only screen and (max-width : 1440px) {
.top-banner {
        top: calc(-50vh + 80px + 7.5em);
}
.top-banner-slogan h1 {
        font-size:1.8em;
}
.top-banner-slogan h2 {
        font-size:1.4em;
}
}
.value-panel-wrapper {
    height: 50vh;
    min-height: 400px;
    overflow: hidden;
}
.client-logo-wrapper {
    height: 200px;
}
.client-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 180px;
    max-height: 180px;
}
.value-panel-wrapper .value-panel {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all ease-in-out .3s;
    padding: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.value-panel-wrapper .value-panel .value-mask {
    background: rgba(0,0,0,0.3);
}
.value-panel-wrapper .value-2 .value-mask,
.value-panel-wrapper .value-3 .value-mask {
    background: rgba(0,0,0,0.4);
}
.value-panel-wrapper .tl-flex-none {
    width: 12%;
    box-sizing: border-box;
    border-left: 0.5em solid white;
}
.value-panel-wrapper:hover .tl-flex-auto {
    flex:none;
    box-sizing: border-box;
    width: 12%;
}
.value-panel-wrapper:hover .tl-flex-none:hover,
.value-panel-wrapper:hover .tl-flex-auto:hover {
    flex:auto;
    transition: all ease-in-out 0s; /* avoid blank area at the right-most because when mouse moves too quickly to wait for all panels' growing finished, then mouse goes to a blank area, therefore no-hovered panels appear */
}
.value-panel-wrapper .value-1 {
    background-image: url(/assets/img/1.34d853b.jpg);
}
.value-panel-wrapper .value-2 {
    background-image: url(/assets/img/100.4505bd4.jpg);
    background-position: 25%;
}
.value-panel-wrapper .value-3 {
    background-image: url(/assets/img/101.6ca0568.jpg);
    background-position: 35%;
}
.value-panel-wrapper .value-4 {
    background-image: url(/assets/img/4.28a8f22.jpg);
    background-position: 20%;
}
.value-panel-wrapper .value-panel h1,
.value-panel-wrapper .value-panel p {
    color: white;
    z-index: 1;
}
.value-panel-wrapper:hover .tl-flex-auto h1,
.value-panel-wrapper .tl-flex-none h1 {
    writing-mode: vertical-rl;
    text-align: center;
    height: 100%;
    margin: auto;
}
.value-panel-wrapper:hover .tl-flex-auto p,
.value-panel-wrapper .tl-flex-none p {
    display: none;
}
.value-panel-wrapper:hover .tl-flex-none:hover h1,
.value-panel-wrapper:hover .tl-flex-auto:hover h1 {
    writing-mode: initial;
    text-align: initial;
    height: initial;
    margin: .67em 0;
}
.value-panel-wrapper:hover .tl-flex-none:hover p,
.value-panel-wrapper:hover .tl-flex-auto:hover p {
    display: block;
}
.require-panel {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
}
.require-panel .require-panel-mask {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
}
.require-panel .require-panel-body {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 85%;
    transform: translate(-50%, -50%);
}
.require-panel-1 {
    background-image: url(/assets/img/a.4cd3567.jpg);
}
.require-panel-2 {
    background-image: url(/assets/img/b.81ea702.jpg);
}
.require-panel-3 {
    background-image: url(/assets/img/c.466f565.jpg);
}
.require-panel-4 {
    background-image: url(/assets/img/j.2cb91c2.jpg);
}
.require-panel-5 {
    background-image: url(/assets/img/103.6cc9d43.jpg);
}
.require-panel-6 {
    background-image: url(/assets/img/f.d2b12ad.jpg);
}
.require-panel-7 {
    background-image: url(/assets/img/g.ff01984.jpg);
}
.require-panel-8 {
    background-image: url(/assets/img/h.6eaa373.jpg);
}
.require-panel-9 {
    background-image: url(/assets/img/i.4e4ab25.jpg);
}
.require-panel h3 {
    color: white;
    margin-bottom:2em;
    font-size: 2em;
}
.require-panel p {
    color: white;
}
.require-panel-trigger {
    max-height: calc(20% - 8px);
    cursor: pointer;
    
    position: relative;
    border-radius: 8px;
    background: #F5F6F7;

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em 2em;
}
.require-panel-trigger p {
    position: relative;
    z-index:1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.require-panel-trigger .line-bar {
    position: relative;
    z-index: 1;
    width: 0px;
    height: 4px;
    border-radius: 2px;
    transition: all ease-in-out .4s;
}
.require-panel-trigger .abs-full {
    opacity: 0;
    background: rgb(120, 180, 210);
    transition: all ease-in-out .2s;
}
.require-panel-trigger.hovered p {
    color: white;
}
.require-panel-trigger.hovered .line-bar {
    width: 100%;
    background: linear-gradient(90deg, white, transparent);
}
.require-panel-trigger.hovered .abs-full {
    opacity: 1.0;
}
.function-desc .function-panel-1 {
    background-image: url(/assets/img/110.39c52fa.jpg);
}
.function-desc .function-panel-2 {
    background-image: url(/assets/img/111.d6de682.jpg);
}
.function-desc .function-panel-3 {
    background-image: url(/assets/img/112.7961b8f.jpg);
}
.function-desc .function-panel-4 {
    background-image: url(/assets/img/113.5f867fd.jpg);
}
.function-desc .function-panel-5 {
    background-image: url(/assets/img/114.0be6f79.jpg);
}
.function-desc .function-panel-6 {
    background-image: url(/assets/img/115.b214209.jpg);
}
.function-desc .function-panel-7 {
    background-image: url(/assets/img/116.0804b48.jpg);
}
.scale-in-enter-active,
.scale-in-leave-active {
    transition: 300ms;
}
.scale-in-enter,
.scale-in-leave-active {
    opacity: 0;
    transform: scale(0);
}