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%; } }