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;
}
.bigYear{margin-top:3%;}
.znDiv3 .frDiv .swiper-container .swiper-slide:nth-last-of-type(1){height:100% !important;}
.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: 52px;
max-width: 314px;
z-index: 99;
}
.circle_bn {
position: absolute;
width: 100px;
bottom: 60px;
left: 5vw;
z-index: 9;
}
.znDiv1 {
background: url(../img/sc1_bg.png) no-repeat 8% 100%;
background-size: 30% auto;
}
.znDiv1 .wrap {
display: flex;
justify-content: space-between;
}
.znDiv1 .wrap .wenzi {
width: calc(100% - 320px);
max-width: 768px;
/* margin-right: 2%; */
/* line-height: 1.8; */
}
.znDiv1 .wenzi .txt{
line-height: 1.8;
}
.contactBott {
background: #0091CE;
padding-top: 80px;
padding-bottom: 100px;
}
.znDiv2 {
background: #FAFAFA;
padding-top: 100px;
padding-bottom: 80px;
}
.znDiv2 .content>.tab li {
padding: 0 40px;
text-align: center;
padding-bottom: 20px;
position: relative;
}
.znDiv2 .content>.tab li::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 0px;
height: 3px;
background: #0091CE;
transition: all 0.5s;
}
.znDiv2 .content>.tab li img {
filter: grayscale(100);
opacity: 0.8;
width: 3.38vw;
}
.znDiv2 .content>.tab li.active img {
filter: initial;
}
.znDiv2 .content>.tab li.active p {
color: #0091CE;
}
.znDiv2 .content>.tab li:hover::after,
.znDiv2 .content>.tab li.active::after {
width: 50px;
}
.swTab {
display: flex;
align-items: center;
justify-content: space-between;
}
.swTab>.tab {
width: 42%;
}
.swTab>.tab li a {
display: flex;
padding: 2vw 20% 2vw 0;
box-sizing: border-box;
}
.swTab>.tabCon {
width: 58%;
border-radius: 2vw;
overflow: hidden;
position: relative;
z-index: 999;
height: 21.875vw;
}
.swTab>.tab 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>.tab li.active:before {
width: 150%;
left: -50%;
}
.swTab>.tabCon .tab_cell {
/* display: none; */
position: absolute;
z-index: 9;
top: 0;
left: 0;
}
.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: 23.95vw;
width: 100%;
object-fit: cover;
}
.swTab>.tabCon .tab_cell img.showImg {
transform: translateX(0);
}
.swTab>.tab 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: 10px;
}
.swTab>.tab li a {
position: relative;
z-index: 99;
}
.swTab>.tab li.active .jt {
opacity: 1;
}
.znDiv3 {
background: url(../img/zn_bg1.png) no-repeat center center;
background-size: cover;
padding-top: 100px;
padding-bottom: 45px;
}
.znDiv3 .flDiv {
width: 35%;
position: relative;
}
.znDiv3 .flDiv .swiper-container {
height: 120px;
}
.bYear {
font-size: 100px;
line-height: 1;
margin-bottom: 10px;
color: #fff;
}
.bYear span {
font-size: 36px;
}
.znDiv3 .flDiv .line {
width: 58px;
height: 4px;
background: #0091CE;
margin-top: 25px;
}
.znDiv3 .wrap {
display: flex;
justify-content: space-between;
/* align-items: center; */
}
.znDiv3 .frDiv {
width: 55%;
position: relative;
display: flex;
align-items: center;
/* margin-bottom: 30px; */
/* margin-top:13%; */
}
.znDiv3 .frDiv .swiper-container {
margin-left: 0;
}
.znDiv3 .frDiv .textDiv {
/* padding: 35px 0; */
position: relative;
display: flex;
align-items: center;
}
.znDiv3 .frDiv .textDiv .txt {
color: #fff;
}
.znDiv3 .frDiv .swiper-slide .wenzi {
opacity: 0.4;
}
.znDiv3 .frDiv .swiper-slide-active .wenzi {
opacity: 1;
}
.znDiv3 .frDiv .swiper-slide-active .wenzi .txt {
font-size: 18px;
font-weight: bold;
}
.znDiv3 .frDiv .swiper-slide .wenzi .txt p {
padding-left: 12px;
position: relative;
margin: 8px 0;
}
.znDiv3 .frDiv .swiper-slide .wenzi .txt p:before {
content: "";
position: absolute;
width: 6px;
height: 6px;
background: #FFFFFF;
top: 7px;
left: 0;
/* transform: translateY(-50%); */
border-radius: 50%;
}
.znDiv3 .frDiv .swiper-slide-active .wenzi .txt p:before {
top: 8px;
}
/* .znDiv3 .frDiv .swiper-slide-active .textDiv .dian{
background: #0091CE;
} */
.znDiv3 .frDiv .swiper-container {
height: 400px;
width: 70%;
padding-right: 10%;
margin-top: 24%;
}
.znDiv3 .frDiv .swiper-pagination {
right: 0;
left: auto;
background: rgba(255, 255, 255, .5);
height: 80%;
top: auto;
bottom: 0;
}
.znDiv3 .frDiv .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #fff;
}
.wl_wz .en {
letter-spacing: 10px;
text-transform: uppercase;
}
.znDiv4 .swiper-container {
padding: 1px;
padding-bottom: 60px;
}
.znDiv4 .swiper-button-black {
width: 55px;
height: 55px;
background-color: #FFFFFF;
border-radius: 50%;
background-size: 18%;
top: 37%;
border: 1px #ccc solid;
/* opacity: 0.8; */
}
.znDiv4 .swiper-button-prev {
left: -10%;
}
.znDiv4 .swiper-button-black:hover {
background-color: #0091CE;
}
.znDiv4 .swiper-button-prev:hover {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.znDiv4 .swiper-button-next:hover {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.znDiv4 .swiper-pagination-bullet {
width: 10px;
height: 10px;
}
.znDiv4 .swiper-button-next {
right: -10%;
}
.znDiv4 .swiper-pagination-bullet-active {
background: #0091CE;
}
.znDiv4 .swiper-container {}
.znDiv4 .imgDiv {
border: 1px solid #f2f2f2;
}
.shuju .num .counter {
line-height: 1;
}
.shuju .num {
display: flex;
align-items: flex-end;
display: inline-block;
}
.shuju .num sup {
/* position: absolute;
top: 0;
right: -20px; */
display: inline-block;
transform: translateY(-10%);
line-height: 1;
}
/*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;
}
.bn_logo {
max-height: 15px;
top: 25px;
right: 15px;
}
.par100 {
padding: 45px 0;
}
.font16 {
font-size: 14px;
}
.font36 {
font-size: 18px;
}
.font18 {
font-size: 14px;
}
.font42 {
font-size: 24px;
}
.font24 {
font-size: 14px;
}
.scDiv3 .content .swYear {
margin-bottom: 0;
}
.znDiv1 {
background: none;
}
.znDiv1 .wrap {
display: block;
}
.znDiv1 .wrap .wenzi {
width: 100%;
}
.znDiv2 .content>.tab li {
width:33.33%;
padding: 0 0 10px 0;
margin-top:10px;
box-sizing:border-box;
}
.znDiv2 .content>.tab{flex-wrap:wrap !important;}
.znDiv2 .content>.tab li img {
width: 36px;
}
.znDiv2 .content>.tab li:hover::after,
.znDiv2 .content>.tab li.active::after {
width: 28px;
}
.swTab {
display: block;
}
.swTab>.tab {
width: 100%;
}
.swTab>.tab li{padding-right:10% !important;}
.swTab>.tab li a {
padding: 15px 0;
}
.swTab>.tab li .jt {
width: 25px;
}
.swTab>.tabCon {
width: 100%;
margin-top: 20px;
border-radius: 10px;
}
.znDiv3{height:564px;box-sizing:border-box;}
.znDiv3 .wrap {
display: block;
}
.znDiv3 .flDiv {
width: 100%;
}
.bYear {
font-size: 30px;
}
.bYear span {
font-size: 20px;
}
.znDiv3 .flDiv .swiper-container {
height: 50px;
}
.znDiv3 .frDiv {
width: 100%;
}
.znDiv3 .frDiv .swiper-container {
width: 100%;
margin-top: 30px;
}
.znDiv3 .frDiv .textDiv {
height: auto;
}
.znDiv3 .frDiv .swiper-container {
height: 120px;
}
.znDiv3 {
padding-top: 40px;
padding-bottom: 30px;
}
.swTab>.tabCon {
height: 200px;
}
.znDiv3 .frDiv .swiper-slide-active .wenzi .txt {
font-size: 14px;
}
.znDiv3 .frDiv .swiper-container {
height: auto;
}
.znDiv4 .swiper-pagination-bullet {
width: 6px;
height: 6px;
}
.shuju {
width: 100%;
}
.shuju ul{flex-wrap:wrap !important;}
.shuju ul li{width:100%;margin-bottom:20px;}
.znDiv3 .frDiv .swiper-pagination {
top: 0;
bottom: auto;
height: 5px;
}
.znDiv3 .frDiv .swiper-slide .wenzi .txt {
margin-top: 20px;
padding-right: 30px;
}
.znDiv3 .frDiv .swiper-container {
padding-right: 0;
}
.znDiv4 .swiper-button-black {
width: 35px;
height: 35px;
}
.znDiv4 .content {
width: 80%;
margin: 0 auto;
margin-top: 20px;
}
.znDiv4 .swiper-button-next {
right: -15%;
top: 42%;
}
.znDiv4 .swiper-button-prev {
left: -15%;
top: 42%;
}
.swTab>.tabCon .tab_cell img {
max-height: initial;
}
.swTab>.tab li.active:before{
left: -20%;
}
}
/*PAD屏幕下的专用样式*/
@media screen and (min-width: 768px) and (max-width:992px) {
.font30 {
font-size: 22px;
}
.znDiv2 .content>.tab li {
padding: 0 5%;
padding-bottom: 15px;
}
.znDiv2 .content ul{flex-wrap:wrap !important;}
.znDiv3 .frDiv .swiper-container {
height: 300px;
}
.znDiv3 .frDiv .textDiv {
height: 100%;
}
.swTab>.tab,
.swTab>.tabCon {
width: 50%;
}
.swTab {
display: flex;
}
.znDiv3 .frDiv {
margin-top: 30px;
}
.znDiv3 .frDiv .swiper-container {
height: 240px;
}
.swTab>.tabCon {
height: 200px;
}
.znDiv4 .content {
width: 80%;
margin: 0 auto;
}
.znDiv3 .frDiv .swiper-pagination {
height: 80%;
}
}
/*中等PC屏幕下的专用样式*/
@media screen and (min-width:993px) and (max-width:1024px) {
body,
html {
font-size: 12px;
}
.wrap {
width: 94%;
padding: 0 3%;
min-width: initial;
}
.wrap2 {
width: 94%;
margin: 0 auto;
min-width: initial;
}
.znDiv3 .frDiv .swiper-container {
width: 90%;
}
.font48 {
font-size: 40px;
}
.contactBott .wrap {
min-width: 90%;
width: 90%;
}
.font36 {
font-size: 30px;
}
.swTab>.tab li a {
padding: 20px 0;
}
.swTab>.tab li .jt {
height: 30px;
width: 30px;
}
.swTab>.tabCon {
height: 300px;
}
.znDiv4 .content {
width: 80%;
margin: 0 auto;
}
}
@media screen and (min-width:1025px)and (max-width:1500px) {
.wrap {
width: 75% !important;
}
.wrap2 {
margin: 0 auto;
min-width: 75%;
width: 75%;
}
.bn_logo {
max-height: 40px;
}
.znDiv1 .wrap {
width: 75%;
}
.bYear {
font-size: 74px;
}
.znDiv3 .frDiv .swiper-slide-active .wenzi .txt {
font-size: 16px;
}
.bn_logo {
max-height: 35px;
max-width: 200px;
}
.znDiv3 {
padding: 60px 0;
padding-bottom: 40px;
}
.znDiv3 .frDiv .swiper-container {
width: 85%;
}
.wl_wz {
margin-top: 50px;
}
}
@media screen and (min-width:1501px)and (max-width:1580px) {
.wrap {
width: 75%;
}
.font36 {
font-size: 32px;
}
.wrap {
width: 80%;
}
}