@charset "UTF-8";
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        body {
            font: 14px/30px 'Microsoft Yahei', sans-serif;
            color: #333;
            text-align: center;
        }

        .box {
            overflow: hidden;
            zoom: 1;
            width: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
        }

        .left,
        .right {
            position: absolute;
            height: 100%;
            top: 0;
            width: 50%;
            cursor: pointer;
            color: #E44951;
            z-index: 10;
            transition: background 1.5s;
            background: rgba(255, 255, 255, 0);
        }

        .left.op30,
        .right.op30 {
            background: rgba(255, 255, 255, 0.5);
        }

        .left {
            left: 0;
        }

        .left:hover,
        .right:hover {
            background: transparent;
        }

        .right {
            right: 0;
        }

        #v {
            position: absolute;
            bottom: 40%;
            left: 50%;
            width: 100%;
            height: 100%;
            min-width: 2560px;
            min-height: 1440px;
            transform: translate(-50%, 40%);
            z-index: -1;
        }

        #bing{ 
            position: absolute;
            bottom: 40%;
            left: 50%;
            width:100%;
            height:100%;
            min-width: 1920px;
            min-height: 1080px;
            transform: translate(-50%, 40%);
            z-index: -1;
            background-image: url('https://www.xingsuda.com/bing.php');
         }

        .title {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 188px;
            margin: -201px 0 0 0;
            z-index: 1;
            overflow: hidden;
            /* background-image: url('./styles/logo5.png'); */
            background-repeat: no-repeat;
            background-position: center center;
            background-size: auto 60%;
            opacity: 0;
        }

        .title img {
            width: 100%;
        }

        .left-title,
        .right-title {
            position: absolute;
            top: 50%;
            width: 228px;
            font-size: 50px;
            font-weight: bold;
            height: 120px;
            line-height: 120px;
            margin: -60px 0 0;
        }

        .left-title a,
        .right-title a {
            color: #888;
            transition: color .6s;
        }

        .desc {
            width: 1000px;
            height: auto;
            overflow: hidden;
            display: inline;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: 50px 0 0 -500px;
            z-index: 1;
            color: #535353;
            animation: d-down 1s 4s forwards;
        }

        .desc div {
            height: 50px;
            overflow: hidden;
            text-align: left;
        }

        .desc p {
            width: auto;
            height: 0;
            overflow: hidden;
            display: inline-block;
            word-break: keep-all;
        }

        .desc .ch,
        .desc .en {
            animation: open 2s 2s forwards;
        }

        @keyframes open {
            from {
                height: 0;
            }

            to {
                height: 50px;
            }
        }

        .desc div {
            margin: 0 auto;
            width: 806px;
            box-sizing: border-box;
        }

        .desc .ch {
            font-size: 24px;
            color: #000;
            line-height: 50px;
            float: left;
            /*            transition: color .6s;*/
        }

        .desc .en {
            font-size: 18px;
            color: #000;
            line-height: 50px;
            float: right;
            /*            transition: color .6s;*/
        }

        .left-title {
            right: 0;
            width: 151px;
            text-align: left;
        }

        .right-title {
            left: 0;
            text-align: right;
        }

        .animate-1,
        .animate-2 {
            opacity: 0;
        }

        .animate-0 {
            animation: a0 4s 1s linear forwards;
        }

        .animate-1 {
            animation: a1 1s 4s forwards;
        }

        .animate-2 {
            animation: a2 1s 4s forwards;
        }

        .lr-down {
            animation: leftright-down 1s 6s forwards;
        }

        @keyframes a0 {
            0% {
                height: 0;
                opacity: 0;
            }

            25% {
                height: 203px;
                opacity: 1;
                transform: translateY(0);
            }

            75% {
                transform: translateY(0);
            }

            95% {
                opacity: 1;
                transform: translateY(-90px);
            }

            100% {
                height: 203px;
                opacity: 1;
                transform: translateY(-90px);
            }
        }

        @keyframes a1 {
            0% {
                transform: translate3d(-1000px, 0, 0);
                opacity: 0;
            }

            100% {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }

        @keyframes a2 {
            0% {
                transform: translate3d(1000px, 0, 0);
                opacity: 0;
            }

            100% {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }

        @keyframes d-down {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(80px);
            }
        }

        @keyframes leftright-down {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .ch-menu,
        .en-menu {
            height: 100%;
            position: fixed;
            top: 0;
            z-index: 25;
        }

        .ch-menu {
            width: 260px;
        }

        .en-menu {
            width: 400px;
        }

        .ch-menu ul,
        .en-menu ul {
            overflow: hidden;
            direction: inline-block;
            position: absolute;
            top: 50%;
            z-index: 20;
            display: none;
            transform: translateY(-50%);
        }

        .ch-menu ul {
            left: 0;
        }

        .en-menu ul {
            right: 0;
        }

        .ch-menu {
            left: 0;
        }

        .en-menu {
            right: 0;
        }

        .ch-menu li,
        .en-menu li {
            height: 40px;
            overflow: hidden;
            font-size: 18px;
            line-height: 40px;
            color: #CCC;
            padding: 11px 0;
            word-break: keep-all;
        }

        .ch-menu li a,
        .en-menu li a {
            color: #CCC;
            display: block;
            width: 100%;
        }

        .ch-menu li {
            width: 260px;
        }

        .en-menu li {
            width: 505px;
        }

        .ch-menu li p {
            width: 150px;
        }

        .en-menu li p {
            width: 355px;
        }

        .ch-menu li:hover p {
            width: 260px;
        }

        .en-menu li:hover p {
            width: 500px;
        }

        .ch-menu li p,
        .en-menu li p {
            color: #CCC;
            text-align: center;
            background-color: #104E81;
            transition: width 1s;
        }

        .ch-menu li p {
            float: left;
        }

        .en-menu li p {
            float: right;
        }

        .ch-menu .arrow,
        .en-menu .arrow {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 50%;
            margin: -25px 0 0 0;
            display: none;
        }

        .ch-menu .arrow {
            left: 0;
        }

        .en-menu .arrow {
            right: 0;
        }

        .ch-menu .arrow img,
        .en-menu .arrow img {
            width: 38px;
            height: 38px;
            opacity: 0;
        }

        .ch-menu .arrow img {
            float: right;
            animation: arrL 1.2s linear infinite;
        }

        @keyframes arrL {
            0% {
                transform: translateX(0);
                opacity: 0;
            }

            50% {
                transform: translateX(-26px);
                opacity: 1;
            }

            100% {
                transform: translateX(-42px);
                opacity: 0;
            }
        }

        .en-menu .arrow img {
            float: left;
            animation: arrR 1.2s linear infinite;
        }

        @keyframes arrR {
            0% {
                transform: translateX(0);
                opacity: 0;
            }

            50% {
                transform: translateX(26px);
                opacity: 1;
            }

            100% {
                transform: translateX(42px);
                opacity: 0;
            }
        }
        .footer{ 
            position: absolute;
            top: 95%;
            left: 0;
            width: 100%;
            height: 24px;
            margin: 0 0 0 0;
            z-index: 5;
            overflow: hidden;
         }