        <!-- 3d css --><style>
        /* 正方向0-40度 */
        
        @keyframes rotateY1 {
            from {
                transform: rotateY(0deg);
            }
            to {
                transform: rotateY(40deg);
            }
        }
        /* 正方向40-80度 */
        
        @keyframes rotateY2 {
            from {
                transform: rotateY(40deg);
            }
            to {
                transform: rotateY(80deg);
            }
        }
        /* 正方向80-120度 */
        
        @keyframes rotateY3 {
            from {
                transform: rotateY(80deg);
            }
            to {
                transform: rotateY(120deg);
            }
        }
        /* 正方向120-160度 */
        
        @keyframes rotateY4 {
            from {
                transform: rotateY(120deg);
            }
            to {
                transform: rotateY(160deg);
            }
        }
        /* 正方向160-200度 */
        
        @keyframes rotateY5 {
            from {
                transform: rotateY(160deg);
            }
            to {
                transform: rotateY(200deg);
            }
        }
        /* 正方向200-240度 */
        
        @keyframes rotateY6 {
            from {
                transform: rotateY(200deg);
            }
            to {
                transform: rotateY(240deg);
            }
        }
        /* 正方向240-280度 */
        
        @keyframes rotateY7 {
            from {
                transform: rotateY(240deg);
            }
            to {
                transform: rotateY(280deg);
            }
        }
        /* 正方向280-320度 */
        
        @keyframes rotateY8 {
            from {
                transform: rotateY(280deg);
            }
            to {
                transform: rotateY(320deg);
            }
        }
        /* 正方向320-360度 */
        
        @keyframes rotateY9 {
            from {
                transform: rotateY(320deg);
            }
            to {
                transform: rotateY(360deg);
            }
        }
        /* 负方向0-40度 */
        
        @keyframes rotate-Y1 {
            from {
                transform: rotateY(0deg);
            }
            to {
                transform: rotateY(-40deg);
            }
        }
        /* 负方向40-80度 */
        
        @keyframes rotate-Y2 {
            from {
                transform: rotateY(-40deg);
            }
            to {
                transform: rotateY(-80deg);
            }
        }
        /* 负方向80-120度 */
        
        @keyframes rotate-Y3 {
            from {
                transform: rotateY(-80deg);
            }
            to {
                transform: rotateY(-120deg);
            }
        }
        /* 负方向120-160度 */
        
        @keyframes rotate-Y4 {
            from {
                transform: rotateY(-120deg);
            }
            to {
                transform: rotateY(-160deg);
            }
        }
        /* 负方向160-200度 */
        
        @keyframes rotate-Y5 {
            from {
                transform: rotateY(-160deg);
            }
            to {
                transform: rotateY(-200deg);
            }
        }
        /* 负方向200-240度 */
        
        @keyframes rotate-Y6 {
            from {
                transform: rotateY(-200deg);
            }
            to {
                transform: rotateY(-240deg);
            }
        }
        /* 负方向240-280度 */
        
        @keyframes rotate-Y7 {
            from {
                transform: rotateY(-240deg);
            }
            to {
                transform: rotateY(-280deg);
            }
        }
        /* 负方向280-320度 */
        
        @keyframes rotate-Y8 {
            from {
                transform: rotateY(-280deg);
            }
            to {
                transform: rotateY(-320deg);
            }
        }
        /* 负方向320-360度 */
        
        @keyframes rotate-Y9 {
            from {
                transform: rotateY(-320deg);
            }
            to {
                transform: rotateY(-360deg);
            }
        }
        
        body {
            background: #f9f9f9;
        }
        
        .my-container {
            width: auto;
            height: 800px;
            margin-top: 250px;
            margin-bottom: 20px;
            margin-left: 100;
            margin-right: auto;
            /* margin: 20px auto; */
            /*border: 1px solid red;*/
            /* background-color: aqua; */
        }
        
        .photo-wrap {
            perspective: 800px;
            width: 800px;
            margin-top: 150px;
            margin-bottom: 20px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .container {
            /* width: 800px;  height: 600px; */
            width: 800px;
            height: 600px;
            /* margin: 80 80 80 auto; */
            margin: auto;
            position: relative;
            transform-style: preserve-3d;
        }
        
        .img {
            /* width: 200px;
            height: 118px; */
            /* line-height: 118px; */
            width: 350px;
            height: 220px;
            line-height: 220px;
            /* width: 400px;
    height: 236px;
    line-height: 236px; */
            text-align: center;
            position: absolute;
            top: 160px;
            left: 300px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
            background: rgb(255, 255, 255);
        }
        
        .img01 {
            transform: rotateY(0deg) translateZ(500px);
        }
        
        .img02 {
            transform: rotateY(40deg) translateZ(500px);
        }
        
        .img03 {
            transform: rotateY(80deg) translateZ(500px);
        }
        
        .img04 {
            transform: rotateY(120deg) translateZ(500px);
        }
        
        .img05 {
            transform: rotateY(160deg) translateZ(500px);
        }
        
        .img06 {
            transform: rotateY(200deg) translateZ(500px);
        }
        
        .img07 {
            transform: rotateY(240deg) translateZ(500px);
        }
        
        .img08 {
            transform: rotateY(280deg) translateZ(500px);
        }
        
        .img09 {
            transform: rotateY(320deg) translateZ(500px);
        }
        
        .img1to9 {
            width: 350px;
            height: 220px;
        }
        
        .prev {
            width: 30px;
            height: 70px;
            color: #6d8099;
            float: left;
            font-size: 22px;
            background: #ddd;
            line-height: 70px;
            text-align: center;
            position: relative;
            bottom: -175px;
            border-radius: 5px;
            z-index: 100;
        }
        
        .next {
            width: 30px;
            height: 70px;
            color: #6d8099;
            float: right;
            font-size: 22px;
            background: #ddd;
            line-height: 70px;
            text-align: center;
            position: relative;
            bottom: -175px;
            border-radius: 5px;
            z-index: 100;
        }
        /*contact*/
        
        #contact {
            background: url("../images/contact-map.jpg") no-repeat;
            background-size: cover;
            color: #fff;
            /*height: 450px;*/
        }
        
        #contact span.glyphicon.glyphicon-send {
            margin-right: 25px;
        }
        
        #contact span.glyphicon.glyphicon-home,
        #contact span.glyphicon.glyphicon-phone,
        #contact span.glyphicon.glyphicon-envelope {
            margin-right: 12px;
        }
        
        #contact h2 {
            font-weight: bold;
            margin-bottom: 30px;
            margin-top: 0;
        }
        
        #contact p.contact-p {
            margin-bottom: 30px;
        }
        
        #contact input.form-control {
            border-radius: 0;
            border: none;
            height: 40px;
            margin-bottom: 20px;
        }
        
        #contact textarea.form-control {
            border-radius: 0;
            border: none;
            margin-bottom: 20px;
        }
        
        #contact input[type="submit"] {
            background-color: #3dc7b7;
            color: #fff;
            transition: all .5s;
        }
        
        #contact input[type="submit"]:hover {
            background-color: #068577;
            color: #fff;
        }
        /*footer*/
        
        #footer {
            padding: 20px 0 15px;
            text-align: center;
            font-size: 16px;
        }
        
        .musk {
            height: 100%;
            width: 100%;
            background: rgba(0, 0, 0, .7);
            padding: 90px 0 60px;
        }
        
        .musk-about {
            /* height: 100%; */
            width: 100%;
            /* background: url("./img/about-bg.jpg") no-repeat; */
            background: rgba(161, 110, 110, 0.7);
            margin-top: 80px;
            margin-bottom: 80px;
            /* padding: 90px 0 60px; */
            /* background-origin: border-box;
    padding-top: 30.85%; */
            /* 316 / 1024 */
            /* background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat; */
            /* background-size: cover;
    background-position: center; */
        }
        
        #about p {
            margin-right: 30px;
            font-weight: bold;
            font-size: 30px;
        }
        
        #about {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        
        .container-about {
            /* width: 800px;
    height: 600px; */
            width: 800px;
            height: 600px;
            /* margin: 0 auto; */
        }
        
        .img-about {
            width: auto;
            height: 1100px;
            margin: 120px auto 0px;
            background-color: #ff69b4;
            overflow: auto;
        }
        
        .img-div {
            /* width: auto; */
            height: 960px;
            padding: 10px;
            margin: 120px auto 120px;
            /* background-color: #0771c7; */
        }
        
        .container-mct {
            margin-top: 250px auto;
            /* font-weight: bold; */
        }
        
        #about h2 {
            font-size: 50px;
            color: #dd127b;
        }
        
        .en-p {
            color: rgb(248, 212, 212);
            font-size: 20px;
            /* visibility: hidden; */
        }
        
        .cn-p {
            color: #fff;
        }
        
        .div-relative {
            /* position: relative; */
            /* color: #000000; */
            /* border: 1px solid #000000; */
            /* width: auto;
            height: 400px; */
        }
        
        .brand-cn {
            /* position: absolute; */
            /* left: 30px;
            top: 30px;
            background: #F00;
            width: auto;
            height: 400px; */
        }
        
        .brand-en {
            /* position: absolute; */
            /* left: 30px;
            top: 30px;
            background: #F00;
            width: auto;
            height: 400px; */
            visibility: hidden;
        }
        
        .product-mct {
            margin: 60px auto 5px;
            /* background-color: #dd127b; */
        }
        
        #product-img img {
            /* margin: 5px auto 5px; */
            width: auto;
        }
        
        </style>