#body {
}
/*----------滚动条幅------------------------------*/
.index-banner{
margin-top: 101px;
width:100%;
}
.slide{
position:relative;
}
.m-wrapper{
width:100%;
position:relative;
overflow:hidden;
margin:0 auto;
}
.m-faded {
width:100%;
height:690px;
position:relative;
}
.m-faded ul{
width:100%;
height:100%;
}
.m-faded li{
width:100%;
height:100%;
}
.m-faded li a {
width:100%;
height:100%;
background-repeat: no-repeat !important;
background-position: center top !important;
display:block;
font-size: 70px;
line-height: 690px;
text-align: center;
color: #fff;
}
/*焦点*/
.flicking-con {
bottom:20px;
position:absolute;
z-index:998;
left:48%;
}
.flicking-inner li {
float: left;
margin-right:5px;
}
.flicking-inner a {
background-color:#fff;
border-radius:8px;
margin-right:5px;
padding:0px;
width:12px;
height:12px;
float:left;
display:block;
transition:width 1s;
-moz-transition:width 1s; /* Firefox 4 */
-webkit-transition:width 1s; /* Safari and Chrome */
-o-transition:width 1s; /* Opera */
}
.flicking-inner a.on {
width:60px;
transition:width 1s;
-moz-transition:width 1s; /* Firefox 4 */
-webkit-transition:width 1s; /* Safari and Chrome */
-o-transition:width 1s; /* Opera */
background-color:#68c5ff;
}
/*箭头*/
.btn-prev,.btn-next{
top:35%;
display:block;
position:absolute;
width:42px;
height:82px;
background-image:url(../images/banner_arrow.png);
}
.btn-prev{
left:10%;
}
.btn-next{
right:10%;
background-position:-74px 0;
}
/*展示的商品*/
.pre, .next {
width: 10%;
line-height: 210px;
text-align: center
}
.pre img, .next img {
width: 20%;
}
.goods {
padding: 120px 0px;
}
.goods {
width: 84%;
margin: 0 auto;
overflow: hidden;
position:relative;
}
.goods-wrapr {
width: 80%;
overflow: hidden;
display: inline-block;
}
.goods-item{
position:relative;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
.goods-item:hover{
z-index: 2;
-webkit-box-shadow: 0 1px 30px rgba(0,0,0,0.1);
box-shadow: 0 1px 30px rgba(0,0,0,0.1);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0);
}
.goods-item-wraper > div:nth-child(2) {
padding: 5px 0;
}
.goods-item-wraper > div:nth-child(3) {
padding: 5px 0px;
color: #9B9B9B;
}
.good-infor-wraper{
padding:10px 0;
}
.good-name {
text-align: center;
font-size: 16px;
font-weight:bold;
font-family:"Microsoft YaHei";
/*color:white;*/
}
.good-infor {
text-align: center;
font-family:"Microsoft YaHei";
/*color:white;*/
}
.goods-item {
background: white;
width:326px;
text-align: center;
}
.goods-item img {
max-height:220px;
}
.goods-item-wraper {
width: 90%;
margin: 0 auto;
}
.good-imges {
}
/*天窗*/
#wds-wraper {
background-image: url(../images/wholepage.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: 100%;
background-size: 100%;
background-position: 0px 0px;
background-color:#fcfcfc;
}
.wds-about{
padding-top:50px;
}
#wds-content a{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
border: transparent 3px solid;
border-radius: 5px;
border-image: -webkit-linear-gradient(left, #1D75F2, #17DCFE) 3 3;
transition: all 0.2s;
}
#wds-content a:hover{
background: -webkit-linear-gradient(left, #1D75F2, #17DCFE);
border: none;
width:160px;
height:60px;
line-height:60px;
transition: all 0.2s;
}
/*!*temp*!*/
#wds-content > div:nth-child(2) > a{
font-size: 20px;
/*text-indent:2em;*/
}
#wds-content > div, #wds-content > div > a {
color: #ffffff;
text-align: center;
line-height: 2;
}
#wds-content {
/*padding-top: 100px;*/
padding-top: 5%;
padding-bottom: 5%;
}
#wds-content > div a {
display: inline-block;
width:160px;
height:60px;
line-height:60px;
border-image: -webkit-linear-gradient(left, #1D75F2, #17DCFE) 3 3;
border-image: -moz-linear-gradient(left, #1D75F2, #17DCFE) 3 3;
border-image: linear-gradient(left, #1D75F2, #17DCFE) 3 3;
}
.wds-word p:nth-child(1){
font-size:70px !important;
}
.wds-word p:nth-child(2){
font-size:40px !important;
}
/*生态圈*/
#cicle-wraper {
padding: 2% 0px 2% 0px;
width:84%;
margin:0 auto;
min-width: 898px;
}
#ss-cicle{
padding: 1.6% 0 ;
}
#ss-title {
padding-bottom: 1.2%;
}
#ss-cicle-title {
font-size: 40px;
color: #333;
text-align: center;
padding: 3px 0;
}
#ss-cicle-ltitle {
font-size: 20px;
color: #898989;
padding: 3px 0;
text-align: center;
}
.ci-title {
font-size: 17px;
color: #606060;
text-align: center;
margin-top:5px;
}
.cicle-item-wraper {
width: 100%;
}
#ci-wraper {
/*width: 1200px;*/
margin: 0 auto;
}
.cicle-items {
width: 100%;
}
.cicle-item {
width: 23%;
margin-left: 1.7%;
float:left;
background-color: #ffffff;
transform: scale(1);
transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.cicle-item:hover {
-webkit-transform: scale(1.1); /* Safari 和 Chrome */
box-shadow: 0px 0px 13px #8F8F8F;
transform: scale(1.1);
position: relative;
z-index:2;
transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1);
overflow: hidden;
}
.cicle-item:hover .item-bg-inner{
background-color: rgba(0, 0, 0, 0.2);
transition: all 1s;
}
.cicle-item:hover .item-inner-title{
display:block;
color: #fff;
text-shadow: 0 0 10px #333;
}
.item-bg {
width: 240px;
height: 240px;
}
#ci-wraper > div:nth-child(1) .item-bg {
background: url('../images/cicle1.png') 50% 50% no-repeat;
background-size: 50%;
}
#ci-wraper > div:nth-child(2) .item-bg {
background: url('../images/cicle2.png') 50% 50% no-repeat;
background-size: 50%;
}
#ci-wraper > div:nth-child(3) .item-bg {
background: url('../images/cicle3.png') 50% 50% no-repeat;
background-size: 50%;
}
#ci-wraper > div:nth-child(4) .item-bg {
background: url('../images/cicle4.png') 50% 50% no-repeat;
background-size: 50%;
}
.item-bg-inner {
width: 100%;
height: 100%;
}
.item-inner-title {
width: 100%;
font-size: 34px;
text-align: center;
padding: 80px 20px 80px 20px;
color: #71b8ff;
transition: all 1s;
display:none;
}
.cicle-item > a {
display: block;
width: 240px;
margin: 32px auto;
}
/*glow for webkit*/
@-webkit-keyframes neon1 {
from {
text-shadow: 0 0 1px #fff,
0 0 2px #fff,
0 0 3px #fff,
0 0 4px #71b8ff,
0 0 5px #71b8ff,
0 0 6px #71b8ff,
0 0 7px #71b8ff,
0 0 8px #71b8ff;
}
to {
text-shadow: 0 0 3px #fff,
0 0 7px #fff,
0 0 9px #fff,
0 0 11px #71b8ff,
0 0 13px #71b8ff,
0 0 15px #71b8ff,
0 0 17px #71b8ff,
0 0 19px #71b8ff;
}
}