html, body {width:100%; min-width:1100px; height:100%;} /*非常重要的样式让背景图片100%适应整个屏幕*/  
@charset "utf-8";
body 
{
	padding:0;
	margin:0;
	font-family:Arial,Microsoft YaHei,sans-serif,微软雅黑;;
	border:none;
}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0; }
ul,ol,li{list-style-type:none;}
p,h2,h1,h3,h4{ padding:0; margin:0;}
a:link,a:visited{ text-decoration:none;}
a{color: inherit;text-decoration:none;}
.clear{ clear:both;}    
/*********************************************************************************************************************************************************
** 
*/
* {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content{margin: 0 auto;width: 1100px;}
.top{
	float: left;
	width: 100%;
	padding: 12px 0;
}
a.logo{
	float: left;
	/*background: url(../img/logo.png) no-repeat left center;*/
	width: 254px;
	height: 57px;
}




 /* basic menu styles */

.nav-menu {
  float: right;
}

.nav-menu > li {
  display: inline;
  float:left;    
}

.nav-menu > li:last-child {
  border-right: none;
}

.nav-menu li a {
  color: #333333;
  display: block;
  text-decoration: none;

  /*调用本地字体*/
  font-family:Arial;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-transform: capitalize;
  overflow: visible;
  line-height: 20px;
  font-size: 14px;
  padding: 15px 30px 15px 31px;
}
.three-d {
  /* 任务三、设置3D舞台布景 */
  -webkit-perspective: 1500px;
  -moz-perspective: 1500px;
  -ms-perspective: 1500px;
  -o-perspective: 1500px;
  perspective: 1500px;
  /*任务四、设置3D舞台布景过渡效果*/
  -webkit-transition: all .07s linear;
  -moz-transition: all .07s linear;
  -ms-transition: all .07s linear;
  -o-transition: all .07s linear;
  transition:all .7s linear;
  position: relative;

}

.three-d:not(.active):hover {
  cursor: pointer;
}

/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/

.three-d:not(.active):hover .three-d-box, 

.three-d:not(.active):focus .three-d-box {

-wekbit-transform: translateZ(-25px) rotateX(90deg);

-moz-transform: translateZ(-25px) rotateX(90deg);

-o-transform: translateZ(-25px) rotateX(90deg);

-ms-transform: translateZ(-25px) rotateX(90deg);

transform: translateZ(-25px) rotateX(90deg);

/*    -webkit-transform:rotateX(90deg) translatez(-25px);*/

   /*   -webkit-transform:rotatex(90deg);*/

}

.three-d-box {

  /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/

  -webkit-transition: all .3s ease-out;

  -moz-transition: all .3s ease-out;

  -ms-transition: all .3s ease-out;

  -o-transition: all .3s ease-out;  

  transition: all .3s ease-out;

  -webkit-transform: translatez(-25px);

  -moz-transform: translatez(-25px);

  -ms-transform: translatez(-25px);

  -o-transform: translatez(-25px);

  transform: translatez(-25px);

  -webkit-transform-style: preserve-3d;

  -moz-transform-style: preserve-3d;

  -ms-transform-style: preserve-3d;

  -o-transform-style: preserve-3d;

  transform-style: preserve-3d;

  -webkit-pointer-events: none;

  -moz-pointer-events: none;

  -ms-pointer-events: none;

  -o-pointer-events: none;

  pointer-events: none;

  position: absolute;

  top: 0;

  left: 0;

  display: block;
 
  width: 100%;

  height: 100%;

}


/*任务七、给导航设置3D前，与3D后变形效果*/

.front {

    -webkit-transform: rotatex(0deg) translatez(25px);

    -moz-transform: rotatex(0deg) translatez(25px);

    -ms-transform: rotatex(0deg) translatez(25px);

    -o-transform: rotatex(0deg) translatez(25px);

    transform: rotatex(0deg) translatez(25px);

 }

.back {

  -webkit-transform: rotatex(-90deg) translatez(25px);

  -moz-transform: rotatex(-90deg) translatez(25px);

  -ms-transform: rotatex(-90deg) translatez(25px);

  -o-transform: rotatex(-90deg) translatez(25px);

  transform: rotatex(-90deg) translatez(25px);

  color: #FFE7C4; 

}

.front, .back {

  display: block;

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  background: #FFF;

  padding: 15px 30px 15px 31px; 

  color: #333;

  -webkit-pointer-events: none;

  -moz-pointer-events: none;

  -ms-pointer-events: none;

  -o-pointer-events: none;

  pointer-events: none;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}

/*任务八、设置导航当前状态与悬浮状态下的背景效果*/

        .nav-menu li .active .front,

        .nav-menu li .active .back,

        .nav-menu li a:hover .front,

        .nav-menu li a:hover .back {
                 color: #c61d23;
             background-color: #FFF;

             -webkit-background-size: 5px 5px;

             background-size: 5px 5px;

             background-position: 0 0, 30px 30px;
}

        .nav-menu ul {

          position: absolute;

          text-align: left;

          line-height: 40px;

          font-size: 14px;

          width: 200px;

          -webkit-transition: all 0.3s ease-in;

          -moz-transition: all 0.3s ease-in;

          -ms-transition: all 0.3s ease-in;

          -o-transition: all 0.3s ease-in;

          transition: all 0.3s ease-in;

          -webkit-transform-origin: 0px 0px;

          -moz-transform-origin: 0px 0px;

          -ms-transform-origin: 0px 0px;

          -o-transform-origin: 0px 0px;

          transform-origin: 0px 0px;

          -webkit-transform: rotateX(-90deg);

          -moz-transform: rotateX(-90deg);

          -ms-transform: rotateX(-90deg);

          -o-transform: rotateX(-90deg);

          transform: rotateX(-90deg);

          -webkit-backface-visibility: hidden;

          -moz-backface-visibility: hidden;

          -ms-backface-visibility: hidden;

          -o-backface-visibility: hidden;

          backface-visibility: hidden;

        }

        /*任务九、显示下拉导航菜单，并其设置一个变形效果*/

.nav-menu > li:hover ul {
    display: block;
   -webkit-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -ms-transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   transform: rotateX(0deg);
   position: absolute;
   z-index: 10;
 }



.swiper-container {
	width: 100%;
}
.swiper-slide {
	background-position: center;
	background-size: cover;
}

/*product*/
.product{
	float: left;
	width: 100%;
	padding-top: 40px;
}

.slider {
    width: 100%;
    margin: 100px auto;
    display: -webkit-flex;
    display: flex; 
    justify-content:left;
    flex-wrap:wrap;
    align-items:left;
}
.slick-slide {
  margin-right:15px;
  width:260px !important;
}
.slider.s1 .slick-slide{float:left; margin-bottom:50px;}
.slider.s1{ margin:0;}

.slick-slide img {
	width: 258px;
	height: 258px;
  border: solid 1px #e7e7e7;
  
}
.slick-slide:hover  img{
	transform: scale(1.1);
	transition: .6s;
}
.slick-prev:before,
.slick-next:before {
  color: black;
}


.slick-slide {
  transition: all ease-in-out .3s;
  opacity: 1;
  
}

.slick-active {
  opacity: 1;
}

.slick-current {
  opacity: 1;
}
.slick-slide a.aa{
	display: block;
	width: 258px;
	height: 258px;
	border: solid 1px #e7e7e7;
	overflow: hidden;
}
.slick-slide span.title{
	display: block;
	font-size: 18px;
	color: #666666;
	margin-top: 16px;
	font-family:CORBELB;
}
.slick-slide span.title:hover{
	opacity: 0.8;
}
.slick-slide span.sub-title{
	display: block;
	font-size: 14px;
	color: #666666;
	margin-top: 15px;
	min-height:26px;
	text-transform:uppercase;
}
.pro-name{
	float: left;
	font-size: 48px;
	color: #202120;
	margin-top: -98px;
	font-family:CORBELB;
}

/**footer**/
.footer{
	margin-top: 70px;
	float: left;
	width: 100%;
	background-color: #fbf9f9;
	padding: 60px 0px;
}
.footer-list{
	float: left;
	margin-right: 55px;
	font-family:CORBELB;
}
.footer-list:nth-child(4) {
	margin-right: 0px;
}
.footer-list ul li.title{
	font-size: 25px;
	color: #666666;
	margin-bottom: 39px;
}
.footer-list ul li{
	line-height: 36px;
	font-size: 17px;
	color: #666666;
	font-family:CORBEL;
}
.footer-list ul li a:hover{
	text-decoration: underline;
	opacity: 0.8;
}
.wechat{
	float: right;
	width: 210px;
    font-family:CALIBRI;
}
.we span,.litex span{
	font-size: 16px;
	color: #666666;
	display: block;
	margin-top: 6px;
}
.we{
	float: left;
	text-align: center;
}
.litex{
	float: right;
	text-align: center;
}
.dizhi{
	float: left;
	margin-top: 40px;
}
.dizhi span{
	display: inline;
	color: #666;
	
}
.dizhi span.title{
	font-size: 18px;
	font-weight: bold;
	width: 33px;
	float: left;
}
.dizhi span.sub-title{
	font-size: 16px;
	width: 177px;
	float: right;
}
.dizhi2{
	margin-top: 20px;
}
.end{
	float: left;
	width: 100%;
	text-align: center;
	background-color: #240001;
	font-size: 16px;
	color: #fff;
	padding: 34px 0px;
	font-family:CALIBRI;
}


                                             /***********news***********/
.banner{
	float: left;
	width: 100%;
	height: 456px;
    background: url(../img/nei-banner.jpg) no-repeat top center;
}     
.nei-name{
	float: left;
	font-size: 48px;
	color: #202120;
	width: 100%;
} 
.news-li{
	float: left;
	width: 100%;
	margin-top: -27px;
} 
.news-list{
	float: left;
	width: 329px;
	border-top: solid 2px #e7e7e7;
	padding-top: 32px;
	margin-top: 50px;
	margin-right: 55px;
}
.news-list:nth-child(3n){
	margin-right: 0px;
}
.news-list .title{
	float: left;
	width: 100%;
	font-size: 17px;
	color: #202120;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow: hidden;
}  
.news-list .sub-title{
	float: left;
	width: 100%;
	font-size: 16px;
	color: #666666;
	margin-top: 13px;
	height: 65px;
	overflow: hidden;
	text-overflow:ellipsis;
	margin-bottom: 20px;
}
.news-list:hover .title{
	opacity: 0.8;
	color:#c61d23;
}  
.news-list:hover .sub-title{

} 
.news-list span.small-news{
	float: left;
	width: 150px;
	font-size: 12px;
	color: #646464;
	margin-top: 10px;
}
.news-list span.date{
	float: right;
	margin-top:5px;
	text-align: right;
	width: 150px;
	font-size: 12px;
	color: #646464;
}
.news-list span.date .day
{
    font-size: 20px;color: #222; font-family:Times New Roman;
}
.mod-category-box{float:left; width:100%; margin-top:50px; text-align:center;}
.mod-category-box a{ margin:15px 10px 10px; padding:0 20px; height:30px; line-height:30px; font-family:CORBEL; font-size:16px; color:#000; background-color:#f1f1f1; text-transform:uppercase; display:inline-block; border-radius:3px;}
.mod-category-box a:hover{ background-color:#e9e8e8;}
.mod-category-box a.current{ background-color:#c61d23; color:#fff;}
.mod-content-box{float:left; margin-top:30px; width:100%; line-height:26px; font-size:15px; color:#555555; font-family:CORBEL;}
.mod-content-box img{ max-width:100%;}
.mod-panel-title{float:left; margin-top:60px; margin-bottom:10px; width:100%; font-size:48px; font-family:CORBELB; line-height:50px; text-transform:uppercase;}
.mod-panel-title.s1{ font-size:25px; padding:0 20px; line-height:30px;}
.mod-panel-title .xh{float:left; width:100%; font-size:20px; font-family:CORBEL;}
.mod-pager-box{float:left;margin-top:60px;width:100%;text-align:center;font-size:14px;font-family:CALIBRI;line-height:23px;}
.mod-pager-box.s1{ margin-top:20px;}
.mod-pager-box a{margin:0 5px; color:#7a7a7a; display:inline-block; text-decoration:underline;}
.mod-pager-box a:hover,.mod-pager-box .current{margin:0 5px; color:#c61d23; text-decoration:underline; display:inline-block;}
.mod-pager-box a.prev,.mod-pager-box a.next{margin:0 15px 0 0; display:inline-block;}
.mod-pager-box a.next{margin:0 0 0 15px;}
.mod-pager-box a[disabled="disabled"],.mod-pager-box a.aspNetDisabled{color:#e7e7e7;}
.mod-big-img{float:left; width:500px; height:auto; border:solid 1px #efefef; text-align:center; display: -webkit-flex; display: flex;  justify-content:center; align-items:center;}
.mod-big-img img{ max-width:100%; max-height:100%; display:none;}
.mod-big-img img.active{ display:block;}
.mod-small-img{float:right; width:600px;}
.mod-small-img img{float:left; margin:0 0 20px 20px; width:175px; height:175px; border:solid 3px #efefef; cursor:pointer; box-sizing:border-box;}
.mod-small-img img:nth-child(3n){ margin-right:0;}
.mod-small-img img.active{ border:solid 3px #c61d23;}