.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);} .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);} .translateX(@X){-webkit-transform: translateX(@X);-moz-transform: translateX(@X);-ms-transform: translateX(@X);-o-transform: translateX(@X);transform: translateX(@X);} .translateY(@Y){-webkit-transform: translateY(@Y);-moz-transform: translateY(@Y);-ms-transform: translateY(@Y);-o-transform: translateY(@Y);transform: translateY(@Y);} @back_nav:url('../images/nav_bg.jpg') no-repeat;/*导航背景*/ @back_nav_li_ah:url('../images/nav_a_bg.jpg') no-repeat top center;/*鼠标移上去背景*/ @back_s_li:url('../images/x_bg.png') no-repeat;/*左侧栏li背景*/ @mainColor:#005aa1;/*主色*/ @hoverColor:#1a8fdf;/*悬浮变色*/ @thirdColor:#099f52;/*第三个颜色*/ @qt5:#fff;/*悬浮背景变色后字体颜色*/ @qt6:#c5a46e;/*按钮悬浮颜色*/ @height_nav:100px; /*导航条高度*/ @nav_li_w:14.2%; /*导航条宽度*/ @nav_li_color:#000; /*导航条文字颜色*/ @nav_li_a:#fff; /*导航条文字颜色*/ .nav_color{color:@nav_li_color!important;}; .nav_h_color{color:@nav_li_a!important;background: #488dc3!important;}; @ba_w1:1920px; /*滚动图片宽度*/ @ba_h1:840px; /*滚动图片高度*/ @b_w:1200px; /*网站宽度*/ .more_a(@c:#fff; @w:120px;@h:30px;@b_w:1px;@b_s:solid;@b_c:#fff;){display: block;width:@w;height:@h;line-height:@h;text-align: center;color:@c;border:@b_w @b_s @b_c;} .slh{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} .clamp(@l:4;) {display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: @l;} .left{float:left;} .right{float:right;} .off{display:none;} /*隐藏*/ /*----------------头部--------------*/ .header_top{width: @b_w;margin: 0 auto;position: fixed; span{float: left;} a { display: inline-block; color: #212222; &:hover { color: #0d8e0d;} } } //头部样式//////////////////////////////////////////////////// .header{margin: 0 auto; background: #fff;.transition();z-index: 222;width: 100%;box-sizing: content-box;top: 0;height: 100px; .top { .logo {float: left;display: block;padding-top:10px; img{max-height:85px;display: block;} } .btn_language{float: right;width: 70px;display:flex;height: 20px;line-height: 20px;.border-radius(12px);border:1px solid @mainColor;margin-top:32px;margin-left: 20px; a{width:40px;text-align: center;color: @mainColor;font-size: 12px; &:hover{.cur;} } .cur{background: @mainColor;color: #fff;} .cn-a{border-radius: 0 10px 10px 0; } .en-a{border-radius: 10px 0 0 10px; } } } //底部滑块 .header_nav{ width:900px;float: right; li{float: left;width: 14%;text-align: center;line-height: @height_nav;height: @height_nav;position: relative; .a1{font-size: 16px;display: block;position: relative;} .ol_2{top:100px;left: 0;z-index:99;width:100%;border-radius: 0;margin-top:35px;position: absolute;background: #000;.transition(.2s);opacity: 0;visibility: hidden;padding: 10px 0;box-shadow: 0 6px 6px rgba(0,0,0,.2); a{padding: 10px 20px;position: relative;display: block;color: #fff!important;font-size: 14px;line-height: 1;background: none!important; &:hover{color: @mainColor!important;} } } .nav_ol_up{margin-top: 0;opacity: 1;visibility: visible;} } #Product28 .ol_2{width: 140%;} } } .logo_s{padding: 3px 0;box-shadow: 0 0 4px 5px rgba(0,0,0,.1); .nav .dropdown ul.dropdown-menu{padding-top:3px;} } //手机导航样式////////////////////////////////////// #mobile{position: fixed;top: 0;left: 0;width: 100%;z-index: 2233;display: none; .top {line-height: 60px;height:60px;text-align: center;-moz-box-shadow: 0 0 10px rgba(0,0,0,.2);-o-box-shadow: 0 0 10px rgba(0,0,0,.2);background: #fff;position: relative;z-index: 1; .btn{width: 40px;height: 40px;cursor: pointer;cursor: hand;z-index: 1;float: left;position: relative;display: block;top: 10px; i{width: 23px;height: 2px;background: #222;display: block;position: absolute;left: 50%;transform: translateX(-50%);transition: .5s;transform-origin: left center; } .ie1{top: 12px;} .ie2{top: 19px;} .ie3{top: 26px;} } .active{ .ie1{transform: translateX(-50%) rotateZ(45deg);top: 12px;margin-left: 3px;} .ie2{opacity: 0;} .ie3{transform: translateX(-50%) rotateZ(-45deg);top: 28px;margin-left: 3px;} } } .logos{margin: 0 auto;display: inline-block;width: auto; img{max-height: 55px;width: auto;display: inline-block;vertical-align: middle;position: relative;top: -2px;} } .lang {float: right;position: relative; a{margin-right: .2rem;font-size: 18px;} } .bottom {position: absolute;top: 0;left: 0;width: 100%;padding: 20px 15px;background: #fff;height:100vh;padding-top: 60px;overflow: auto;display: none; .m-nav{display: block;border-bottom: 1px solid #eee;margin-bottom:25px; ul{ li{ a{display: block;line-height: 40px;height: 40px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;position: relative;border-top: 1px solid #eee;font-size: 16px; i{background: url("../images/icon14.png")no-repeat center center;width: 40px;height:40px;float: right;background-size: 10px 5px;.rotate(-90deg);} } ul{display: none; a{padding-left: 10px; &:before {content: '-';font-size: 16px;padding-right: 5px;} } } } } } .m-info ul{ li {display: block;border: 1px solid #666;font-size: 14px;padding: 0 15px;margin-bottom: 10px;text-align: center;transition: .5s; a{background: url("../images/ico_tel.png")no-repeat left center;background-size:20px 20px; line-height: 36px;height: 36px;;display: inline-block;padding-left: 25px;} } li+li a{background: url("../images/ico_email.png")no-repeat left center;background-size:20px 20px;} } } } @media (max-width: 1100px) { .header .header_nav{width: 700px;} } @media (max-width: 900px) { .header {display: none;} #spotlight .header{display: block;} #mobile{display: block;} } .index1{margin: .6rem 0 .4rem; .index1_dh{ h3{font-size: 36px;} h1{font-size: 24px;padding:8px 0 22px;position: relative;; &:after{content: '';position: absolute;width: 108px;height: 1px;background: #000;left: 0; bottom: 0;} } } .index1_left{width: e("calc(100% - 800px)");float: left; .p_title{background: url("../images/bg1.jpg");padding: 10px 0;text-align: center;font-size: 67px;color: rgba(102,102,102,.2);margin: 23px 0;display: block;} article{height: 220px; p{color: #333;line-height: 2;text-indent: 2em;.clamp(6)} } } .index1_right{position: relative;width:660px; float: right;padding-top: .5rem;height: 370px; .video-js{width: 100%;} .vjs-big-play-button{background: url("../images/i_v1.png")no-repeat!important;width:50px;height: 50px;opacity: .7;border: none;margin-left: -25px;margin-top: -25px; &:hover{;opacity: 1;} } //&:before{content: '';position: absolute;width:800px;left: 30%;top: -60%;background: #ececec;height: 130%;} } } @media (max-width:1400px) { .index1 .index1_left .p_title{font-size: 48px;} } @media (max-width:1230px) { .index1 .index1_dh h3{font-size: 30px;} .index1 .index1_left .p_title{display: none;} .index1 .index1_left article{margin-top: .5rem;} .index1 .index1_right{padding-top:0;margin-top: -50px;width: 600px;} .index1 .index1_left{width: e("calc(100% - 650px)");} } @media (max-width:900px) { .index1 .index1_dh h3{font-size: 18px;} .index1 .index1_dh h1{font-size: 20px;padding: 0 0 11px} .index1 .index1_left article{height: auto;padding-bottom: .4rem;} .index1 .index1_left{width: 100%;float: none; h3{text-align: center;font-size:24px;} h1{text-align: center;font-size: 18px;padding: 5px 0 10px;margin-top: 5px;} } .index1 .index1_left h1:after{right: 0;margin: auto;bottom: auto;top: 0;width: 50px;} .index1 .index1_right{width: 100%;float: none;margin: .4rem 0;} .index1 .index1_left .p_title{font-size: 48px;margin: 0;} .index1 .index1_right{padding: 0;height: auto;; .img{margin: .5rem 0;height: auto; img{width: 100%;} } } .index1{margin-bottom: 0; .index1_right:before{display: none;} } } @media (max-width:400px ) { .index1{margin: .4rem 0 .2rem; .index1_left .p_title{display: none;} } .index1 .index1_left p{margin-bottom: .4rem;} .index1 .index1_left article {margin-top: .2rem;padding-bottom: 0;} } .index1_1{padding: .3rem 0 .2rem;border-bottom: 1px solid #ccc;margin-bottom: .4rem; ul{display: flex;justify-content: space-between;; li{width: 220px; p{font-size:18px; strong{font-family: beba;color: @mainColor;font-size:48px;margin: 0 5px;} } } li:last-child{width: 310px;} } } @media (max-width:1100px) { .index1_1 ul li p strong{font-size: 36px;} } @media (max-width:900px) { .index1_1{display: none;} } .com_a{background: url("../images/com_a_bg.png")no-repeat;width: 211px;height: 52px;display: block;line-height: 52px;text-indent:36px;font-size: 24px; &:hover{color: @mainColor;} } @media (max-width:900px) { .com_a{width: 150px;height: 40px;background-size: 100%;margin: 0 auto;font-size: 16px;line-height: 40px;} } //图片放大，外面的框缩小 .imgd-h-1{.transition(); img{.transition();} &:hover{.scale(.97); img{.scale(1.15)} } } //入场动画，配合JS .imgd-in-1{clip-path:polygon(40% 40%, 60% 40%, 60% 60%, 40% 60%);} .index_com_dh{text-align: center;margin-bottom:.65rem; span{font-family: beba;font-size: 60px;text-transform: uppercase;} p{font-size: 24px; &:after{content: '';display: block;margin:20px auto 0;width: 200px;height: 1px;background: #000;} } } @media (max-width:1200px) { .index_com_dh{ span{font-size: 48px;} } } @media (max-width:768px) { .index_com_dh{margin-bottom: .3rem; span{font-size:24px;} } .index_com_dh p:after{width: 50px;margin-top: 10px;} } @media (max-width:450px) { .index_com_dh{ p{font-size:20px;} } } .index2{background: url("../images/index2_bg.jpg")no-repeat top center;max-width: 1920px; padding:.4rem 0 1.5rem;position: relative;margin-bottom: 1rem; .swiper-slide{padding-top: .7rem; .swiper-slide_l{width:58.26%;float: left;height:510px; .pic_k{float: right;padding:0 0 36px 36px;width:95%;height: 100%; position: relative; .pic{max-width: 630px;width: 100%;height: 100%;overflow: hidden;box-shadow: 0px 20px 21px 0px rgba(0, 0, 0, 0.44);float: right;} .pic_bg{background:#fff;max-width: 630px;width: 90%;height:90%;position: absolute;top: 0;right: 0%;z-index: -1;.translateY(0%);.transition();transition-delay: .3s; img{opacity: .45;} } img{width: 100%;height: 100%;object-fit: cover;} } } section{float: right;width:39%; .pic_txt{color: #fff;padding-bottom: 20px;border-bottom: 1px solid #FFF; h3{} } article{height: 296px; li{margin-top: 30px;font-size: 18px;color: #fff; h5,p{font-size: 18px;line-height: 1.5;} } } a{width: 152px;height: 42px;color: @mainColor;text-align: center;line-height: 42px;display: block;background: #fff;font-size:16px; &:hover{color: #fff;} } } } .swiper-slide-active .swiper-slide_l .pic_k .pic_bg{.translateY(-13%);right:9%;} .swiper-button-prev2{background: url("../images/i_23.png")no-repeat;width: 30px;height: 47px;bottom:50px;left: 50%;position: absolute;margin-left: -50px;cursor: pointer;} .swiper-button-next2{background: url("../images/i_24.png")no-repeat;width: 30px;height: 47px;left: 50%;position: absolute;bottom:50px;margin-left:30px;cursor: pointer;} } @media (max-width:1200px ) { .index2 .swiper-slide .swiper-slide_l{width:54%;} .index2 .swiper-slide .swiper-slide_l .pic_k{background: none;} } @media (max-width:900px ) { .index2 .swiper-slide .swiper-slide_l{width:100%;height:70vw;} .index2 .swiper-slide .swiper-slide_l .pic_k{float: none;max-width: 100%;padding: 0;margin: 0 auto;border: 1px solid #fff; .pic{max-width: 100%;} .pic_bg{display: none;} } .index2 .swiper-slide section{width: 95%;margin: 0 auto;} .index2 .swiper-slide section article{display: none;} .index2 .swiper-slide section a{float: right;margin-top:-50px;width: 120px;height: 30px;line-height: 30px;font-size: 14px;margin-right:2.5%;} .index2 .swiper-slide section .pic_txt{margin-top:10px;padding-bottom:11px;} .index2 .swiper-button-prev2{bottom: 20px;width: 20px;height: 32px;background-size: 100%;} .index2 .swiper-button-next2{bottom: 20px;width: 20px;height: 32px;background-size: 100%;} } @media (max-width:640px ) { .index2{padding:0 0 1.5rem;margin-bottom: .5rem;} } .index3{ .index_com_dh{text-align: left; p:after{margin: 20px 0 0 0;} } .index3_nr{position: relative;height: 0; padding-bottom: 56%; .pic{position: absolute;;z-index: -1;height: inherit;; img{width: 100%;} } li{ img{clip-path:polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);position: absolute;width:17.44%;} svg{width:100%;height:100%;position: absolute;z-index: -1; path{stroke: #fff;stroke-width:2;stroke-dasharray: 100% 200%;stroke-dashoffset:100%;} circle{fill:#fff; r:0;} } } //.li1{position: absolute;width:17.44%;height:13.9vw;left:30%;top: 15%; .li1{ img{left:20vw;top:3vw;} svg{ left:26vw;top: 13vw;} } .li2{ img{left:45vw;top:0vw;} svg{ left:54vw;top:8vw;} } .li3{ img{left:65vw;top:8vw;} svg{ left:66vw;top:3vw;} } .li4{ img{left:73vw;top:22vw;} svg{ left:58vw;top:19vw;} } .li5{ img{left:55vw;top:32vw;} svg{ left:49vw;top:19vw;} } .li6{ img{left:37vw;top:39vw;} svg{ left:34vw;top:42vw;} } .li7{ img{left:17vw;top:30vw;} svg{ left:24vw;top:31vw;} } .li8{ img{left:7vw;top:17vw;} svg{ left:15vw;top:23vw;} } //li{position:absolute;width:20vw;height:13vw; .border-radius(5px); // img{width: 100%; border: 5px solid #fff;.border-radius(5px);box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.7);} // // i{clip-path:polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);width:50%;position: absolute;} //} //.li1{left:20vw;top:19vw; // i{background: url("../images/i31_1.png")no-repeat;background-size: 100% 100%;margin-left:-5px;height:28%;} //} //.li2{right:50vw;top:0.5vw; // i{background: url("../images/i31_1.png")no-repeat;background-size: 100% 100%;margin-left:-5px;.translateY(4vw);height:28%;} //} //.li3{right:16vw;top:21vw; // i{background: url("../images/i32_1.png")no-repeat;background-size: 100% 100%;margin-left:-50%;height: 12%;clip-path:polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} //} //.li4{left:43vw;top:38vw; // i{background: url("../images/i34_1.png")no-repeat;background-size: 100% 100%;height: 28%;margin-left:-50%;.translateY(3vw);clip-path:polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);} //} } } .index3_mobile{display: none; img{width: 100%;} } @media (max-width:768px ) { .index3{display:none;} .index3_mobile{display:block;} } .company4{margin: .5rem 0;} .index4{margin-top: .5rem; .index_com_dh{text-align: left; p:after{margin: 20px 0 0 0;} } .index4_nr{position: relative; ul{padding-bottom: 100px;width: e("calc(100% + 35px)"); li{padding: 0 0 50px 0;position: relative;z-index: 1;overflow: hidden;margin-right: 35px; figure{ .pic{height:420px;overflow: hidden; img{.transition();width: 100%;height: 100%;object-fit: cover;} } } figcaption{height:50px;width: 100%;bottom: 0;position: absolute;;color: rgba(31,31,31,1);text-align: center;overflow: hidden;.transition();padding-top:10px; &:before{content: "";position: absolute;bottom: 0;width: 100%;height: 1px;background: @mainColor;.transition();left: 0;} h3{position: relative;} i{width: 20px;height: 1px;background: #fff;opacity: 0;.translateY(50px);display: block;margin: 10px auto;} a{opacity: 0;.translateY(50px);display: block;} } } li:hover{ figure{ .pic{ img{.translateY(-50px);} } figcaption{height:100px;color: #fff; &:before{height:100%;.transition(.2s)} h3{color: #fff;} i{opacity: 1;transition: transform 0.4s, opacity 0.1s;.translateY(0);} a{opacity: 1;transition: transform 0.4s, opacity 0.1s;.translateY(0);transition-delay: .1s;} } } } } .slick-arrow{width: 76px;height: 76px;right: auto;left: 0;border: 1px solid @mainColor;z-index: 22;font-size: 0;position: absolute;bottom:-20px;.transition();} .slick-prev{background: url("../images/i_i8.png")center no-repeat; &:hover{background:@mainColor url("../images/i_i8_h.png")center no-repeat;} } .slick-next{background: url("../images/i_i7.png")center no-repeat; margin-left: 110px; &:hover{background:@mainColor url("../images/i_i7_h.png")center no-repeat;} } } } @media (max-width:1200px ) { .index4 .index4_nr .slick-arrow{width: 50px;height: 50px;background-size:30%;} .index4 .index4_nr ul{padding-bottom: 55px;} .index4 .index4_nr .slick-next{margin-left: 65px;} .index4 .index4_nr ul li figure .pic{height:300px;} } @media (max-width:768px ) { .index4{margin-bottom: .6rem; .index_com_dh{text-align: center;} } .index4 .index_com_dh p:after{margin: 10px auto;} .index4 .index4_nr ul{width: e("calc(100% + 15px)"); li{margin-right: 15px;} } .index4 .index4_nr{ .slick-arrow{left: 50%;} .slick-prev{margin-left: -70px;} .slick-next{margin-left:6px;} } .index4 .index4_nr .slick-arrow{width: 35px;height: 35px;background-size:10px!important;} .index4 .index4_nr .slick-prev{margin-left: -55px;} .index4 .index4_nr ul{padding-bottom: 40px;} .index4 .index4_nr ul li figure .pic{height: 250px;} } @media (max-width:400px ) { .index4 .index4_nr ul li figure .pic{height: 180px;} } .index5{background: url("../images/bg4.jpg")no-repeat bottom center;max-width: 1920px;margin:0 auto 1px;overflow: hidden;padding-bottom: .8rem; .index_com_dh{text-align: left; p:after{margin: 20px 0 0 0;} } .index5_l{margin-top:28px; .index_com_dh{color: #fff;margin-bottom: .4rem; p:after{background: #fff;} } article{font-size: 16px; color: #fff;} } } .jishu1{margin:.5rem 0; li{background: #fafafa;margin-top: 3%;border-bottom-left-radius: 20px;padding-left: 80px;position: relative;overflow: hidden; h3{background-color: #2864a8;position: absolute;width:70px;left: 0;top: 0;height: 100%;color: #fff;text-align: center;font-weight: bold;font-size:24px;padding: 30px 23px 0;line-height: 1.3; &:after{content: '';width: 46px;height: 46px;position: absolute;bottom: 10px;left: 50%;margin-left: -23px;background: url("../images/j_i1.png")no-repeat;} } article{width: 60%;padding: 35px 3%;color: #999;line-height: 2;height: 330px;overflow: hidden; p{position: relative;padding-left:26px; i,strong{width: 20px;height:20px;background: @mainColor;.border-radius(4px);display: inline-block;color:#fff;text-align: center;line-height: 20px;position: absolute;left: 0;top:7px;} } p,span{font-size: 16px!important;line-height: 2!important;} p:empty{display: none;} } .img{width: 40%;float: right;overflow: hidden;height:330px; img{width: 100%;height: 100%;object-fit: cover;} } } li:nth-of-type(2){ h3:after{background: url("../images/j_i2.png")no-repeat;} } li:nth-of-type(3){ h3:after{background: url("../images/j_i3.png")no-repeat;} } li:nth-of-type(4){ h3:after{background: url("../images/j_i4.png")no-repeat;} } } @media (max-width:900px) { .jishu1 li{padding-left: 0; h3{width: 100%;height: 50px;padding: 0;line-height: 50px;text-align: left;text-indent:60px;} } .jishu1 li h3{font-size: 20px;} .jishu1 li h3:after{left:30px;height: 40px;background-size: 30px!important;top:10px;} .jishu1 li .img{margin-top: 50px;height:50vw;} .jishu1 li article{margin-top: 50px;} } @media (max-width: 600px) { .jishu1 li .img{width:100%;float: none;} .jishu1 li article{width: 100%;margin-top: 0;height: auto;; p{color: #000;} } } .jishu2_nr{margin-bottom: 1rem; article{ p{line-height: 2;font-size: 16px;text-indent: 2em;} } } .product1{margin-bottom: .5rem; ul{ li{width: 33.3%;float: left;padding: 0 1.5%;margin-bottom: .5rem; .pic{height: 3.6rem;display: flex;align-items: center;justify-content:center;position: relative; img{max-height: 100%;max-width: 100%;} .zhezhao{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0;background: rgba(0,0,0,.6);.transition();display: flex;align-items: center;justify-content:center; h3{color: #fff;text-align: center; &:before{content: '';display: block;width: 200px;height: 1px;background: #fff;.transition();margin:0 auto 10px;} &:after{content: '';display: block;width: 200px;height: 1px;background: #fff;.transition();margin:10px auto 0;} } } } .neiye_pic_txt{position: relative;overflow: hidden;padding: 20px 20px 10px;border: 1px solid #f2f2f2; h3{border-bottom: 1px solid #f2f2f2;color: #333;.slh();margin-bottom: 10px;padding-bottom: 10px;font-size: 16px;} p{color: #777;background: url("../images/p_i2.png")no-repeat right center;} } } li:hover{ .pic{ .zhezhao{opacity: 1; h3{ &:after,&:before{width: 20px;} } } } .neiye_pic_txt{ p{background: url("../images/p_i1.png")no-repeat right center;color: @mainColor;} } } } } @media (max-width:768px ) { .product1 ul li{width: 50%;} } @media (max-width:450px ) { .product1 ul li{width: 100%;} } //内页大图/////////////////////////////////////////////////////// .nei_banner{max-width: 1920px;overflow: hidden;display: block;position: relative;font-size: 0;margin: 0 auto;height:6rem;background-size:cover!important; img{width: 100%;} .breadcrumbs{position: absolute;left: 0;right: 0;margin: auto;bottom:0;background: rgba(0,0,0,.5);height:100px; h3{color: #fff;overflow: hidden;padding-top: 10px;} p{color: #fff;} div{font-size:inherit;} } } @media (max-width:900px ) { .nei_banner{margin-top: 60px;} } .company_banner{background: url("../images/banner_company.jpg")no-repeat right center;} .contact_banner{background: url("../images/banner_contact.jpg")no-repeat top center;} .news_banner{background: url("../images/banner_news.jpg")no-repeat top center;} .product_banner{background: url("../images/banner_product.jpg")no-repeat top center;} .case_banner{background: url("../images/case_banner.jpg")no-repeat top center;} .renwen_banner{background: url("../images/renwen_banner.jpg")no-repeat top center;} .job_banner{background: url("../images/job_banner.jpg")no-repeat top center;} .neiye_fenlei{margin: .58rem 0; ul{overflow: hidden; li{min-width: 143px;height:50px;line-height: 50px;text-align: center;.border-radius(4px);background: #000;float: left;margin-right: 26px;padding: 0 10px; a{display: block;color: #fff;font-size: 20px;} } .cur{background: @mainColor;} li:hover{.cur();} } } @media (max-width: 1200px) { .nei_banner .breadcrumbs{height: 75px;} } @media (max-width: 768px) { .nei_banner .breadcrumbs{height:60px;} .nei_banner{height:3.5rem;} .neiye_fenlei{margin: .4rem 0; ul{ li{height: 40px;line-height: 40px;margin-right:1%;width: 24.25%;min-width: auto;; a{font-size: 18px;} } li:last-child{margin: 0;} } } } @media (max-width: 500px) { .neiye_fenlei ul li{padding: 0; a{font-size: 14px;} } } .kehu1{ .kehu1_dh{text-align: center;border-bottom: 1px solid rgba(102, 102, 102,1);padding-bottom: 1px;margin-bottom: .4rem; h3{font-weight: bold;} p{color: rgba(102, 102, 102,1);margin:10px 0 .3rem;} } ul{overflow: hidden;margin-bottom:.5rem; li{width:18.4%;float: left;margin-right: 2%;margin-bottom:2%; img{width: 100%;} } li:nth-of-type(5n){margin-right: 0;} } ul:hover{ li:not(:hover) img{filter: grayscale(100%);} li:hover img{filter: grayscale(0%);} } } @media (max-width:900px) { .kehu1 ul li{width: 49%;margin-right: 2% !important;} .kehu1 ul li:nth-of-type(2n){margin-right: 0!important;} } //公司简介内页 .company1{overflow: hidden;padding: 10px; article{overflow: hidden;box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.11);padding:.2rem 20px; p{font-size: 16px;line-height: 2;} } } .company1_dh{ h3{font-size:32px;padding:8px 0 20px;position: relative;margin-bottom: 20px;font-weight: bold;; &:after{content: '';position: absolute;width:80px;height:3px;background: @mainColor;left: 0; bottom: 0;} } } @media (max-width:768px ) { .company1_dh h3{font-size: 24px;} } .company2{margin: .5rem 0 1rem;padding: 0 10px; .video-js{width:100%; .vjs-big-play-button{background: url("../images/i_v1.png")no-repeat!important;width:50px;height: 50px;opacity: .7;border: none;margin-left: -25px;margin-top: -25px; &:hover{;opacity: 1;} } } } // .culture1{max-width: 1920px;height:700px; position: relative;overflow: hidden;margin:0 auto;padding: .5rem 0; .company_parallax{background: url("../images/c_bg.jpg")no-repeat center center;height: 800px; position: absolute;top:-50px;left: 0;width: 100%;} ul{display: flex;;justify-content: space-around; li{width: 32%;height: 280px;position: relative;background: fade(@mainColor,60%);padding:80px 100px;display: flex;align-items: center; article{ i{display: block;width: 50px;height: 50px;background: url("../images/c_i4.png")no-repeat center;} h3{font-size:24px;color: #fff;margin: 5px 0;} p{font-size: 16px;color: #fff;} &:after{content:'';position: absolute;width:2px;height:120px;top: 0;bottom: 0;margin: auto; left: 80px;background: #fff;} } } li:nth-of-type(2) article i{background: url("../images/c_i5.png")no-repeat center;} li:nth-of-type(3) article i{background: url("../images/c_i6.png")no-repeat center;} } .company1_dh{text-align: center;margin-bottom: .7rem; h3{color: #fff; &:after{right: 0;margin: auto;background: #fff;} } } } @media (max-width:1300px ) { .culture1{height: 500px;} .culture1 ul li{padding: 60px 50px;} .culture1 ul li article:after{left:30px;} } @media (max-width:900px ) { .culture1{margin-top:50px;} } @media (max-width:768px ) { .culture1 ul li{padding: 20px; article{ &:after{display: none;} h3{font-size: 18px;} p{font-size: 14px;} } } } @media (max-width:460px ) { .culture1{height:660px;padding: .3rem 0; ul{display: block;; li{width: 100%;height: auto;margin-bottom: 20px;} } } .culture1 .company1_dh{margin-bottom: .3rem;} } .company3{background:#f3f3f3;padding: .6rem 0; .company3_nr{ article{margin-bottom: .3rem; p{font-size: 16px;line-height: 2; span{color: @mainColor;font-size: 18px;} } } ul{overflow: hidden; li{float: left;width: 32%;margin-right:2%;height: 300px;} li:last-child{margin-right: 0;} } } } .imgd-h-2{overflow: hidden;position: relative; &:before,&:after,.zhezhao:before,.zhezhao:after{content: '';background: linear-gradient(transparent,rgba(0,0,0,0.9));height: 100%;width: 25%;transform: translateY(-100%);position: absolute;left: 0;top: 0;z-index: 1;.transition(.3s);} &:after{left: 25%;} .zhezhao{width: 100%;height: 100%;position: absolute;bottom: 0;left: 0;.transition(.2s); p{color: #fff;font-size: 30px;opacity: 0;bottom: -30px;position: absolute;.transition();z-index: 22;width: 100%;text-align: center;} &:before{left:50%;} &:after{left:75%;} img{.transition(.3s);} } &:hover{ &:before,&:after,.zhezhao:before,.zhezhao:after{transform: translateY(0);} &:before{transition-delay: 0.225s;} &:after{transition-delay: 0.075s;} .zhezhao:before{transition-delay: 0.15s;} .zhezhao p{opacity: 1;bottom: 20px;transition-delay: 0.15s;} img{filter: grayscale(100%);} } } @media (max-width:1200px ) { .company3 .company3_nr ul li{height: 200px; .img{height: inherit;} } .imgd-h-2 .zhezhao p{font-size: 24px;opacity: 1;} .imgd-h-2{ &:before,&:after,.zhezhao:before,.zhezhao:after{transform: translateY(0);} } } @media (max-width:640px ) { .company3 .company3_nr ul li{height:150px;} .imgd-h-2 .zhezhao p{font-size:18px;bottom: 15px;} } @media (max-width:450px ) { .company3 .company3_nr ul li{height:100px;} } .company4{margin: .5rem 0; .index_com_dh{text-align: left; p:after{margin: 20px 0 0 0;} } .company4_nr{ ul{padding-bottom: 100px;width: e("calc(100% + 35px)"); li{padding:0 35px 35px 0; .pic{height:0;padding-bottom:73%;overflow: hidden;} } } .slick-arrow{width: 76px;height: 76px;right: auto;left: 0;border: 1px solid @mainColor;z-index: 22;font-size: 0;position: absolute;bottom:0;.transition();} .slick-prev{background: url("../images/i_i8.png")center no-repeat; &:hover{background:@mainColor url("../images/i_i8_h.png")center no-repeat;} } .slick-next{background: url("../images/i_i7.png")center no-repeat; margin-left: 110px; &:hover{background:@mainColor url("../images/i_i7_h.png")center no-repeat;} } } } @media (max-width:1200px ) { .company4 .company4_nr .slick-arrow{width: 50px;height: 50px;} .company4 .company4_nr ul{padding-bottom: 55px;} .company4 .company4_nr .slick-next{margin-left: 65px;} } @media (max-width:768px ) { .company4{margin-bottom: .6rem; .index_com_dh{text-align: center;} } .company4 .index_com_dh p:after{margin: 10px auto;} .company4 .company4_nr ul{width: e("calc(100% + 15px)"); li{padding: 0 15px 15px 0;} } .company4 .company4_nr{ .slick-arrow{left: 50%;} .slick-prev{margin-left: -70px;} .slick-next{margin-left:6px;} } .company4 .company4_nr .slick-arrow{width: 35px;height: 35px;background-size:10px!important;} .company4 .company4_nr .slick-prev{margin-left: -55px;} .company4 .company4_nr ul{padding-bottom: 40px;} } //荣誉证书honor页面///////////////////////// .honor1{position: relative;overflow: hidden;margin-bottom: .5rem; &:before{content: '';width: 1px;height: 100%;background: #eaeaea;position: absolute;left: 200px;z-index: -1;} h3{font-size: 36px;width: 209px;float: left;background: url("../images/h_i1.png")no-repeat right center;} ul{width: e("calc(100% - 213px)");float: right;margin-bottom: .5rem; li{width: 25%;float:left;padding:0 2%; .img{width: 100%;overflow: hidden;height: 0;padding-bottom: 140%; img{width: 100%;} } p{text-align: center;margin: .1rem 0 .3rem;height: 40px;} } } } @media (max-width:1024px ) { .honor1 h3{font-size: 18px;width: 100px;} .honor1 ul{width: e("calc(100% - 113px)");} .honor1:before{left: 91px;} } @media (max-width:768px ) { .honor1 ul li{width: 50%;} } @media (max-width:500px ) { .honor1{ h3{margin-bottom: 20px;} &:before{width: 0;} ul{width:100%;} } } .honor_list{overflow: hidden;margin-top: .4rem; li{float: left;width:24%;margin-right: 1.3%;margin-bottom: .3rem;text-align: center;cursor:pointer; .img{border: 1px solid #dcdcdc;padding: 6px;height: 2.6rem;box-sizing: border-box;text-align: center;display: flex;align-items: center;justify-content: center; img{max-height: 100%;max-width: 100%;} } h4{line-height: 2;} } li:nth-of-type(4n){margin-right: 0;} } @media (max-width:768px) { .honor_list{ li{width:49%;margin-right: 2%;} li:nth-of-type(2n){margin-right: 0;} } } //新闻列表/////////////////// .news1{margin-bottom: .5rem; ul{ li{width: 31%;margin-right:3%;float: left;margin-bottom: 40px; .img{height: 250px;overflow: hidden;} h3{font-size: 18px;color: #444;margin:10px 0 5px;.slh();} time{color: #666;} } li:hover{ h3,time{color: @mainColor;} } li:nth-of-type(3n){margin-right: 0;} } } @media (max-width: 800px) { .news1 ul li{width: 48%;margin: 1%!important;} } @media (max-width: 500px) { .news1 ul li{width: 100%;margin-bottom: 20px!important;} } //人文关怀///////////////////////// .renwen1{margin:1rem 0 ;min-height:4rem; p{font-size: 16px;font-weight: normal;letter-spacing: 0px;color: #666666;margin-bottom: 3%;padding-left:20px;position: relative; &:before {content: '';width: 12px;height: 12px;background: url(../images/dot2.png) center no-repeat;position: absolute;left: 0;top: 6px; } span{font-weight: bold;color: #333333;font-size: 16px;} } } .renwen2{margin: .6rem 0;overflow: hidden; ul{ li{width:49%;float: left;background: url("../images/culture_bg1.jpg")no-repeat;height:460px;padding: 20px 40px;.border-radius(5px); h3{color: #fff;font-size: 36px;margin-bottom: 20px;} p{color: #fff;font-size:16px;line-height: 2;} } li+li{float: right;background: url("../images/culture2_bg.jpg")no-repeat;;background-size: cover;} } } @media (max-width:900px) { .renwen2 ul li h3{font-size: 24px;} .renwen2 ul li p{line-height: 1.8;} } @media (max-width:768px) { .renwen1{margin:.5rem 0;} } .huanjing{margin:.6rem 0; ul{display: flex;flex-wrap: wrap; li{width: 32%;float: left;margin-right:2%;padding:40px 70px 40px 100px;background: url("../images/huanjing1.jpg")no-repeat;display: flex;flex-wrap: wrap;align-items: center; h6{font-size:16px;position: relative;color: #fff; &:before{content: '（1）';position: absolute;left:-40px;top: 0;} } } li:nth-of-type(2){background: url("../images/huanjing2.jpg")no-repeat; h6:before{content: '（2）';} } li:nth-of-type(3){margin-right: 0;background: url("../images/huanjing3.jpg")no-repeat; h6:before{content: '（3）';} } } } @media (max-width:1200px ) { .huanjing ul li{padding:20px 20px 20px 50px;} } @media (max-width:900px ) { .huanjing ul li{width: 100%;margin-bottom: 20px;} } .anquan{background: #fff;background: url("../images/anquan.jpg")no-repeat;overflow: hidden;padding: 40px;margin-bottom:50px;background-size: cover; .anquan_left{width: 40%;float: left;padding-top:10%; h3{font-size:48px;position: relative;padding-bottom: 10px;padding-left: 20px; &:after{content: '';width: 5px;height:60%;background:@mainColor;position: absolute;top: 0;left: 0;bottom: 0;margin: auto;} } } .anquan_right{width:55%;float: left; p{margin-bottom:30px;font-size: 16px;line-height: 2;} p:last-child{margin-bottom: 0;} } } @media (max-width:900px ) { .anquan .anquan_left{width: 100%;padding-top: 0;} .anquan .anquan_right{width: 100%;} } @media (max-width:500px ) { .anquan .anquan_left h3:after{top: -8px;} .anquan{padding: 20px;} .anquan .anquan_left h3{font-size:24px;} } //新闻详情///////////////////////// .news_title{text-align: center;margin:.4rem 0;padding: 0 2%; h1{padding-bottom: .2rem;font-weight: bold;} span,b{font-size: 14px;} } @media (max-width: 640px) { .news_title{ b{display: inline-block;} } } .news_info_sidebar{float: right;width: 285px;padding-left:.4rem;border-left: 1px solid #ccc; h3{color: #838D8F;margin-bottom: .1rem;} li{padding:.1rem 0;overflow: hidden; a{line-height: 1.5;color: #242424; &:hover{color: #e60012;} } } } .neirong_container{padding:.4rem .4rem 0 .4rem;overflow: hidden; .honor_img{max-width: 1200px;margin: 0 auto;text-align: center; img{display: block;margin: 0 auto;max-width: 100%;} } header{text-align: center;padding-bottom: .2rem;border-bottom: 1px solid #cccccc; h3{font-weight: bold;margin: 0 0 .35rem;} b{font-family: 宋体;} } article{padding: .4rem 0;border-bottom: 1px solid #cccccc;min-height: 5rem; p{line-height: 1.8;font-size: 14px;} img{max-width:100%;} table{width: 100%;border-collapse:separate;border-spacing: 0; .firstRow{background: #f0f0f0;} tr{height: 33px;line-height: 33px; td { text-align: center; border: 1px solid #cccccc; p{line-height: 33px!important;} img{display: inline-block;} } } } } .newsPage{font-family: 宋体;margin-top: .2rem; .page-a{margin: .15rem 0;} a{font-family: 宋体;} } .fanhui{width:130px;height:40px;line-height: 40px;.border-radius(5px);color: #fff; float: right;background: #184f90;text-align: center;margin-top: .3rem;} } @media (max-width: 900px) { .news_info_sidebar{display:none;} } @media (max-width: 640px) { .neirong_container{padding: .2rem 0;} } ///////联系我们/////////////////////////// .com1_dh{margin-bottom: .5rem; h3{color: @mainColor; &:after{content: '';width: 60px;height: 4px;background: #000;display: block;margin-top:10px;} } strong{color: #000;margin-left: 10px;} } .contact1{overflow: hidden;margin:1rem 0; .contact1_left{width: 380px;border: 1px solid #ddd;padding: 20px;box-sizing: border-box;float: left;; .contact1_left_dh{margin-bottom: 20px;} li{background: url("../images/i23.png")no-repeat left 20px;padding:10px 0 10px 35px;border-bottom: 1px solid #ddd; strong{font-size: 18px;font-weight: bold;color: @mainColor; a{font-size: inherit;font-weight: inherit;} } } li:nth-of-type(2){background: url("../images/i24.png")no-repeat left 20px;} li:nth-of-type(3){background: url("../images/i25.png")no-repeat left 20px;} } #gaodeMap{height:338px;float: right;width: e("calc(100% - 400px)");} } @media (max-width: 768px) { .contact1{margin: .4rem 0; .contact1_left{width: 100%;} } .contact1 #gaodeMap{width: 100%;margin-top: 30px;} } .contact4{background:#e9e9e9;padding: .5rem 0;margin: .5rem 0; h3{text-align: center;} p{text-align: center;margin: .3rem 0 ;line-height:1.8;} a{width: 96px;height:40px;text-align: center;line-height:40px;border: 1px solid #cccccc;.transition();font-size: 14px;display: block;margin:.3rem auto 0; &:hover{color: #fff;} } } .contact5{margin: .3rem 0; h3{text-align: center;margin: .2rem 0 .3rem} ul{overflow: hidden;; li{float: left;width: 49%;height:50px;line-height:50px;border: 1px solid #ccc;margin-bottom: 20px; input{height: 100%; color: #000;padding-left: 2em;background: none;font-size: 14px;width: 100%;} input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; } input:-moz-placeholder, textarea:-moz-placeholder { color: #666; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #666; } } .yanzhengma{position: relative; img{position: absolute;height: 30px;top: 10px;right: 10px;} } .liuyan_content{width: 100%;height: 200px; textarea{line-height:1.8;text-indent: 2em;padding: 10px 0;width: 100%;height: 100%;} } .tijiao{background: @mainColor;border: none; input{color: #fff;padding-left: 0;} } li:nth-of-type(2n){float: right;} } } //产品列表页///////////////////////////////////// .neiye_prodcut{background:#e9e9e9;margin-top: -0.59rem;padding-top: .3rem; ul{overflow: hidden; li{width:23%;margin:1%;float: left;background: #fff; .neiye_pic{height:3rem;padding: .2rem; display: flex;align-items: center;justify-content: center;overflow: hidden; img{align-items: center;.transition();max-width: 100%;max-height: 100%;} } .neiye_pic_txt{height:1.5rem;border-top:1px solid #e9e9e9;padding: .2rem;position: relative; h2{margin-bottom: .1rem;.transition();} p{line-height:1.8;height: 75px;overflow: hidden;} i{display: block;width: .1rem;height: .1rem;position: absolute;right: 0;bottom: 0;background: @mainColor;.transition();} } } li:hover{ .neiye_pic{ img{.scale(1.1);} } .neiye_pic_txt{ h2{color: @mainColor;} i{width: 100%;height: 1px;} } } } } @media (max-width: 1300px) { .neiye_prodcut ul li .neiye_pic_txt{height: 2rem; p{height: 50px;} } } @media (max-width: 1024px) { .neiye_prodcut ul li{width: 31.3%;} } @media (max-width: 768px) { .neiye_prodcut ul li{width: 48%; .neiye_pic_txt p{font-size: 12px;height: 40px;} } } //////////////产品详情页/////////////////////////////////// .product_info1_left{margin-top: 40px;width: 45%;float: left;overflow: hidden;; .product_info1_left_t{height:520px;border: 1px solid #bfbfbf;display: flex;align-items: center;justify-content:center;box-sizing: border-box;;padding: 10px;overflow: hidden;; .gallery-top{height: 100%;width: 100%; .swiper-slide{height: 100%;display: flex;align-items: center;justify-content:center; img{max-width: 100%;max-height: 100%;} } .arrow-left {background: url(../images/index_tab_l.png) no-repeat left top;position: absolute;left: 10px;top: 50%;margin-top: -25px;width: 28px;height: 51px;z-index: 10; } .arrow-right {background: url(../images/index_tab_r.png) no-repeat left bottom;position: absolute;right: 10px;top: 50%;margin-top: -25px;width: 28px;height: 51px;z-index: 10; } } } .product_info1_left_b{margin-top: 30px;position: relative; .gallery-thumbs{width: e("calc(100% - 100px)");margin: 0 auto; .swiper-slide{border: 1px solid #bfbfbf;height:100px;display: flex;align-items: center;justify-content:center;cursor: pointer; img{max-width: 100%;max-height: 100%;} } .active-nav{border: 1px solid @mainColor;} } .arrow-left{position: absolute;left:0;top: 0;width:30px;height: 100%;z-index: 10;background: #ccc url(../images/feel3.png) no-repeat center; } .arrow-right {position: absolute;right: 0;top: 0;;width:30px;height: 100%;z-index: 10;background: #ccc url(../images/feel4.png) no-repeat center; } } } .product_info1_right{width: 45%;float: right;padding-top: 60px; h1{letter-spacing: 4px;color: @mainColor;} article{margin: 40px 0 0; p{line-height: 2;} .p1{background: url("../images/pi_i6.jpg")no-repeat left center;padding-left: 40px;} .p2{background: url("../images/pi_i7.jpg")no-repeat left center;padding-left: 40px;} } } @media (max-width: 1200px) { .product_info1_left{width: 55%;} .product_info1_right{width: 40%;} } @media (max-width:900px) { .product_info1_left{margin-top: 60px;} } @media (max-width: 800px) { .product_info1_left{width: 100%;} .product_info1_right{width: 100%;} } @media (max-width: 640px) { .product_info1_right{padding: 20px 0; h1{letter-spacing: 0;} } .product_info1_right article{margin-top: 20px;} .product_info1_left .product_info1_left_b .ul2 li{height: 70px;} .product_info1_left .product_info1_left_b .slick-arrow{top: 12px;} .product_info1_left .product_info1_left_t{height: 4rem;} .product_info1_left .product_info1_left_b .gallery-thumbs .swiper-slide{height: 50px;} } @media (max-width: 400px) { .product_info1_left .product_info1_left_t{height:3rem;} } .product_info2{margin: 30px 0 10px;padding-top: 30px; .product_info2_dh{width:160px;height: 50px;line-height: 50px;color: #fff;background: @mainColor;text-align: center; h3{font-size: 18px;} } article{min-height: 300px;border: 1px solid #bfbfbf;padding:20px;margin: 20px 0; span{font-size: inherit;} img{max-width: 100%;} table{width: 100%!important; td{border: 1px solid #ccc;padding: 5px; text-align: center;} } } } @media (max-width: 640px) { .product_info2{margin:0;} .product_info2 .product_info2_dh{height: 40px;line-height: 40px;width: 100%;text-align: left;padding-left: 20px;} .product_info2 article{min-height:0;} } .product_info_fanhui{margin-top: 20px; width: 70px;height: 26px;color: #fff;background: @mainColor;text-align: center;line-height: 26px;margin-bottom: 30px;cursor: pointer;} // 发展内页////////////////////////////////////////// .development_list{padding-left:2rem;padding-bottom: 1rem; li{padding: 40px 75px 30px 66px;border-left: 1px solid @mainColor;position: relative; .d_year{position: absolute;left: -150px;top: 31px;font-size: 40px;color: @mainColor;} .i_circle{display: block;width: 11px;height: 11px;background: #fff url(../images/icon_02.png) no-repeat;position: absolute;left: -6px;top:50px;} .i_jiantou{display: block;width: 16px;height: 7px;background: url(../images/icon_04.png) no-repeat;position: absolute;left: -9px;top: -2px; } .d_detail{font-size: 16px;color: #000000;line-height: 32px;} } } @media (max-width: 1200px) { .development_list{padding-left: 3rem;} } @media (max-width: 900px) { .development_list li{padding: 20px 17px 15px 30px; .i_circle{top: 31px;} .d_year{top: 10px;} } } @media (max-width: 600px) { .development_list{padding-left:2rem; li{ .d_year{left: -1.8rem;} } } } .picture{ float:left; width:193px; height:173px; overflow:hidden; display:inline;position: relative; .picture1 a{ width: 193px; height:173px; text-align:center; vertical-align:middle;background-color:#FFFFFF; border:1px solid #cccccc; overflow:hidden; display:table-cell; *display: block; img{ vertical-align:middle; border:0;} } .picture2{line-height: 20px; height:20px; text-align:center; } } .title{background:#eee; padding-left:10px;margin-bottom: 20px; span,a{color: #333;} } ///ntitle3的样式////////////////////// .title3{margin-bottom: 20px; span,a{color: #333;} } .title3_top{ h2{font-size: 24px;color: #000;} p{margin-top: 5px;} .title_tel{background: url("../images/title_tel.png")no-repeat left center; float: right;padding-left: 50px; span{font-size:24px;font-style: italic;} } } /////////////////////////////////////////////////////////////////////////////// .container_left4{width: 220px;float: left;; h3{font-size: 16px; height: 60px; line-height: 60px; background: #666666; padding: 0 20px; color: #FFF; text-shadow: #333 2px 2px 2px;} .class_nr{ ul{ li{margin-bottom: 1px; a{ display: block;background: #EEE;padding: 10px 20px;.transition();} } li:hover a{background:@qt6;color: #fff;} .cura{background:@qt6;color: #fff;} } } } .neiye_banner{height: 300px;max-width: 100%;display: none; li{height: 100%;} } .container_left5{width: 230px;margin-bottom: 30px;float: left; h3{} .class_nr{ ul{margin-top: 15px;margin-bottom: 27px; li{ a{display: block;border-bottom: 1px solid #e1e1e1;line-height: 41px;margin-bottom: 3px; margin-top: 0;padding-left:46px; &::before{content: ">";width: 5px;height: 8px; float: left;display:block;margin-left: -16px;} } } li:hover{background:@qt6;color: #fff; a{color: #fff;} } .cura{background:@qt6;color: #fff; a{color: #fff;} } } } .sider_fenlei{margin-top: 16px; li{display: inline-block;margin-right: 3px;margin-top: 12px; a{color: #a3a3a3;display: block; text-transform: uppercase;border: 1px solid #e2e2e2; padding: 10px 22px;.transition();} } li:hover a{background: @qt6;color: #fff;} } .sider_news{margin-top: 27px;margin-bottom: 28px; li{color: #999;margin-bottom: 16px; a{display: block;color: #37474f;border-bottom: 1px solid #e1e1e1;padding-bottom: 17px;margin-top: 12px;.transition(); time{color: #999;line-height: 20px;margin-bottom: 5px;font-size: 12px;} } } li:hover a{color: @qt6;} } } .com_sider{position: relative;padding-bottom: 10px;font-size: 18px; &::after{content: "";width: 35px;height: 2px;background: #d68b37; position: absolute; bottom: -1px;left: 0;} } .neiye_article{line-height: 24px;padding: 30px; h2{font-size: 18px;margin-bottom: 10px; small{font-size: 12px;color: #999;} } } //sidebar3横向内页导航样式 .sidebar3{ .class_nr{padding-bottom:5px;border-bottom: 1px solid #ccc; ul{background: #f7f7f7; height: 68px;width:@b_w; li{display: inline-block;line-height: 68px;width: 145px;text-align: center;.transition(); &:hover{background: @qt6; a{color: #fff;} } } .cura{background: @qt6;display: block;color: #fff;} } } } .search{ form{margin: 7px 0 0 0;} .text{color: #a0a0a0;background: #dadada;padding: 0;margin: 0;width: 189px!important;height: 22px!important;border: none;color: #a0a0a0;text-indent: 5px;} .anan{background: #020202;margin: 0;padding: 0;width: 44px!important;height: 22px!important;color: #fff;border: none;} } .message{width: 279px;border-bottom: 1px dashed #929292;padding: 11px 0; .message_title{min-height: 17px; line-height: 17px;color: #666666; img{float: left;margin-right: 6px;} } .message_text{margin-top: 10px;line-height: 23px;color: #666666; img{float: left;margin-right: 6px;margin-top: 2px;} } } .newsList { width:205px; margin:0 auto; padding-top:5px; .newsList_li { background: url('../images/n.jpg') no-repeat 10px 50%; border-bottom: 1px dashed #7d7d7d; line-height:33px; height: 33px; padding-left: 20px; a{color: #00315a;} } } .productsList { width:205px; margin:0 auto; padding-top:5px; li{background: url('../images/f.jpg') no-repeat 10px 50%; border-bottom: 1px dashed #7d7d7d; line-height:33px; height: 33px; padding-left: 30px; a{color: #00315a;} } } /////////////////////////////////////banner样式/////////////////////////////////////// .banner{width: 100%;text-align: center; .banner_img{.scale(1.4);.transition(3s);transition-timing-function:cubic-bezier(0,1,.33,1.04)} .swiper-slide{overflow: hidden; .video-wrapper{height: 0;padding-bottom:43%;overflow: hidden;; video{width: 100%;object-fit: cover;} } .banner_img{font-size: 0; img{width: 100%;} } .hometext {position: absolute;z-index: 2;width: 100%;height: 100%;top: 0;right: 0;padding-top:7%; .splitbox {overflow: hidden;text-align: right; h6{font-size:32px;font-weight: 700;text-transform: uppercase;-webkit-transition: .5s;transition: .5s;-webkit-transition-timing-function: var(--ease-out-a);transition-timing-function: var(--ease-out-a);-webkit-transform: translateY(100%);transform: translateY(100%);-webkit-transition-delay: .1s;transition-delay: .3s;color: #fff;} img{-webkit-transition: .5s;transition: .5s;-webkit-transition-timing-function: var(--ease-out-a);transition-timing-function: var(--ease-out-a);-webkit-transform: translateY(200%);transform: translateY(200%);-webkit-transition-delay: .5s;transition-delay: .5s;margin:70px 0;} } i{width: 0;height: 8px;display: block;background: #fff;float: right;position: relative;z-index: 3;} } .banner2_img2{ &:before{content: '';background: url("../images/banner2_img2.png")no-repeat;width: 1056px;height: 100%;position: absolute;top: 0;right: -100%;.transition();} } } .swiper-slide-active{ .banner_img{.scale(1);} .hometext { .splitbox{ h6,img{transform: translateY(0);} } i{width: 300px;.transition(2s);} } .banner2_img2:before{right: 0;} } .swiper-pagination{bottom:70px;left:50%;text-align: left;margin-left: -39.4%; span{width: 14px;height: 14px;.border-radius(7px);background: #fff;opacity:1;} .swiper-pagination-bullet-active{width: 68px;} } .swiper-button-prev{width: 76px; height: 76px; z-index: 33;background:url("../images/i_i1.png")no-repeat center;left:50%;margin-left:29%;top: auto;bottom: 70px;} .swiper-button-next{width: 76px; height: 76px; background:url("../images/i_i2.png")no-repeat center;left:50%;margin-left:35%;top: auto;bottom: 70px;} } @media (max-width: 1400px) { .banner .swiper-slide-active .banner2_img2:before{right: -20%;} .banner .swiper-slide .hometext .splitbox h6{font-size: 24px;} .banner .swiper-slide .hometext .splitbox img{width: 50%;margin: .4rem 0;} } @media (max-width: 1200px) { .banner .swiper-button-prev{width: 40px;height: 40px;bottom: 30px;background-size: 100%;} .banner .swiper-button-next{width: 40px;height: 40px;bottom: 30px;background-size: 100%;} .banner .swiper-pagination{bottom:30px;} } @media (max-width: 900px) { .banner{margin-top: 50px; } .banner .swiper-slide-active .banner2_img2:before{right: -80%;} } @media (max-width: 640px) { .banner .swiper-slide-active .banner2_img2:before{right: -40%;width: 100%;} .banner .swiper-slide-active .hometext i{height: 2px;} .swiper-button-next, .swiper-button-prev{display: none;} .banner .swiper-slide .hometext .splitbox h6{font-size: 18px;} .banner .swiper-slide .hometext .splitbox img{width: 70%;margin: .3rem 0;} .banner .swiper-pagination span{height: 5px;width: 5px;} .banner .swiper-pagination .swiper-pagination-bullet-active{width: 30px;} .banner .swiper-pagination{bottom:10px;text-align: center;left: 0;margin-left: 0; } .banner .swiper-slide-active .hometext i{width:30%;} } @media (max-width:420px ) { .banner .swiper-slide .hometext .splitbox h6{font-size:14px;} } /////////////////////////////////////banner样式/////////////////////////////////////// //.banner{max-width: 1920px;position: relative;overflow: hidden;margin-top: 0!important;height:800px; // .swiper-slide{height:100%;overflow: hidden; // .banner_img{ position: absolute;z-index: -1;top: 0;left: 0%;width: 100%;height: 100%; .scale(1.05); } // .banner1{background: url("../images/banner1.jpg")center center;background-size: cover;} // .banner2{background: url("../images/banner2.jpg")center center;background-size: cover;} // .banner3{background: url("../images/banner3.jpg")center center;background-size: cover;} // .hometext {position: relative;z-index: 2;padding-top:11%;height: 100%; // .splitbox {overflow: hidden;text-align: right; // h6{font-size:32px;font-weight: 700;text-transform: uppercase;-webkit-transition: .5s;transition: .5s;-webkit-transition-timing-function: var(--ease-out-a);transition-timing-function: var(--ease-out-a);-webkit-transform: translateY(100%);transform: translateY(100%);-webkit-transition-delay: .1s;transition-delay: .3s;color: #fff;} // p{font-size: 18px;color: white;font-weight: 700;margin-top: 10px;-webkit-transition: .5s;transition: .5s;-webkit-transition-timing-function: var(--ease-out-a);transition-timing-function: var(--ease-out-a);-webkit-transform: translateY(100%);transform: translateY(100%);-webkit-transition-delay: .5s;transition-delay: .5s;line-height: 1.8;} // img{-webkit-transition: .5s;transition: .5s;-webkit-transition-timing-function: var(--ease-out-a);transition-timing-function: var(--ease-out-a);-webkit-transform: translateY(200%);transform: translateY(200%);-webkit-transition-delay: .5s;transition-delay: .5s;margin:70px 0;} // } // i{width: 0;height: 8px;display: block;background: #fff;float: right;position: relative;z-index: 3;} // } // .banner2_img2{ // &:before{content: '';background: url("../images/banner2_img2.png")no-repeat;width: 1056px;height: 100%;position: absolute;top: 0;right: -100%;.transition();} // } // .active.hometext{ // h6,p,img{transform: translateY(0);} // i{width: 300px;.transition(1.5s);} // } // // .active.banner2_img2{ // &:before{right: 0;} // } // } // //.swiper-slide-active{ // // .banner_img{.scale(1)} // //} // // // // .swiper-pagination-bullet-active{background: @mainColor;} // .swiper-button-prev1{height: 42px; width: 42px; z-index: 33;background:url("../images/i_i31.png")no-repeat center;} // .swiper-button-next1{width: 42px;height: 42px;background:url("../images/i_i32.png")no-repeat center;} //} // //@media (max-width:1200px ) { // .banner{height:600px;} //} //@media (max-width:768px ) { // .banner{height:400px;} // .banner .swiper-slide .hometext {width:100%;margin-top: 30%; // .splitbox{ // h6{font-size: 30px;} // p{font-size: 14px;} // } // } //} //@media (max-width: 450px) { // .banner{height: 300px;} // .banner .swiper-slide .hometext {margin-top:22%; // .splitbox{ // h6{font-size: 30px;} // p{font-size:12px;line-height: 1.6;} // } // } //} .newsList1{line-height: 30px; li{border-bottom: 1px dotted #deabab; a{background:url('../images/news_tb2.jpg')no-repeat center left;text-indent: 10px;display: block;} } } #Mleft{float: left;} #Mright{margin:0 0px 0 auto;width:949px;float: right;min-height: 300px;} .container_left{width: 220px;float: left;; .class_neiye{background:@hoverColor;padding-top: 5px;margin-bottom: 20px; h3{text-align:center;color: #fff;font-size: 24px;padding:10px 0 10px 0;border-bottom: 1px solid #fff; -webkit-font-smoothing: antialiased; /*chrome、safari*/ -moz-osx-font-smoothing: grayscale;/*firefox*/ } .class_nr{padding: 5px 5px 15px 5px; li{line-height: 40px;text-align: center; .transition(all .7s); a{color: #fff;font-size: 16px;} &:hover{background:@thirdColor;border-bottom: none;padding-left: 5px;} } img{border-top: 1px solid #fff;padding-top: 10px;} h4{text-align: center;color: #fff;font-size: 20px;margin: 10px 0 10px 0;} .contact_p{color: #fff;text-align: center;font-size: 14px;} } } } .picturea{ float:left; width:270px; height:270px; overflow:hidden; padding:0px; margin-left:28px;_width:197px;} .picture1a{ width:270px; height:210px; line-height: 210px; text-align:center; vertical-align:middle; border:1px solid #ccc; overflow:hidden; display:table-cell; /* position:relative; */ *display: block; _font-size:130px; } .picture2a{width:270px; height:20px; text-align:center; margin-top:5px;line-height: 25px;} .picture1a img{ vertical-align:middle; border:0;} /********消除浮动
*********/ .clear2{background: none;border: 0;clear: both;display: block;float: none;font-size: 0;margin: 0;padding: 0;overflow: hidden;visibility: hidden;width: 0;height: 0; &:after {content: ".";display:block;height: 0;clear: both;visibility:hidden;} } .clear3{overflow:hidden;_zoom:1;} /*--------------------------------------------------------全局结束--------------------------------- /********************************************************内页******************************************************************/ .well{background: #FCFCFC;} .news_list{margin: 0 auto; li{clear: both;padding: 20px;height: 150px; border-bottom: 1px dashed @mainColor; .news-li-img{width:200px;height: 150px;overflow: hidden; float: left;margin-right: 20px; img{width: 100%;} } header{margin-bottom: 10px; .a3{.slh;height: 50px;line-height: 50px;font-size: 24px;.transition(.4s);display: block;} span{display: block;color: #999;.transition(.4s)} } .a2{line-height: 24px;text-indent: 2em;color: #656565;.transition(.4s)} } li:hover{ span,a{color: @qt5;} } } .news_list4{margin: 0 auto; li{clear: both;padding-top: 20px;height: 100px; border-bottom: 1px dashed #b3b3b3; header{ .a3{.slh;height: 30px;line-height:30px;.transition(.4s);display: block; i{color: @qt6;font-size: 18px;margin: 0 5px;} span{display: block;color: #999;float: right;} } } .a2{line-height: 24px;color: #656565;.transition(.4s);padding-left: 20px;display: block;; span{color: @qt6;} } } li:hover{ .a3{text-indent:15px;color: @qt6;} } } .news_job{margin: 0 auto; li{ line-height: 30px; border-bottom: 1px dashed @mainColor; overflow: hidden;} } .table-bordered{border-collapse:collapse; td{border: 1px solid #ccc;} } .news_list5{margin-right: -20px; li{width:286px;height: 338px;box-sizing: border-box;padding:12px;float: left;;border: 1px solid #e5e5e5;position: relative;margin-right: 19px;margin-bottom: 46px; time{font-size: 12px;color: #666666;} h2{height:50px;overflow: hidden;line-height:24px;font-size: 16px;margin-top:10px;} .news-li-img{height: 148px;width: 262px;overflow: hidden; display: -webkit-flex;display: flex;justify-content: center;-webkit-box-align: center;align-items: center; img{width: 100%;} } p{margin-top: 14px;color: #666666;line-height: 20px;text-indent: 2em;} a{position: absolute;width: 97px;height: 23px;bottom:-12px;left: 94px;.border-radius(6px);text-align: center;line-height: 23px;background: @qt6;color: #fff;} } } /////////////////////////////////////////人才招聘///////////////////////////////// .news-btn-1 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;} .news-btn-1:before {.transition(all .6s);content: '';width: 0;height: 0;.rotate(360deg);border-style: solid;border-width: 0 0 0 0;border-color:@qt6 transparent transparent transparent;position: absolute;top: 0;left: 0;z-index: -1;} .news-btn-1:hover:before {border-width: 1330px 1330px 0 0;} .neiye_news_list{padding-left: 20px;margin-right: -30px;padding-top: 20px; li{width: 180px;float: left;padding: 5px 10px 10px 10px;height: 220px;border: 1px solid #ccc;margin-right: 30px;margin-bottom: 20px;text-align: center; img{border:1px solid #ccc; vertical-align:middle;} .a1{text-align: center;margin-top: 10px;border-bottom: 1px solid #ccc;padding-bottom: 3px; a:hover{color: #00c9ff;} } } } /***********************sidebar（二级下拉）****************************************/ .sidebar2ji_fenlei{float: left;width: 248px;background:#e5e5e5; h3{height: 70px;line-height: 70px;font-size: 30px;text-indent: 25px;} .fenlei-dh{width:248px;height: 65px;font-size: 24px;color: #fff;text-align: center;line-height: 66px;} .fenlei-nr{padding:0 7px; ul{ .li1{ .a1{background:rgba(255,255,255,.5);height: 45px;display: block;line-height: 45px;text-indent:15px;font-size: 15px;margin-bottom: 5px;cursor: pointer; i{float: right;margin-right: 15px; .transition(.4s); } } ul{ .li2{ a{background:rgba(255,255,255,.5);height:39px;display: block;line-height:39px;text-indent:15px;font-size: 14px;margin-bottom: 2px;} } .li2:hover{ a{color: @mainColor;} } } } } } } .xuanzhaun{transform: rotate(90deg);} /***************************************************************/ /********公司简历**********/ .article{ background-color: #fff; margin-bottom: 20px; min-height: 20px; overflow:hidden; img{max-width:100%;} .well{} .com_con{padding:10px;line-height: 25px;border: 1px solid #d2d2d2;border-top: none;; } .content{margin: 25px;} } .page{clear: both;margin-top: 10px;text-align: center;font-size: 12px;letter-spacing: 0px;padding-bottom:30px; #page_num{width: 50px;} a{display:inline-block;height:22px;line-height:20px;border:1px solid #DBDBDB;padding:0 2px 0;color:#000; &:hover{ background:#404040;border:none;color:#fff;;height:18px;line-height:18px; } } select{vertical-align: top;height:22px;} } #page_num{border: 1px solid #ccc;} //详情页上一条和下一条 .pn{ font-size: 14px; margin:25px 0; position: relative; li{margin-bottom: .1rem; a{display: block;text-decoration: none;color:#383737; .slh(); &:hover{color:@mainColor;} i{float: left;} span{bottom: 1px;margin: 0 10px;.slh;display: block;} } } } /********留言页面**********/ .order{height:430px;padding: 50px;width: 610px; li{float: left;margin:0 20px 20px 0; p{font-size: 16px;line-height: 30px;} input{border: 1px solid #ccc;.border-radius(2px);height: 20px;line-height: 20px;padding: 10px 5px;} textarea{width:580px;border: 1px solid #ccc;.border-radius(2px);padding: 10px 5px;} img{height:39px;float: left;margin-left: 10px;} #submit{height: 39px;width: 200px;.border-radius(3px);background: @mainColor;color: #fff;font-size: 16px;border: none;float: right;margin-right:20px;cursor: pointer;} } } .order1{height:430px;padding:30px; li{float: left;margin:0 0 15px 0;width: 100%; input{width: 100%; border:1px solid #e4eaec;.border-radius(2px);height:30px;line-height:30px;padding: 10px 5px;box-sizing: border-box;} textarea{width:100%;border: 1px solid #e4eaec;.border-radius(2px);padding: 10px 5px;box-sizing: border-box;} #captcha{width:86%;} img{height:30px;float: right;margin-left: 10px;} #submit{height: 30px;line-height:11px; width:100%;.border-radius(3px);background: @qt6;color: #fff;font-size: 16px;border: none;cursor: pointer;} input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; } input:-moz-placeholder, textarea:-moz-placeholder { color: #666; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #666; } } } /********联系我们页面**********/ .contact1_txt{padding: 20px; li{line-height: 30px;font-size: 16px; p{display: inline-block;} } } .contact1_txt01{width: 340px;float: right;;margin-top: 20px; h4{font-size: 30px;font-weight: 500;margin-bottom: 10px; span{font-size: 18px;} } h1{font-size: 16px;margin-bottom: 10px;} li{line-height:40px;padding-left: 40px; p{font-size: 14px;} } .icon_tel{background: url("../image/icon_tel.png")no-repeat left 11px;} .icon_add{background: url("../image/icon_add.png")no-repeat left 11px;} .icon_qq{background: url("../image/icon_QQ.png")no-repeat left 11px;} } .con_message{width: 780px;float: left; form{margin-bottom: 30px;overflow: hidden;; ul{ li{width: 250px;float: left;line-height: 40px;border: 1px solid #666;margin: 8px 8px 0 0; input{background: none;text-indent: 1em;width: 100%;} input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #000; } input:-moz-placeholder, textarea:-moz-placeholder { color: #000; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #000; } img{height: 40px;} } .yanzhengma{width: 159px;height: 40px;} .yanzhengma1{border: none;width: auto;;margin-right: 0; img{height: 40px;} } .liuyan_content{width:e("calc(100% - 2px)");background:none; textarea{background: none;width: 100%;text-indent: 1em;} } .tijiao{width: 100%;text-align: center;background: @mainColor; input{color: #fff;} } } } } #route { width: 100%; height: 60px; margin-top: 30px; border: 1px solid #dcdcdc; background: #fff; box-sizing: border-box; border-bottom: none; span { width: 33%; height: 60px; display: block; float: left; text-align: center; line-height: 60px; cursor: pointer; } } #route .hover { background:@qt6; color: #000; } /********新闻中心**********/ .table{ margin: 10px auto; width: 98%; tr{ td{ &:hover{} } } } /*带图片样式*/ .news-img{ ul{ margin: 0; li{ _width: 100px; _float:left; _margin: 0 9px; .thumbnail{ img{ _float:left; } .transition(all .3s); .caption{ _float: left; h3{.slh; text-align: left; margin-bottom: 10px; } } } &:hover{ .thumbnail{ margin-left: 20px; -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); } } } } } /********人才招聘**********/ #Jobs-table{ width: 95%; margin: 0 auto; thead{ tr{ th{ } } } tbody{ tr{ &:hover{ td{ background:transparent; } } td{ &:hover{ background:transparent; } } } } } .dowebok{ margin: .4rem 0;background: none!important; li {width:300px;display: inline-block;margin:0 20px;vertical-align: bottom;text-align: center; border: 1px solid #ccc;padding: 5px;height: 300px;position: relative;; img{max-width: 100%!important;max-height: 100%;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;} } } /*-------内页左分类--------*/ .neiye {background: #fff;margin-top: 20px;width:@b_w;height:395px;margin-bottom:15px;} .neiye-z { float:left; width:522px; height:395px; margin-right:35px; } .neiye-zimg { width:500px; text-align:center; vertical-align:middle; background:#fff; overflow:hidden; display:table-cell; /* position:relative; */ *display: block; border:solid 1px #ccc; padding:10px; } .neiye-zimg img{ vertical-align:middle; border:0; } .neiye-y { float:left; width:440px; height:381px; padding-top:14px; } .neiye-yt { float:left; width:445px; height:56px; border-bottom:dashed 1px #ccc; line-height:56px; font-size:18px; color:#000; overflow:hidden; } .neiye-yk { float:left; width:445px; height:200px; padding-top:15px; line-height:46px; font-size:14px; color:#000; } .neiye-yd { float:left; width:445px; height:70px; } .neiye-yx { float:left; width:445px; height:40px; } .neiyex { float:left; width:@b_w; } .btn-primary{background: @thirdColor;display: block;width: 100px;height: 40px;line-height: 40px;text-align: center; color: #fff; &:hover{color: #fff;} } /********用户管理**********/ .vip-user{ background: url('../image/login_bg_2.jpg'); } .div_Title{text-align: center;} .xxsmys { width: 100%; height: 30px; line-height: 30px; background-color: #ececec; } /*---鼠标悬浮显示二维码----*/ //.icon-wap{background: url("../images/icon-wei.jpg")no-repeat;width: 22px;height: 24px;display: block;position: relative;cursor: pointer; // .icon-wei{width: 150px;height:0;position: absolute;top:0px;left: 0;z-index: 1111;background: url("../images/2weima.jpg")no-repeat;background-size: 100%;opacity: 0; filter: alpha(opacity=0);.transition(.4s);} // &:hover{ // .icon-wei{opacity:1; filter: alpha(opacity=100);top:30px;height: 150px;} // } //} input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #fff; } input:-moz-placeholder, textarea:-moz-placeholder { color: #fff; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #fff; } .transition-bar { position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #fff; -webkit-animation:transition-bar .5s ease-in; -o-animation:transition-bar .5s ease-in; animation:transition-bar .5s ease-in; } input[type="submit"],input[type="password"]{-webkit-appearance:none;appearance:none;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:0;} @keyframes transition-bar { 0%{width: 0;left:0;} 50%{width: 100%;left:0;} 100%{width: 0%;left:100%; } } .fk_more{width: 270px;height: 40px;text-align: center;background: #fff;display: block; vertical-align: top;.transition(); span{display: inline-block;letter-spacing:5px;color:#ef4136;font-size: 14px;.transition(); &:after{background:url("../images/icon_jiantou.png")no-repeat 0 7px;width:25px;height:25px;display: inline-block;background-size: 100% 100%;content: ''; } } &:hover{background: #000; span{color: #fff; &:after{background:url("../images/icon_jiantou_h.png")no-repeat 0 7px;width:25px;height:25px;background-size: 100% 100%;} } } } .fabout{margin:.5rem 0;overflow: hidden; .about_left{float: left;width: 34%; h3{color:rgb(216, 13, 13);font-size: 36px;} p{font-weight: bold;margin-bottom: 10px;font-size: 24px;} } .about_right{background-image: none,linear-gradient(0deg, rgba(182, 2, 2, 1) 0.8771929824561403%, rgba(205, 32, 22, 0.9) 100.0%);width: 64%;padding:30px 40px;float: right; h3{color: #fff;margin-bottom: 20px;font-weight: bold;} p{color: #fff;line-height:2} } .about_num{background-image: none,linear-gradient(0deg, rgba(182, 2, 2, 1) 0.8771929824561403%, rgba(205, 32, 22, 0.9) 100.0%);padding: 30px 0 30px;margin: 30px 0 10px; ul{overflow: hidden;; li{width: 25%;float:left;color: #fff;text-align: center; h3{font-size: 50px;margin-bottom: 10px;} p{font-size: 14px;} } } } } @media (max-width:800px) { .fabout{margin: .3rem 0 .2rem; .about_left{width: 100%;margin-bottom: 10px; h3{font-size: 22px;} p{font-size:16px;} } .about_right{width: 100%;padding:5%; .fk_more{margin: 20px auto;width:180px;} } .about_num{padding: 10px 0 10px;margin: 10px 0 10px; ul li{width: 50%;margin-bottom: 20px; h3{font-size: 26px;margin-bottom: 0;} p{font-size: 16px;} } } } } //图片点击放大取消和自己的冲突样式 #spotlight{ .footer{margin: 0;background: none;} .title{background: none;padding-left: 0;margin: 0;} .header{ div{margin-right:10px;} } } .footer{background: #488dc3;padding:30px 0;overflow: hidden; .footer1{background: url("../images/f_i1.png")no-repeat left center; border-bottom: 1px solid #2973b1;padding-left: 170px;height:50px;line-height:58px;border-bottom: 1px solid rgba(255,255,255,.4); a{color:#bfe0d3;margin-right:15px;} } .footer2{padding: 26px 0; ul{width: e("calc(100% - 200px)");margin-left:0;float: left;max-width: 1200px; h3{color: #fff;margin-bottom: 10px;font-size: 20px;} li{color: #fff;line-height: 2;width: 33%;float: left;; a{color: #fff;} } } .ewm{float: right;padding: 4px;margin-top: 20px;width: 122px; img{width: 100%;} p{text-align: center;color: #fff;margin-top: 5px;} } } } .ffff{background: #488dc3;padding: 20px 0;color: #fff;text-align: center; .f_right{float: right;} } @media (max-width:900px) { .footer .footer2 ul{width: 100%;} .footer .footer2 .ewm{display: none;} .footer .footer2 .footer2_logo{display: none;} } @media (max-width:700px) { .footer .footer2 ul li{width:48%;} .footer .footer2 ul li:nth-of-type(2){float: right;} .footer .footer2 ul li:nth-of-type(3){display: none;} } @media (max-width:450px) { .footer{padding: .2rem 0 0; .footer2 ul li{width:100%;} } } /////////////////////////////////////////人才招聘///////////////////////////////// .job1{background: #e5e5e5;padding: .5rem 0; header{ h3{font-size: 28px;font-weight: bold;} h5{font-size:16px;} } article{padding-left: 60px;margin-top:20px; p{font-size: 16px;margin-bottom: 10px; strong{font-size: inherit;font-weight: bold;} } } figure{padding:20px 60px;background: #f3f3f3;margin-top: 10px;} .job1_2{margin-top:.6rem; figcaption{margin-bottom:30px; h4{font-size: 20px;font-weight: bold;} p{font-size: 16px;line-height: 1.7;} strong{font-weight: bold;font-size: inherit;} } } } @media (max-width:1200px ) { .job1 header h3{font-size: 24px;} } @media (max-width:900px ) { .job1 header h3{font-size: 20px;} .job1 .job1_2 figcaption h4{font-size: 18px;} } @media (max-width:640px ) { .job1 article{padding:0 20px;} .job1 figure{padding:20px;} } .btn-0 {position: relative;overflow: hidden;.transition(all .6s);display: block;z-index: 1;} .btn-0:before { background:@mainColor;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:@mainColor transparent transparent transparent;position: absolute;top: 0;left: 0;z-index: -1;} .btn-1:hover:before {border-width: 330px 330px 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 @mainColor;.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 @mainColor 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 @mainColor;.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 @mainColor 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 .6s);display: block;z-index: 1;} .btn-4:before, .btn-4:after {position: absolute;top: 50%;content: '';width: 20px;height: 20px;background: @mainColor;.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 @mainColor 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 @mainColor;} .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:@mainColor;.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;z-index: 1; &::after{position: absolute; content: "";width: 100%;height: 100%;left: 0;top: 0;background: @mainColor;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-9-1{position: relative;z-index: 1; &::after{position: absolute; content: "";width: 100%;height: 100%;left: 0;top: 0;background: @mainColor;transition: transform .4s cubic-bezier(.4,0,.2,1);transform-origin:left bottom;transform: scaleY(0);z-index: -1;} } .btn-9-1:hover::after{transform: scaleY(1); transform-origin: right top;} .btn-10{position: relative;} .btn-10::before{content: ""; display: block; width: 100%; height: 100%; background:@mainColor; position: absolute; left: 0; top: 0; z-index: 3; transform: translateY(-100%);animation: 1.4s ease;animation-fill-mode: both; backface-visibility: visible !important;animation-name: fadedown;} .animate-delay-1::before{animation-delay:.8s;} @keyframes fadedown { from { transform: translateY(-100%); } 60% { transform: translateY(0); } to { transform: translateY(100%);} } //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 @mainColor;.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 @mainColor 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 @mainColor 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: @mainColor 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 @mainColor 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 @mainColor;} .btn-span-2:before, .btn-span-2:after {border-color:@mainColor;} .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: @mainColor 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 @mainColor transparent;} .btn-span-2span:before, .btn-span-2span:after {border-color: @mainColor;} .btn-span-2:hover:before {border-width: 30px 62.5px;} .btn-span-2:hover:after {border-width: 30px 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:after {content: ''; position: absolute;display: block;width: 0;height: 0;.border-radius(50%);background: @mainColor;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:after {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: @mainColor;.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(@mainColor,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(@mainColor,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:@mainColor;} .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:@mainColor;} .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:@mainColor;} .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标签 @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(@mainColor,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: @mainColor;.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: @mainColor;.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: @mainColor;.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;} .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:@mainColor;.transition(.4s); } .btn-span-11::after{content: '';position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1;.transition(.5s); background:@mainColor;} .btn-span-11:hover::before{.rotate(-45deg);background-color: fade(@mainColor,50%);} .btn-span-11:hover::after{.rotate(45deg);background-color:fade(@mainColor,50%);} //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:@mainColor;.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 fade(@mainColor,50%); background:@mainColor} .btn-span-12:hover::before{-webkit-transform: rotateX(60deg) translate(0px,40px);transform: rotateX(60deg) translate(0px,40px) ;background:fade(@mainColor,50%);} .btn-span-12:hover::after{-webkit-transform: rotateX(-60deg) translate(0px,-40px) ;transform: rotateX(-60deg) translate(0px,-40px);background:fade(@mainColor,50%);} //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: fade(@mainColor,100%);;.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 fade(@mainColor,100%); background: fade(@mainColor,100%);filter: alpha(opacity=0);opacity: 0;-webkit-transform: scale(0.5,0.5);transform: scale(0.5,0.5);} //btn-span-13-1标签 .btn-span-13-1{.transition(.5s);position: relative;} .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: fade(@mainColor,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: fade(@mainColor,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: fade(@mainColor,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: fade(@mainColor,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: fade(@mainColor,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: fade(@mainColor,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: fade(@mainColor,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: fade(@mainColor,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: fade(@mainColor,50%);.transition(.3s);opacity: 1;transform: translate(0,-105%);border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: fade(@mainColor,25%);background: fade(@mainColor,50%);} .btn-span-15:hover::before{opacity: 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: fade(@mainColor,50%);;.transition(.3s);opacity: 1;transform: translate(-105%,0);border-right-width: 1px;border-right-style: solid;border-right-color: rgba(255,255,255,1);background: fade(@mainColor,50%);} .btn-span-15-1:hover::before{opacity: 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: fade(@mainColor,50%);.transition(.5s);opacity: 1;transform: translate(-13%,-190%) rotate(-30deg);border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: rgba(255,255,255,1);background: fade(@mainColor,50%);} .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: fade(@mainColor,50%);.transition(.5s);opacity: 1;transform: translate(0,-105%);border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: rgba(255,255,255,1);background-color: fade(@mainColor,50%);} .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: fade(@mainColor,50%);.transition(.5s);opacity: 1;transform: translate(-105%,0);border-right-width: 1px;border-right-style: solid;border-right-color: rgba(255,255,255,1);background-color:fade(@mainColor,50%);} .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: fade(@mainColor,50%);;.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: fade(@mainColor,50%);;} .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 @mainColor;} .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: @mainColor;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);margin: 0 auto;} span::before{content:attr(data-hover);position: absolute;top: 100%;.transition(.4s); margin:auto;} } .btn-span-20:hover{ span{transform: translateY(-100%);} } //图片放大效果
.hover-img-1{overflow: hidden; img{.scale(1);.transition(.4s);} &:hover{ img{.scale(1.1);} } }