@charset "utf-8";
/* CSS Document */
div,form,ul,ol,li,span,p,img{margin:0;padding:0;border:0;list-style:none;}


html,body{font-size:12px;color:#454545;text-decoration:none;font-family:Arial,'Open Sans';margin:0; padding:0px;font-weight:normal;-webkit-text-size-adjust: none; background:#000;    -webkit-font-smoothing: antialiased;}
html{scrollbar-face-color:#eaeaea;scrollbar-highlight-color: #ffffff;scrollbar-shadow-color:#999999;scrollbar-3dlight-color:#999999;scrollbar-arrow-color:#999999;scrollbar-darkshadow-color:#ffffff;}
ul,ol,li,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,input{margin:0px;padding:0px;list-style:none; font-size:12px;}
img{border:0;}


/*浏览器滚动条*/
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-button:vertical{display:none}
::-webkit-scrollbar-track:vertical{background-color:black}
::-webkit-scrollbar-track-piece{background:#F0F0F0}
::-webkit-scrollbar-thumb:vertical{background-color:#8E8E8E;border-radius:0px}
::-webkit-scrollbar-thumb:vertical:hover{background-color:#3B3B3B}
::-webkit-scrollbar-corner:vertical{background-color:#535353}
::-webkit-scrollbar-resizer:vertical{background-color:#FF6E00}

/*大屏*/
.main{ min-height: 340px; min-width: 1200px; cursor: pointer}
.color_10{background: #000;}

/*动画*/
@-webkit-keyframes entrance{
    0%{
        top:10%;
        opacity:0.1
    }
     100%{
         top:50%;
         opacity:1
     }
 }
@-moz-keyframes entrance{
    0%{
        top:10%;
        opacity:0.1
    }
    100%{
        top:50%;
        opacity:1
    }
}
@-o-keyframes entrance{
    0%{
        top:10%;
        opacity:0.1
    }
    100%{
        top:50%;
        opacity:1
    }
}
@-ms-keyframes entrance{
    0%{
        top:10%;
        opacity:0.1
    }
    100%{
        top:50%;
        opacity:1
    }
}

/*每列*/
.list_1{width:12.5%; height:100%;float:left; display:block;}

/*颜色*/
.ico,.ico1{top:50%; position:relative; margin-top:-140px; left:50%; margin-left:-110px;}
.text{top:50%; position:relative; clear:both; margin-top:-40px;}
a.an{top:50%; position:relative; }
.color_1{background:#080718;}
.color_1 .ico{ width:220px; height:220px; overflow:hidden; background:url(img/Ico_01.png) no-repeat left top; display:block;}
.color_1 .ico1{ width:220px; height:220px; overflow:hidden; background:url(img/Ico_01.png) no-repeat left top !important; display:block;}
.color_2{background:#080718;}
.color_2 .ico{ width:220px; height:220px; overflow:hidden; background:url(img/Ico_01.png) no-repeat -240px top; display:block;}
.color_2 .ico1{ width:220px; height:220px; overflow:hidden; background:url(img/Ico_01.png) no-repeat -240px top !important; display:block;}
.color_2 .an{ background:#33b859 !important;}
.color_2 a:hover.an{ background:#000 !important;}
.color_3{background:#080718;}
.color_3 .ico{ width:220px; height:220px; overflow:hidden; background:url(img/Ico_01.png) no-repeat -480px top; display:block;}
.color_3 .ico1{ width:220px; height:220px; overflow:hidden; background:url(img/Ico_01.png) no-repeat -480px top !important; display:block;}
.color_4{background:#080718;}
.color_4 .ico{ width:220px; height:220px; overflow:hidden; background:url(img/Ico_01.png) no-repeat -720px top; display:block;}
.color_4 .ico1{ width:220px; height:220px; overflow:hidden; background:url(img/Ico_01.png) no-repeat -720px top !important; display:block;}
.color_5{background:#080718;}
.color_5 .ico{ width:220px; height:220px; overflow:hidden; background:url(img/Ico_01.png) no-repeat -960px top; display:block;}
.color_5 .ico1{ width:220px; height:220px; overflow:hidden; background:url(img/Ico_01.png) no-repeat -960px top !important; display:block;}
.color_6{background:#080718;}
.color_6 .ico{ width:220px; height:220px; overflow:hidden; background:url(img/Ico_01.png) no-repeat -1200px top; display:block;}
.color_6 .ico1{ width:220px; height:220px; overflow:hidden; background:url(img/Ico_01.png) no-repeat -1200px top !important; display:block;}
.color_7{background:#080718;}
.color_7 .ico{ width:220px; height:220px; overflow:hidden; background:url(img/Ico_01.png) no-repeat -1440px top; display:block;}
.color_7 .ico1{ width:220px; height:220px; overflow:hidden; background:url(img/Ico_01.png) no-repeat -1440px top !important; display:block;}
.color_8{background:#080718;}
.color_8 .ico{ width:220px; height:220px; overflow:hidden; background:url(img/Ico_01.png) no-repeat -1680px top; display:block;}
.color_8 .ico1{ width:220px; height:220px; overflow:hidden; background:url(img/Ico_01.png) no-repeat -1680px top !important; display:block;}

.text{ height:40px; text-align:center; line-height:40px; overflow:hidden; width:100%; color:#FFF; font-size:14px;font-weight:normal; }

a.an{ width:140px; height:40px; line-height:40px; overflow:hidden; display:block; text-align:center; font-size:14px; background:#40c666; color:#FFF; text-decoration:none;border-radius:3px; margin-top:10px; margin-left:auto; margin-right:auto;-webkit-transition:color,background-color 0.2s,0.2s linear;-o-transition:color,background-color 0.2s,0.2s linear;-moz-transition:color,background-color 0.2s,0.2s linear;transition:color,background-color 0.2s,0.2s linear;}
a:hover.an{ text-decoration:underline; background:#000;text-decoration:none;-webkit-transition:color,background-color 0.2s,0.2s linear;-o-transition:color,background-color 0.2s,0.2s linear;}

/*动画*/
.rotateBox{  height: 500px; float: left; position: relative;-webkit-perspective: 2000px; perspective:600px;-moz-perspective: 600px;-o-perspective: 600px; -ms-perspective: 600px;}
.transBox{-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;-o-transform-style: preserve-3d; position:absolute; top: 0; left: 0; -webkit-transition:.4s;-moz-transition:.4s;-o-transition:.5s; }
.transBox .list_1{position: absolute; height: 500px;}
.transBox .front{left: 0; top:0;}
.transBox .back{left: 200px; top:0; -webkit-transform-origin: left; -moz-transform-origin: left;-o-transform-origin: left;-ms-transform-origin: left;-webkit-transform: rotateY(90deg);-moz-transform: rotateY(90deg);-o-transform: rotateY(90deg);-ms-transform: rotateY(90deg);}
.transBox .backed{left:200px; top:0; position: absolute}
.rotateBox:hover .transBox{-webkit-transform: rotateY(-90deg);-moz-transform: rotateY(-90deg);-o-transform: rotateY(-90deg);}
.icon_entrance{ -webkit-animation:1s entrance forwards;-moz-animation:1s entrance forwards;-o-animation:1s entrance forwards;-ms-animation:1s entrance forwards;}
.ico{top:10%;opacity:0}


/*.transBox .front .text{display: none;}
.transBox .front a{display: none;}

.transBox .back .text{display: block}
*/