html {font-size: 62.5%;width:100%;overflow-x:hidden; line-height:1.8; }
body {font-size:1.4em;height:100%;margin:0; font-family:Helvetica, Tahoma,  Arial,  "Microsoft YaHei" , "微软雅黑"  , sans-serif ; color: #999; }
*, *::after, *::before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
* img{border:none; }/* --重要：图片不显示边框------ */

ul{ margin:0; padding:0;list-style: none;}

 
/* -----色彩规则----正文：999----链接:333 #666---重点链接：#666 333 ----- */
 
p,h1,h2,h3,h4,h5,h6,label,p,ul{margin:0;}
h1,.h1 {font-size: 1.2em;font-weight:500; }
h2,.h2 {font-size: 1.4em;}
h3,.h3 {font-size: 1.6em;}
h4,.h4 {font-size: 1.8em;}

h6,.h6 {font-size: 1.8em; font-weight:500;}
h8,.h8 {font-size: 2.2em; font-weight:500;}


@media only screen and (min-width: 1200px) {
h6,.h6 {font-size: 2.0em; font-weight:500;}
h8,.h8 {font-size: 3.8em; font-weight:500;}
}



a {color:#000; text-decoration: none; margin:0;}
a:hover,a:focus {color:#0297FF; font-weight:600;}

.clearfix{clear:both; }



/* -----------------------------------
       顶部导航 --显示器---0至1200
------------------------------------- */
.cd-header {
position: absolute;
z-index:3; 
top: 0; 
left: 0;
width: 100%;
height:60px; margin:0; padding:0; background-color:#fff;
}


/* --------顶部LOGO---------------- */
#cd-logo {float: left; margin-top:15px; margin-left: 2.5%; padding:0;}
#cd-logo img {display:block; height:30px;}

/* --------顶部YAAAK--------------- */
#leader {float: left; margin-top:18px; margin-left: 2.5%; padding:0;}




/* ---------顶部导航---------------- */
.cd-primary-nav {
float:right;margin:0 2.5%; width:20px; height:100%; 
background: url("../images/menu.png" ) no-repeat center center; 
background-size:20px;
}

.cd-primary-nav ul {position: absolute;top:0;left:0;width:95%; background:rgba(0,0,0,0.9); padding-bottom:60px; margin-left:2.5%;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.cd-primary-nav ul.is-visible {
-webkit-transform: translateY(60px);
-moz-transform: translateY(60px);
-ms-transform: translateY(60px);
-o-transform: translateY(60px);
transform: translateY(60px); 
}
.cd-primary-nav a {display:block; padding-top:40px; padding-right:20px; color:#fff; text-align:right;  }
.cd-primary-nav a:hover {color:#666 ;border-bottom:1px solid #ffffff;  }
.cd-primary-nav li { margin-top:0px; }

/* ---------显示器--大于至1200------------ */

@media only screen and (min-width: 1200px) {
#cd-logo {margin-top:10px; }
#cd-logo img {height:40px;}

.cd-primary-nav ul {
position:static;width: auto;background: fixed; padding-bottom:0;margin-left:0;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
 
}
.cd-primary-nav ul.is-visible {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}

.cd-primary-nav {margin-top:10px;width: auto;height: auto; background: none;}
.cd-primary-nav li {display: inline-block; margin-left:2em; margin-top:10px; } 

 
.cd-primary-nav a {display: inline-block;height:auto; background: transparent;margin:0; padding:0 ; border-top:none; color: #000;  }
.cd-primary-nav a:hover {color:#0297FF; border-bottom:1px solid #ffffff; }
.cd-primary-nav li a.active{ color:#0297FF}



/* ---中英文切换---- */
.cd-primary-nav li b {display: none;}
.cd-primary-nav li a:hover b {display: block; }
.cd-primary-nav li a:hover span {display: none;}
}






/* -------------轮播xample3---- 轮播xample4-----
           显示器---0至768
--------------------------------------------- */
#picbox {float:left;margin:0 2.5%; width:95%;}
#example4  {background-color:none; margin-top:60px; width:80%;}

#example3 .sp-selected-thumbnail {border: 4px solid #000; }
#example3 {margin-top:60px;}

.slider-pro {margin: 0px auto; position: relative; box-sizing: content-box; -moz-box-sizing: content-box;overflow:hidden;}
.sp-slides {position: relative;}


.sp-slide {position: absolute;cursor:move; overflow:hidden;width:100%;  }
.sp-slide img{width:268%;  left: 50%;margin-left: -50%;display:block;}/* ---触屏光标--- */


.sp-back {cursor:move; overflow:hidden;width:50%;  }



.sp-box {position: absolute; bottom:4%;margin:0 2%;cursor:move; width: 96%; text-align:center;}/* -------变触屏光标------- */
.sp-box p {color:#FFF;}
.sp-box p a{color:#fff;}
.sp-box p a:hover{color:#666;}


.sp-box h4  {color:#fff;}



.sp-box h8 {color:#FFF;  }
.sp-box h8 a{color:#FFF;font-weight: lighter; text-decoration: underline;}
.sp-box h8 a:hover{color:#666; }


.sp-box h6 a {color: #FFF;font-weight:400; } /* -------text-shadow:0 0px 3px rgba(0, 0, 0, 0.3);------ */   
.sp-box h6 a:hover {color:#666; }

.sp-btn {display:inline-block; padding:0; margin:0;border:#fff 0px solid; color:#fff;}
.sp-btn.secondary{background-color: rgba(0,0,0,0);}



/* -------触屏文图轮播2------- */
.slider-pro2 {margin: 0px auto; position: relative; box-sizing: content-box; -moz-box-sizing: content-box;}/* -----和header保持一致----- */
.sp-back2 {margin:0px; overflow:hidden; width:100%; cursor:move;} 
.sp-back2 img{width:100%; max-width:100%; left:0;margin-left: 0;}



/* ------------------------- */
.sp-mask {overflow: hidden; position: relative;}/* ----隐藏左右图片--重要---- */

/* --------小圆点------------ */
.sp-buttons {width: 100%; text-align: center; padding-top:5px; position: relative;}
.sp-button {margin: 10px; border-radius: 50%; border: 2px solid rgb(150, 150, 150); 
border-image: none; width:10px; height:10px; display: inline-block; cursor:pointer; box-sizing: border-box; 
-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
.sp-selected-button {background-color: rgb(150, 150, 150);}


/* ----------显示器768至1200------------ */
@media only screen and (min-width: 768px) {

.sp-slide img{width:130%;left:0;margin-left:0; }
.sp-button { width:15px; height: 15px;}/* ----小圆------ */
}

/* ----------显示器768至1200------------ */
@media only screen and (min-width:1200px) {
#picbox {float:left;margin:0 20%; width:60%; }


.sp-slide img{width:100%; }
}







/* --------------------------------------
         正文内容 显示器  0至1200-
-------------margin:上右下左;----------- */

.line1{ width:100%;height:1px; display:block; background:#000; margin-top:20px; }
.main {width:100%;float:left;padding:0; margin-top:20px; }

.main2 {float:left;margin:0.5em 2.5% 0 2.5%; width:95%;text-align:center;}
.main3 {float:left;margin:0.5em 2.5% 0 2.5%; width:95%;text-align: center;}
.main4 {float:left;margin:0.5em 2.5% 0 2.5%; width:95%; padding:0;text-align: center; color:#666; }





.main1x {width:100%;float:left;padding:0 2.5%;margin-top:70px;}
.main1x img {width:100%;padding:1em 0;}



.main1 {width:100%;float:left;padding:0;margin:0;}
.main1 a {margin-right:10px;}



/* ----------显示器大于1200------------ */
@media only screen and (min-width:1200px) {

.main2 {margin-left:2.5%;margin-right:0;width:30%;text-align:left; }
.main3 { margin-left:2.5%;width:62.5%; margin-right:2.5%;text-align:left;}

.main2box {margin-left:2.5%;margin-right:0;width:30%; }
.main3box { margin-left:2.5%;width:62.5%; margin-right:2.5%}

.main4 {width:30%; margin:5px 0 0 2.5%;text-align:left; }
.main1x {padding:0 20%;}

}






/*---------瀑布流------------------------------ 
        
---------分类导航-------------------------------*/
.filter {overflow:hidden;padding-left:2.5%;  text-align:center; width:100%;}
.filter ul{text-align:center;list-style-type:none;text-align:center;}
.filter ul li{display:inline-block;width:100px; float:left; text-align:center}
.filter li {float:left; padding-right:10px; margin-top:5px;margin-right:10px; border-style:solid;border-width:0 1px 0 0;}
.filter li a {color:#000; }
.filter li a:hover  {color:#0297FF;}
.filter li a.active {color:#0297FF;font-weight:600;}



/* ---------瀑布---------------------- */
#masonry {margin:0; padding:0;  }
.masonry_item {overflow:hidden;}  /* -------不得添加margin:0; padding:0;属性==影响瀑布流内属性------- */

.box {float:left;width:95%; margin:1em 2.5%; text-align:center; border:0px solid rgb(224, 224, 224); position: relative;}
.box:hover {color:#0297FF; padding-bottom:10px;}
.box-inner {padding:5px;}
.box-cover {z-index:10; width:100%; background: #CCC； height:100%;top:0;left:0;}

.title4 {padding:10px 0;}
.title4 a{font-size:1.2em; }

.box2 {float:left;width:95%; margin:1em 2.5%; text-align:left; border:0px solid rgb(224, 224, 224); position: relative;}


/* -------图片放大----------- */
.img_holder {position: relative;cursor:pointer;overflow:hidden;}
.img_holder a .overlay {width: 100%;height:100%; position: absolute;top: 0;left:0;cursor: pointer;}
.img_holder img {margin:0; width:100%; display:block;}
.img_holder img {
   display: block;
   position: relative;
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.img_holder :hover img {
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -o-transform: scale(1.2);
   -ms-transform: scale(1.2);
   transform: scale(1.2);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=0);
   opacity: 1;
}


/* ----------显示器768--1200------------ */
@media only screen and (min-width:768px) {
.box {width:46.25%; margin-left:2.5%; margin-right:0;text-align: left; }
.box2 {width:46.25%; margin-left:2.5%; margin-right:0;}
}
/* ----------显示器大于1200------------ */
@media only screen and (min-width:1200px) {
.box {width:30%; margin-left:2.5%; margin-right:0;}
}

/*---------------------- 
     瀑布流结束
------------------------*/





/* ---------------------------

           瀑布流滑动特效
------------------------------ */

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
       -o-transition: none;
          transition: none;
}



/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
/* -------瀑布流滑动特效结束--------- */






/* ---------------------------
 -底部导航--
------------------------------ */
/* ----#footer {z-index: 89899; position:fixed; filter: alpha(opacity=90);width:100%;  _width: 1200px; _position: relative;float:left;}----始终在前面--- */
#footer { width:100%;bottom:0px; background:rgba(0, 0, 0, 0.8); float:left;margin-top:2em; padding:1em 0;}
#footer p{ color:#fff;}
#footer a {color:#999;}
#footer a:hover {color:#0297FF;  }

.footer1 {margin-left:2.5%;float:left;}
.footer2 {margin-right:2.5%;float:right;text-align:right; }










/* -----遮罩图片-------- */
#box1 {float:left;width:47%;float:left; margin:2em 0 0 2%; }
#box1 img {width:100%; padding:0; margin:0;display: block;}
.cover {position: absolute;width:100%; zoom:1;background:#666; height:100%; opacity:0.8;}
.cover h1{width:100%; padding:40px 20px 0px 20px;color:#fff;}

@media only screen and (min-width:768px) {
#box1 {width:20%;margin:4em 0 0 4%;}
}









/* -------------------图片鼠标感应2--放大----------------------- */
.view {
   width: 100%;
   height: 100%;
   margin:0px;
   float: left;
   border: 0px solid #fff;
   overflow: hidden;
   position: relative;
   text-align:center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default; 
   background-color:#666;
}


 

.view img {
   display: block;
   position: relative;
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}

.view:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}



.mask {
   width:100%;
   height:50%;
   position: absolute;
   overflow: hidden;
    bottom:0 ;
   left:0;
  
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}

.view:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}




.view h2 {
   color: #000;

   
   background: transparent;
   margin:20px;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);

   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}




.view p {
   color:#000;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}

.view a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}


.view:hover h2,.view:hover p,.view:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}




	
/* ------------------图片鼠标感应2------------------------------- */







.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.cb-slideshow:after {
    content: '';
    background: transparent url(../images/pattern.png) repeat top left;
}