<style>
  .new-logo-middle { width: 10rem; border-radius: 50%; box-shadow: 0.7244rem 0.9659rem 1.9318rem rgba(39, 54, 78, 0.1); }
  @media (max-width: 1600px) {
    .new-logo-middle { width: 7.5rem; }
  }
    @media (min-width: 1281px) {
        .banner-container {
            margin: 100px auto 150px auto;
        }
    }
    /* codex字体大小自适应 */
    @media (max-width: 1599px) {
        .display-1 {font-size: 3.5rem;}
        .display-3 {font-size: 2.75rem;}
        .font-size-super {font-size: 20px;}
        .font-size-huge {font-size: 18px;}
    }
    /* codex字体大小自适应 */
    @media (max-width: 1279px) {
        .display-1 {font-size: 3rem;}
        .display-3 {font-size: 2.5rem;}
        .font-size-super {font-size: 18px;}
        .font-size-huge {font-size: 16px;}
        .font-size-normal {font-size: 14px;}
    }
    @media (max-width: 991px) {
        .display-1 {font-size: 2.5rem;}
        .display-3 {font-size: 2.25rem;}
        h2, .h2 {font-size: 1.75rem;}
        .font-size-super {font-size: 16px;}
        .font-size-huge {font-size: 14px;}
    }
    @media (max-width:767px) {
        .display-1 { font-size: 2rem;}
        .display-3 {font-size: 1.75rem;}
        h2, .h2 {font-size: 1.5rem;}
        .font-size-super {font-size: 12px;}
        .font-size-huge {font-size: 12px;}
        .font-size-normal {font-size: 12px;}
    }

    .swiper-button-next, .swiper-button-prev {width: 20px;height: 20px;background-size: auto;outline: none;margin-top: -7px;}
    @media(min-width: 576px) {
        .swiper-button-next, .swiper-button-prev {width: 50px;height: 50px;padding: 15px;}
    }
    .swiper-button-next {background-image: url("../images/arrow-right-1.svg");}
    .swiper-button-prev {background-image: url("../images/arrow-left-1.svg");}

    /* 自定义tab切换样式  begin */
    #page-nav.nav-tabs {border-bottom: 2px solid #D6D6D6;}
    #page-nav.nav-tabs .nav-item {padding: 21px 5px;}
    #page-nav.nav-tabs .nav-item:hover, #page-nav.nav-tabs .nav-item:active {text-decoration: none;}
    #page-nav.nav-tabs .nav-item.active {border-left: none;border-right: none;border-top: none;position: relative;}
    #page-nav.nav-tabs .nav-item.active::after {content: '';width: 100%;height: 6px;background: linear-gradient(269.99deg, #FFBF1C -4.17%, #FF3A3A 24.89%, #FF123D 79.1%, #FF27C3 103.12%);border-radius: 20px;position: absolute;bottom: 0;left: 0;transform: translateY(50%);}
    /* 自定义tab切换样式  end */

    /* 自定义tab切换样式  begin */
    #post-nav.nav-tabs {border: 1px solid #D6D6D6; border-radius: 20px; margin-top: 20px;overflow: hidden;}
    #post-nav.nav-tabs .nav-item {padding: 10px 5px;}
    #post-nav.nav-tabs .nav-item:hover, #post-nav.nav-tabs .nav-item:active {text-decoration: none;}
    #post-nav.nav-tabs .nav-item.active {
        color: #FFFFFF;
        border-radius: 20px;
        background: linear-gradient(269.99deg, #FFBF1C -4.17%, #FF3A3A 24.89%, #FF123D 79.1%, #FF27C3 103.12%);
        border:none;
    }
    /* 自定义tab切换样式  end */

    .h1-title-img {
        height: 30px;
    }
    @media (min-width: 375px) {
        .h1-title-img {height: 40px;}
    }
    @media (min-width: 1024px) {
        .h1-title-img {height: 60px;}
    }
    @media (min-width: 1280px) {
        .h1-title-img {height: inherit;}
    }

    .feature-icon {width: 64px;}
    .flowchart-item, .prototype-item, .designer-item, .mindmap-item {position: relative;}
    
    .flowchart-item::before, .prototype-item::before, .designer-item::before, .mindmap-item::before {content: '';width: 20px;height: 20px;border-radius: 50%;position: absolute;}
    @media (min-width: 1280px) {
        .position-xl-absolute {position:absolute;}
        .flowchart-item::before {background: linear-gradient(230.47deg, #FFBF1C -0.87%, #FF3A3A 19.2%, #FF123D 77.87%, #FF27C3 97.94%);top: -2rem;right: -2rem;}
        .prototype-item::before {background: linear-gradient(310.84deg, #32E2E2 12.12%, #0C99FF 27.25%, #007BFF 64.3%, #895EE3 84.71%), linear-gradient(230.47deg, #FFBF1C -0.87%, #FF3A3A 19.2%, #FF123D 77.87%, #FF27C3 97.94%);top: -3rem;left: 50%;transform: translateX(-50%);}
        .designer-item::before {background: linear-gradient(232.58deg, #FFEA2E -8.89%, #B02FFF 25.3%, #6C4BD5 57.85%, #5B33FD 85.54%, #1254FF 98.71%), linear-gradient(230.47deg, #FFBF1C -0.87%, #FF3A3A 19.2%, #FF123D 77.87%, #FF27C3 97.94%);top: -3rem;left: 50%;transform: translateX(-50%);}
        .mindmap-item::before {background: linear-gradient(234.66deg, #DEFF10 -2.46%, #34EBD5 18.97%, #27CCB8 69.96%, #00A5C9 98.29%), linear-gradient(230.47deg, #FFBF1C -0.87%, #FF3A3A 19.2%, #FF123D 77.87%, #FF27C3 97.94%);top: -2rem;left: -1rem;}
        .flowchart-item { margin-top: -170px;}
        .prototype-item {margin-top: 20px;}
        .designer-item {margin-top: 20px;}
        .mindmap-item {margin-top: -145px;}
    }
    
    @media (min-width: 1600px) {
        .flowchart-item { margin-top: -170px;}
        .prototype-item {margin-top: 20px;}
        .designer-item {margin-top: 20px;}
        .mindmap-item {margin-top: -145px;}
    }
    @media (min-width: 2000px) {
        .flowchart-item { margin-top: -100px;}
        .prototype-item {margin-top: 16px;}
        .designer-item {margin-top: 24px;}
        .mindmap-item {margin-top: -90px;}
    }

    .top-container {
        color: #818181;
        font-size: 18px;
        display: flex;
        background: rgb(249, 249, 249);
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .department, .position {
        cursor: pointer;
        padding: 24px 0;
        list-style: none;
        margin-bottom: 0;
    }
    .position {
        flex-grow: 1;
    }
    .department li.active, .position li.active  {
        position: relative;
        z-index: 2;
    }
    
    .department li.active, .position li span.active {
        color: #000000;
        font-weight: bold;
    }

    .department li.active::before {
        content: '';
        width: 5px;
        height: 100%;
        background: linear-gradient(269.99deg, #FFBF1C -4.17%, #FF3A3A 24.89%, #FF123D 79.1%, #FF27C3 103.12%);
        border-radius: 20px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .department li.active::after, .position li.active::after {
        content: '';
        height: 100%;
        width: 100%;
        background: #ADADAD;
        opacity: 0.17;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        pointer-events:none;
    }

    .department li span {
        display: block;
        padding: 16px 26px;
    }

    .position li span {
        display: block;
        padding: 16px 60px;
        min-width: 250px;
    }

    .position li {
        display: flex;
    }
    @media (min-width: 1280px) {
        .position li {
            padding: 0 60px;
        }
    }
    .department {
        background: linear-gradient(213.05deg, #FFF8E8 2.22%, #FFEAEB 26.33%, #FFE8EC 71.31%, #FFE9F8 91.25%);
        border-radius: 20px;
        font-size: 18px;
        padding-left: 0; 
    }

    .bottom-section {
        background-image: url("../images/bottom-section-bg-mobile-1.svg");
        background-size: cover;
        background-position: center;
        background-repeat: repeat;
    }
    

    @media (min-width: 768px) {
        .bottom-section {
            background-image: url("../images/bottom-section-bg-1.svg");
        }
    }

    #section-future .linear-gradient-text {
        color: #FF2B3C;
        background: -webkit-linear-gradient(221.95deg, #FFBB6A 3.52%, #FF4949 33.89%, #FF365A 74.72%, #FF6838 99.79%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .fixed-box {
        width: 100%;
        top: 0;
        left: 0;
        position: fixed;
        z-index: 100;
        background: #FFFFFF;
        border-bottom: 1px solid #cccccc;
    }
</style>