html,
body {
color: #282828;
font-size: 14px;
width: 100%;
position: relative;
overflow-x: hidden;
background: #fff;
line-height: 1.5;
font-family: "寰蒋闆呴粦";
}
* {
padding: 0;
margin: 0;
}
.wrap {
width: 1400px;
margin: 0 auto;
}
.showDiv {
display: none;
}
.clearfixed {
clear: both;
}
a {
color: #282828;
}
ul {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
.arrow-bottom {
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: red;
border-bottom-width: 0;
border-style: dashed;
border-top-style: solid;
border-left-color: transparent;
border-right-color: transparent;
}
/* 鍚戝彸鐨勭澶 */
.arrow-right {
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: #f7f7f7;
border-right-width: 0;
border-style: dashed;
border-left-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
}
a,
a:hover,
a:active,
a:visited,
a:link,
a:focus {
outline: none;
text-decoration: none;
}
p {
padding: 0;
margin: 0;
}
a:hover {
color: #0091CE;
}
img {
max-width: 100%;
vertical-align: middle;
}
.imgDiv {
overflow: hidden;
}
.imgDiv img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
transition: all 0.5s;
}
.mask:hover .imgDiv img {
transform: scale(1.1);
}
input:focus,
button:focus,
textarea:focus {
outline: none;
}
.ovh {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ovh2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.ovh3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.ovh4 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
.bn_logo {
position: absolute;
top: 2vw;
left: 5vw;
max-height: 30px;
max-width: 314px;
z-index: 9;
}
.kxDiv1 {
background: url(../img/sc1_bg.png) no-repeat 8% 100%;
background-size: 30% auto;
}
.kxDiv1 .content {
display: flex;
justify-content: space-between;
}
.kxDiv1 .wenzi {
width: 65%;
max-width: 768px;
}
.kxDiv1 .wenzi .txt {
color: #28282D;
line-height: 1.8;
}
.contactBott {
background: #0091CE;
padding-top: 80px;
padding-bottom: 100px;
}
.kxDiv2 {
padding: 30px 0 50px 0;
background: #FAFAFA;
}
.kxDiv2 .flDiv {
width: 75%;
}
.kxDiv2 .kxPro .tab1 {
width: 100%;
border-bottom: 1px solid #E6E6E6;
}
.kxDiv2 .kxPro .tab1 li {
margin: 0 5%;
padding-bottom: 30px;
position: relative;
}
.swTab>.tab2 li a {
position: relative;
z-index: 999;
}
.swTab>.tab2 li.active a {
border: 0;
color: #fff;
}
.kxDiv2 .kxPro .tab1 li::after {
position: absolute;
content: "";
left: 50%;
transform: translateX(-50%);
width: 0;
height: 3px;
background-color: #0091CE;
transition: all 0.5s;
bottom: 0;
}
.kxDiv2 .kxPro .swiper-container {
overflow: inherit;
}
.swTab {
display: flex;
align-items: center;
justify-content: space-between;
}
.swTab>.tab2 {
width: 50%;
}
.swTab>.tab2 li a {
display: flex;
align-items: center;
padding: 2vw 0;
border-bottom: 1px #E6E6E6 solid;
}
.swTab>.tabCon {
width: 50%;
border-radius: 2vw;
overflow: hidden;
position: relative;
z-index: 999;
height: 31.25vw;
}
.swTab>.tab2 li:before {
content: "";
width: 0%;
height: 100%;
background: linear-gradient(270deg, #00C4E9 0%, #0091CE 100%);
top: 0%;
left: -100%;
position: absolute;
z-index: 1;
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
}
.swTab>.tab2 li .jt {
position: absolute;
top: 50%;
right: 80px;
transform: translateY(-50%);
z-index: 9;
opacity: 0;
transition: all 0.8s;
width: 2.5vw;
}
.swTab>.tab2 li.active .jt {
right: 10px;
opacity: 1;
}
.swTab>.tab2 li.active:before {
width: 150%;
left: -50%;
}
.swTab>.tabCon .tab_cell {
/* display: none; */
position: absolute;
z-index: 9;
top: 0;
left: 0;
height: 100%;
}
.swTab>.tabCon .tab_cell .imgDiv,
.swTab>.tabCon .tab_cell .imgDiv img {
height: 100%;
}
.swTab>.tabCon .tab_cell:first-child {
display: block;
}
.swTab>.tabCon .tab_cell img {
transform: translateX(100%);
transition: all 0.5s ease-in-out;
border-radius: 2vw;
max-height: 31.25vw;
object-fit: cover;
}
.swTab>.tabCon .tab_cell img.showImg {
transform: translateX(0);
}
.swTab>.tab2 li {
position: relative;
}
.sw_zn .swiper-container {
overflow: visible;
}
.sw_zn .swiper-slide {
opacity: 0;
}
.sw_zn .swiper-slide-active {
opacity: 1;
}
.swTab>.tab li.active a {
border: 0;
color: #fff;
}
.swTab>.tab li .jt {
position: absolute;
top: 50%;
right: 80px;
transform: translateY(-50%);
z-index: 9;
opacity: 0;
transition: all 0.8s;
width: 2.5vw;
}
.swTab>.tab li.active .jt {
right: 50px;
}
.swTab>.tab li a {
position: relative;
z-index: 99;
}
.swTab>.tab li.active .jt {
opacity: 1;
}
.kxDiv2 .kxPro .tab1 li.active::after {
width: 100%;
}
.kxDiv2 .kxPro .frDiv {
width: calc(25% - 40px);
}
.kxDiv2 .kxPro .flDiv ul {
display: flex;
justify-content: space-between;
}
.tdDiv .content ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.tdDiv .content ul li {
width: 24%;
background: #F2F2F2;
border-radius: 20px;
position: relative;
transition: all 0.3s;
}
.tdDiv .content ul li .textDiv {
min-height: 100px;
display: flex;
align-items: center;
padding: 14px 14px 30px 14px;
}
.tdDiv .content ul li img.over {
position: absolute;
right: 0;
bottom: 0;
height: 100%;
}
.tdDiv .content ul li .num {
position: absolute;
right: 20px;
top: 25px;
z-index: 99;
}
.tdDiv .content ul li .txt {
/* display: none; */
position: absolute;
top: 36%;
opacity: 0;
transition: all 0.5s;
}
.tdDiv .content ul li img {
filter: grayscale(100);
opacity: .5;
}
.tdDiv .content ul li:hover img {
opacity: 1;
filter: initial;
}
.tdDiv .content ul li .font30 {
transition: all 0.5s;
}
.tdDiv .content ul li:hover .font30 {
transform: translateY(-20px);
}
.tdDiv .content ul li:hover .txt {
display: block;
opacity: 1;
}
.tdDiv .content ul li:hover {
background: #fff;
}
.zhongdianDiv .content>ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: flex-start;
min-height: 480px;
}
.zhongdianDiv .content>ul>li {
width: 32%;
background: #F2F2F2;
border-radius: 20px;
transition: all 0.3s;
}
.zhongdianDiv .content>ul>li .textDiv {
padding: 45px 35px;
line-height: 1.8;
}
.zhongdianDiv .content>ul>li .textDiv .bt {
display: flex;
align-items: center;
}
.zhongdianDiv .content>ul>li .textDiv .bt p{white-space:nowrap;}
.zhongdianDiv .content>ul>li .textDiv .bt img {
width: 2vw;
margin-right: 10px;
}
.zhongdianDiv .content>ul>li .textDiv .txt {
transition: all 0.3s;
line-height: 1.8;
height: 0;
overflow: hidden;
}
.zhongdianDiv .content>ul>li:hover .textDiv .txt {
height: auto;
margin-top: 35px;
border-top: 1px #ccc solid;
padding-top: 30px;
}
.zhongdianDiv .content>ul>li:hover .wenzi p,
.zhongdianDiv .content>ul>li:hover .wenzi div,
.zhongdianDiv .content>ul>li:hover .wenzi ul li,
.zhongdianDiv .content>ul>li:hover .txt {
color: #282828;
}
.zhongdianDiv .content > ul > li .wenzi p{min-height:50px;}
.zhongdianDiv .content>ul>li:hover {
background: #fff;
}
.kxDiv3 {
/* min-height: 35vw; */
padding-bottom: 15px;
overflow: hidden;
background: linear-gradient(270deg, #00C4E9 0%, #0091CE 100%);
}
.kxDiv3 .kxdt {
position: absolute;
top: 0;
/* transform: translateY(-50%); */
right: 0%;
max-height: 33vw;
/* height: 33.5vw; */
/* max-height: 37.5vw; */
max-width: 45.88vw;
/* max-width: initial; */
}
.bigTxt {
font-size: 150px;
color: #fff;
opacity: 0.1;
font-weight: bold;
line-height: 1;
}
.kxDiv3 .txt {
padding-bottom: 20px;
margin-top: 12vw;
border-bottom: 1px rgba(255, 255, 255, .3) solid;
}
.kxDiv3 .wrap {
position: relative;
z-index: 20;
}
.kxDiv3 .scLeft {
width: 39%;
height: 55%;
position: absolute;
bottom: 0;
min-width: 40vw;
}
.kxDiv3 .shuju ul {
display: flex;
}
.kxDiv3 .shuju ul li {
margin-right: 10%;
}
.kxDiv3 .flDiv {
width: 40%;
}
.kxDiv3 .frDiv {
width: 28.5vw;
/* height: 37.5vw; */
margin-bottom: 3vw;
margin-right: -2vw;
/* margin-top: 4.5vw; */
/* margin-right: -2vw; */
}
.circle_kx {
width: 100%;
margin-top: 4.5vw;
}
.circle_kx #circle {
width: 28.5vw;
}
.circle_kx .ditu {
position: absolute;
top: 50%;
left: 50%;
width: 28.5vw;
transform: translate(-50%, -50%);
}
.kxDiv4 {
background: #FAFAFA;
padding-bottom: 140px;
}
.kxDiv4 .content ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
border-top: 1px #F2F5F7 solid;
border-right: 1px #F2F5F7 solid;
}
.kxDiv4 .content ul li .imgDiv {
height: 9vw;
}
.kxDiv4 .content ul li {
width: calc(16.6% - 1px);
border: 1px #F2F5F7 solid;
border-right: 0;
border-top: 0;
background: #fff;
}
.kxDiv4 .content ul li .textDiv {
height: 100%;
}
.kxDiv5 .wrap {
display: flex;
align-items: center;
justify-content: space-between;
}
.kxDiv5 .flDiv {
width: 33%;
margin-bottom: 5vw;
}
.kxDiv5 .frDiv {
width: 60%;
}
.kxDiv5 .flDiv ul {
}
.kxDiv5 .flDiv ul li {
}
/*PHONE灞忓箷涓嬬殑涓撶敤鏍峰紡*/
@media screen and (max-width:992px) {
.wrap,
.wrap2,
.wrap3 {
width: 92%;
margin: 0 auto;
font-size: 14px;
padding: 0;
min-width: initial;
line-height: 1.8;
}
body,
html {
line-height: 1.25;
}
.font72 {
font-size: 30px;
margin-top: 5px;
}
.kxDiv1 .content {
display: block;
}
.kxDiv1 .content .wenzi {
width: 100%;
margin-top: 30px;
}
.par100 {
padding: 45px 0;
}
.shuju ul li::after {
display: none;
}
.ldDiv2 .wrap {
display: block;
}
.par80 {
padding: 40px 0;
}
.kxDiv1 .wrap {
width: 92%;
}
.kxDiv1 {
background: none;
}
.kxDiv2 .flDiv,
.kxDiv2 .kxPro .frDiv {
width: 100%;
}
.kxDiv2 .kxPro .flDiv ul {
flex-wrap: wrap;
}
.kxDiv2 .kxPro .flDiv ul li {
width: 100%;
border-radius: 10px;
margin-bottom: 20px;
}
.tdDiv .content ul li {
width: 100%;
margin-bottom: 20px;
}
.tdDiv .content ul li .textDiv {
min-height: 50px;
display: flex;
align-items: center;
padding: 20px 30px;
}
.tdDiv .content ul li .txt {
display: block;
}
.zhongdianDiv .content>ul>li {
width: 100%;
margin-bottom: 20px;
}
.zhongdianDiv .content>ul>li .textDiv {
padding: 20px 25px;
line-height: 1.8;
}
.zhongdianDiv .content>ul>li .textDiv .bt img {
width: 30px;
}
.zhongdianDiv .content>ul {
height: auto;
min-height: initial;
}
.kxDiv2 {
padding: 50px 0;
padding-top: 10px;
}
.kxDiv3 .flDiv {
width: 100%;
}
.kxDiv3 .frDiv {
width: 100%;
margin-top: 30px;
}
.bigTxt {
font-size: 80px;
}
.kxDiv4 .content ul li {
width: calc(32.6% - 1px);
background: #fff;
}
.kxDiv4 .content ul li .imgDiv {
height: 83px;
}
.kxDiv5 .wrap {
display: block;
}
.kxDiv5 .flDiv,
.kxDiv5 .frDiv {
width: 100%;
}
.swTab {
display: block;
}
.swTab>.tab2 {
width: 100%;
}
.swTab .tabCon {
width: 100%;
height: 300px;
margin-top: 20px;
}
/* .swTab .tabCon .tab_cell{
position: relative;
display: none;
} */
.swTab>.tab2 li a {
max-width: 100%;
padding: 15px 0;
}
.kxPro .tab1 li .font14 {
line-height: 1.2;
}
.swTab>.tab2 li .jt {
width: 25px;
right: 0;
}
.swTab>.tab2 li.active:before {
left: -20%;
}
.swTab>.tabCon .tab_cell {
width: 100%;
}
.tdDiv .content ul li .txt {
position: relative;
/* display: none; */
opacity: 1;
}
.tdDiv .content ul li:hover .font30 {
transform: translateX(0);
}
.kxDiv3 .scLeft {
height: 23%;
}
.circle_kx #circle,
.circle_kx .ditu {
width: 100%;
}
.circle_kx {
width: 50%;
}
.kxDiv3 .frDiv {
height: auto;
}
.kxDiv3 .kxdt {
position: relative;
max-width: 100%;
height: auto;
max-height: 100%;
transform: initial;
top: 0;
}
.circle_kx {
width: 60%;
position: absolute;
right: 0%;
top: 7%;
}
.kxDiv3 .scLeft {
display: none;
}
.bn_logo {
max-height: 20px;
top: 25px;
right: 15px;
}
.swTab>.tabCon .tab_cell img {
max-height: initial;
}
.banner_kx {
background-position: 50% !important;
}
.kxDiv2 .kxPro .tab1 li .font30{
font-size: 18px;
}
}
/*PAD灞忓箷涓嬬殑涓撶敤鏍峰紡*/
@media(max-width:992px) {
.kxDiv2 .kxPro .tab1{flex-wrap:wrap;}
.kxDiv1 .wrap {
width: 92%;
}
.kxDiv2 .kxPro .tab1 li{width:100%;padding-bottom:20px;margin-bottom:20px;}
.kxDiv2 .kxPro .flDiv ul li {
width: 32%;
}
.swTab>.tab2 {
width: 100%;
}
.swTab .tabCon {
width: 100%;
}
.swTab {
display: flex;
flex-wrap:wrap;
}
.zhongdianDiv .content>ul>li {
width: 100%;
}
.tdDiv .content ul li {
width: 100%;
}
.kxDiv3 .txt {
margin-top: 80px;
}
.kxDiv3 .scLeft {
display: none;
}
}
/*涓瓑PC灞忓箷涓嬬殑涓撶敤鏍峰紡*/
@media screen and (min-width:993px) and (max-width:1024px) {
.wrap {
width: 94%;
padding: 0 3%;
min-width: initial;
}
.kxDiv3 {
/* min-height: 45vw; */
}
.wrap2,
.kxDiv1 .wrap {
width: 94%;
margin: 0 auto;
min-width: initial;
}
.kxDiv3 .txt {
margin-top: 100px;
}
.kxDiv3 .frDiv {
margin-right: 0;
}
}
@media screen and (min-width:1025px)and (max-width:1500px) {
body,
html {
font-size: 12px;
}
.wrap {
width: 75%;
}
.wrap2 {
margin: 0 auto;
min-width: 75%;
width: 75%;
}
.bn_logo {
max-height: 25px;
}
/* .xrDiv3 .imgDiv{
height: 80px;
} */
.kxDiv1 .wrap {
width: 75%;
}
.bigTxt {
font-size: 100px;
}
.tdDiv .content ul li .textDiv {
min-height: 70px;
}
.zhongdianDiv .content>ul {
min-height: 390px;
}
.zhongdianDiv .content>ul>li .textDiv {
padding: 20px 10px;
}
.zhongdianDiv .content>ul>li .textDiv .txt {
margin-top: 15px;
}
.kxDiv3 .scLeft {
height: 50%;
}
.tdDiv .content ul li .txt {
font-size: 12px;
}
}
@media screen and (min-width:1501px)and (max-width:1800px) {
.wrap {
width: 80%;
}
.kxDiv1 .wrap {
width: 80%;
}
}