.transition(@transition:.4s){-webkit-transition:@transition;-moz-transition:@transition;-ms-transition:@transition;-o-transition:@transition;transition:@transition;}
.transform-origin(@origin){-webkit-transform: @origin;-moz-transform: @origin;-ms-transform: @origin;-o-transform: @origin;transform: @origin;}
.scale(@scale){-webkit-transform: scale(@scale);-moz-transform:scale(@scale);-ms-transform:scale(@scale);-o-transform:scale(@scale);transform:scale(@scale);}
.translateY(@distance){-ms-transform:translateY(@distance); -webkit-transform:translateY(@distance); -o-transform:translateY(@distance); -moz-transform:translateY(@distance); }
.border-radius(@border-radius){-webkit-border-radius:@border-radius;-moz-border-radius:@border-radius;-o-order-radius:@border-radius;-ms-border-radius:@border-radius;border-radius:@border-radius;}
.rotate(@rotate){-webkit-transform: rotate(@rotate);-moz-transform: rotate(@rotate);-ms-transform: rotate(@rotate);-o-transform: rotate(@rotate);transform: rotate(@rotate);}
@mc:#eee;
@mc1:#116641;
@mc2:#149c16;
@qt1:#573a59;
@qt2:#1a8fdf;/*内页导航背景*/
@qt3:#1a8fdf;/*内页分类侧边背景*/
@qt4:#099f52;/*内页分类侧边li背景*/
@qt5:#fff;/*悬浮背景变色后字体颜?/
@qt6:#c5a46e;/*按钮悬浮颜色 */
//调用方式 .border(3px);
.txt {text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.browserupgrade {
cursor: pointer; margin:0;padding:1em;background:#ccc;
a {color: red;}
}
table {border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
table td {border-left:1px solid #ccc;border-top:1px solid #ccc;text-align: center;vertical-align: middle;}
input,textarea {margin: 0;padding: 0;box-shadow: none;border: none;}
/*全局---头部----主体(主页)----底部---侧边---内页--*/
/*--------------------------------------------------------全局开?--------------------------------------------------*/
p,a,h1,h2,h3,h4,h5,h6,li,label,span,i,b,div { margin: 0;padding: 0;font-size: 14px;line-height: 1.5;}
h1,h2,h3,h4,h5,h6 {font-weight: normal;}
li {list-style: none;}
.off{display:none;} /*隐藏*/
.slh(){text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}/*单行超出部分省略号显?/
ul{padding: 0;margin:0;}
i{font-style: normal;}
a {color: #333;text-decoration: none;}
/*----------------头部--------------*/
body {margin: 0;padding: 0;background: #fff;max-width: 1920px;min-width: 1300px;overflow-x: hidden;padding-top: 50px;}
body {color: #333; margin: 0; font-size: 14px;}
.fl,.left {float: left;}
.fr,.right {float: right;}
.w1920 {max-width: 1920px;margin: 0 auto;}
.w1200,.wrap,.main {width: 1200px;margin:0 auto;}
//顶部
.toptop {
height: 50px;position: fixed;left: 0;right: 0;top: 0;background: @mc1;z-index: 88;
.logo_box {
display: block;width:208px;height: 50px; position: absolute;left: 0;right: 0;top: 0;bottom:0;margin:auto;
img {width:208px;height: 50px;object-fit: contain;display: block;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin:auto;}
}
.nav {
float: left;
li {
float: left;position: relative; height: 50px;box-sizing:border-box;margin-right: 30px;
> a {display: block;height: 50px;font-size: 16px;line-height: 48px;box-sizing:border-box;color: #fff;}
// .erji {
// display: none;position: absolute;width:120px;top: 93px;z-index:8;background:rgba(38,105,171,0.9);
// a {display: block;border-bottom: 1px solid #e5e5e5;line-height: 38px;text-align: center;font-size: 15px;color: #fff; }
// }
}
.active {
border-bottom:2px solid #fdcf38;
}
}
.nav_info_box {
float: right;
span:nth-of-type(1) {display: inline-block;height: 50px;width: 140px;background: url('../images/bg01.png') 0px 0px no-repeat ;vertical-align: top;box-sizing: border-box;padding-left: 42px;line-height: 50px;color: #fff;}
span:nth-of-type(2) {
display: inline-block;height: 50px;width: 50px;background: url('../images/bg01.png') 0px -50px no-repeat ;vertical-align: top;position:relative;cursor: pointer;
div {
width: 120px;height: 163px;background:url('../images/bg03.png') center center no-repeat;box-sizing: border-box;padding-top:17px;
position: absolute;left: -35px;top: 50px;display: none;
p {font-size: 16px;color: #fff;line-height: 30px;text-align: center;}
img {width: 114px;height: 114px;margin:0 auto;display: block;}
}
&:hover {
div {display: block;}
}
}
a {display: inline-block;height: 50px;width: 50px;background: url('../images/bg01.png') 0px -100px no-repeat ;vertical-align: top;}
}
}
.banner1 {
height:700px;position:relative;
.swiper-prev {display: inline-block;vertical-align: top;cursor: pointer;position: absolute;left: 0px;top: 45%;z-index: 2;opacity: 0;.transition();}
.swiper-next {display: inline-block;vertical-align: top;cursor: pointer;position: absolute;right: 0px;top: 45%;z-index: 2;opacity: 0;.transition();}
&:hover {
.swiper-next,.swiper-prev {
opacity: 1;.transition();
}
}
.swiper-pagination {
bottom: 10px;
.swiper-pagination-bullet { opacity: 1;width:22px;height: 22px;background: url('../images/bg48.png') center -22px;border-radius: 0;}
.swiper-pagination-bullet-active {background-position-y: 0px;}
}
}
.banner1 .swiper-slide {width: 100%;height: 100%;}
.neiye_banner {
height: 350px;background: url('../images/banner.jpg') top center no-repeat;
}
.banner_nav {
background:#666666;height: 30px;margin-bottom: 35px;
.title {
font-size: 12px;color:#fff;line-height: 30px;
a,span {
font-size: 12px;color:#fff;line-height: 30px;
}
}
}
// 首页主体部分开?
.main_title {
font-size: 34px;color: @mc1;margin-bottom: 50px;
span {font-size: 34px;color: @mc1;font-weight: bold;margin-right: 20px;}
}
.main_more {
display: block;width: 165px;height: 45px;line-height: 45px;border:1px solid @mc1; margin:20px auto 0; box-sizing:border-box;.transition();
color:@mc1;text-align: center; .transition();border-radius: 4px;background: #fff;
&:hover {background: @mc1;color: #fff; .transition();}
}
.how_box {
height: 575px;background: url('../images/bg02.jpg') center center no-repeat;box-sizing: border-box;padding-top:100px;
.how_box_01 {
width: 370px;float: left;
p:nth-of-type(1) {
font-size: 47px;font-weight: bold;line-height: 1;margin-bottom: 45px;position:relative;color: @mc1;
&:after {display: block;content: '';width: 10px;height: 4px;background:@mc1;position: absolute;left: 0px;bottom: -25px; }
}
p:nth-of-type(2) {
font-size: 34px;line-height: 48px;color: @mc1;
}
}
.how_box_02 {
width:745px;float: right;padding-top:38px;
img {width: 386px;height: 302px;object-fit: cover;float: left;}
div {
width: 290px;float: right;padding-top:35px;
p:nth-of-type(1), p:nth-of-type(3) {font-size: 28px;line-height: 45px;margin-bottom: 18px;color: @mc1;}
p:nth-of-type(2), p:nth-of-type(4) {font-size: 16px;margin-bottom: 60px;}
}
}
}
.about_box {
.about_banner {
height: 800px;
.swiper-wrapper {
.swiper-slide:nth-of-type(1) {height: 800px;background: url('../images/bg06.jpg') center center ; }
.swiper-slide:nth-of-type(2) {height: 800px;background: url('../images/bg07.jpg') center center ; }
.swiper-slide:nth-of-type(3) {height: 800px;background: url('../images/bg08.jpg') center center ; }
.swiper-slide:nth-of-type(4) {height: 800px;background: url('../images/bg09.jpg') center center ; }
.swiper-slide {
box-sizing: border-box;padding-top:150px;
p:nth-of-type(1) {
font-size: 34px;line-height:48px;color: #fff;position: relative;margin-bottom: 147px;
span {font-size: 44px;color: #fff;font-weight: bold;margin-right: 20px;}
&:after {
display: block;content: '';width: 160px;height: 2px;background: rgba(255,255,255,0.6);
position: absolute; left: 0;bottom:-74px;
}
}
p:nth-of-type(2) {font-size: 28px;line-height: 1;margin-bottom: 29px;color: #fff;}
p:nth-of-type(3) {font-size: 16px;line-height:30px;color: #fff;width: 600px;}
}
}
}
.about-swiper-pagination {
text-align: center;box-shadow: 0px 0px 21px rgba(0,0,0,0.29);width: 1200px;margin:0 auto;z-index: 11;position: relative;top: -55px;
.swiper-pagination-bullet {opacity: 1;width: 300px;height: 110px;box-sizing: border-box;padding-top: 73px;text-align: center;line-height: 1;font-size: 16px;border-radius: 0;}
span:nth-of-type(1) {background: url('../images/bg10.jpg') center 0px ;}
span:nth-of-type(2) {background: url('../images/bg11.jpg') center 0px ;}
span:nth-of-type(3) {background: url('../images/bg12.jpg') center 0px ;}
span:nth-of-type(4) {background: url('../images/bg13.jpg') center 0px ;}
.swiper-pagination-bullet-active {
border-bottom: 3px solid @mc1;background-position-y:110px !important; color: @mc1;
}
}
}
.fazhan {
padding-bottom:100px;
ul {
padding-bottom:170px;background: url('../images/bg14.jpg') center bottom;padding-top:30px;
li {
margin-bottom: 55px;position: relative;cursor: pointer;
p:nth-of-type(1) {width: 190px;float: left;text-align: right;font-size: 28px;line-height: 30px;color: @mc1;}
p:nth-of-type(2) {width: 915px;float: right;font-size: 22px;line-height: 30px; }
&:after {
display: block;content:'';width: 29px;height: 29px;border-radius: 50%;border:7px solid @mc1;box-sizing:border-box;
position: absolute;left: 224px;top: 0;bottom: 0;margin:auto;opacity: 0;.transition();
}
&:hover {
&:after {opacity: 1;.transition(); }
}
}
li:last-of-type {margin-bottom: 0px;}
}
}
.hj_box {
background: #dbe8e3;padding:100px 0px 130px;position: relative;
.hj_banner {
.swiper-slide {
width: 592px;height: 364px;
img {display: block;width: 592px;height: 364px;object-fit: cover;}
}
}
.hj-swiper-prev {position: absolute;cursor: pointer;position: absolute;right: 50%;top: 325px;margin-right: 660px;}
.hj-swiper-next {transform: rotate(180deg);cursor: pointer;position: absolute;left: 50%;top: 325px;margin-left: 660px;}
}
.map_box {
height: 875px;background: url('../images/bg15.jpg') center center no-repeat;box-sizing: border-box;padding-top:100px;
.map_info {
float: right;width: 360px;padding-top:20px;
h3 {
font-size: 28px;line-height: 1;margin-bottom: 50px;color: #000;position: relative;
&:after {display: block;content: '';background: @mc1;width: 60px;height: 3px;background: @mc1; position: absolute;left: 0;bottom: -24px;}
}
> p:nth-of-type(1) {font-size: 16px;line-height: 30px;margin-bottom: 35px;}
.map_info_item {
margin-bottom: 85px;
div:nth-of-type(1) {width: 100px;display: inline-block;}
div:nth-of-type(2) {
width: 250px;display: inline-block;
p:nth-of-type(1) {
color: #f6ba06;
span {color: #f6ba06;}
}
}
div {
p:nth-of-type(1) {
font-size: 80px;color: @mc1;text-align: center;margin-bottom: 8px;
span {font-size: 80px;}
}
p:nth-of-type(2) {text-align: center;}
}
}
> p:nth-of-type(2) {
margin-bottom: 24px;padding-left: 20px;position: relative;
&:after {
width: 12px;height: 12px;display: block;content: '';border-radius: 50%;left: 0;top: 3px;background: #f6ba06;position: absolute;
}
}
> p:nth-of-type(3) {
padding-left: 20px;position: relative;
&:after {
width: 12px;height: 12px;display: block;content: '';border-radius: 50%;left: 0;top: 3px;background: #199d5b;position: absolute;
}
}
}
}
.hot_goods {
height: 905px;position: relative;
.swiper-wrapper {
.swiper-slide:nth-of-type(1) {background:url('../images/bg16.jpg') center center no-repeat }
.swiper-slide:nth-of-type(2) {background:url('../images/bg17.jpg') center center no-repeat }
.swiper-slide:nth-of-type(3) {background:url('../images/bg18.jpg') center center no-repeat }
}
.goods-swiper-pagination {
width: 160px;height: 600px;background: #fff;position: absolute;left: 50%;top: 152.5px;margin-left: 440px; z-index: 8;
.swiper-pagination-bullet {
opacity: 1;border-radius: 0; width: 160px;height: 200px;box-sizing: border-box;padding-top:55px;position: relative;background: none;margin:0;
p:nth-of-type(1) {font-size: 24px;line-height: 34px;text-align: center;color: @mc1;}
p:nth-of-type(2) {font-size: 14px;color: @mc1;text-align: center;font-family: 'Arial';}
&:after {display: block;width: 116px;height: 1px;background: @mc1;content: ''; position: absolute;left: 0;right: 0;top: 143px;margin:auto; }
}
.swiper-pagination-bullet-active {
background: #f6ba06;
p {color: #fff !important;}
&:after {background: #fff;}
}
}
}
.youshi_box {
padding:100px 0px 75px;background: #dbe8e3;
ul {
li {
margin-bottom: 25px;width: 581px;height: 316px;float: left;box-sizing: border-box;padding:67px 38px 0px;
p:nth-of-type(1) {line-height: 40px;margin-bottom: 48px;font-size: 22px;font-weight: bold;text-align: center;}
p:nth-of-type(2) {color: #666;line-height: 26px;text-align: center;}
}
li:nth-of-type(2n) {margin-right: 0px;float: right;}
li:nth-of-type(1) {background: url('../images/bg19.png') center center no-repeat;}
li:nth-of-type(2) {background: url('../images/bg20.png') center center no-repeat;}
li:nth-of-type(3) {background: url('../images/bg21.png') center center no-repeat;}
li:nth-of-type(4) {background: url('../images/bg22.png') center center no-repeat;}
}
}
.contact_box {
height: 740px;background: url('../images/bg23.jpg') center center no-repeat;box-sizing: border-box;padding-top:130px;
.main_title {
margin-bottom: 130px;color: #fff;position: relative;
span {color: #fff;}
&:after {display: block;content: '';width: 100px;height: 3px;background: #fff;position: absolute;left: 0;bottom: -65px; }
}
p {
color: #fff;font-size: 16px;line-height:36px;
}
}
.fixed_box {
position: fixed;width: 100%;height: 100%;background: rgba(0,0,0,0.75); z-index: 100;left: 0;top: 0;
div {
width: 847px;height: 567px;background: url('../images/bg04.png') center center no-repeat;position:absolute;left: 0;top: 0;right: 0;bottom: 0;margin:auto;
box-sizing: border-box;padding: 83px 62px 0;
h3 {font-size: 24px;font-weight: bold;text-align: center;color: #000;margin-bottom: 25px;}
p:nth-of-type(1) {
line-height: 24px;
span {color: @mc1;}
}
p:nth-of-type(2) {
margin-top: 25px;text-align: right;line-height: 30px;
}
a {
display: block;width: 165px;height: 40px;background: @mc1;border-radius: 20px;margin:25px auto 0;
font-size: 20px;text-align: center;line-height: 40px;color: #fff;font-family: "Arial";
}
}
}
// 首页结束
.layer_box {
background: @mc1;width: 600px;height: 400px;box-sizing:border-box;box-sizing:border-box;padding:5px;overflow:hidden;
> p {text-align: center;line-height: 108px;font-size: 34px;color: #fff;font-weight: bold;}
form {
box-sizing:border-box;text-align: center;padding:28px 45px;display: block;width: 590px;background:#fff;position:relative;
input:nth-of-type(2) {border:1px solid #cccccc;width: 500px;height: 35px;text-indent: 1em;font-size: 14px;line-height: 35px;margin-bottom: 12px;float: left;}
input:nth-of-type(3) {border:1px solid #cccccc;width: 500px;height: 35px;text-indent: 1em;font-size: 14px;line-height: 35px;margin-bottom: 12px;float: right;}
input:nth-of-type(4) {border:1px solid #cccccc;width: 350px;height: 35px;text-indent: 1em;font-size: 14px;line-height: 35px;margin-bottom: 12px;float: left;}
img {display: inline-block;height: 35px;}
a {width: 280px;height: 35px;text-align: center;color: #fff;background: @mc1;border-radius: 5px;font-size: 16px;margin: 20px auto 10px;display: block;line-height: 35px;}
p {text-align: center;color: @mc1;font-size: 16px;}
}
}
//底部样式
.footer_box {
box-sizing: border-box; height: 211px;background: url('../images/bg24.jpg') center top;box-sizing: border-box;
.footer_item01 {
width: 450px;float: left;margin-left: 430px;color: #999;padding-top:60px;line-height: 40px;
a {color: #999;}
}
.footer_item02 {
width: 300px;float: right;padding-top:39px;
div {
float: right;margin-left: 30px;width: 120px;
img {display: block;width: 120px;height: 120px;}
p {text-align: center;line-height: 36px;color: #666;}
}
}
}
// .fix_box {
// display: block; position: fixed; right: 0; top: 0;bottom: 0; z-index: 99;width: 100px;margin:auto;height: 310px;background: #fff;
// li:nth-of-type(1) {
// width: 100px;height: 45px;border:1px solid #ddd;border-bottom: none;background: url('../images/bg05.png') 7px 0px no-repeat;box-sizing: border-box;
// a {display: block;padding-left: 32px;line-height: 44px;}
// }
// li:nth-of-type(2) {
// width: 100px;height: 45px;background: #000000;text-align: center;color: #c2cf3b;line-height: 45px;
// a {
// display: block;color:#c2cf3b;
// span {font-size: 18px;display: block;text-align: center;color: #c2cf3b;line-height: 45px;}
// }
// }
// li:nth-of-type(3) {
// width: 100px;height: 45px;border:1px solid #ddd;border-bottom: none;background: url('../images/bg05.png') 7px -90px no-repeat;box-sizing: border-box;
// a {display: block;padding-left: 32px;line-height: 44px;}
// }
// li:nth-of-type(4) {
// width: 100px;height: 45px;border:1px solid #ddd;border-bottom: none;background: url('../images/bg05.png') 7px -133px no-repeat;box-sizing: border-box;position: relative;
// a {display: block;padding-left: 32px;line-height: 44px;}
// div {
// width: 150px; box-sizing: border-box;position: absolute;left: -160px;top: 0px;background: #eee;
// display: none;font-size: 16px;
// p {font-size: 16px;line-height: 40px; text-align: center;}
// &:after {
// width: 0px;height: 0;border:10px solid transparent;display: block;content: '';
// border-left-color: #eee;position: absolute;right: -20px;top: 0;bottom: 0;margin:auto;
// }
// }
// &:hover {
// div {display: block;}
// }
// }
// li:nth-of-type(5) {
// width: 100px;height: 45px;border:1px solid #ddd;border-bottom: none;background: url('../images/bg05.png') 7px -179px no-repeat;box-sizing: border-box;position: relative;
// a {display: block;padding-left: 32px;line-height: 44px;}
// div {
// width: 110px;height: 110px;border:3px solid #fff;box-sizing: border-box;position: absolute;left: -130px;top: -34px;
// display: none;
// &:after {
// width: 0px;height: 0;border:10px solid transparent;display: block;content: '';
// border-left-color: #eee;position: absolute;right: -23px;top: 0;bottom: 0;margin:auto;
// }
// img {
// display: block;width: 104px;height: 104px;
// }
// }
// &:hover {
// div {display: block;}
// }
// }
// li:nth-of-type(6) {
// width: 100px;height: 45px;border:1px solid #ddd;border-bottom: none;background: url('../images/bg05.png') 7px -225px no-repeat;box-sizing: border-box;
// a {display: block;padding-left: 32px;line-height: 44px;}
// }
// li:nth-of-type(7) {
// width: 100px;height: 45px; border-bottom: none;background: @mc1 url('../images/bg05.png') center -265px no-repeat;box-sizing: border-box;cursor: pointer;
// }
// }
.fix_box {
display: block; position: fixed; right: 0; top: 0;bottom: 0; z-index: 99;width: 75px;margin:auto;height: 355px;
> div {
width: 75px;background: @mc1;margin-bottom: 1px;height: 70px;.transition();float: right;cursor: pointer;position: relative;
img:nth-of-type(1) {display: block;margin:15px auto 0; }
img:nth-of-type(2) {display: none;width: 100px;height: 100px;position: absolute;right: 100px;border:1px solid #eee;top: -20px;}
p {color: #fff;text-align: center;font-size: 16px;}
&:hover {
width: 100px;.transition();
}
}
> div:nth-of-type(3) {
&:hover {
img:nth-of-type(2) {display: block;}
}
}
> div:nth-of-type(1) {
width: 220px;position: relative;right: -145px;.transition(.8s);
div:nth-of-type(1) {
width: 75px;float: left;
}
div:nth-of-type(2) {
height: 70px;float: right;width: 140px;box-sizing: border-box;padding-top:15px;
span {
display: inline-block;height: 40px;border-left: 1px solid #fff;width: 140px;color: #fff;
line-height: 40px;text-indent: 1em;font-size: 16px;letter-spacing: 1px;
}
}
&:hover {right: 0px;.transition(.8s);}
}
}
// 合作单页
.hezuo_title01 {
font-size: 36px;line-height:48px;color: #fff;margin-bottom: 50px;
span {font-size: 48px;display: inline-block;line-height: 1;font-weight: bold;color: #fff;margin-right: 20px;vertical-align: top;}
}
.hezuo_title02 {
height: 70px;position: relative;margin-bottom: 36px;
p:nth-of-type(1) {color: rgba(255,255,255,0.1);font-size: 48px;line-height: 1;text-transform: uppercase;}
p:nth-of-type(2) {font-size: 30px;color: #fff;line-height: 1;position: absolute;left: 0;top: 16px;}
&:after {
display: block;width: 60px;height: 3px;content: '';background: #f7b500;position: absolute;left: 0;bottom: 0;
}
}
.hezuo_item01 {
height:105px;box-sizing: border-box;padding-top:29px;
a {display: block;float: right;width:175px;height: 44px;border-radius: 22px;font-size: 16px;text-align: center;line-height: 44px;background: #f7b500;}
}
.hezuo_item02,.hezuo_item03 {
margin-bottom: 20px;
ul {
li {
margin-bottom: 20px;width: 340px;float: left;margin-right: 90px;
p:nth-of-type(1) {
font-size: 16px;line-height:30px;color: #fff;
span {font-size: 18px;color: #fff;line-height: 30px;margin-right: 15px;vertical-align: top;}
}
p:nth-of-type(2) {line-height:20px;height: 60px; overflow:hidden;color: rgba(255,255,255,0.5);}
}
li:nth-of-type(3n) {float: right;margin-right: 0px;}
}
}
.hezuo_item04 {
margin-bottom: 100px;
ul {
height: 230px;
li {
width: 280px;height: 230px;box-sizing: border-box;border:1px solid rgba(255,255,255,0.5);padding:125px 25px 0;border-radius: 9px;float: left;
margin-right: 26px;
p:nth-of-type(1) {font-size: 18px;color: #fff;text-align: center;line-height: 30px;}
p:nth-of-type(2) {color: #ccc;line-height: 24px;text-align: center;}
}
li:nth-of-type(1) {background: url('../images/bg25.png') center top no-repeat;}
li:nth-of-type(2) {background: url('../images/bg26.png') center top no-repeat;}
li:nth-of-type(3) {background: url('../images/bg27.png') center top no-repeat;}
li:nth-of-type(4) {background: url('../images/bg28.png') center top no-repeat;margin-right: 0px;float: right;}
}
}
.hezuo_item05 {
margin-bottom: 100px;
ul {
li {
width: 377px;height: 254px;float: left; margin-right: 33px;box-sizing: border-box;padding:0px 30px 0px;margin-bottom: 42px;
overflow: hidden;position: relative;background: #e5e5e5;border-radius: 8px;cursor: pointer;
span {display: block;width: 120px;height: 85px;margin:0 auto;.transition();}
p:nth-of-type(1) {font-size: 22px;color: @mc1;text-align: center;line-height: 45px;}
p:nth-of-type(2) {line-height: 24px;text-align: center;text-align: center;}
* {position: relative;z-index: 2;}
&:after {
display: block;width: 120px;background: #116641;content:'';height: 120px;border-radius: 50%; position: absolute;
left:50%;transform:translateX(-50%) translateY(-50%); top: 0px;
z-index: 1;.transition(.4s);box-sizing: border-box;
}
&:hover {
&:after {width:900px;height:900px;.transition(.8s);}
p {color: #fff;}
span {background-position-y: 25px !important;.transition();}
}
}
li:nth-of-type(3n) {margin-right: 0px;float: right;}
li:nth-of-type(1) span {background: url('../images/bg29.png') center top no-repeat;}
li:nth-of-type(2) span {background: url('../images/bg30.png') center top no-repeat;}
li:nth-of-type(3) span {background: url('../images/bg31.png') center top no-repeat;}
li:nth-of-type(4) span {background: url('../images/bg32.png') center top no-repeat;}
li:nth-of-type(5) span {background: url('../images/bg33.png') center top no-repeat;}
li:nth-of-type(6) span {background: url('../images/bg34.png') center top no-repeat;}
li:nth-of-type(7) span {background: url('../images/bg35.png') center top no-repeat;}
li:nth-of-type(8) span {background: url('../images/bg36.png') center top no-repeat;}
li:nth-of-type(9) span {background: url('../images/bg37.png') center top no-repeat;}
}
}
.hezuo_item06 {
ul {
li {
width: 150px;padding:120px 10px 0px;float: left;box-sizing: border-box;
p:nth-of-type(1) {font-size: 14px;color: #fff;text-align: center;line-height: 1;}
p:nth-of-type(2) {font-size: 16px;line-height: 36px;text-align: center;color: #fff;}
p:nth-of-type(3) {line-height: 24px;color: rgba(255,255,255,0.5);text-align: center;}
}
li:nth-of-type(1) {background: url('../images/bg38.png') center top no-repeat;}
li:nth-of-type(2) {background: url('../images/bg39.png') center top no-repeat;}
li:nth-of-type(3) {background: url('../images/bg40.png') center top no-repeat;}
li:nth-of-type(4) {background: url('../images/bg41.png') center top no-repeat;}
li:nth-of-type(5) {background: url('../images/bg42.png') center top no-repeat;}
li:nth-of-type(6) {background: url('../images/bg43.png') center top no-repeat;}
li:nth-of-type(7) {background: url('../images/bg44.png') center top no-repeat;}
li:nth-of-type(8) {background: url('../images/bg45.png') center top no-repeat;}
}
}
.hezuo_item07 {
margin-bottom: 100px;padding-top: 100px;
ul {
li {
h3 {
height: 70px;border-bottom: 1px solid rgba(255,255,255,0.5);font-size: 16px;color: #fff;line-height:70px;position: relative;cursor: pointer;
span {
display: inline-block;width: 30px;height: 30px;font-size: 22px;line-height: 30px;text-align: center;margin-right: 20px;
vertical-align: middle;background: #fff;color: @mc1;border-radius: 15px;
}
&:after {
display: block;width: 0px;height: 0px; content: '';border: 8px solid transparent;border-top-color: #fff;
position: absolute;right: 0;top: 0;bottom: 0;margin:auto;
}
}
.active {
&:after {transform:rotate(180deg);}
}
p {box-sizing: border-box;padding:55px;color: #666;font-size: 16px;line-height: 28px;display: none;}
}
}
}
// 留言
.order {margin-left:30px;}
.order li {margin-top:30px;position: relative;font-weight: bold;font-size: 18px;}
.order > li:nth-child(5) {height: 70px;}
.order li input{position: absolute;left: 150px;width: 375px;}
.order li textarea{position: absolute;left: 150px;bottom: 0px;width: 375px;height: 100px;}
.order p,input {display:inline-block;font-size:18px;}
.order input {height:20px;border:1px solid #cfcfcf;}
.order textarea {border:1px solid #cfcfcf;}
#submit {width:230px;height:50px;border-radius:10px;background:#dd2121;font-size:20px;color:#fff;font-weight:bold;margin:0 auto;display: block;}
#submit:hover {border:2px solid #ddd;}
// 联系我们
.contact_main {
position: relative;padding:30px;background:#eee;box-sizing:border-box;margin-bottom: 20px;
#dituContent,#allmap {width:60%;height:350px;overflow:hidden;border:1px solid #ddd;float: right;}
.contact-info {
line-height: 30px;color: #333; width: 35%;float: left;padding-left:10px;
h2 {font-size: 20px;font-weight: bold;}
p {display: block;line-height: 32px;color: #000;}
img {display: block;width: 115px;height: 115px;margin-top: 10px;}
}
}
// 联系我们结束
// 公司简?
// 公司简介结?
// 售后服务
.service_custom {
.service_before_main {
padding-bottom:65px;
img {float: right;}
h3 {font-size: 22px;line-height: 60px;width: 575px;float: left;}
p {line-height: 30px;width: 575px;float: left;}
}
.service_after_main {
li {
width: 576px;margin-bottom: 40px;
img {display: block;width: 575px;height: 253px;object-fit: cover;}
p:nth-of-type(1) {font-size: 22px;line-height: 70px; }
p:nth-of-type(2) {
line-height: 30px;
span {color: @mc1;}
}
}
}
}
.search_list {
li {
margin-right: 20px;margin-bottom: 20px;width: 590px;float: left;height: 160px;background: #eee;
div:nth-of-type(1) {
width: 220px; height: 160px; position: relative; box-sizing: border-box; float: left;margin-right:15px;
img {width: 218px;height: 158px;object:cover;display: block;}
}
div:nth-of-type(2) {
width: 345px;float: left;
h4 {font-size: 16px;color: #333;line-height: 45px;margin-bottom: 10px;}
p {line-height: 24px;height: 72px;overflow: hidden;text-indent: 2em;color: #666;text-align: justify;}
}
&:hover {
h4 {color: @mc1;}
}
}
li:nth-of-type(2n) {margin-right: 0px;}
}
.goods_search_list {
li {
margin-right: 13px;margin-bottom: 20px;width: 290px;float: left;
div:nth-of-type(1) {
width: 290px; height: 195px;box-sizing: border-box;overflow: hidden;
img {width: 290px; height: 195px;object:cover;display: block;.transition();}
}
h4 {font-size: 15px;color: #333;line-height: 40px;background: #eee;.transition();text-align: center;box-sizing: border-box;padding:0 5px;}
&:hover {
img {.scale(1.05);.transition();}
h4 {color: #fff;background: @mc1;.transition();}
}
}
li:nth-of-type(4n) {margin-right: 0px;}
}
.search_pagenation {
text-align: center;margin-top: 30px;
a {display: inline-block;width: 80px;height: 35px;font-size: 14px;background: #333;color: #fff;line-height: 35px;margin:0 5px;}
.noothers {display: none;}
}
.no-goods {
padding:50px 0px;
img {display: block;margin:0 auto;}
p {font-size: 18px;text-align: center;line-height: 60px;}
}
.product_banner {
height: 620px;background: url('../images/bg46.jpg') center center no-repeat;box-sizing: border-box;padding-top: 545px;margin-bottom: 40px;
div {
text-align: center;
a {display: inline-block;width: 180px;height: 48px;border-radius: 5px;background: url('../images/bg47.jpg');margin:0 11px; line-height: 48px;font-size: 16px;color: @mc1;position: relative; }
.active {
background: @mc1;color: #fff;
&:after {
display: block; width: 0px; height: 0px; content: ''; border: 8px solid transparent; border-top-color: @mc1;
position: absolute; right: 0; left: 0; bottom: -16px; margin: auto;
}
}
}
}
.product_index_type {
border-bottom:1px solid #e5e5e5;margin-bottom: 45px;padding-bottom:10px;
li {
display: inline-block;margin-right: 10px;
a {display: block;width: 100px;height: 30px;text-align: center;background: #eee;line-height: 30px;}
&:hover {
a {background: @mc1;color: #fff;}
}
}
.active a {background: @mc1;color: #fff;}
}
.product_index {
width: 1200px;
.product_index_main {
li {
width: 287px;float: left;margin-right: 17px; box-sizing:border-box;margin-bottom: 17px;
div:nth-of-type(1) {
width: 287px;height:245px;overflow:hidden;border-top-left-radius: 10px;border-top-right-radius: 10px;
img {display: block;width: 287px;height:245px;object-fit: cover;.transition();box-sizing: border-box; }
}
div:nth-of-type(2) {
padding: 11px 15px 0px;box-sizing: border-box;height: 115px;background: #fff;
h3 {line-height: 40px;color: #000;font-size: 18px;font-weight: bold;line-height: 40px;text-align: center;}
p {
color: #666;line-height: 24px;height: 48px;overflow: hidden;
}
}
&:hover {
img {.scale(1.1);.transition();}
}
}
li:nth-of-type(4n) {margin-right: 0px;float: right;}
}
}
.product_index1 {
width: 927px;
li {
width: 300px;margin-right: 15px;float: left;margin-bottom: 30px;position: relative;
div {
width: 300px;height: 300px;overflow: hidden;border:1px solid #e5e5e5;box-sizing: border-box;
img {display: block;width: 300px;height:300px;box-sizing: border-box;.transition();object-fit: contain;}
}
p:nth-of-type(1) {font-size: 16px;line-height: 45px;background: #eee;text-align: center;}
&:hover {
img {.scale(1.06);.transition();}
p:nth-of-type(1) {color: #fff;background: @mc1;}
}
}
li:nth-of-type(3n) {margin-right: 0px;}
}
//产品详情 多图
.product_info_tab {
padding-top: 20px;padding-left: 20px;
.product_info_tab_box {
.product_info_tab_box_img_big {
width: 500px;height: 500px;
img {height: 500px;width: 500px;display: block;box-sizing: border-box;border:1px solid #eee;}
a {display: none;}
a:nth-of-type(1) {display: block;}
}
.product_info_tab_box_img_small {
height: 100px;width: 500px;
img {height: 96px;width: 96px;box-sizing: border-box;float: left;margin:2px;border:1px solid #eee;}
img:hover {border:1px solid #dd2121;}
}
}
> div:nth-child(2) {
width: 400px;
h3 {font-size: 24px;line-height: 36px;}
img:nth-of-type(1) {}
div:nth-of-type(1) {
text-align: center;margin-top: 100px;
img {width: 240px;height: 240px;border:1px solid #eee;}
p {font-size: 20px;line-height: 38px;color: #545454;text-align: center;}
}
}
}
.title_1200 {
margin: 0 auto 20px; padding: 12px 0px 9px 0px; width: 1200px; height: 25px; border-bottom: 2px solid #dbdbdb;
strong {
max-width: 150px !important; height: 25px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;display: inline-block;
float: left; display: inline-block; padding-bottom: 8px; height: 100%; border-bottom: 2px solid #414141; color: @mc1; text-align: center;font-size: 18px;
}
span {
overflow: hidden; zoom: 1; font-size: 12px;padding-left:20px;display: inline-block;float: right;
height: 25px; text-overflow: ellipsis; white-space: nowrap;color: #666;
background: url('../images/sprite.gif') no-repeat;background-position: 0 -149px;
a {color: #666;}
}
}
.title1 {
padding: 12px 0px 9px 0px; height: 25px; border-bottom: 2px solid #dbdbdb;margin-bottom: 30px;
strong {
max-width: 150px !important; height: 25px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;display: inline-block;
float: left; display: inline-block; padding-bottom: 8px; height: 100%; border-bottom: 2px solid #414141; color: #da020d; text-align: center;
}
span {
overflow: hidden; zoom: 1; font-size: 12px;padding-left:20px;display: inline-block;
height: 25px; text-overflow: ellipsis; white-space: nowrap;
background: url('../Image/sprite.gif') no-repeat;background-position: 0 -150px;
}
}
.title2 {
margin-bottom: 30px; width: 100%; height: 40px; border-bottom: 1px solid #dedede;
.crumbs {
line-height: 40px;height: 40px;width: 400px;padding-left: 20px; box-sizing:border-box;float: left;font-size: 14px;position: relative;
a {font-size: 14px;}
&:before {display: block;content:'';width: 4px;height: 21px;background: @mc1;position: absolute;left: 0;top: 0;bottom: 0;margin:auto; }
a:nth-of-type(2), a:nth-of-type(3), a:nth-of-type(4), a:nth-of-type(5) {
pointer-events: none;
cursor: default;
}
}
}
.title3 {
margin-bottom: 30px; width: 100%; height: 50px; border-bottom: 1px solid #dedede;
.crumbs {
line-height: 50px;height: 50px;width: 400px;padding-left: 20px; box-sizing:border-box;float: left;font-size: 14px;position: relative;
a {font-size: 14px;}
&:before {display: block;content:'';width: 4px;height: 21px;background: @mc1;position: absolute;left: 0;top: 0;bottom: 0;margin:auto; }
}
ul {
float: left;
a {color: @mc1;line-height:50px;display: inline-block;font-size: 16px;margin-right: 40px;}
}
}
.title3 {
height: 50px;line-height: 50px;
color: #666; a {color: #666;}
span {color: #ff9600;}
}
.article_content_1200 {
border:1px solid #ececec;box-sizing:border-box;padding:30px;width: 1200px;margin:0 auto;
min-height: 300px;
img {display: block;max-width:1140px;margin:0 auto;}
iframe {display: block;width: 800px;height: 600px;margin:20px auto;}
}
.article_content_800 {
box-sizing:border-box;padding:30px 0;width: 800px;margin:0 auto;
min-height: 300px;
img {display: block;max-width:800px;margin:0 auto;}
iframe {display: block;width: 800px;height: 600px;margin:20px auto;}
}
.article_content_900 {
box-sizing:border-box;padding:30px 0;width: 900px;margin:0 auto; min-height: 200px;
p {font-size: 16px;}
img {display: block;max-width:900px;margin:0 auto;}
iframe {display: block;width: 900px;height: 600px;margin:20px auto;}
}
.article {
overflow: hidden; margin-bottom: 12px; width: 920px; border: 1px solid #ececec; background-color: #fff;
.article_content {
width: 880px;margin:30px auto;
img {max-width: 850px;display: block;margin:0 auto;}
}
.news_title {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center;font-size: 18px;font-weight: bold;line-height: 60px;
}
.meta {color: #999; text-align: center; line-height: 28px;margin-bottom: 10px;}
}
.article_info {
box-sizing:border-box;margin-bottom: 12px; width: 920px;
.article_title {font-size: 26px;text-align: center;line-height: 32px;margin:0px auto 30px;}
.meta {
color: #999; text-align: center; line-height: 30px;margin-bottom: 20px;border-bottom: 1px solid @mc1;text-align: left;height: 30px;position: relative;
span {
display: block;width: 90px;height: 30px;text-align: center;line-height: 30px;position: absolute;right: 0;background: @mc1;top: 0;color: #fff;
cursor: pointer;
}
}
img {max-width: 860px;display: block;margin:0 auto;}
iframe {
display: block;width: 800px;height: 500px;margin: 30px auto;
}
}
.article_info_bottom {
position: relative;border-top:1px solid @mc1;line-height:30px;margin-top: 20px;
span {
display: block;width: 90px;height: 30px;text-align: center;line-height: 30px;position: absolute;right: 0;background: @mc1;top: 0;color: #fff;
cursor: pointer;
}
}
.hot_goods {
h3 {
line-height: 46px;border-bottom: 2px solid #dfdfdf;padding-left: 30px;box-sizing: border-box;font-size: 24px; background: url('../images/bg40.jpg') left center no-repeat;position: relative;margin:40px auto 20px;
span {display: inline-block;line-height: 46px;color: #c2c2c1;vertical-align: middle;margin-left: 10px;}
&:after {display: block;width: 130px;content:'';background: @mc1;height: 2px;position: absolute;left: 0;bottom: -2px;}
}
ul {
li {
width: 220px;margin-right:13px;box-sizing: border-box;border:1px solid #dfdfdf;float: left;
div {
overflow: hidden;
img {display: block;width: 218px;height: 145px;object-fit: cover;.transition();}
}
p {text-align: center;line-height: 40px; }
&:hover {
img {.scale(1.05);.transition();}
p {color: #fff;background: @mc1;}
}
}
li:nth-of-type(4) {margin-right: 0px;}
}
}
.article_content {
box-sizing:border-box;padding:20px ;
img {max-width: 1160px;display: block;margin:0 auto;}
iframe {
display: block;width: 800px;height: 500px;margin: 30px auto;
}
}
.article_1200 {
box-sizing:border-box;padding:30px 20px;border: 1px solid #ececec;
img {max-width: 1160px;display: block;margin:0 auto;}
iframe {
display: block;width: 800px;height: 500px;margin: 30px auto;
}
}
#allmap1 {width:1200px;height:450px;overflow:hidden;border:3px solid #eee; margin:10px auto;}
.company_box2 {
li {
width: 390px;display: inline-block;margin-bottom: 10px;height: 30px;
p {font-size: 16px;}
}
}
// 招商加盟
.com_dh{
h2{font-size: 36px;text-align: center;margin-bottom:5px;font-weight: 400;}
h4{color: #666666;font-size: 18px;text-align: center;font-weight: 400;}
}
.jiameng_banner{background: url("../images/jiameng_banner.jpg")no-repeat top center;max-width: 1920px;height:631px; }
.jiameng1{
background: #ececec;position: relative;height: 666px;
h2 {font-size: 36px; text-align: center; margin-bottom: 5px; font-weight: 400;}
h4 {color: #666666; font-size: 18px; text-align: center; font-weight: 400;margin-bottom: 40px;}
.jiameng1_nr{ background: #fff;height: 666px;padding: 50px;box-sizing: border-box;margin: -67px auto 0;position: absolute;;z-index: 22;left:0; right:0;
> img{float: right;margin-left: 40px;width: 513px;display: block;}
.jiameng1_txt{
h3 {font-size: 20px; color: #1f2a64; line-height: 60px; font-weight: bold;}
p{line-height: 30px;}
}
}
}
.jiameng2{background: #fff;padding:50px 0;
img{margin-top: 40px;}
}
.jiameng3{
background: url("../images/jiameng3.jpg") no-repeat top center fixed;
height:610px;box-sizing: border-box;padding-top: 60px;text-align: center;color: #fff;
h2{font-size: 36px;font-weight: 400;margin-bottom: 60px;}
p{line-height: 36px;}
}
.jiameng4{background: #fff;padding: 50px 0; }
.fwlc{margin-top: 40px;
overflow: hidden;
height:160px;
}
.fwlc1{
width: 1200px;
margin: 0 auto;
}
.fwlc1_head h3{
font-size: 30px;
color: #b62e27;
text-align: center;
margin-top:50px;
font-weight: normal;
margin-bottom: 50px;
}
.fwlc1_con ul li{
float: left;
height:133px;
width: 130px;
margin-right: 41px;
text-align: center;
position: relative;
}
.fwlc1_con ul li:last-child{
margin-right:0;
}
.fwlc1_con_text h3{
font-weight: normal;
color: #555555;
font-size: 24px;
margin-top: 38px;
}
.fwlc1_con_text p{
font-size: 14px;
color:#555555;
}
.fwlc1_con_text span{
display: block;
width: 30px;
height: 2px;
background: #555555;
margin: 0 auto;
margin-top: 9px;
}
.pic img{
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
.fwlc1_con ul li:hover .pic img{
-webkit-filter: grayscale(0); /* Chrome, Safari, Opera */
filter: grayscale(0);
}
.fwlc1_con ul li:hover h3{
color: #cc3333;
}
.fwlc1_con ul li:hover p{
color: #cc3333;
}
.fwlc1_con ul li:hover span{
background: #cc3333;
}
.fwlc1_con ul li:hover .pic:before{
background: url("../images/bg_progress_pic11.png") no-repeat;
}
.fwlc1_con ul li:hover .pic:after{
background: url("../images/bg_progress_pic12.png") no-repeat;
}
.fwlc1_con li{ float:left; width:25%; text-align:center;}
.fwlc1_con li .pic{ position:relative; display:block; width:136px; margin:0 auto;}
.fwlc1_con li .pic:after{ position:absolute; top:0; right:0; bottom:0; left:0; background:url(../images/bg_progress_pic.png) no-repeat; content:'';}
.fwlc1_con li .pic:before{ position:absolute; top:0; right:0; bottom:0; left:0; background:url(../images/bg_progress_pic1.png) no-repeat; content:'';}
.fwlc1_con li.p0 .pic:after{ -webkit-animation:rollP0 2s linear infinite; -o-animation:rollP0 2s linear infinite; animation:rollP0 2s linear infinite;}
.fwlc1_con li.p0 .pic:before{ -webkit-animation:rollP00 2s linear infinite; -o-animation:rollP00 2s linear infinite; animation:rollP00 2s linear infinite;}
.fwlc1_con li.p1 .pic:after{ -webkit-animation:rollP1 2s linear infinite; -o-animation:rollP1 2s linear infinite; animation:rollP1 2s linear infinite;}
.fwlc1_con li.p1 .pic:before{ -webkit-animation:rollP1 2s linear infinite; -o-animation:rollP11 2s linear infinite; animation:rollP11 2s linear infinite;}
.fwlc1_con li.p2 .pic:after{ -webkit-animation:rollP0 2s linear infinite; -o-animation:rollP0 2s linear infinite; animation:rollP0 2s linear infinite;}
.fwlc1_con li.p2 .pic:before{ -webkit-animation:rollP00 2s linear infinite; -o-animation:rollP00 2s linear infinite; animation:rollP00 2s linear infinite;}
.fwlc1_con li.p3 .pic:after{ -webkit-animation:rollP1 2s linear infinite; -o-animation:rollP1 2s linear infinite; animation:rollP1 2s linear infinite;}
.fwlc1_con li.p3 .pic:before{ -webkit-animation:rollP1 2s linear infinite; -o-animation:rollP11 2s linear infinite; animation:rollP11 2s linear infinite;}
.fwlc1_con li.p4 .pic:after{ -webkit-animation:rollP0 2s linear infinite; -o-animation:rollP0 2s linear infinite; animation:rollP0 2s linear infinite;}
.fwlc1_con li.p4 .pic:before{ -webkit-animation:rollP00 2s linear infinite; -o-animation:rollP00 2s linear infinite; animation:rollP00 2s linear infinite;}
.fwlc1_con li.p5 .pic:after{ -webkit-animation:rollP1 2s linear infinite; -o-animation:rollP1 2s linear infinite; animation:rollP1 2s linear infinite;}
.fwlc1_con li.p5 .pic:before{ -webkit-animation:rollP11 2s linear infinite; -o-animation:rollP11 2s linear infinite; animation:rollP11 2s linear infinite;}
.fwlc1_con li.p6 .pic:after{ -webkit-animation:rollP0 2s linear infinite; -o-animation:rollP0 2s linear infinite; animation:rollP0 2s linear infinite;}
.fwlc1_con li.p6 .pic:before{ -webkit-animation:rollP00 2s linear infinite; -o-animation:rollP00 2s linear infinite; animation:rollP00 2s linear infinite;}
.fwlc1_con li .pic img{ display:block; width:100%;}
.fwlc1_con li h3{ margin:30px 0 15px;font-size:18px; font-weight:normal; color:#555556;}
.fwlc1_con li p{ margin:0;}
@-webkit-keyframes rollP0{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@-o-keyframes rollP0{
0%{-o-transform:rotate(0deg);}
100%{-o-transform:rotate(360deg);}
}
@-moz-keyframes rollP0{
0%{-moz-transform:rotate(0deg);}
100%{-moz-transform:rotate(360deg);}
}
@keyframes rollP0{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
@-webkit-keyframes rollP00{
0%{-webkit-transform:rotate(360deg);}
100%{-webkit-transform:rotate(0deg);}
}
@-o-keyframes rollP00{
0%{-o-transform:rotate(360deg);}
100%{-o-transform:rotate(0deg);}
}
@-moz-keyframes rollP00{
0%{-moz-transform:rotate(360deg);}
100%{-moz-transform:rotate(0deg);}
}
@keyframes rollP00{
0%{transform:rotate(360deg);}
100%{transform:rotate(0deg);}
}
@-webkit-keyframes rollP1{
0%{-webkit-transform:rotate(270deg);}
100%{-webkit-transform:rotate(630deg);}
}
@-o-keyframes rollP1{
0%{-o-transform:rotate(270deg);}
100%{-o-transform:rotate(630deg);}
}
@-moz-keyframes rollP1{
0%{-moz-transform:rotate(270deg);}
100%{-moz-transform:rotate(630deg);}
}
@keyframes rollP1{
0%{transform:rotate(270deg);}
100%{transform:rotate(630deg);}
}
@-webkit-keyframes rollP11{
0%{-webkit-transform:rotate(630deg);}
100%{-webkit-transform:rotate(270deg);}
}
@-o-keyframes rollP11{
0%{-o-transform:rotate(630deg);}
100%{-o-transform:rotate(270deg);}
}
@-moz-keyframes rollP11{
0%{-moz-transform:rotate(630deg);}
100%{-moz-transform:rotate(270deg);}
}
@keyframes rollP11{
0%{transform:rotate(630deg);}
100%{transform:rotate(270deg);}
}
.fwlc1_con_text{
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
}
.jiameng5 {
background: #ececec;padding-bottom:50px;
h2 {text-align: center;font-size: 36px;font-weight: 400;padding: 50px 0;}
form {
.form-tr {
width: 300px;float: left;
p{width: 40px;float: left;line-height: 40px;}
input{background: #fff;height: 40px;border: 1px solid #dcdcdc;width: 227px;text-indent: 1em;font-size: 14px;}
.captcha {
width: 120px;vertical-align: top;
}
img {display: inline-block;height: 40px;}
}
.submit {background:#d53f22;color: #fff;height: 40px;width: 200px;line-height: 40px;margin-top: 20px;text-align: center; display: block;margin:40px auto 0;}
}
}
// 产品详情
.product_info_box {
.product_info_box_right {
width: 927px;float: right;
.product_info_banner {
width: 400px;height:300px;float: left;border:1px solid #eee;
.swiper-slide {
img {display: block;width: 400px;height: 300px;object-fit: contain;}
}
.swiper-pagination {
position: absolute;text-align: right;padding-right: 10px;box-sizing: border-box;
&,span {font-size: 16px;}
}
.info-swiper-prev {
position: absolute;left: 5px;top:0;bottom: 0;margin:auto;cursor: pointer;z-index: 2;width: 30px;height: 30px; opacity: 0.5;
&:hover {opacity: 1;}
}
.info-swiper-next {
position: absolute;right:5px;top:0;bottom: 0;margin:auto;cursor: pointer;z-index: 2;width: 30px;height: 30px;transform: rotate(180deg); opacity: 0.5;
&:hover {opacity: 1;}
}
}
.product_info_box_right_info {
width: 500px;float: right;
h1 {font-size: 20px;line-height: 1;padding-bottom: 15px;font-weight: bold;border-bottom: 1px solid #dedede;}
p:nth-of-type(1) {line-height: 24px;overflow: hidden;color:#666;border-bottom: 1px solid #dedede; padding:20px 0px; }
p:nth-of-type(2) {
line-height: 24px;padding:10px 0 5px 60px;position: relative;background: url('../images/bg42.png') left center no-repeat;
a {
display: block;width: 115px;height: 40px;text-align: center;text-align: center;line-height: 40px;background: @mc1;color: #fff;font-size: 18px;
position: absolute;right: 0;top:0;bottom: 0;margin:auto;border-radius: 4px;
}
}
a {
color: #fff; background: @mc1; width: 120px; height: 36px; line-height: 36px;margin-top: 30px;
text-align: center; display: inline-block; border-radius: 5px; margin-right: 20px;
}
}
}
}
.product_info_content_box {
.product_info_title {
line-height: 50px;margin:20px auto 0;background: #eee;
span {font-size: 22px;display: block;line-height: 50px;background:@mc1;width: 160px;text-align: center;color:#fff; }
}
.param_more {
width: 900px;margin:20px auto;
p {
width: 450px;float: left;background: #eee;margin-bottom: 2px;height: 40px;
span:nth-of-type(1) {width: 150px;box-sizing: border-box;border-right: 2px solid #fff;font-size: 16px;text-align: center;line-height: 40px;float: left;}
span:nth-of-type(2) {width: 300px;box-sizing: border-box;float: left;text-align: center;line-height: 40px;border-right: 2px solid #fff;}
}
}
.newsPage {width: 925px;margin:0 auto;border-top:1px solid #eaeaea;padding-top: 10px;}
.goods_info_bottom {
position: relative;border-top:1px solid @mc1;line-height:30px;margin-top: 20px;margin-bottom: 30px;
span {
display: block;width: 90px;height: 30px;text-align: center;line-height: 30px;position: absolute;right: 0;background: @mc1;top: 0;color: #fff;
cursor: pointer;
}
}
}
.info_title {
clear: both;margin: 20px auto; width: 1200px; height: 40px;
border-top:1px solid #e0dede; border-bottom:1px solid #e0dede;
span {
display: inline-block; width: 90px; height: 100%; text-align: center; color: #333; line-height: 40px;
}
}
.newsPage {
.page-a {
line-height: 30px;text-align: left;color: #fff;position: relative;z-index: 2;margin-bottom: 5px;
a {display: inline-block;margin-left: 10px;}
&:before {width: 60px;height: 30px;background: #a2a2a2;display: block;position: absolute;left: -4px;top: 0;z-index: -1;content: ''; }
}
}
//新闻index
.news_index {margin:20px 20px 0;
li {box-sizing: border-box;padding:20px;background: #fff;margin-bottom: 20px;overflow: hidden;border-bottom:1px dashed #eee;
img {display: block;margin-right: 20px;object-fit: cover;width: 260px;height: 165px;border:1px solid #eee;}
h3 {font-size: 18px; line-height: 45px; color: #333;}
p {font-size: 14px; line-height: 30px; color: #666;height: 60px;overflow: hidden; margin-bottom: 20px;}
time {color: #666;}
&:hover {
h3 {color: @mc1;}
}
}
}
//新闻index1
.article_type {
margin-bottom: 30px;
li {
display: inline-block;
a {
display: block;width: 150px;height: 40px;text-align: center;line-height: 40px;background: #eee;margin-right: 8px;
&:hover {
background: @mc1;color: #fff;
}
}
}
}
.news_index1 {
li {
border:1px solid #ededed;box-sizing: border-box;padding:30px;margin-bottom: 20px;height: 350px;
div:nth-of-type(1) {
width: 200px;height: 290px;overflow: hidden;box-sizing:border-box;margin-right: 45px;float: left;
img {width: 200px;height: 290px;.transition();object-fit: cover;display: block;}
}
div:nth-of-type(2) {
float: left;padding-top:30px;width: 800px;
h3 {font-size: 24px;}
p:nth-of-type(1) {font-size: 16px; line-height: 60px;}
p:nth-of-type(2) {background: #f5f9fd;color:#666;line-height: 24px;box-sizing: border-box;padding-top:20px; }
}
&:hover {
img {.scale(1.05);.transition();}
h3 {color: @mc1;}
}
}
}
//新闻index2
.news_index2 {
li {
width: 385px;height: 500px;background: #fff;margin-right: 22px;padding:10px;box-sizing: border-box;float: left;margin-bottom: 20px;background: #eee;
img {display: block;width: 365px;height: 250px;object-fit: cover;margin-bottom: 25px;}
h3 {padding-left: 14px;font-size: 28px;line-height: ;color: #000000;font-weight: bold;line-height: 45px;}
p {padding-left: 14px;color: #666;line-height: 24px;height: 72px;overflow: hidden;margin-bottom: 20px;}
a {
display: inline-block;width: 135px;height: 35px;background: #2669ab;color: #fff;border-radius: 18px;
font-size: 18px;margin:0 14px;text-align: center;line-height:35px;
}
a:nth-of-type(2) {background: #eb6100;}
}
li:nth-of-type(3) {margin-right: 0px;}
}
//新闻index3
.news_index3 {
li {
margin-bottom: 20px;
h3 {font-size: 18px; line-height: 45px; color: #333;text-indent: 40px;background: url('../images/bg13.png') left 6px no-repeat;}
div {
background: #f5f5f5;padding:20px;
p:nth-of-type(1) {text-indent: 40px;background: url('../images/bg13.png') left -81px no-repeat;line-height: 45px;}
p:nth-of-type(2) {
color: #666;line-height: 30px;
}
}
}
}
//新闻index4
.news_index4 {
li {
border: 1px solid #dedede;width: 390px;margin-right: 15px;box-sizing:border-box;float: left;margin-bottom: 20px;
height: 210px;padding-top:30px;
div:nth-of-type(1) {
width: 95px;box-sizing:border-box;height: 110px;border-right:1px solid #dedede;margin-right: 15px;float: left;
time:nth-of-type(1) {font-size: 40px;line-height: 70px;text-align: center;display: block;text-align: center;}
time:nth-of-type(2) {font-size: 14px;text-align: center;display: block;}
}
div:nth-of-type(2) {
width: 260px;float: left;height: 110px;
h3 {font-size: 18px;line-height: 50px;}
p {font-size: 14px;line-height: 24px;height: 48px;overflow:hidden;color: #666;}
}
.news_index_more {
border-top: 1px solid #dedede; padding:0 15px; color: #666;line-height: 40px;height: 40px;margin-top: 30px;
span {
display: inline-block;line-height: 40px;color: #000;float: right;margin-right: 10px;.transition();
}
}
&:hover {
h3 {color: @mc1;}
.news_index_more {
color: @mc1;
span {margin-right: 0px;color: @mc1;.transition();}
}
}
}
li:nth-of-type(3n) {margin-right: 0px;float: right;}
}
//新闻index5
.news_index5 {
li {
width: 280px;box-sizing:border-box;border:1px solid #ededed;float: left;margin-right: 26px;margin-bottom: 15px;
.img {
width: 278px;height: 200px;overflow: hidden;box-sizing:border-box;
img {width: 278px;display: block;height: 200px;.transition();object-fit: cover;}
}
h3 {line-height: 36px;box-sizing: border-box;padding:0px 10px;font-size: 16px;background: #eee;text-align: center;}
}
li:nth-of-type(4n) {margin-right: 0px;float: right;}
}
//新闻index6
.news_index6 {
li {
margin-bottom: 15px;
h3 {font-size: 18px; line-height: 45px; color: #333;text-indent: 40px;background: url('../Images/bg13.png') left 6px no-repeat;}
div {
background: #f5f5f5;padding:20px;
p:nth-of-type(1) {text-indent: 40px;background: url('../Images/bg13.png') left -81px no-repeat;line-height: 45px;}
p:nth-of-type(2) {
color: #666;line-height: 30px;
}
}
}
}
.news_index7 {
li {
display: block;width: 370px;height: 415px;box-sizing:border-box;
float: left;background:#f5f5f5;position:relative;margin-right: 45px;
img {
display: block;width: 370px;height: 240px;object-fit: cover;margin-bottom: 15px;
}
div:nth-of-type(1) {
width: 350px;margin:0 auto;
h3 {font-size: 16px;line-height: 55px;border-bottom: 1px solid #ccc;margin-bottom: 15px;}
p {color: #666;height: 48px;line-height: 24px;overflow:hidden;}
}
div:nth-of-type(2) {
background:#006ace;width: 75px;height: 75px;position:absolute;left: 0px;top: 0px;box-sizing:border-box;
padding-top:14px;
time:nth-of-type(1) {color: #fff;font-size: 22px;display: block;text-align: center;}
time:nth-of-type(2) {color: #fff;font-size: 14px;display: block;text-align: center;}
}
&:hover {
box-shadow:0px 0px 4px rgba(0,0,0,0.4);.transition();
div:nth-of-type(1) {
h3 {border-color: #006ace;}
}
}
}
li:nth-of-type(3) {float: right;margin-right: 0px;}
}
.xwlb {
.xwlb_title {
width: 927px;background: #f5f5f5;box-sizing: border-box;height: 60px;border-left: 5px solid @mc1;
font-size: 24px;padding-left: 20px;margin-bottom: 20px;line-height: 60px;
}
ul {
li {
width: 927px;border:2px solid #e5e5e5;padding:13px 30px 0px 13px;margin-bottom: 15px;height: 200px;box-sizing: border-box;.transition();
img {display: block;width:250px;height: 167px;object-fit: cover;float: left;}
div {
width: 610px;float: right;
h3 {font-size: 18px;line-height: 34px; .transition();}
p:nth-of-type(1) {font-size: 12px;line-height: 20px;color: #666;margin-bottom: 16px;}
p:nth-of-type(2) {line-height: 24px;color: #666;height: 48px;overflow: hidden;}
p:nth-of-type(3) {
text-align: right;margin-top: 20px;
span {display: inline-block;width: 90px;height: 30px;text-align: center;line-height: 30px;background: #b6b6b6;color: #fff;.transition();}
}
}
&:hover {
border-color: @mc1;.transition();
h3 {color: @mc1;.transition();}
span {background: @mc1 !important;.transition();}
}
}
}
}
.cjwt {
.cjwt_title {
width: 927px;background: #f5f5f5;box-sizing: border-box;height: 60px;border-left: 5px solid @mc1;
font-size: 24px;padding-left: 20px;margin-bottom: 20px;line-height: 60px;
}
ul {
li {
margin-bottom: 15px;
h3 {font-size: 18px; line-height: 45px; color: #333;text-indent: 40px;background: url('../images/bg13.png') left 6px no-repeat;}
div {
background: #f5f5f5;padding:10px 20px;
p:nth-of-type(1) {text-indent: 40px;background: url('../images/bg13.png') left -81px no-repeat;line-height: 45px;}
p:nth-of-type(2) {
color: #666;line-height: 30px;
}
}
&:hover {
h3 {color: @mc1;}
}
}
}
}
.ypsg {
ul {
li {
width: 300px;height: 275px;float: left;margin-right: 9px;margin-bottom: 9px;
div {
width: 300px;height: 225px;box-sizing: border-box;border:1px solid #e5e5e5;padding:10px;
img {display: block;width: 278px;height:201px;object-fit: cover;}
}
p {line-height: 50px;background: #f0f0f0;text-align: center;.transition();}
&:hover {
p {background: @mc1;color: #fff;.transition();}
}
}
li:nth-of-type(3n) {margin-right: 0px;}
}
}
.hzkh {
.hzkh_title {
width: 927px;background: #f5f5f5;box-sizing: border-box;height: 60px;border-left: 5px solid @mc1;
font-size: 24px;padding-left: 20px;margin-bottom: 20px;line-height: 60px;
}
ul {
li {
width: 300px;height: 275px;float: left;margin-right: 9px;margin-bottom: 9px;
div {
width: 300px;height: 225px;box-sizing: border-box;border:1px solid #e5e5e5;padding:10px;
img {display: block;width: 278px;height:201px;object-fit: contain;}
}
h3 {line-height: 50px;background: #f0f0f0;text-align: center;.transition();}
&:hover {
p {background: @mc1;color: #fff;.transition();}
}
}
li:nth-of-type(3n) {margin-right: 0px;}
}
}
.message {
padding: 50px 0px 30px 30px; background: #eee; overflow: hidden;
h3 {font-size: 30px;text-align: center;font-weight: bold;margin-bottom: 40px;}
.form-tr {
width: 550px;margin-right: 30px;float: left;margin-bottom: 20px;
textarea {height: 80px;width: 550px;font-size: 18px;line-height: 38px;text-indent: 1em;border:1px solid #dfdfdf;display: inline-block;margin-right: 14px;margin-bottom: 20px;font-size: 14px;}
input {width: 550px;line-height: 38px;text-indent: 1em;margin-right: 14px;border:1px solid #dfdfdf;font-size: 14px; }
img {height: 38px;vertical-align: middle;}
.captcha {width: 350px;}
.error {font-size: 14px;color: #ce2029; }
}
.form-submit {
.submit {
display: block;width: 180px;height: 40px;border-radius:5px;font-size: 16px;line-height: 40px;text-align: center;
background:#237ed2;color: #fff;margin:20px auto;
}
}
}
.message_index1 {
height: 800px; background: url('../images/message2_bg.jpg') center top no-repeat;box-sizing:border-box;padding-top:170px;
h2 {font-size: 55px;color: #fff;text-align: center;}
h3 {font-size: 24px;color: #fff;text-align: center;margin-bottom: 190px;line-height: 2;}
.contact_message {
padding-left:90px;position:relative;
p:nth-of-type(1) {font-size: 30px;color: #666;}
p:nth-of-type(2) {
font-size: 14px;color: #999;margin-bottom: 20px;line-height: 40px;
span {color: #c10708;}
}
.form-tr {
width: 340px;height: 40px;display: inline-block;margin-bottom: 20px;margin-bottom: 20px;
}
input {width: 300px;height: 40px;text-indent: 1em;font-size: 14px;background: #f5f5f5;}
img {position: absolute; left: 635px; top: 166px; height: 30px; }
.form-submit {
display: inline-block;
a {background: @mc1;color: #fff;width: 300px;height: 40px;display: block;text-align: center;font-size: 16px;line-height: 40px;}
}
}
}
.service_message {
text-align: center;padding:30px 0;
h3 {font-size: 36px;color: #333;}
h4 {font-size: 16px;color: #999;line-height: 2;margin-bottom: 20px;}
li {display: inline-block;width: 200px;margin:0px 30px;}
}
.pagination {
text-align: center;margin-bottom:20px;padding-top: 20px;line-height: 30px;
.btn {display: inline-block;height: 30px;padding:0px 5px;line-height: 30px;text-align: center;border:1px solid #999;vertical-align: top;}
.btn-inverse {background: @mc1;color: #fff;vertical-align: top;}
select {height: 30px;vertical-align: top;border:1px solid #999;}
}
.goods_list {margin-top: 30px;}
//sidebar
.sidebar1_box {width: 240px;float: left;}
.sidebar_box_01 {
width: 240px;margin-bottom: 25px;
h3 {background: @mc1;color: #fff;line-height: 80px;text-align: center;font-size: 24px;margin-bottom: 2px;}
a {
display: block;width:240px;box-sizing: border-box;padding:0px 20px;line-height: 55px;margin-bottom: 2px;background: #ececeb;.transition();font-size: 16px;
span {color: #fff;float: right;font-size: 24px;line-height: 55px;font-weight: bold;}
&:hover {background: @mc1;color: #fff;.transition(); }
}
.active {background: @mc1;color: #fff;}
}
.sidebar_info {
width: 240px;float: left;border:1px solid #ececeb;box-sizing: border-box;padding:10px;margin-top: 20px;
img {display: block;width: 218px;margin-bottom: 10px;}
p {
font-size: 14px;line-height:36px;
span {display: block;font-size: 22px;line-height: 36px;color: @mc1;font-weight: bold;}
}
}
.sidebar_box_03,.sidebar_product {
h3 {background: @mc1;color: #fff;line-height: 80px;text-align: center;font-size: 24px;margin-bottom: 2px;}
li {
> a {
display: block;width:240px;box-sizing: border-box;padding:0px 20px;line-height: 55px;margin-bottom: 2px;background: #ececeb;.transition();font-size: 16px;position: relative;
span {color: #fff;float: right;font-size: 24px;line-height: 55px;font-weight: bold;}
p {width: 180px;line-height: 55px;font-size: 16px;}
&:after {width: 12px;height: 2px;content: '';display: block;background: #fff; right: 24px;top:0;bottom: 0;margin:auto;position: absolute;}
&:before {width: 2px;height: 12px;content: '';display: block;background: #fff; right: 29px;top:0;bottom: 0;margin:auto;position: absolute;}
&:hover {
background: @mc1;color: #fff;.transition();
p {color: #fff;}
&:before {opacity: 0;}
}
}
.erji {
overflow: hidden;display: none;
a {
display: block;width: 240px;height: 54px;border-bottom:1px solid #ececeb;border-left: 1px solid #ececeb;border-right: 1px solid #ececeb; box-sizing: border-box;padding:0px 25px 0px 40px;color: #666; line-height: 54px;
span {display: inline-block;float: right;color: #666;line-height: 54px;font-size: 20px; }
&:hover {
color: @mc1;
span {color: @mc1;}
}
}
}
}
}
.article_930 {
float: right;width: 927px;
}
.product_sidebar {
width: 255px;border:1px solid #ecedef;padding-bottom:40px;float: left;margin-bottom: 20px;box-sizing:border-box;
.product_sidebar_title {
height: 105px;padding-top:20px;background: #017045;box-sizing:border-box;
p:nth-of-type(1) {font-size: 28px;color: #fff;text-align: center;}
p:nth-of-type(2) {font-size: 16px;color: #fff;text-align: center;text-transform: uppercase;font-family: 'Time New Roman';line-height: 30px;}
}
ul {
margin-bottom: 30px;
li {width: 233px;height: 40px;margin:15px auto 0;
a {display: block;color: #333;padding-left: 30px;line-height: 40px; background: #eeeef0;
&:hover {background: @mc1;color: #fff;}
}
}
}
.sidebar_info {
.sidebar_info_title {height: 60px;line-height: 60px;background: #017045;font-size: 24px;text-align: center;color: #fff; }
img {margin:0 auto;display: block;}
p {
width: 220px;margin: 15px auto 0; font-size: 14px;line-height:36px;
span {display: block;line-height: 36px;color: @mc1;font-weight: bold;}
}
}
}
.news_sidebar {
width: 240px;margin-bottom: 25px;
h3 {background: @mc1;color: #fff;line-height: 60px;text-align: center;font-size: 22px;margin-bottom: 2px;}
li {
box-sizing:border-box;
a {
display: block;width:240px;box-sizing: border-box;padding:0px 20px;line-height: 45px;margin-bottom: 2px;
background: #eee;.transition();font-size: 14px;
span {color: #fff;float: right;font-size: 24px;line-height: 55px;font-weight: bold;}
&:hover {background: @mc1;color: #fff;.transition(); }
}
}
}
.content { margin-bottom: 30px;overflow: hidden;}
.custom_article {
img {max-width: 1200px;}
h1 {font-size: 20px;font-weight: bold;text-align: center;}
.meta {display: block;text-align: center;margin-bottom: 20px;}
}
//人才招聘
.jobs_list {
width: 31%; background: #eee; float: left; box-sizing: border-box; height: 200px; padding: 20px; margin: 1%; cursor: pointer;box-sizing: border-box;margin: 20px 1%;
h4 {
font-weight: 400;font-size: 18px;margin-bottom: 15px;
span {font-size: 34px;margin-left: 10px;}
}
p {line-height: 24px;}
.job-btn {
display: block;width: 80px;height: 30px;text-align: center;line-height: 30px;color: #fff;
background:@mc1;margin-top: 10px;
}
}
.jobs_list:hover {
h4 {font-weight: 600;}
}
//招聘详情?
.jobs {
table {
border:1px solid #333;width: 100%;
tr:nth-of-type(1) {
background: #000;
td {
text-align:center;
strong {color: #fff;}
}
}
td {text-align: center;width:25%;}
}
tr {height: 40px;}
.well {
min-height: 300px;
> p:nth-child(1) {font-size: 18px;color: #202020;margin-top: 20px;margin-bottom: 20px;background: #eee;line-height:30px;text-indent: 1em;}
> a:last-child {margin-top: 60px;font-size: 18px;color: #fff;display: block;width: 150px;height: 50px;text-align: center;background: @mc1;line-height:50px;}
> a:last-child:hover {font-weight: bold;}
}
}
//招聘留言页面
#form2{
.order {
width: 1000px;margin:0 auto;border:1px dashed #ccc;
tr {
td:nth-of-type(1) {width: 300px;}
td:nth-of-type(2) {
width: 700px;
}
}
}
}
.clearfix,.clear {clear: both;}
// 荣誉资质列表?
.honor_index_box {
ul {
li {
width: 220px;height: 340px;box-sizing:border-box;border:1px solid #dcdcdc;float: left;margin-right: 25px;margin-bottom: 30px;
.img {
width: 218px;height: 298px;overflow: hidden;box-sizing:border-box;
img {width: 218px;display: block;height: 298px;.transition();object-fit: contain;.transition();}
}
h3 {line-height: 40px;box-sizing: border-box;padding:0px 10px;font-size: 16px;text-align: center;}
&:hover {
img {.scale(1.05);.transition();}
}
}
li:nth-of-type(5n) {margin-right: 0px;float: right;}
}
}
// 分页
.de-page-mian {
overflow: hidden; text-align: center; font-size:0; margin:20px 0;
.page-inner{
display: inline-block;
overflow: hidden;
a{
display:block; float: left; min-width:26px; padding:0 5px; height: 36px; border:1px solid #dddddd; background: #fff; text-align: center; line-height: 36px;
font-size:14px; color:#333; margin-right:-1px; overflow: hidden;
&.active,&:hover{
color:#fff; border-color:@mc1; background: @mc1;
}
&.prev {
margin-right:10px;
background: #fff url(../images/prev.jpg) no-repeat center;
&.on {
background: #fff url(../images/prev-hover.jpg) no-repeat center;
}
&:hover{
background-color: #fff; border-color:#dddddd;
}
}
&.next{
margin-left:10px; margin-right: 15px; background: #fff url(../images/next.jpg) no-repeat center;
&.on{
background: #fff url(../images/next-hover.jpg) no-repeat center;
}
&:hover{
background-color: #fff; border-color:#dddddd;
}
}
&.page-btn {
font-size:12px; margin-right: 0; width:63px; margin-left:10px;
}
}
span{
display: block;
font-size:12px;
color:#333;
float: left;
line-height: 38px;
}
input{
display: block;
float: left;
height: 36px;
width:36px;
border:1px solid #dddddd;
text-align: center;
line-height: 36px;
font-size:14px;
color:#333;
margin:0 5px;
}
}
}
.news_info_content {
width: 950px;
.page-header {
h1 {font-size: 25px;color: #000;margin-bottom: 10px;}
p {text-align: center;}
margin-bottom: 25px;
}
.list-con {
min-height: 450px;
}
}
.news_info {min-height: 450px;}
.product_info_main {
min-height:450px;margin-top:20px;width: 950px;
> div:nth-of-type(1) {
height: 400px;
.product_info_main_img {
width:500px;height:400px;position:relative;overflow:hidden;margin:0 auto;border:1px solid #ccc;
img {position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;}
}
> div:nth-of-type(2) {
width:430px;height: 400px;
h1 {display: block;margin: 10px auto;text-align: left;font-size: 22px;border-bottom: dashed 1px #ccc;padding-bottom: 15px;}
p {margin-top: 20px;font-size: 14px;line-height: 36px;margin-bottom: 30px;}
a {display: block;background: @mc2;width: 150px;line-height: 50px;text-align: center;color: #fff;}
}
}
> div:nth-child(2) {
height: 40px;background: #eee;margin-bottom: 20px;margin-top: 20px;
h4 {
width: 20%; background: @mc2; color: #fff; font-size: 16px; text-align: center; line-height: 40px;
}
}
.product_info_content {min-height:200px;width: 950px;margin: 0 auto;}
}
.product_info_main2 {
.product_info_main2_top {
.product_info_main_img {
margin:20px auto;
// width: 500px;height: 500px;border:1px solid #ccc;position:relative;margin:0 auto;
// img {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin:auto;max-width: 100%;max-height: 100%;margin:auto;}
img {display: block;max-height: 500px;margin:0 auto;}
}
h1 {text-align: center;font-size: 20px;line-height: 40px;}
}
.product_info_content_title {
background: #ccc;margin-top: 30px;
h4 {display: inline-block;line-height: 40px;background: #999;padding:0px 20px;color: #fff;}
}
.product_info_content {
min-height: 200px;padding:20px 0;
}
}
.product_info_main1 {
min-height:450px;width: 950px;
> div:nth-of-type(1) {
.product_info_main_img {
width:500px;height:400px;position:relative;overflow:hidden;margin:0 auto;border:1px solid #ccc;background:#fff;
img {position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;}
}
> div:nth-of-type(2) {
width:390px;height: 400px;
h1 {display: block;margin: 10px auto;text-align: left;font-size: 22px;border-bottom: dashed 1px #ccc;line-height: 80px;margin-bottom: 30px;}
table {
width: 300px;
tr {
td:nth-of-type(1) {width: 80px;height: 40px;line-height: 40px;}
td:nth-of-type(2) {width: 220px;height: 40px;line-height: 40px;}
}
}
}
}
> div:nth-child(2) {
height: 40px;background: #eee;margin:30px auto;
h4 {
width: 20%; background: @mc1; color: #fff; font-size: 16px; text-align: center; line-height: 40px;
}
}
.product_info_content {min-height:200px;width: 1000px;margin: 0 auto;}
}
// 右侧悬浮侧边
.fix_side {
width: 50px; position: fixed; top: 50%; right: 0; margin-top: -100px;z-index: 18;
li {
display: block;width: 50px;height: 50px;margin-bottom: 5px;position:relative;
a {display: block;width: 50px;height: 50px;}
}
.back_to_top {
cursor: pointer; background:#666666 url('../images/side04.png') center center no-repeat;
}
.qiao {
cursor: pointer; background:#666666 url('../images/side05.png') center center no-repeat;
}
.sidemessage {
background:#666666 url('../images/side02.png') center center no-repeat;
span {position: absolute;height: 40px;line-height: 40px;display: block;background: @mc1;color: #fff;right:-240px;width: 240px;top: 5px;text-align: center;.transition();}
&:hover {
span {left: -240px;.transition();}
}
}
.phone {
background:#666666 url('../images/side01.png') center center no-repeat;
span {position: absolute;height: 40px;line-height: 40px;display: block;background: @mc1;color: #fff;right:-115px;width: 115px;top: 5px;text-align: center;.transition();}
&:hover {
span {left: -115px;.transition();}
}
}
.wx {
background:#666666 url('../images/side03.png') center center no-repeat;
img {position: absolute;right: -115px;top: -30px;border:1px solid #ccc;width: 113px;height: 113px;.transition();}
&:hover {
img {left: -115px;.transition();}
}
}
}
.move_self:hover {
-ms-transform:translateY(-10px); -webkit-transform:translateY(-10px); -o-transform:translateY(-10px); -moz-transform:translateY(-10px);
transition: all 0.7s; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s;
}
//悬浮 图片向上移动
.move_y:hover img {
-ms-transform:translateY(-10px); -webkit-transform:translateY(-10px); -o-transform:translateY(-10px); -moz-transform:translateY(-10px);
transition: all 0.7s; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s;
}
//悬浮 图片放大
.move_big:hover img {
transform:scale(1.05); -ms-transform:scale(1.05); -webkit-transform:scale(1.05); -o-transform:scale(1.05); -moz-transform:scale(1.05);
transition: all 0.7s; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s;
}
.move_big_self:hover {
transform:scale(1.05); -ms-transform:scale(1.05); -webkit-transform:scale(1.05); -o-transform:scale(1.05); -moz-transform:scale(1.05);
transition: all 0.7s; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s;
}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.move_circle:hover img {
-webkit-transform: rotate(360deg);
animation: rotation 15s linear infinite;
-moz-animation: rotation 15s linear infinite;
-webkit-animation: rotation 15s linear infinite;
-o-animation: rotation 15s linear infinite;
}
//按钮效果
.btn-0 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-0:before { background: @qt1;content: '';.transition(all .6s);position: absolute;top: 0;left: 0;width: 0;height: 100%;z-index: -1;}
.btn-0:hover:before {width: 100%;}
.btn-1 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-1:before {.transition(all .6s);content: '';width: 0;height: 0;.rotate(360deg);border-style: solid;border-width: 0 0 0 0;border-color:@mc1 transparent transparent transparent;position: absolute;top: 0;left: 0;z-index: -1;}
.btn-1:hover:before {border-width: 900px 900px 0 0;}
.btn-2 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-2:before {content: '';position: absolute;bottom: 0;left: 0; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;border-color: transparent transparent transparent @mc1;.rotate(360deg); .transition(all .6s);z-index: -1;}
.btn-2:after {border-style: solid;content: '';width: 0;height: 0;border-width: 0 0 0 0;border-color: transparent @mc1 transparent transparent;position: absolute;right: 0;top: 0;.rotate(360deg); .transition(all .6s);z-index: -1;}
.btn-2:hover:before {border-width: 165px 0 0 165px;}
.btn-2:hover:after {border-width: 0 165px 165px 0;}
.btn-3 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-3:before {content: '';position: absolute;bottom: 0;left: 0; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;border-color: transparent transparent transparent @qt6;.rotate(360deg); .transition(all .6s);z-index: -1;}
.btn-3:after {border-style: solid;content: '';width: 0;height: 0;border-width: 0 0 0 0;border-color: transparent transparent @qt6 transparent;position: absolute;right: 0;bottom: 0;.rotate(360deg); .transition(all .6s);z-index: -1;}
.btn-3:hover:before {border-width: 222px 0 0 222px;}
.btn-3:hover:after {border-width: 0 0 222px 222px;}
.btn-4 {position: relative;overflow: hidden;.transition(all .2s);display: block;z-index: 1;}
.btn-4:before, .btn-4:after {position: absolute;top: 50%;content: '';width: 20px;height: 20px;background: #3655ca;.border-radius(50%);z-index: -1;}
.btn-4:before {left: -20px;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
}
.btn-4:after {right: -20px;-webkit-transform: translate(50%, -50%);-moz-transform: translate(50%, -50%);-mz-transform: translate(50%, -50%);-o-transform: translate(50%, -50%);transform: translate(50%, -50%);}
.btn-4:hover:before {-webkit-animation: criss-cross-left 0.8s both;-moz-animation: criss-cross-left 0.8s both;-o-animation: criss-cross-left 0.8s both;-ms-animation: criss-cross-left 0.8s both;animation: criss-cross-left 0.8s both;}
.btn-4:hover:after {-webkit-animation: criss-cross-right 0.8s both;-moz-animation: criss-cross-right 0.8s both;-ms-animation: criss-cross-right 0.8s both;-o-animation: criss-cross-right 0.8s both;animation: criss-cross-right 0.8s both;}
@-webkit-keyframes criss-cross-left {
0% {left: -20px;}
50% {left: 50%;width: 20px;height: 20px;}
100% {left: 50%;width: 375px;height: 375px;}
}
@keyframes criss-cross-left {
0% {left: -20px;}
50% {left: 50%;width: 20px;height: 20px;}
100% {left: 50%;width: 375px;height: 375px;}
}
@-webkit-keyframes criss-cross-right {
0% {right: -20px;}
50% {right: 50%;width: 20px;height: 20px;}
100% {right: 50%;width: 375px;height: 375px;}
}
@keyframes criss-cross-right {
0% {right: -20px;}
50% {right: 50%;width: 20px;height: 20px;}
100% {right: 50%;width: 375px;height: 375px;}
}
.btn-5 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-5:after {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;top: 0;right: 0;border-color: transparent #3f444e transparent transparent;}
.btn-5:before {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;bottom: 0;left: 0;border-color: transparent transparent transparent #3f444e;}
.btn-5:hover:before, .btn-5:hover:after {border-width:80px 433px;}
.btn-6 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-6:before, .btn-6:after {content: '';position: absolute;top: 0;left: 0;width: 250px;height: 0;background:@qt6;.transition(all .6s);z-index: -1;}
.btn-6:after {top: auto;bottom: 0;}
.btn-6:hover:before, .btn-6:hover:after {height: 40px;}
.btn-7{position:relative;transform-style:preserve-3d;transition:0.4s;}
.btn-7:hover{transform:translateZ(20px) rotateX(360deg) scale(1.1);}
.btn-8{position:relative;transform-style:preserve-3d;transition:0.4s;}
.btn-8:hover{transform:rotateY(360deg) scale(1.1);}
.btn-9{position: relative;
&::after{position: absolute; content: "";width: 100%;height: 100%;left: 0;top: 0;background: @qt6;transition: transform .4s cubic-bezier(.4,0,.2,1);transform-origin:right bottom;transform: scaleX(0);z-index: -1;}
}
.btn-9:hover::after{transform: scaleX(1); transform-origin: left bottom;}
//btn-span-1标签
.btn-span-1 {position: relative;overflow: hidden;.transition(all .6s);display: block;width: 100%;height: 100%;z-index: 1;}
.btn-span-1:before {content: '';position: absolute;bottom: 0;left: 0; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;border-color: transparent transparent transparent @qt6;.rotate(360deg); .transition(all .6s);z-index: -1;}
.btn-span-1:after {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;top: 0;right: 0;border-color: transparent @qt6 transparent transparent;}
.btn-span-1 span:before {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;bottom: 0;right: 0;border-color: transparent transparent @qt6 transparent;}
.btn-span-1 span:after {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;top: 0;left: 0;border-color: @qt6 transparent transparent transparent;}
.btn-span-1:hover:before {border-width: 165px 0 0 165px;}
.btn-span-1:hover:after {border-width: 0 165px 165px 0;}
.btn-span-1:hover span:before {border-width: 0 0 165px 165px;}
.btn-span-1:hover span:after {border-width: 165px 165px 0 0;}
//btn-span-2标签
.btn-span-2{position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-span-2:after {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;top: 0;right: 0;border-color: transparent @qt6 transparent transparent;}
.btn-span-2:before {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;bottom: 0;left: 0;border-color: transparent transparent transparent @qt6;}
.btn-span-2:before, .btn-span-2:after {border-color:@qt6;}
.btn-span-2span:after {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;top: 0;left: 0;border-color: @qt6 transparent transparent transparent;}
.btn-span-2span:before {content: '';position: absolute; width: 0;height: 0; border-style: solid;border-width: 0 0 0 0;.rotate(360deg); .transition(all .6s);z-index: -1;right: 0;bottom: 0;border-color: transparent transparent @qt6 transparent;}
.btn-span-2span:before, .btn-span-2span:after {border-color: @qt6;}
.btn-span-2:hover:before {border-width: 20px 62.5px;}
.btn-span-2:hover:after {border-width: 20px 62.5px;}
.btn-span-2:hover span:before {border-width: 20px 62.5px;}
.btn-span-2:hover span:after {border-width: 20px 62.5px;}
//btn-span-3标签
.btn-span-3 {position: relative;overflow: hidden;.transition(all .6s);display: block;;z-index: 1;}
.btn-span-3 span {position: absolute;display: block;width: 0;height: 0;.border-radius(50%);background: @qt6;z-index: -1; -webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-webkit-transition:width 0.4s, height 0.4s;-moz-transition:width 0.4s, height 0.4s;-ms-transition:width 0.4s, height 0.4s;-o-transition:width 0.4s, height 0.4s;transition:width 0.4s, height 0.4s;}
.btn-span-3:hover span {width: 562.5px;height: 562.5px;}
//btn-span-4标签
.btn-span-4 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-span-4:before, .btn-span-4:after,.btn-span-4 span:before,.btn-span-4 span:after {content: '';position: absolute;top: 0;width: 63.5px;height: 0;background: #012f04;.transition(all .6s);z-index: -1;}
.btn-span-4:before {left: 0;}
.btn-span-4:after {left: 125px;}
.btn-span-4 span:before, .btn-span-4 span:after {top: auto;bottom: 0;}
.btn-span-4 span:before {left: 62.5px;}
.btn-span-4 span:after {left: 187.5px;}
.btn-span-4:hover {color: #c0d3c1;}
.btn-span-4:hover:before, .btn-span-4:hover:after,.btn-span-4:hover span:before,.btn-span-4:hover span:after {height: 80px;}
//btn-span-5标签
.btn-span-5 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-span-5:before, .btn-span-5:after,.btn-span-5 span:before,.btn-span-5 span:after {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 0;background:fade(@qt6,50%);.transition(all .6s);z-index: -1;}
.btn-span-5:after,.btn-span-5 span:before {top: auto;bottom: 0;}
.btn-span-5 span:before,.btn-span-5 span:after { -webkit-transition-delay: 0.4s;-moz-transition-delay: 0.4s;-ms-transition-delay: 0.4s;-o-transition-delay: 0.4s;transition-delay: 0.4s;z-index: -1;}
.btn-span-5:hover:before, .btn-span-5:hover:after,.btn-span-5:hover span:before,.btn-span-5:hover span:after {height: 80px;}
//btn-span-6标签
.btn-span-6 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;}
.btn-span-6:before, .btn-span-6:after,.btn-span-6 span:before,.btn-span-6 span:after {content: '';position: absolute;top: 0;left: 0;width: 0;height: 80px;background: fade(@qt6,25%);.transition(.4s);z-index: -1;}
.btn-span-6:after,.btn-span-6 span:before {left: auto;right: 0;}
.btn-span-6 span:before,.btn-span-6 span:after {-webkit-transition-delay: 0.4s; -ms-transition-delay: 0.4s;-o-transition-delay: 0.4s;-moz-transition-delay: 0.4s;transition-delay: 0.4s;}
.btn-span-6:hover:before, .btn-span-6:hover:after,.btn-span-6:hover span:before,.btn-span-6:hover span:after {width: 250px;}
//btn-span-7标签
.btn-span-7 {.transition(.5s);position: relative;overflow: hidden;display: block;}
.btn-span-7 span {.transition(.3s);}
.btn-span-7:hover{background-color:@qt6;}
.btn-span-7:hover > span{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0px,-40px);transform: translate(0px,-40px);}
.btn-span-7::after{position: absolute;content: attr(data-text);-webkit-transform: translate(0, 30%);transform: translate(0, 30%);width: 100%;height: 100%;top: 0;left: 0;opacity: 0;filter: alpha(opacity=0);.transition(.3s);}
.btn-span-7:hover::after{opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(0, 0);transform: translate(0, 0);}
//btn-span-7-1标签
.btn-span-7-1 {.transition(.5s);position: relative;overflow: hidden;display: block;}
.btn-span-7-1 span {.transition(.3s);}
.btn-span-7-1:hover{background-color:@qt6;}
.btn-span-7-1:hover > span{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0px,40px); transform: translate(0px,40px);}
.btn-span-7-1::after{position: absolute;content: attr(data-text);-webkit-transform: translate(-30%,0);transform: translate(-30%,0);width: 100%;height: 100%;top: 0;left: 0;opacity: 0;filter: alpha(opacity=0);.transition(.3s);
}
.btn-span-7-1:hover::after{-webkit-transform: translate(0, 0);opacity: 1;filter: alpha(opacity=100);transform: translate(0, 0);}
//btn-span-7-2标签
.btn-span-7-2 {.transition(.5s);position: relative;overflow: hidden;display: block;}
.btn-span-7-2 span {.transition(.3s);}
.btn-span-7-2:hover{background-color:@qt6;}
.btn-span-7-2:hover > span{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0px,40px); transform: translate(0px,40px);}
.btn-span-7-2::after{position: absolute;content: attr(data-text);-webkit-transform: translate(-30%, -50%) rotate(-30deg); transform: translate(-30%, -50%) rotate(-30deg); width: 100%;height: 100%;top: 0;left: 0;opacity: 0;filter: alpha(opacity=0);.transition(.3s);
}
.btn-span-7-2:hover::after{-webkit-transform: translate(0, 0);opacity: 1;filter: alpha(opacity=100);transform: translate(0, 0);}
//btn-span-8标签
@-webkit-keyframes jello {
from, 11.1%, to {-webkit-transform: none;transform: none;}
22.2% {-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);transform: skewX(-12.5deg) skewY(-12.5deg);}
33.3% {-webkit-transform: skewX(6.25deg) skewY(6.25deg);transform: skewX(6.25deg) skewY(6.25deg);}
44.4% {-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);transform: skewX(-3.125deg) skewY(-3.125deg);}
55.5% {-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);transform: skewX(1.5625deg) skewY(1.5625deg);}
66.6% {-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);transform: skewX(-0.78125deg) skewY(-0.78125deg);}
77.7% {-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);transform: skewX(0.390625deg) skewY(0.390625deg);}
88.8% {-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}
}
@keyframes jello {
from, 11.1%, to {-webkit-transform: none;transform: none;}
22.2% {-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);transform: skewX(-12.5deg) skewY(-12.5deg);}
33.3% {-webkit-transform: skewX(6.25deg) skewY(6.25deg);transform: skewX(6.25deg) skewY(6.25deg);}
44.4% {-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);transform: skewX(-3.125deg) skewY(-3.125deg);}
55.5% {-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);transform: skewX(1.5625deg) skewY(1.5625deg);}
66.6% {-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);transform: skewX(-0.78125deg) skewY(-0.78125deg);}
77.7% {-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);transform: skewX(0.390625deg) skewY(0.390625deg);}
88.8% {-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}
}
.btn-span-8{.transition(.5s);position: relative;display: block;}
.btn-span-8:hover{background-color:fade(@qt6,20%); -webkit-animation-name: jello;animation-name: jello;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
//btn-span-9标签
.btn-span-9{.transition(.5s);position: relative;display: block;width: 100%;height: 100%;}
.btn-span-9 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-9::before{content: '';position: absolute;top: 0;left: 0;-webkit-transform: scale(0.5, 1);transform: scale(0.5, 1);width: 100%; height: 100%; z-index: 1; opacity: 0;filter: alpha(opacity=0); background-color: @qt6;.transition(.4s);}
.btn-span-9:hover::before{ opacity: 1;filter: alpha(opacity=100); -webkit-transform: scale(1, 1); transform: scale(1, 1);}
//btn-span-9-1标签
.btn-span-9-1{.transition(.5s);position: relative;display: block;width: 100%;height: 100%;}
.btn-span-9-1 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-9-1::before{content: '';position: absolute;top: 0;left: 0;-webkit-transform: scale(1,0.5);transform: scale(1,0.5);width: 100%; height: 100%; z-index: 1; opacity: 0;filter: alpha(opacity=0); background-color: @qt6;.transition(.4s);}
.btn-span-9-1:hover::before{ opacity: 1;filter: alpha(opacity=100); -webkit-transform: scale(1, 1); transform: scale(1, 1);}
//btn-span-10标签
.btn-span-10{.transition(.5s);position: relative;display: block;overflow: hidden;}
.btn-span-10 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-10::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; opacity: 0;filter: alpha(opacity=0); background-color: @qt6;.transition(.4s);}
.btn-span-10:hover::before{transform: skewX(-180deg) scale(0.6,1);opacity: 1;filter: alpha(opacity=100);-webkit-transform: skewX(-180deg) scale(0.6,1);}
//btn-span-11标签
.btn-span-11{.transition(.5s);position: relative;display: block;}
.btn-span-11 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-11::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.5);.transition(.4s); border: 1px solid rgba(255,255,255,0.5);}
.btn-span-11::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1;.transition(.5s); border: 1px solid rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.25);}
.btn-span-11:hover::before{.rotate(-45deg);background-color: rgba(255,255,255,0);}
.btn-span-11:hover::after{.rotate(45deg);background-color: rgba(255,255,255,0);}
//btn-span-12标签
.btn-span-12{.transition(.5s);position: relative;display: block;width: 100%;height: 100%;perspective: 2000px;}
.btn-span-12 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-12::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.4s);}
.btn-span-12::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1;.transition(.5s); border: 1px solid rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.25);}
.btn-span-12:hover::before{-webkit-transform: rotateX(60deg) translate(0px,40px);transform: rotateX(60deg) translate(0px,40px) ;}
.btn-span-12:hover::after{-webkit-transform: rotateX(-60deg) translate(0px,-40px) ;transform: rotateX(-60deg) translate(0px,-40px) ;}
//btn-span-13标签
.btn-span-13 {.transition(.5s);position: relative;display: block;}
.btn-span-13 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-13::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.4s);}
.btn-span-13:hover::before{opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(1.2,1.2);transform: scale(1.2,1.2);}
.btn-span-13::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1;.transition(.5s); border: 1px solid rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.25);filter: alpha(opacity=0);opacity: 0;-webkit-transform: scale(0.5,0.5);transform: scale(0.5,0.5);}
.btn-span-13:hover::after{opacity: 1 ;filter: alpha(opacity=100);-webkit-transform: scale(1,1);transform: scale(1,1);}
//btn-span-13-1标签
.btn-span-13-1{.transition(.5s);position: relative;display: block;width: 100%;height: 100%;}
.btn-span-13-1 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-13-1::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.4s);background-color: rgba(255,255,255,0.25);.transition(.3s);}
.btn-span-13-1:hover::before{opacity:0 ;filter: alpha(opacity=0);-webkit-transform: scale(0.5,0.5);transform: scale(0.5,0.5);}
.btn-span-13-1::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1;opacity:0 ;filter: alpha(opacity=0);.transition(.3s);-webkit-transform: scale(1.2,1.2);transform: scale(1.2,1.2);border: 1px solid rgba(255,255,255,0.5);}
.btn-span-13-1:hover::after{opacity:1 ;filter: alpha(opacity=100);-webkit-transform: scale(1,1);transform: scale(1,1);}
//btn-span-14标签
.btn-span-14 {.transition(.5s);position: relative;display: block;overflow: hidden;}
.btn-span-14 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-14::before, .btn-span-14::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(0,-100%);transform: translate(0,-100%);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-14::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-14:hover::before, .btn-span-14:hover::after{-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-14-1标签
.btn-span-14-1{.transition(.5s);position: relative;display: block;overflow: hidden;}
.btn-span-14-1 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-14-1::before, .btn-span-14-1::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(-100%,0);transform: translate(-100%,0);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-14-1::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-14-1:hover::before, .btn-span-14-1:hover::after{-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-14-2标签
.btn-span-14-2 {.transition(.5s);position: relative;display: block;overflow: hidden;}
.btn-span-14-2 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-14-2::before, .btn-span-14-2::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(-13%,-190%) rotate(-30deg);transform: translate(-13%,-190%) rotate(-30deg);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-14-2::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-14-2:hover::before, .btn-span-14-2:hover::after{-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-14-3标签
.btn-span-14-3 {.transition(.3s);position: relative;display: block;overflow: hidden;}
.btn-span-14-3 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-14-3::before, .btn-span-14-3::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(13%,190%) rotate(-30deg);transform: translate(13%,190%) rotate(-30deg);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-14-3::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-14-3:hover::before, .btn-span-14-3:hover::after{-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-14-4标签
.btn-span-14-4 {.transition(.3s);position: relative;display: block;overflow: hidden;}
.btn-span-14-4 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-14-4::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(13%,190%) rotate(-30deg);transform: translate(13%,190%) rotate(-30deg);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-14-4::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(-13%,-190%) rotate(-30deg);transform: translate(-13%,-190%) rotate(-30deg);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-14-4::before{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-14-4:hover::before, .btn-span-14-4:hover::after{-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-14-5标签
.btn-span-14-5 {.transition(.3s);position: relative;display: block;overflow: hidden;}
.btn-span-14-5 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-14-5::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(13%,-190%) rotate(30deg);transform: translate(13%,-190%) rotate(30deg);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-14-5::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);-webkit-transform: translate(-13%,-190%) rotate(-30deg);transform: translate(-13%,-190%) rotate(-30deg);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-14-5::before{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-14-5:hover::before, .btn-span-14-5:hover::after{transform: translate(0,0);-webkit-transform: translate(0,0);}
//btn-span-15标签
.btn-span-15 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;}
.btn-span-15 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-15::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(0,-105%);transform: translate(0,-105%);border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);}
.btn-span-15:hover::before{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-15-1标签
.btn-span-15-1{.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;}
.btn-span-15-1 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-15-1::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.3s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(-105%,0);transform: translate(-105%,0);border-right-width: 1px;border-right-style: solid;border-right-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);}
.btn-span-15-1:hover::before{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-15-2标签
.btn-span-15-2 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;}
.btn-span-15-2 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-15-2::before{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.5s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(-13%,-190%) rotate(-30deg);transform: translate(-13%,-190%) rotate(-30deg);border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);}
.btn-span-15-2:hover::before{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-15-3标签
.btn-span-15-3 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;}
.btn-span-15-3 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-15-3::before, .btn-span-15-3::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.5s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(0,-105%);transform: translate(0,-105%);border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);}
.btn-span-15-3::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-15-3:hover::before, .btn-span-15-3:hover::after{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-15-4标签
.btn-span-15-4 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;}
.btn-span-15-4 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-15-4::before, .btn-span-15-4::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.5s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(-105%,0);transform: translate(-105%,0);border-right-width: 1px;border-right-style: solid;border-right-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);}
.btn-span-15-4::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-15-4:hover::before, .btn-span-15-4:hover::after{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-15-5标签
.btn-span-15-5 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;}
.btn-span-15-5 span{z-index: 2;display: block;position: absolute;width: 100%;height: 100%;}
.btn-span-15-5::before, .btn-span-15-5::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1; background-color: rgba(255,255,255,0.25);.transition(.5s);opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate(-13%,-190%) rotate(-30deg);transform: translate(-13%,-190%) rotate(-30deg);border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: rgba(255,255,255,1);background-color: rgba(255,255,255,0.25);}
.btn-span-15-5::after{-webkit-transition-delay: 0.2s; /* Safari */transition-delay: 0.2s;}
.btn-span-15-5:hover::before, .btn-span-15-5:hover::after{opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-16标签
.btn-span-16 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;border: 1px solid rgba(255,255,255,1);}
.btn-span-16:hover{border: 1px solid rgba(255,255,255,0);}
.btn-span-16::before{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;z-index: 1;.transition(.5s); -webkit-transform: translate(-100%, -600%) rotate(30deg);transform: translate(-100%, -600%) rotate(30deg);background-color: rgba(255,255,255,0.5);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-span-16:hover::before{-webkit-transform: translate(0,0);transform: translate(0,0);}
//btn-span-17标签
.btn-span-17 {.transition(.3s);position: relative;display: block;overflow: hidden;}
.btn-span-17 span{position: relative;.transition(.3s);z-index:2;letter-spacing:0;}
.btn-span-17::before{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;z-index: 1;opacity: 0;filter: alpha(opacity=0);.transition(.3s);border-top-width: 1px;border-bottom-width: 1px;border-top-style: solid;border-bottom-style: solid;border-top-color: rgba(255,255,255,0.5);border-bottom-color: rgba(255,255,255,0.5);-webkit-transform: scale(0.1, 1);transform: scale(0.1, 1);}
.btn-span-17:hover span{letter-spacing: 2px;}
.btn-span-17:hover::before{filter: alpha(opacity=100);opacity: 1;-webkit-transform: scale(1, 1);transform: scale(1, 1);}
.btn-span-17::after{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;z-index: 1;.transition(.3s);background-color: rgba(255,255,255,0.25);}
.btn-span-17:hover::after{opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0.1, 1);transform: scale(0.1, 1);}
//btn-span-18标签 translate Y轴高度取决于a标签的一半高?
.btn-span-18 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;border-right-width: 1px;border-left-width: 1px;border-right-style: solid;border-left-style: solid;border-right-color: rgba(255,255,255,0.5);border-left-color: rgba(255,255,255,0.5);}
.btn-span-18 span{.transition(.3s);letter-spacing:0;}
.btn-span-18:hover span{letter-spacing: 2px;}
.btn-span-18:hover{ border-right-color: rgba(255,255,255,0);border-left-color: rgba(255,255,255,0);}
.btn-span-18::before{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;z-index: 1;.transition(.3s);background-color: rgba(255,255,255,0.5);}
.btn-span-18:hover::before{transform: translate(0,-45px) rotate(-45deg);}
.btn-span-18::after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 1px;z-index: 1;.transition(.3s);background-color: rgba(255,255,255,0.5);}
.btn-span-18:hover::after{transform: translate(0,45px) rotate(45deg);}
//btn-span-19标签
.btn-span-19 {.transition(.3s);position: relative;display: block;width: 100%;height: 100%;overflow: hidden;border-top-width: 1px;border-bottom-width: 1px;border-top-style: solid;border-bottom-style: solid;border-top-color: rgba(255,255,255,0.5);border-bottom-color: rgba(255,255,255,0.5);}
.btn-span-19 span{.transition(.3s);letter-spacing:0;}
.btn-span-19:hover span{letter-spacing: 2px;}
.btn-span-19:hover{border-top-color: rgba(255,255,255,0);border-bottom-color: rgba(255,255,255,0);}
.btn-span-19::before{content: '';position: absolute;top: 0;right: 0;width: 1px;height: 100%;z-index: 1;.transition(.3s);background-color: rgba(255,255,255,0.5);}
.btn-span-19:hover::before{-webkit-transform: translate(-94.9845px,0) rotate(270deg);-moz-transform: translate(-94.9845px,0) rotate(270deg);transform: translate(-94.9845px,0) rotate(270deg);}
.btn-span-19::after{content: '';position: absolute;top: 0;left: 0;width: 1px;height: 100%;z-index: 1;.transition(.3s);background-color: rgba(255,255,255,0.5);}
.btn-span-19:hover::after{-webkit-transform: translate(94.9845px,0) rotate(180deg);-moz-transform: translate(94.9845px,0) rotate(180deg);transform: translate(94.9845px,0) rotate(180deg);}
//btn-span-20标签 文字顶上去的效果
.btn-span-20{position: relative;overflow: hidden;;display: block;
span{display: block;.transition(.4s);}
span::before{content:attr(data-hover);position: absolute;top: 100%;.transition(.4s);left: 0;}
}
.btn-span-20:hover{
span{transform: translateY(-100%);}
}