// 公共部分
.list_ul {
overflow: hidden;
ul {
display: flex;
flex-wrap: wrap;
li {
box-sizing: border-box;
a {
display: block;
}
}
}
}
@color:#95c752;
@font-face{
font-family: fontm;
src: url(../font/060-CAI978.ttf);
}
@font-face{
font-family: helv;
src: url(../font/HelveticaObl-Heavy_0.ttf);
}
.transition {
transition: all ease-in-out 0.3s;
}
.img-transform {
-webkit-transform: scale(1.03);
-moz-transform: scale(1.03);
-ms-transform: scale(1.03);
-o-transform: scale(1.03);
transform: scale(1.03);
}
.big_img {
.img {
overflow: hidden;
img,
h1,
h2,
h3,
h4,
h5 {
.transition;
}
}
&:hover img {
.img-transform;
}
&:hover h1,
&:hover h2,
&:hover h3,
&:hover h4 &:hover h5 {
color: @color;
}
}
.con1400{
max-width: 1400px;
width: 100%;
margin: 0 auto;
}
.con1300{
max-width: 1300px;
width: 100%;
margin: 0 auto;
}
.con1200{
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
// 公共结束
// 头部开始
.head_top{
padding: 0.2% 0;
.con1400{
display: flex;
align-items: center;
justify-content: space-between;
a.logo{
display: block;
}
ul{
display: flex;
li{
padding: 5px;
a{
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
background-color: #9a9a9a;
border-radius: 50%;
}
}
}
}
}
.head{
// background: url(../images/nav_bj.jpg) no-repeat center;
background-color: #f5f5f5;
.con1400{
display: flex;
justify-content: space-between;
align-items: center;
.nav{
width: 100%;
ul{
display: flex;
justify-content: space-between;
li{
a{
display: block;
padding:0 40px;
line-height: 54px;
font-size: 18px;
.transition;
&.hover,
&:hover{
background-color: @color;
color: #fff;
}
}
}
}
}
.pc_tel{
font-size: 18px;
color: #fff;
padding-left: 30px;
letter-spacing: 3px;
background:url(../images/tel.png) no-repeat left center;
}
}
}
.head_wap{
display: none;
}
.i_type{
font-size: 40px;
padding-bottom: 24px;
background: url(../images/icon.jpg) no-repeat center bottom;
}
a.more{
display: block;
width: 148px;
line-height: 42px;
text-align: center;
border:1px solid #ccc;
.transition;
&:hover{
color: #fff;
background-color: @color;
}
}
.i_pro{
padding: 4% 0 2% 0;
.con1400{
display: flex;
justify-content: space-between;
.pro_l{
width: 40%;
}
.i_type{
background: url(../images/icon.jpg) no-repeat left bottom;
}
.i_sum{
line-height: 36px;
font-size: 18px;
color: #5e5e5e;
padding-top: 24px;
}
.more{
margin: 30px 0;
}
.pro_r{
width: 56%;
}
}
}
.i_inno{
padding: 2% 0 2% 0;
.con1400{
.i_type{
text-align: center;
margin-bottom: 2%;
}
.list_ul{
li{
width: 33.33%;
padding: 18px;
a{
display: block;
height: 100%;
border-bottom: 1px solid #ccc;
}
.sum{
line-height: 32px;
font-size: 16px;
color: #5e5e5e;
padding: 4% 0;
}
}
}
}
}
.i_about{
.con1400{
.i_type{
text-align: center;
margin-bottom: 2%;
}
.about_con{
display: flex;
video{
width: 57%;
}
.ab_sum{
width: 43%;
padding-top: 14px;
padding-left: 30px;
box-sizing: border-box;
color: #5e5e5e;
font-size: 16px;
line-height: 32px;
.more{
margin-top: 6%;
}
}
}
}
}
.xinli{
padding: 4% 0 2% 0;
.con1400{
.i_type{
text-align: center;
margin-bottom: 2%;
}
a{
display: block;
overflow: hidden;
img{
.transition;
}
&:hover{
img{
transform: scale(1.03);
}
}
}
.poct{
display: flex;
justify-content: space-between;
.poct_r{
.top{
display: flex;
justify-content: space-between;
margin-bottom: 26px;
}
}
}
}
}
#foo_wap{
display: none;
}
.footer{
background-color: #f3f3f3;
padding:4% 0;
.con1400{
display: flex;
justify-content: space-between;
.foo_nav{
h1{
font-size: 16px;
padding-left: 20px;
margin-bottom: 20px;
}
ul{
display: flex;
a{
display: block;
font-size: 16px;
color: #676767;
padding:0 20px;
}
}
}
.index_cont{
line-height: 30px;
h1{
font-size: 16px;
margin-bottom: 20px;
}
}
}
}
.foo_bottom{
border-top:1px solid #ccc;
background-color: #f3f3f3;
.con1400{
display: flex;
justify-content: center;
a{
display: block;
padding:16px 20px;
}
}
}
.pub_type{
padding: 3% 0;
h1{
font-size: 40px;
text-align: center;
padding: 14px 0;
background:url(../images/icon.jpg) no-repeat center bottom;
}
}
.products_type{
padding-bottom: 4%;
.list_ul{
ul{
margin: -20px;
li{
padding: 20px;
width: 33.33%;
a{
display: block;
position: relative;
h3{
width: 100%;
position: static;
left: 0;
bottom: 0;
color: #fff;
font-size: 20px;
text-align: center;
padding: 30px 0;
z-index: 666;
.transition;
}
.shadow{
position: static;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
box-shadow: 0 -30px 100px #333 inset;
}
&:hover h3{
color: #95c752;
}
}
}
}
}
}
.products{
padding: 4% 0;
.con1400{
display: flex;
justify-content: space-between;
.pub_left{
width: 22%;
h1{
background-color: @color;
color: #fff;
font-size: 30px;
line-height: 50px;
padding: 8% 0 4% 0;
padding-left: 24px;
}
ul{
padding: 14px 0;
width: 100%;
background-color: #f5f5f5;
.lis1{
a{
display: block;
line-height: 40px;
padding-left: 24px;
.transition;
&:hover,
&.hover{
background-color: @color;
color: #fff;
}
}
}
}
}
.list_ul{
width: 74%;
ul{
margin: -16px;
li{
padding: 16px;
width: 33.33%;
h3{
text-align: center;
line-height: 30px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-top: 12px;
}
}
}
}
}
}
.pro_main{
display: flex;
padding: 4% 0;
justify-content: space-between;
.main_left{
width: 50%;
h1{
font-size: 30px;
padding: 4% 0;
}
.feature{
line-height: 28px;
}
}
.pro_img{
width: 44%;
overflow: hidden;
#thumbs{
padding: 14px 0;
.swiper-slide-thumb-active img{
border:1px solid @color;
}
}
}
}
.quality{
.list{
position: relative;
margin-bottom: 4%;
.box{
display: flex;
justify-content: space-between;
.img{
width: 56%;
}
.list_ul{
width: 40%;
padding-top: 6%;
ul{
margin: -8px;
li{
padding: 8px;
}
}
}
}
.type_cont{
position: static;
width: 100%;
max-width: 720px;
right: 0;
bottom: 0;
background-color: #f6f6f6;
padding: 30px;
display: flex;
align-items: flex-end;
.type_l{
h1{
font-size: 28px;
padding: 14px 0;
}
.sum{
color: #5e5e5e;
line-height: 28px;
font-size: 16px;
}
}
i{
font-size: 60px;
color: #d7d7d7;
padding-left: 12px;
}
}
.type_contx{
left: 0;
}
}
}
.honor{
margin-bottom: 4%;
.con1400{
.honor_box{
position: relative;
padding:0 4%;
}
.swiper-button-white{
color: #ccc;
}
}
}
.process{
.con1400{
.list_ul{
ul{
margin: -10px;
li{
padding: 10px;
width: 25%;
}
}
}
.cont_s{
padding: 3% 0;
line-height: 30px;
}
}
}
.yeat{
.con1400{
.list_ul{
ul{
margin: -30px;
li{
padding: 30px;
width: 50%;
a{
display: block;
}
}
.tit_box{
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 5px 30px;
h2{
font-size: 20px;
line-height: 46px;
}
i{
font-size: 48px;
color: #7d7d7d;
font-weight: bold;
}
}
}
}
}
}
.develop{
.con1400{
.list_ul{
ul{
margin: -15px;
li{
width: 25%;
padding: 15px;
a{
display: block;
h2{
font-size: 48px;
font-weight: bold;
color: #7d7d7d;
}
.sum{
line-height: 30px;
color: #6e6e6e;
}
}
}
}
}
.five_ul{
ul{
li{
a{
padding: 4% 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
.img{
width: 32%;
}
.tit_box{
width: 65%;
.tit{
display: flex;
justify-content: space-between;
align-items: center;
h2{
font-size: 48px;
color: #7d7d7d;
font-weight: bold;
}
i{
display: block;
width: 54px;
height: 16px;
background-color: @color;
}
}
.sum{
line-height: 30px;
color: #6e6e6e;
}
}
}
&:nth-child(even) a{
flex-direction: row-reverse;
}
}
}
}
}
}
// 新闻中心
.news{
.news_list{
ul{
li{
a{
display: flex;
justify-content: space-between;
padding: 2% 0;
border-bottom: 1px solid #ccc;
background-color: #fff;
.img{
width: 27%;
}
.cont{
width: 68%;
h1{
font-size: 16px;
}
.time{
padding: 10px 0;
color: #6e6e6e;
}
.sum{
line-height: 28px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
}
}
p.more{
width: 124px;
line-height: 40px;
text-align: center;
border:1px solid #ccc;
margin-top:14px;
.transition;
}
&:hover .more{
background-color: @color;
color: #fff;
}
}
}
}
}
}
.news_read {
padding: 4% 0;
// background-color: #f7f7f7;
}
.news_read .news_typename h1 {
font-size: 22px;
text-align: center;
}
.news_read .news_typename .time {
text-align: center;
color: #747474;
padding: 14px 0;
}
.news_read .read_con {
padding-bottom: 40px;
line-height: 24px;
}
.news_read .cc_book {
padding: 40px 0;
margin-top: 20px;
border-top: 1px solid #ccc;
}
.pic_list{
.con1400{
.ab_list{
ul{
margin: -17px;
li{
padding: 17px;
width:25%;
}
}
}
.company{
.cont_s{
line-height: 28px;
text-align: center;
padding: 3% 0;
}
}
}
}
.ab_feature{
padding: 4%;
background-color: @color;
display: flex;
align-items: center;
.list_ul{
width: 50%;
padding-right: 4%;
box-sizing: border-box;
ul{
li{
width: 50%;
}
}
}
.cont_s2{
width: 50%;
line-height: 30px;
color: #fff;
}
}
.board{
display: flex;
padding-top: 4%;
.persion{
width: 36%;
}
.cont{
width: 64%;
padding-left: 60px;
box-sizing: border-box;
h1{
font-size: 36px;
color: #95c752;
}
.sum{
color: #808080;
line-height: 32px;
padding-top: 2%;
}
}
}
.ab_deve{
margin-bottom: 4%;
.pub_type{
padding-bottom: 0;
}
.deve_list{
ul{
background: url(../images/deve_icon.jpg) repeat-y 15px ;
}
li{
display: flex;
align-items: center;
justify-content: space-between;
.left{
width: 28%;
box-sizing: border-box;
.tit{
display: flex;
align-items: flex-end;
padding-left: 50px;
background: url(../images/deve_icon.png) no-repeat left center;
h1{
font-size: 24px;
}
i{
font-size: 12px;
color: #848484;
padding:0 10px;
}
}
.sum{
padding-left: 50px;
font-size: 16px;
color: #636363;
padding-top: 14px;
}
}
.rig{
width: 70%;
color: #808080;
line-height: 32px;
font-size: 16px;
padding: 2% 0;
border-bottom: 1px solid #ccc;
}
}
}
}
.contact{
.contact_info{
.info{
display: flex;
padding: 3% 0;
.cont{
width: 42%;
line-height: 28px;
h1{
font-size: 30px;
line-height: 60px;
color: @color;
}
}
}
}
}
.leave{
// padding-top: 4%;
.mess_form{
width: 870px;
// margin: 3% auto;
p{
display: flex;
margin-bottom: 34px;
align-items: center;
justify-content: space-between;
input{
width: 46%;
padding:0 8px;
line-height: 40px;
border:1px solid #ccc;
}
}
textarea{
width: 100%;
border:1px solid #ccc;
box-sizing:border-box;
padding: 8px;
line-height: 40px;
height: 200px;
}
}
.submit input {
display: block;
width: 120px;
line-height: 36px;
text-align: center;
background-color: @color;
color: #fff;
margin: 20px auto 6% auto;
}
}
#foo_wap {
width: 100%;
height: 54px;
background: @color;
position: static;
bottom: 0;
left: 0;
z-index: 102;
display: none;
}
#foo_wap a {
display: block;
padding-top: 8px;
width: 25%;
height: 54px;
float: left;
overflow: hidden;
border-right:1px solid rgba(255,255,255,0.15)
}
#foo_wap a img {
display: block;
height: 18px;
margin: 0 auto;
}
#foo_wap a p {
text-align: center;
font-size: 13px;
color: #fff;
line-height: 28px;
}
.head-wap{
a{
color: #fff;
display: block;
line-height: 50px;
text-indent: 2em;
}
}