/*-----------------------------------------------------------*/
/*copyright by åŠ¨åŠ›æ— é™ www.btoe.cn*/
/*邮箱 btoe@btoe.cn*/
/*åˆä½œç”µè¯ 400-0599-360*/
/*版æƒæ‰€æœ‰è¿è€…必究*/
/*-----------------------------------------------------------*/
.sjcTop,
.sjcBottom,
.sjcLeft,
.sjcRight,
.rightWow,
.leftWow,
.bottomWow,
.bg {
-webkit-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
.banner {
position: relative;
width: 100%;
overflow: hidden;
box-sizing: border-box;
height: 780px;
}
.swiper-banner {
height: 100%;
}
.swiper-banner ul li {
position: relative;
}
.swiper-banner ul li .bag {
display: block;
position: absolute;
z-index: 8;
width: 100%;
height: 100%;
}
.swiper-banner ul li .bag img,
.swiper-banner ul li .bag video {
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-banner ul li .text {
display: inline-block;
position: absolute;
z-index: 9;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.swiper-banner ul li .text img {
width: 739px;
height: 393px;
object-fit: cover;
}
.banner .slider-btn-prev {
position: absolute;
z-index: 30;
top: 50%;
left: -81px;
width: 81px;
height: 81px;
text-indent: -9999px;
margin-top: -20px;
background: url(../images/arrowPrev.png) 50% 50% no-repeat;
transition: all 0.5s linear;
cursor: pointer;
display: none;
}
.banner:hover .slider-btn-prev {
left: 10%;
}
.banner .slider-btn-next {
position: absolute;
z-index: 30;
top: 50%;
right: -81px;
width: 81px;
height: 81px;
text-indent: -9999px;
margin-top: -20px;
background: url(../images/arrowNext.png) 50% 50% no-repeat;
transition: all 0.5s linear;
cursor: pointer;
display: none;
}
.banner:hover .slider-btn-next {
right: 10%;
cursor: pointer;
}
.yebl {
width: 1280px;
margin: 0 auto;
}
/* tit-box */
.tit-box {
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.tit-box::after {
content: "";
position: absolute;
left: -70px;
top: 25px;
width: 45px;
height: 15px;
background: url(../images/tL-g.png) no-repeat center;
}
.tit-box::before {
content: "";
position: absolute;
right: -70px;
top: 25px;
width: 45px;
height: 15px;
background: url(../images/tR-g.png) no-repeat center;
}
.tit-box>span:nth-child(1) {
display: inline-block;
border-radius: 50%;
width: 70px;
height: 70px;
text-align: center;
line-height: 60px;
background-color: #ba271e;
}
.tit-box>span:nth-child(1) img {
object-fit: contain;
width: 45px;
height: 70px;
}
.tit-box>span:nth-child(2) {
display: inline-block;
vertical-align: top;
margin-left: 15px;
}
.tit-box>span:nth-child(2) i {
display: block;
}
.tit-box>span:nth-child(2) i:nth-child(1) {
font-size: 36px;
font-weight: bold;
color: #333333;
line-height: 32px;
}
.tit-box>span:nth-child(2) i:nth-child(2) {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 40px;
color: #999999;
}
/* pro-box */
.pro-box {
overflow: hidden;
padding: 70px 0;
background: url(../images/pro-bg.jpg) no-repeat center left;
background-size: 1139px 760px;
position: relative;
}
.slide-pro .hd ul {
display: flex;
justify-content: space-between;
}
.slide-pro .hd ul li {
display: inline-block;
}
.slide-pro .hd a {
position: relative;
z-index: 9;
display: block;
width: 230px;
height: 60px;
background-color: #f1f6fc;
text-align: center;
line-height: 60px;
font-size: 18px;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.slide-pro .hd a::before {
content: "";
position: absolute;
width: 0;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: #ff9103;
transition: all .6s ease-in-out;
-webkit-transition: all .6s ease-in-out;
}
.slide-pro .hd a i {
display: inline-block;
width: 21px;
height: 19px;
margin: 0 5px 0 0;
background: url(../images/pi2.png) no-repeat center;
background-size: contain;
vertical-align: middle;
transition: all .5s;
-webkit-transition: all .5s;
}
.slide-pro .hd li.on a i {
background: url(../images/pi.png) no-repeat center;
}
.slide-pro .hd li.on a {
color: #fff;
}
.slide-pro .hd li.on a::before {
width: 100%;
}
.slide-pro .hd>a:hover {
color: #fff;
}
.slide-pro .hd>a:hover:before {
width: 100%;
}
.slide-pro .hd>a {
display: inline-block;
margin-left: -20px;
}
.pro-bd {
margin: 45px 0 0 0;
}
.pro-bd .bd>div {
height: 726px;
}
.pro-bd .bd>div .top-b .leftl {
width: 630px;
padding-top: 40px;
}
.pro-bd .top-b .leftl a:nth-child(1) {
font-size: 24px;
line-height: 20px;
color: #1e4471;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: bold;
}
.pro-bd .top-b .leftl a:nth-child(1)::after {
content: "";
display: block;
width: 25px;
height: 2px;
margin-top: 24px;
background-color: #1e4471;
}
.pro-bd .top-b .leftl a:nth-child(2) {
font-size: 16px;
line-height: 36px;
color: #666666;
display: block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin: 20px 0 50px;
}
.pro-bd .top-b .leftl a:nth-child(3) {
display: inline-block;
font-size: 14px;
line-height: 20px;
color: #666666;
padding-bottom: 6px;
transition: all .6s ease-in-out;
-webkit-transition: all .6s ease-in-out;
border-bottom: 1px solid #dedede;
}
.pro-bd .top-b .leftl a:nth-child(3):hover {
margin-left: 8px;
}
.pro-bd .top-b .leftl a:nth-child(3) img {
width: 15px;
height: 9px;
object-fit: cover;
margin-left: 6px;
}
.pro-bd .bd>div .top-b .rightr {
vertical-align: top;
border: solid 1px #dedede;
padding: 4px;
position: relative;
z-index: 100;
}
.pro-bd .bd>div .top-b .rightr img {
width: 500px;
height: 375px;
object-fit: cover;
}
.pro-bd .down-b {
margin-top: 59px;
}
.pro-bd .down-b li {
width: 290px;
box-sizing: border-box;
display: inline-block;
position: relative;
margin-right: 35px;
}
.pro-bd .down-b li:last-child {
margin-right: 0;
}
.pro-bd .down-b li .im {
display: block;
border: solid 1px #dedede;
padding: 4px;
}
.pro-bd .down-b li .im img {
width: 100%;
object-fit: cover;
height: 210px;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.pro-bd .down-b li .tit {
display: block;
width: 70%;
font-size: 16px;
letter-spacing: 1px;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 10px 0 5px;
}
.pro-bd .down-b li .y {
position: absolute;
bottom: 30px;
right: 0;
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
border: solid 1px #dedede;
text-align: center;
line-height: 10px;
}
.pro-bd .down-b li .y span {
display: inline-block;
width: 5px;
height: 5px;
background-color: #999999;
border-radius: 50%;
transition: all .5s;
-webkit-transition: all .5s;
}
.pro-bd .down-b li .y::before {
content: "";
display: inline-block;
position: absolute;
left: -30px;
top: 8px;
width: 20px;
height: 1px;
background-color: #dedede;
transition: all .5s;
-webkit-transition: all .5s;
}
.pro-bd .down-b li .more {
display: block;
font-size: 14px;
line-height: 23px;
color: #999999;
}
.pro-bd .down-b li .more::after {
content: "";
width: 208px;
display: inline-block;
height: 1px;
position: relative;
top: -3px;
background-color: #dedede;
}
.pro-bd .down-b li:hover .tit {
color: #1e4471;
}
.pro-bd .down-b li:hover .y {
border: solid 1px #1e4471;
}
.pro-bd .down-b li:hover .y span {
background-color: #1e4471;
}
.pro-bd .down-b li:hover .y::before {
background-color: #1e4471;
left: -20px;
}
.slide-pro {
margin-top: 40px;
position: relative;
}
.pro-but {
position: absolute;
left: 0;
z-index: 99;
top: 424px;
}
.pro-but .arrow {
display: inline-block;
}
.pro-but .arrow span {
display: inline-block;
position: relative;
z-index: 99;
cursor: pointer;
width: 50px;
height: 50px;
background-color: #f8f8f8;
transition: all .5s;
-webkit-transition: all .5s;
}
.pro-but .arrow span::before {
content: "";
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 20px;
object-fit: cover;
transition: all .5s;
-webkit-transition: all .5s;
}
.pro-but .arrow .prev::before {
background: url(../images/pL-g.png) no-repeat center;
background-size: cover;
}
.pro-but .arrow .next::before {
background: url(../images/pR-g.png) no-repeat center;
background-size: cover;
}
.pro-but .arrow span.active {
background-color: #1e4471;
}
.pro-but .arrow .prev.active::before {
background: url(../images/pL-w.png) no-repeat center;
background-size: cover;
}
.pro-but .arrow .next.active::before {
background: url(../images/pR-w.png) no-repeat center;
background-size: cover;
}
.pro-but>img {
width: 588px;
height: 77px;
object-fit: cover;
vertical-align: top;
margin-left: 100px;
}
/* adv-box */
.adv-box {
overflow: hidden;
}
.form-box {
width: 100%;
height: 260px;
padding-top: 60px;
box-sizing: border-box;
background: url(../images/adv-bg1.jpg) no-repeat center;
background-size: cover;
}
.form-box .tit-box {
left: 75px;
transform: translateX(0);
}
.form-box .tit-box span:nth-child(1) {
background-color: #ffffff;
}
.form-box .tit-box span:nth-child(2) i {
color: #fff;
}
.form-box .form {
width: 661px;
box-sizing: border-box;
}
.form-box .form div {
display: inline-block;
padding-bottom: 15px;
}
.form-box .form .f1 {
width: 190px;
border-bottom: 1px solid #fff;
margin-right: 10px;
}
.form-box .form label {
width: 250px;
padding-bottom: 15px;
display: inline-block;
border-bottom: 1px solid #fff;
position: relative;
}
.form-box .form label img {
position: absolute;
top: -13px;
right: 0;
width: 90px;
height: 36px;
object-fit: cover;
display: inline-block;
}
.form-box .form label input {
width: 55%;
background: transparent;
}
.form-box .form div input {
padding-left: 10px;
margin-left: 9px;
width: 70%;
border-left: 1px solid #fff;
color: #fff;
font-size: 14px;
background: transparent;
}
.form-box .form .f3 {
margin-top: 50px;
width: 540px;
padding-bottom: 15px;
display: inline-block;
border-bottom: 1px solid #fff;
}
.form-box .form button {
display: inline-block;
cursor: pointer;
width: 100px;
padding-bottom: 15px;
background-color: transparent;
border: 0;
border-bottom: 1px solid #fff;
font-size: 16px;
line-height: 25px;
color: #ffffff;
margin-left: 15px;
}
input::-webkit-input-placeholder {
/* WebKit browsers */
color: #fff;
font-size: 14px;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #fff;
font-size: 14px;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #fff;
font-size: 14px;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #fff;
font-size: 14px;
}
.adv-con {
position: relative;
z-index: 9;
top: -50px;
}
.slide-adv {
box-sizing: border-box;
padding-left: 138px;
}
.adv-bd .bd img {
width: 521px;
height: 521px;
object-fit: cover;
border-radius: 50%;
}
.adv-bd .bd .text {
width: 532px;
margin-left: 84px;
display: inline-block;
vertical-align: middle;
}
.adv-bd .bd .text .tit span {
display: inline-block;
width: 80px;
height: 80px;
background-color: #ff9f1c;
border-radius: 50%;
text-align: center;
line-height: 80px;
font-family: Arial;
font-size: 24px;
color: #ffffff;
font-weight: bold;
}
.adv-bd .bd .text .tit i:nth-child(2) {
font-size: 30px;
font-weight: bold;
line-height: 42px;
color: #333333;
display: inline-block;
margin: 0 20px 0 32px;
}
.adv-bd .bd .text .tit i:nth-child(3) {
font-family: Arial;
font-size: 16px;
line-height: 42px;
color: #999999;
}
.adv-bd .bd .text .desc {
font-size: 16px;
line-height: 42px;
color: #666666;
margin-top: 35px;
}
.slide-adv {
position: relative;
}
.slide-adv .arrow {
position: absolute;
right: 0;
top: 470px;
z-index: 9;
width: 360px;
}
.slide-adv .arrow span {
float: left;
position: relative;
z-index: 99;
cursor: pointer;
display: inline-block;
width: 180px;
height: 50px;
background-color: #f6f6f6;
transition: all .5s;
-webkit-transition: all .5s;
}
.slide-adv .arrow span::before {
content: "";
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 15px;
object-fit: cover;
transition: all .5s;
-webkit-transition: all .5s;
}
.slide-adv .arrow .prev::before {
background: url(../images/adv-l-b.png) no-repeat center;
background-size: cover;
}
.slide-adv .arrow .next::before {
background: url(../images/adv-r-b.png) no-repeat center;
background-size: cover;
}
.slide-adv .arrow span.active {
background-color: #1e4471;
}
.slide-adv .arrow .prev.active::before {
background: url(../images/adv-l-w.png) no-repeat center;
background-size: cover;
}
.slide-adv .arrow .next.active::before {
background: url(../images/adv-r-w.png) no-repeat center;
background-size: cover;
}
.slide-adv .hd ul {
display: flex;
justify-content: flex-end;
margin-top: 60px;
}
.slide-adv .hd ul li {
display: inline-block;
cursor: pointer;
margin-left: 73px;
width: 110px;
height: 180px;
box-sizing: border-box;
padding: 7px 5px;
background-color: #f8f8f8;
border-radius: 55px;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.slide-adv .hd ul li span {
display: block;
width: 100%;
height: 100px;
border-radius: 50%;
position: relative;
overflow: hidden;
background-color: #ffffff;
}
.slide-adv .hd ul li span:before,
.slide-adv .hd ul li span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
right: 0;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.slide-adv .hd ul li span:after {
right: 0;
}
.slide-adv .hd ul li span::before {
right: 100%;
}
.slide-adv .hd ul li.on span::after {
right: -100%;
}
.slide-adv .hd ul li.on span::before {
right: 0;
}
.slide-adv .hd ul li span::before {
background: url(../images/yi12.png) center no-repeat;
}
.slide-adv .hd ul li span::after {
background: url(../images/yi1.png) center no-repeat;
}
.slide-adv .hd ul li:nth-child(2) span::before {
background: url(../images/yi22.png) center no-repeat;
}
.slide-adv .hd ul li:nth-child(2) span::after {
background: url(../images/yi2.png) center no-repeat;
}
.slide-adv .hd ul li:nth-child(3) span::before {
background: url(../images/yi32.png) center no-repeat;
}
.slide-adv .hd ul li:nth-child(3) span::after {
background: url(../images/yi3.png) center no-repeat;
}
.slide-adv .hd ul li:nth-child(4) span::before {
background: url(../images/yi42.png) center no-repeat;
}
.slide-adv .hd ul li:nth-child(4) span::after {
background: url(../images/yi4.png) center no-repeat;
}
.slide-adv .hd ul li p {
text-align: center;
font-size: 20px;
line-height: 42px;
margin-top: 10px;
color: #666666;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.slide-adv .hd ul li.on {
background-color: #1e4471;
}
.slide-adv .hd ul li.on p {
color: #fff;
}
.adv-con .img-b {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.adv-con .img-b img:nth-child(1) {
position: relative;
top: -36px;
}
.adv-con .img-b img:nth-child(2) {
position: relative;
bottom: -147px;
margin-left: 17px;
}
.adv-con::after {
content: "";
display: inline-block;
position: absolute;
z-index: -1;
right: -320px;
top: 83px;
width: 400px;
height: 564px;
background: url(../images/adv-bg.jpg) no-repeat center;
background-size: cover;
}
.adv-con>p {
font-size: 14px;
letter-spacing: 1px;
color: #999999;
position: absolute;
top: 315px;
left: -310px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.adv-con>p::before {
content: "";
display: inline-block;
height: 1px;
width: 50px;
position: relative;
top: -5px;
margin-right: 10px;
background-color: #999999;
}
.case-box {
overflow: hidden;
padding: 70px 0;
}
.case-tit .tit-box {
left: 74px;
transform: translateX(0);
}
.case-tit .rightr {
display: inline-block;
margin-top: 20px;
font-size: 16px;
color: #333333;
}
.case-tit .rightr::before {
content: "";
width: 30px;
height: 1px;
background-color: #bbbbbb;
display: inline-block;
position: relative;
top: -5px;
margin-right: 3px;
transition: all .5s;
-webkit-transition: all .5s;
}
.case-tit .rightr:hover::before {
width: 100px;
}
.swiper-case {
padding: 0 15px;
margin-top: 30px;
}
.sw-case {
padding: 30px 0 0;
}
.sw-case li {
overflow: hidden;
display: inline-block;
position: relative;
box-sizing: border-box;
padding: 40px 30px 30px 30px;
background-color: #fbfbfb;
transition: all .6s ease-in-out;
-webkit-transition: all .6s ease-in-out;
}
.sw-case li .num {
display: inline-block;
position: absolute;
right: 30px;
top: 0;
font-family: Arial;
font-size: 24px;
font-weight: bold;
line-height: 24px;
color: #333333;
}
.sw-case li .num::before {
content: "";
display: block;
margin-left: auto;
margin-bottom: 5px;
margin-right: 5px;
width: 1px;
height: 30px;
background-color: #cccccc;
}
.sw-case li a:nth-child(2) {
display: block;
font-size: 18px;
font-weight: normal;
line-height: 50px;
color: #333333;
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sw-case li p {
margin: 0px 0 38px;
font-size: 14px;
line-height: 24px;
color: #999999;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
transition: all .5s;
-webkit-transition: all .5s;
}
.sw-case li a:nth-child(4) {
display: block;
height: 246px;
width: 100%;
}
.sw-case li a:nth-child(4) img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sw-case li:hover {
transform: translateY(-20px);
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
}
.case-con {
position: relative;
}
.case-next,
.case-prev {
display: inline-block;
position: absolute;
z-index: 99;
bottom: 175px;
cursor: pointer;
width: 52px;
height: 52px;
border-radius: 50%;
background-color: #f6f6f6;
transition: all .5s;
-webkit-transition: all .5s;
}
.case-next {
left: -80px;
}
.case-prev {
right: -80px;
}
.case-next::before,
.case-prev::before {
content: "";
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 16px;
object-fit: cover;
transition: all .5s;
-webkit-transition: all .5s;
}
.case-next::before {
background: url(../images/cL-g.png) no-repeat center;
background-size: cover;
}
.case-prev::before {
background: url(../images/cR-g.png) no-repeat center;
background-size: cover;
}
.case-next.active,
.case-prev.active {
background-color: #1e4471;
}
.case-next.active::before {
background: url(../images/cL-w.png) no-repeat center;
background-size: cover;
}
.case-prev.active::before {
background: url(../images/cR-w.png) no-repeat center;
background-size: cover;
}
/* zx-box */
.zx-box {
overflow: hidden;
}
.zx-con {
position: relative;
height: 150px;
box-sizing: border-box;
padding-top: 39px;
}
.zx-con::before {
content: "";
display: inline-block;
position: absolute;
top: 0;
z-index: -1;
left: -320px;
height: 150px;
width: 1463px;
background: url(../images/lb-bg.jpg) no-repeat center;
background-size: cover;
}
.zx-con p:nth-child(1) {
vertical-align: top;
display: inline-block;
font-size: 20px;
line-height: 38px;
letter-spacing: 1px;
color: #ffffff;
}
.zx-con p:nth-child(2) {
display: inline-block;
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ffffff;
vertical-align: top;
margin-top: 8px;
margin-left: 140px;
}
.zx-con p:nth-child(2) em{
font-family: Arial;
font-weight: bold;
display: block;
font-size: 20px;
color: #ffffff;
}
.zx-con a {
margin-left: 100px;
margin-top: 12px;
vertical-align: top;
display: inline-block;
width: 200px;
height: 52px;
text-align: center;
line-height: 52px;
background-color: #ffffff;
}
.zx-con a i {
display: inline-block;
border-left: 1px solid #aaaaaa;
font-size: 18px;
line-height: 23px;
color: #333333;
padding-left: 23px;
margin-left: 20px;
}
/* about-box */
.about-box {
overflow: hidden;
padding: 70px 0;
}
.ab-text {
display: inline-block;
width: 674px;
box-sizing: border-box;
}
.about-tit .tit-box {
left: 74px;
margin-top: 20px;
transform: translateX(0);
}
.ab-text>p:nth-of-type(1) {
font-size: 24px;
line-height: 30px;
color: #333333;
margin: 40px 0 8px;
}
.ab-text>i {
font-size: 14px;
letter-spacing: 1px;
color: #999999;
}
.ab-text>p:nth-of-type(2) {
font-size: 16px;
line-height: 42px;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
margin: 25px 0 60px;
}
.ab-text .ab-num {
display: flex;
justify-content: space-between;
}
.ab-text .ab-num li {
display: inline-block;
}
.ab-text .ab-num li>i {
font-family: Arial;
font-size: 36px;
font-weight: bold;
line-height: 50px;
color: #333333;
}
.ab-text .ab-num li p {
font-size: 16px;
line-height: 30px;
color: #333333;
}
.ab-text .ab-num li p i {
font-size: 14px;
display: inline-block;
color: #1e4471;
}
.about-con .ab-img {
height: 645px;
width: 548px;
box-sizing: border-box;
position: relative;
}
.about-con .ab-img .yyzz {
width: 330px;
height: 239px;
padding: 21px;
background: url(../images/yyzz.jpg) no-repeat center;
background-size: cover;
position: absolute;
z-index: 9;
bottom: 0;
left: 0;
}
.about-con .ab-img .a1 {
width: 260px;
height: 560px;
object-fit: cover;
position: absolute;
top: 0;
left: 4px;
}
.about-con .ab-img .a2 {
width: 260px;
height: 560px;
object-fit: cover;
position: absolute;
bottom: 4px;
right: 0;
}
.about-con .ab-img p {
font-size: 14px;
letter-spacing: 1px;
color: #999999;
position: absolute;
right: -305px;
top: 330px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.about-con .ab-img p::before {
content: "";
display: inline-block;
height: 1px;
width: 50px;
position: relative;
top: -5px;
margin-right: 10px;
background-color: #999999;
}
/* news-box */
.news-box {
overflow: hidden;
padding: 50px 0 0 0;
background:#fff url(../images/news-bg.jpg) no-repeat center top;
background-size: 100% 260px;
position: relative;
}
.news-con .tit-box {
margin-bottom: 50px;
}
.news-con .tit-box span:nth-child(1) {
background-color: #fff;
}
.news-con {
position: relative;
z-index: 2;
}
.news-con .tit-box>span:nth-child(2) i {
color: #fff;
}
.slide-news {
position: relative;
}
.slide-news::before {
content: "";
width: 168px;
height: 120px;
display: inline-block;
position: absolute;
z-index: -1;
top: 124px;
right: -61px;
background: url(../images/wd1.png) no-repeat center;
background-size: cover;
}
.slide-news::after {
content: "";
width: 356px;
height: 120px;
display: inline-block;
position: absolute;
z-index: -1;
top: 275px;
left: -106px;
background: url(../images/wd2.png) no-repeat center;
background-size: cover;
}
.slide-news .hd {
position: absolute;
top: 120px;
left: 0;
}
.slide-news .hd ul {
position: relative;
z-index: 99;
}
.slide-news .hd ul::before {
content: "";
position: absolute;
z-index: -1;
left: 5px;
top: 24px;
display: inline-block;
width: 1px;
height: 172px;
background-color: #dddddd;
}
.slide-news .hd ul li {
margin-bottom: 27px;
}
.slide-news .hd ul li a {
font-size: 20px;
line-height: 28px;
color: #333333;
}
.slide-news .hd ul li a::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color: #dddddd;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
margin-right: 20px;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.slide-news .hd ul li.on a::before {
background-color: #ff9f1c;
}
.slide-news .hd ul li.on a{
color: #ff9f1c;
font-weight: bold;
}
.slide-news .hd ul li a .icon {
width: 35px;
height: 28px;
display: inline-block;
position: relative;
overflow: hidden;
object-fit: cover;
vertical-align: middle;
}
.slide-news .hd ul li a .icon:before,
.slide-news .hd ul li a .icon:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
right: 0;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.slide-news .hd ul li a .icon:after {
right: 0;
}
.slide-news .hd ul li a .icon::before {
right: 100%;
}
.slide-news .hd ul li.on a .icon::after {
right: -100%;
}
.slide-news .hd ul li.on a .icon::before {
right: 0;
}
.slide-news .hd ul li a .icon::before {
background: url(../images/ni12.png) center no-repeat;
}
.slide-news .hd ul li a .icon::after {
background: url(../images/ni1.png) center no-repeat;
}
.slide-news .hd ul li:nth-child(2) a .icon::before {
background: url(../images/ni22.png) center no-repeat;
}
.slide-news .hd ul li:nth-child(2) a .icon::after {
background: url(../images/ni2.png) center no-repeat;
}
.slide-news .hd ul li:nth-child(3) a .icon::before {
background: url(../images/ni32.png) center no-repeat;
}
.slide-news .hd ul li:nth-child(3) a .icon::after {
background: url(../images/ni3.png) center no-repeat;
}
.news-bd .bd>div {
height: 678px !important;
}
.news-bd .bd .top {
width: 994px;
box-sizing: border-box;
position: relative;
margin-left: auto;
}
.news-bd .bd .top::after {
content: "";
display: inline-block;
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
width: 100%;
height: 145px;
background-color: #f2f5fa;
}
.news-bd .bd .top .img-b img {
width: 472px;
height: 325px;
object-fit: cover;
vertical-align: bottom;
}
.news-bd .bd .top .text {
display: inline-block;
width: 439px;
margin-left: 43px;
box-sizing: border-box;
vertical-align: bottom;
}
.news-bd .bd .top .text>a:nth-child(1) {
font-size: 14px;
line-height: 36px;
color: #333333;
display: block;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}
.news-bd .bd .top .text>a:nth-child(1):hover {
margin-left: 10px;
}
.news-bd .bd .top .text>a:nth-child(1) i {
display: inline-block;
border-radius: 50%;
vertical-align: middle;
margin-top: -5px;
width: 22px;
height: 22px;
text-align: center;
line-height: 22px;
margin-left: 10px;
background-color: #333333;
}
.news-bd .bd .top .text>a:nth-child(1) i img {
width: 7px;
height: 13px;
object-fit: cover;
}
.news-bd .bd .top .text>a:nth-child(2) {
font-size: 18px;
line-height: 36px;
color: #333333;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 50px;
font-weight: bold;
}
.news-bd .bd .top .text>a:nth-child(2)::before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
position: relative;
top: -3px;
margin-right: 5px;
background-color: #434343;
border-radius: 3px;
}
.news-bd .bd .top .text>p {
font-size: 14px;
line-height: 30px;
color: #999999;
box-sizing: border-box;
padding-left: 12px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin: 0 0 34px;
}
.news-bd .bd .down {
margin-top: 32px;
}
.news-bd .bd .down li {
display: inline-block;
width: 400px;
height: 120px;
border: solid 2px #eeeeee;
box-sizing: border-box;
padding: 20px;
margin-right: 35px;
transition: all .5s;
-webkit-transition: all .5s;
margin-top: 38px;
background-color: #fff;
}
.news-bd .bd .down li:hover {
border: solid 2px #ff9f1c;
}
.news-bd .bd .down li:nth-child(3n+3) {
margin-right: 0;
}
.news-bd .bd .down li div {
display: inline-block;
}
.news-bd .bd .down li .date {
height: 100%;
padding-right: 20px;
text-align: right;
border-right: 1px solid #dfdfdf;
}
.news-bd .bd .down li .date .day {
display: block;
font-family: Arial;
font-size: 30px;
font-weight: bold;
line-height: 40px;
color: #1e4471;
}
.news-bd .bd .down li .date .year {
font-family: Arial;
font-size: 14px;
color: #999999;
}
.news-bd .bd .down li .text {
width: 78%;
position: relative;
top: 11px;
left: -2px;
}
.news-bd .bd .down li .text a {
width: 100%;
font-size: 16px;
color: #333333;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
padding-left: 25px;
}
.news-bd .bd .down li .text a:nth-child(2) {
font-size: 14px;
border-top: 1px solid #dfdfdf;
color: #999999;
padding-top: 10px;
margin-top: 10px;
}
.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
.menu--line .menu__link-deco,
.menu--linethrough .menu__link-deco,
.menu--twolines .menu__link-deco,
.menu--diagonal .menu__link-deco {
bottom: 8px;
right: 0;
height: 1px;
width: 210px;
background: #1e4471;
}
.menu--twolines .menu__link-deco,
.menu--diagonal .menu__link-deco {
height: 100%;
background: none;
border-bottom: 1px solid #1e4471;
border-right: 0;
border-left: 0;
transition: all .5s ease-in-out;
}
.menu__link-deco {
outline: 120px solid transparent;
opacity: 0;
position: absolute;
pointer-events: none;
}
.down-b li .menu__link-deco {
height: 0;
border-bottom: 1px solid #1e4471;
}
.down-b li:hover .menu__link-deco {
opacity: 1;
}
.menu__link .im {
overflow: hidden;
position: relative;
}
.menu__link .im:before {
position: absolute;
z-index: 99;
right: -30px;
top: -30px;
width: 100px;
height: 100px;
border-radius: 50%;
content: '';
opacity: 0;
-webkit-transform: scale3d(0.5, 0.5, 1);
transform: scale3d(0.5, 0.5, 1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
background-color: rgba(0, 0, 0, 0.2);
}
.menu__link:hover .im img {
-webkit-transform: scale(1.1) rotate(0);
-moz-transform: scale(1.1) rotate(0);
-o-transform: scale(1.1) rotate(0);
transform: scale(1.1) rotate(0);
}
.menu__link:hover .im:before {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.2);
}
.sw-case li:before {
position: absolute;
z-index: -1;
right: -30px;
top: 0px;
width: 1px;
height: 1px;
border-radius: 50%;
content: '';
opacity: 0;
-webkit-transform: scale3d(0.5, 0.5, 1);
transform: scale3d(0.5, 0.5, 1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
background-color: rgba(4, 41, 109, 0.8);
}
.sw-case li:hover:before {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
box-shadow: 0 0 0 420px #ff9103;
}
.sw-case li:hover span,
.sw-case li:hover p,
.sw-case li:hover a {
color: #fff;
}
.news-bd .img-b {
display: inline-block;
position: relative;
overflow: hidden;
width: 472px;
height: 325px;
}
.news-bd .img-b:before {
position: absolute;
z-index: 99;
right: -30px;
bottom: -30px;
width: 100px;
height: 100px;
border-radius: 50%;
content: '';
opacity: 0;
-webkit-transform: scale3d(0.5, 0.5, 1);
transform: scale3d(0.5, 0.5, 1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
background-color: rgba(0, 0, 0, 0.2);
}
.news-bd .img-b img {
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.news-bd .img-b:hover img {
-webkit-transform: scale(1.1) rotate(0);
-moz-transform: scale(1.1) rotate(0);
-o-transform: scale(1.1) rotate(0);
transform: scale(1.1) rotate(0);
}
.news-bd .img-b:hover:before {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
box-shadow: 0 0 0 500px rgba(0, 0, 0, 0.2);
}
.news-bd .bd .down li {
position: relative;
}
.news-bd .bd .down li::after {
content: "";
display: inline-block;
position: absolute;
bottom: 50px;
right: 10px;
width: 0;
height: 1px;
background-color: #ff9f1c;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.news-bd .bd .down li:hover::after {
width: 290px;
}
/* ex */
.swiper-ex {
width: 1280px;
position: relative;
left: 204px;
margin-top: 50px;
}
.about-bot {
position: relative;
}
.about-bot .contorl p {
font-size: 24px;
line-height: 28px;
color: #333333;
text-align: center;
}
.about-bot .contorl p i {
display: block;
font-size: 14px;
color: #999999;
}
.about-bot .contorl div {
display: inline-block;
width: 52px;
height: 52px;
border-radius: 50%;
background-color: #f6f6f6;
position: relative;
cursor: pointer;
margin-top: 44px;
transition: all .5s;
-webkit-transition: all .5s;
}
.about-bot .contorl div:nth-child(2) {
margin-right: 42px;
}
.about-bot .contorl div::before {
content: "";
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 16px;
object-fit: cover;
transition: all .5s;
-webkit-transition: all .5s;
}
.about-bot .contorl div.active {
background-color: #ff9103;
}
.about-bot .contorl .ex-next::before {
background: url(../images/cL-g.png) no-repeat center;
background-size: cover;
}
.about-bot .contorl .ex-prev::before {
background: url(../images/cR-g.png) no-repeat center;
background-size: cover;
}
.about-bot .contorl .ex-next.active::before {
background: url(../images/cL-w.png) no-repeat center;
background-size: cover;
}
.about-bot .contorl .ex-prev.active::before {
background: url(../images/cR-w.png) no-repeat center;
background-size: cover;
}
.about-bot .contorl {
position: absolute;
top: 60px;
left: 0;
}
.sw-ex li {
overflow: hidden;
box-sizing: border-box;
padding: 9px;
border: solid 1px #dddddd;
transition: all .5s;
-webkit-transition: all .5s;
}
.sw-ex li:hover {
border: solid 1px #1e4471;
}
.sw-ex li:hover .text {
color: #1e4471;
}
.sw-ex li img {
width: 100%;
height: 202px;
object-fit: contain;
}
.sw-ex li .text {
display: block;
width: 80%;
margin: 10px auto 0;
font-size: 14px;
line-height: 30px;
color: #333333;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.about-top {}
.about-top ul {
display: flex;
}
.about-top ul li {
margin-right: 124px;
}
.about-top ul li.on i {
background-position: 0 -32px;
}
.about-top ul li.on a {
color: #0858cf;
}
.about-top ul li i {
width: 32px;
height: 32px;
display: inline-block;
background-repeat: no-repeat;
background-position: 0 0;
}
.about-top ul li a {
color: #333;
line-height: 34px;
display: inline-block;
font-size: 16px;
vertical-align: top;
padding-left: 10px;
}
.about-top ul li i.about-top1 {
background-image: url(../images/about-top1.png);
}
.about-top ul li i.about-top2 {
background-image: url(../images/about-top2.png);
}
.about-top ul li i.about-top3 {
background-image: url(../images/about-top3.png);
}
.particles-js-canvas-el {
width: 100%;
height: auto !important;
}
canvas {
display: block;
vertical-align: bottom;
}
#particles-js {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.proJectImg {
width: 100%;
overflow: hidden;
height: 640px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-animation: play 25s linear infinite;
-moz-animation: play 25s linear infinite;
animation: play 25s linear infinite;
opacity: 1;
object-fit: cover;
}
.proJectImgBox {
width: 100%;
height: 640px;
position: absolute;
top: 260px;
left: 0;
overflow: hidden;
}
@keyframes play {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.js-canvas {
width: 100% !important;
height: 100% !important;
}