﻿.addons-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-right: 15px;
  padding-left: 15px; }
  @media (min-width: 576px) {
    .addons-container {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 768px) {
    .addons-container {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 992px) {
    .addons-container {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 1200px) {
    .addons-container {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 576px) {
    .addons-container {
      width: 540px;
      max-width: 100%; } }
  @media (min-width: 768px) {
    .addons-container {
      width: 720px;
      max-width: 100%; } }
  @media (min-width: 992px) {
    .addons-container {
      width: 960px;
      max-width: 100%; } }
  @media (min-width: 1400px) {
    .addons-container {
      width: 1330px;
      max-width: 100%; } }

.addons-container-inner{
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
@media (min-width: 567px) {
    .addons-container-inner{
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}
.addons-row{
    display: flex;
    justify-content:center;
}


.main{width: 100%;height: auto;overflow: hidden;background: #fff;position: relative;z-index: 10;}

.product{width: 100%;height: auto;overflow: hidden;padding: 60px 0 56px;}

.headline{width: 100%;height: auto;overflow: hidden;position: relative;padding-bottom: 12px;border-bottom: 1px solid #e6e6e6;margin-bottom: 40px;}

.head_bt{font-size: 28px;font-weight: bold;line-height: 60px;height: 60px;overflow: hidden;padding: 0 40px;background: url(../images/head_bt.png) right center no-repeat;background-size: 100% 100%;width: 222px;color: #fff;position: relative;}

.head_bt:before{content: "";width: 14px;height: 100%;background: url(../images/head_sjx.png) center center no-repeat;background-size: 100%;position: absolute;left: 20px;top: 0;}

.imore{width: 118px;height: 30px;line-height: 30px;overflow: hidden;font-weight: bold;text-align: center;position: absolute;right: 10px;bottom: 12px;background: #066B4F;-moz-transform:skew(-26deg);-webkit-transform:skew(-26deg);-ms-transform:skew(-26deg);transform:skew(-26deg);transition: 400ms;}

.imore a{display: block;-moz-transform:skew(26deg);-webkit-transform:skew(26deg);-ms-transform:skew(26deg);transform:skew(26deg);color: #fff;transition: 400ms;}

.imore:hover{background: #f6b403;}

.imore:hover a{color: #066B4F;}

.pro_slide{position: relative;}

.hd_pro{position: absolute;top: -93px;left: 212px;}

.hd_pro ul{display: inline-block;height: auto;}

.hd_pro ul li{width: 162px;height: 40px;background: #066B4F;margin-right: 10px;float: left;font-size: 16px;text-align: center;-moz-transform:skew(-26deg);-webkit-transform:skew(-26deg);-ms-transform:skew(-26deg);transform:skew(-26deg);transition: 400ms;}

.hd_pro ul li a{display: block;padding: 0 20px;line-height: 40px;height: 40px;overflow: hidden;color: #fff;-moz-transform:skew(26deg);-webkit-transform:skew(26deg);-ms-transform:skew(26deg);transform:skew(26deg);color: #fff;transition: 400ms;}

.hd_pro ul li.on,.hd_pro ul li:hover{background: #f6b403;font-weight: bold;}

.hd_pro ul li.on a,.hd_pro ul li:hover a{color: #066B4F;}

.bd_pro{width: 100%;height: auto;overflow: hidden;}

.pro_data{width: 100%;height: auto;overflow: hidden;/*display: none;*/}

/*.pro_data:first-child{display: block;}*/

.pro_left{width: 49.2%;height: auto;overflow: hidden;float: left;}

.left_img{font-size: 0px;}

.left_img img{width: 100%;transition:all linear .2s;-webkit-transition:all linear .2s;-moz-transition:all linear .2s;-moz-transition:all linear .2s;transform:scale(1,1);-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);}

.left_img:hover img{transition:all linear .2s;-webkit-transition:all linear .2s;-moz-transition:all linear .2s;-moz-transition:all linear .2s;transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);-ms-transform:scale(1.1,1.1);}

.left_bt{width: 100%;height: 60px;line-height: 60px;overflow: hidden;padding: 0 90px 0 20px;font-size: 18px;font-weight: bold; background: rgba(246,180,3,.8);position: absolute;bottom: 0;left: 0;color: #066B4F;white-space: nowrap;text-overflow: ellipsis;}

.swiper-button-prev-pro,.swiper-button-next-pro{width: 36px;height: 60px;position: absolute;top: auto;margin-top: 0px;background-size: 15px!important;bottom: 0px;filter:alpha(opacity=80);opacity: 0.8;}

.swiper-button-prev-pro{left: auto;right: 46px;background: url(../images/prev_left.png) center center no-repeat;transition: 400ms;}

.swiper-button-next-pro{right: 10px;background: url(../images/next_left.png) center center no-repeat;transition: 400ms;}

.swiper-button-prev-pro:hover,.swiper-button-next-pro:hover{filter:alpha(opacity=100);opacity: 1;}

.pro_right{width: 100%;height: auto;}

.pro_right ul{width: 100%;height: auto; }

.pro_right ul li{width: 29%;margin: 2%;height: auto;overflow: hidden;float: left;}

.pro_item a{display: block;height: auto;overflow: hidden;position: relative;}

.pro_img{width: 100%;font-size: 0px;height: auto;}


.pro_mask{width: 100%;height: 100%;background: url(../images/pro_hover.png) center center no-repeat;background-size: 100% 100%;position: absolute;top: 0;left: 0;opacity: 0;filter:alpha(opacity=0);transform: scale(0);}

.pro_intro{width: 100%;padding: 0 10px;text-align: center;color: #066B4F;position: absolute;top: 50%;margin-top: -33px;display: none;animation-duration: 0.5s;-webkit-animation-duration: 0.5s;}

.pro_bt{font-size: 24px;line-height: 40px;height: 40px;overflow: hidden;}

.pro_nr{font-size: 16px;line-height: 26px;height: 26px;overflow: hidden;}

.pro_item a:hover .pro_img img{transition:all linear .2s;-webkit-transition:all linear .2s;-moz-transition:all linear .2s;-moz-transition:all linear .2s;transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);-ms-transform:scale(1.1,1.1);}

.pro_item a:hover .pro_mask{animation: showup 0.2s ease-in-out forwards;-webkit-animation: showup 0.2s ease-in-out forwards;}

.pro_item a:hover .pro_intro{display: block;}

@keyframes showup {  

    0% {opacity: 0;filter:alpha(opacity=0);transform: scale(0);} 

    100% {opacity: 1;filter:alpha(opacity=100);transform: scale(1.02);}  

  }

@-webkit-keyframes showup {  

    0% {opacity: 0;filter:alpha(opacity=0);transform: scale(0);} 

    100% {opacity: 1;filter:alpha(opacity=100);transform: scale(1.02);}  

  }

.copyright{ height:50px; line-height:50px}

/*工程案例*/
#floor_4_main {

}
#floor_4_main .floor_4 {
}
#floor_4_main .proCase {
	position: relative;
	margin-top: 60px;
}
#floor_4_main .proCase .list {
	width: 106%;
}
#floor_4_main .proCase .list li {
	position: relative;
	display: block;
	float: left;
	width: 380px;
	height: 480px;
	margin-right: 30px;
	border: 1px solid #ddd;
	background: #fff;
	transition: all ease 600ms;
}
#floor_4_main .proCase .list li a {
	display: block;
	padding: 30px;
	padding-bottom: 80px;
}
#floor_4_main .proCase .list li a img {
	display: block;
	width: 320px;
	height: 240px;
}
#floor_4_main .proCase .list li .title {
	margin-top: 20px;
}
#floor_4_main .proCase .list li .tit {
	font-size: 20px;
	color: #333;
}
#floor_4_main .proCase .list li .cont {
	margin-top: 12px;
	font-size: 14px;
	color: #333;
}
#floor_4_main .proCase .list li .view_detail {
	position: absolute;
	bottom: 30px;
	left: 30px;
	display: block;
	width: 120px;
	height: 32px;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
	background: #066B4F;
	color: #fff;
}
#floor_4_main .proCase .list li:hover {
	border: 1px solid #066B4F;
	background: #066B4F;
	transition: all ease 600ms;
}
#floor_4_main .proCase .list li:hover .tit {
	color: #fff;
}
#floor_4_main .proCase .list li:hover .cont {
	color: #c1d4f1;
}
#floor_4_main .proCase .list li:hover .view_detail {
	background: #fff;
	color: #066B4F;
}
#floor_4_main .proCase .hd {
	position: absolute;
	width: 100%;
}
#floor_4_main .proCase .hd .prev {
	width: 42px;
	height: 42px;
	background-position: 0px -60px;
	cursor: pointer;
	position: absolute;
	top: -200px;
	left: -80px;
	transition: all ease 600ms;
}
#floor_4_main .proCase .hd .next {
	width: 42px;
	height: 42px;
	background-position: -126px -60px;
	cursor: pointer;
	position: absolute;
	top: -200px;
	right: -80px;
	transition: all ease 600ms;
}
#floor_4_main .proCase .hd .prev:hover {
	background-position: -42px -60px;
	transition: all ease 600ms;
}
#floor_4_main .proCase .hd .next:hover {
	background-position: -84px -60px;
	transition: all ease 600ms;
}

.more {
	margin-top: 40px;
}
.more .line {
	display: block;
	width: 500px;
	height: 1px;
	margin-top: 24px;
	background: #ccc;
}

.more .look_more {
	display: block;
	width: 198px;
	height: 48px;
	font-size: 16px;
	line-height: 48px;
	text-align: center;
	border: 1px solid #ccc;
	transition: all .5s;
}
.more .look_more:hover {
	background: #066B4F;
	color: #fff;
	transition: all .5s;
	border: 1px solid #066B4F;
}

.fl{float: left;}.fr{float: right;}.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}

.ico {
    background: url(/public/template/pc/skin/img/icon.png) no-repeat;
    display: inline-block;
    vertical-align: middle;
}