* {
    padding: 0;
    margin: 0;
    font-family: "Microsoft YaHei", "Helvetica";
}

html,body {
    width: 100%;
    padding: 0;
    min-width: 320px;
    margin: 0px;
    font-weight: 500;
    color: #3f4c5d;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 500;
}

button,select,em {
    outline: medium none;
}

li {
    list-style: none;
}

em,i {
    font-style: normal;
}

img {
    border: 0;
}

a {
    color: #3f4c5d;
    cursor: pointer;
    text-decoration: none;
}

a:hover,a:focus,a:visited,a:active {
    text-decoration: none;
}

input,em {
    outline: none;
}

table,tr,td {
    display: block;
}

a,img,button,input,textarea {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

input,textarea {
    -webkit-appearance: none;
}

div#canvas3d {
    border: none;
    cursor: move;
}

div#canvas3d canvas {
    z-index: 0;
}

div#canvas3d #video1 {
    width: 100%;
    overflow: hidden;
    border-radius: 46%;
}

div#canvas3d .vedio {
    overflow: hidden;
    width: 34%;
    margin-left: -18%;
    position: fixed;
    left: 50%;
}

#backImg {
    overflow: hidden;
    background-image: url(../img/back.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    min-width: 1000px;
    /* width: expression_r( document.body.clientWidth < 334 ? "333px" : "auto" ); */
}

.NBONe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    position: fixed;
    z-index: 999;
}

#preloader {
    top: 5%;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    position: fixed;
    z-index: 22;
}

#loader {
    width: 34%;
    background-image: url(../img/cloud1.png);
    background-repeat: no-repeat;
    background-position: right;
    margin-left: -17.5%;
    left: 50%;
    position: absolute;
    -webkit-animation: spin1 153s linear infinite;
    animation: spin1 153s linear infinite;
    z-index: 22;
}

#loader:before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    background-image: url(../img/cloud.png);
    background-size: 100% 100%;
    -webkit-animation: spin 153s linear infinite;
    animation: spin 153s linear infinite;
    z-index: 22;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin1 {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin1 {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.right {
    position: absolute;
    right: 5%;
    top: 19%;
    z-index: 222;
    width: 22em;
}

.right li {
    text-align: right;
    margin-bottom: 5%;
}

.right li img {
    height: 4.2em;
}

/*right li img:hover{height:5.5em;}*/

.right li:nth-child(3) img {
    /* margin-right:-.6em; */
}

.right li:nth-child(6) img {
    margin-right: -.2em;
}

.menuOne {
    height: 7.5em;
    margin-right: 2em;
    background-repeat: no-repeat;
    background-size: auto 7.5em;
    background-position: right;
}

.menuTwo {
    height: 7.45em;
    margin-right: 6.66em;
    background-repeat: no-repeat;
    background-size: auto 7.45em;
    background-position: right;
}

.menuThree {
    height: 7em;
    ;
    background-repeat: no-repeat;
    background-size: auto 7.5em;
    background-position: right;
    margin-right: 8.44em;
}

.menuOne img,
.menuTwo img,
.menuThree img {
    height: 7.5em;
    float: right;
}

.menuThree img {
    margin-top: -1em;
}

#loading {
    position: absolute;
    background: #fff;
    width: 100%;
    z-index: 9999;
    height: 100%;
    text-align: center;
}

#loading img {
    width: 14em;
    height: 10.5em;
    z-index: 99;
    height: auto;
    position: absolute;
    top: 50%;
    margin-top: -5.25em;
    left: 50%;
    margin-left: -7em;
}

.top {
    position: absolute;
    top: 5%;
    margin: 0 auto;
    text-align: center;
    z-index: 222;
    left: 4em;
}

.top img {
    height: 4.4em;
    float: left;
    margin-left: 3.34em;
}

.topList {
    width: 36em;
    height: 5.5em;
    top: 7.3%;
    margin-left: -18em;
    position: absolute;
    left: 50%;
    z-index: 222;
}

.topList li {
    background-repeat: no-repeat;
    height: 2em;
    width: 12em;
    margin-top: .2em;
    float: left;
    background-position: center left .9em;
}

.topList li img {
    height: .9em;
}

.topList #ListOne {
    background-image: url(../img/textB1.png);
    background-size: 80%;
}

.topList #ListTwo {
    background-image: url(../img/textB2.png);
    background-size: 80%;
}

.topList #ListThree {
    background-image: url(../img/textB3.png);
    background-size: 80%;
}

.topList #ListOne:hover{background-image: url(../img/textC1.png);}
.topList #ListTwo:hover{background-image: url(../img/textC2.png);}
.topList #ListThree:hover{background-image: url(../img/textC3.png);}

.menu {
    position: absolute;
    top: 19%;
    margin: 0 auto;
    text-align: center;
    z-index: 222;
    left: 2em;
    width: 16em;
    height: 10em;
}

.menu ul {
    overflow: hidden;
    margin-top: 0;
    margin: 0;
    padding-bottom: 3em;
}

.menu li {
    padding: .7em;
    float: left;
    height: 3em;
    width: 3em;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
}

/*.menu li img:hover{width:4.4em;height:4.4em;margin-top:-.7em;margin-left:-.7em;}*/

.menu img {
    width: 15em;
    margin-bottom: 1em;
    padding-left: 1em;
    float: left;
}

.menu ul {
    width: 100%;
}

.menu li img {
    width: 3.2em;
    height: auto;
    /* border: .1em dashed #fff; */
    border-radius: .6em;
    padding: 0;
    opacity: .85;
}

.menu li:nth-child(4n) {
    margin-right: 0;
}

.left {
    position: absolute;
    left: 2%;
    bottom: 6%;
    z-index: 222;
}

.left ul {
    overflow: hidden;
}

.left li {
    float: left;
    margin-top: .7em;
    margin-right: .2em;
    opacity: .5;
}

.left li img {
    height: 100%;
}

.left li:hover {
    opacity: 1;
}

.left ul:nth-child(1) li {
    height: 3.8em;
}

.left ul:nth-child(2) li {
    height: 2.3em;
}

.left ul:nth-child(3) li {
    height: 2.4em;
}

.left ul:nth-child(4) li {
    height: 2.6em;
}

.left ul:nth-child(5) li {
    height: 2.3em;
}

.left ul:nth-child(6) li {
    height: 1.9em;
}

.left ul:nth-child(7) li {
    height: 3.4em;
}

.left ul:nth-child(8) li {
    height: 2.8em;
}

.left ul:nth-child(9) li {
    height: 3.1em;
}

#carousel {
    overflow: hidden;
}

.pageThree {
    height: 7.7em;
    position: fixed;
    bottom: 2%;
    width: 64.2em;
    left: 50%;
    overflow: hidden;
    background-image: url(../img/back1.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: .6;
    margin-left: -32.1em;
    z-index: 223;
}

.pageThree:hover {
    opacity: .85;
}

.swiper-container {
    margin-left: 7.11em;
    width: 56.66em;
    height: 7.82em;
}

.swiper-slide {
    background: transparent url(images/carousel_polaroid.png) no-repeat 0 0;
    text-align: center;
    display: block;
    width: auto;
    height: 4.1em;
    padding: 0;
    margin-top: 2.61em;
    float: left;
    position: relative;
}

.swiper-slide a {
    display: block;
    width: 20%;
    float: left;
}

.swiper-slide img {
    height: 4.1em;
    width: auto;
}

.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 2px;
    /*text-align: right;*/
}

.shade {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 223;
    position: absolute;
    background-color: rgba(0, 0, 0, .5);
}

.oneShow {
    height: 700px;
    background-image: url(../img/back2.png);
    left: 50%;
    top: 50%;
    margin-top: -350px;
    background-size: auto 703px;
    background-repeat: no-repeat;
    z-index: 224;
    width: 1440px;
    margin-left: -820px;
    position: absolute;
    background-position: center center;
}

.twoShow {
    height: 700px;
    background-image: url(../img/back3.png);
    left: 50%;
    top: 50%;
    margin-top: -350px;
    margin-left: -820px;
    background-size: auto 703px;
    background-repeat: no-repeat;
    z-index: 224;
    width: 1440px;
    position: absolute;
    background-position: center center;
}

.threeShow {
    height: 700px;
    background-image: url(../img/back4.png);
    left: 50%;
    top: 50%;
    margin-top: -350px;
    margin-left: -820px;
    background-size: auto 703px;
    background-repeat: no-repeat;
    z-index: 224;
    width: 1440px;
    position: absolute;
    background-position: center center;
}

.oneShow a {
    display: block;
    width: 1440px;
    height: 700px;
}

.twoShow a {
    display: block;
    width: 1440px;
    height: 700px;
}

.threeShow a {
    display: block;
    width: 1440px;
    height: 700px;
}

.bottomImg img{
    position: absolute;
    bottom:0;
    width: 22em;
    left: 50%;
    margin-left: -11em;
}

@media screen and (max-width: 1000px) {}

@media screen and (min-width: 1000px) and (max-width: 1200px) {
    /*1024*/
    body {
        font-size: 12px;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
    /*1366*/
    body {
        font-size: 16px;
    }
}

@media screen and (min-width: 1400px) and (max-width: 1600px) {
    /*1440*/
    body {
        font-size: 17px;
    }
}

@media screen and (min-width: 1600px) and (max-width: 1800px) {
    /*1680 1600*/
    body {
        font-size: 19.5px;
    }
}

@media screen and (min-width: 1800px) and (max-width: 2000px) {
    /*1920*/
    body {
        font-size: 22.5px;
    }
}

@media screen and (min-width: 2000px) {
    body {
        font-size: 24px;
    }
}