锘緻charset "utf-8"; .banner { overflow: hidden; height: 46.875vw; width: 100%; } .banner .swiper-container { --swiper-navigation-color: #fff; --swiper-navigation-size: 20px; } .banner .swiper-container, .banner .swiper-slide { height: 100%; width: 100%; overflow: hidden; } .banner .swiper-slide { position: relative; background-repeat: no-repeat; background-size: cover; background-position: center; } .banner .slide-inner { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-size: cover; background-position: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #fff; } .banner img { position: absolute; top: 245px; left: 22%; } .banner .swiper-button-prev, .banner .swiper-button-next { color: #fff; opacity: 0; -webkit-transition: all .5s; transition: all .5s; width: 66px; height: 66px; background: rgba(0, 0, 0, .5); } .banner .swiper-button-next:after, .banner .swiper-button-prev:after { font-family: 'iconfont'; font-size: 20px; } .banner .swiper-button-next:after { margin-left: 5px; content: '\e817'; } .banner .swiper-button-prev:after { margin-right: 5px; content: '\e818'; } .banner:hover .swiper-button-prev, .banner:hover .swiper-button-next { opacity: 1; } .main { background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, .1); position: relative; z-index: 3; } .news { padding: 40px 0; } .index-tit { font-size: 28px; color: #313131; line-height: 1.5; } .index-tit, .culture-tit { position: relative; padding-left: 17px; } .index-tit:before, .culture-tit:before { content: ''; display: block; position: absolute; top: 50%; left: 0; background: #d91519; width: 3px; height: 27px; transform: translatey(-50%); } .index-tit a.more { position: absolute; top: 50%; right: 0; transform: translatey(-50%); font-size: 14px; color: #868686; display: inline-block; line-height: 1.5; } .index-tit a.more:hover { color: #da1218; } .news-flex { margin-top: 35px; overflow: hidden; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .news-swiper { width: 880px; height: 408px; overflow: hidden; } .news-swiper .swiper-slide a { display: block; height: 408px; position: relative; } .news-swiper .swiper-slide img { display: block; width: 100%; height: 100%; } .news-swiper .swiper-slide .tit { color: #fff; font-size: 14px; padding: 2em 20px; position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-list { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; margin-left: 40px; } .news-list li { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #dedede; } .news-list a { display: flex; } .news-list .txt { flex: 1; } .news-list .date { background: #eee; height: 110px; width: 110px; padding-left: 17px; font-weight: bold; padding-top: 25px; margin-right: 20px; } .news-list .day { font-size: 24px; color: #da1218; line-height: 30px; } .news-list .year { font-size: 18px; color: #868686; line-height: 24px; margin-top: 3px; } .news-list .tit { font-size: 18px; color: #565656; line-height: 24px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; padding-top: 15px; margin-bottom: 12px; transition: all .3s; } .news-list .info { font-size: 14px; color: #565656; line-height: 1.714; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: all .3s; } .news-list a:hover .tit, .news-list a:hover .info { color: #da1218; } .company-about { background: #f6f6f6 url(/uploads/image/tzssimages/company_bg.png) no-repeat center bottom; padding: 55px 0 120px; } .company-num { justify-content: center; margin-top: 50px; } .company-num li { margin: 0 90px; } .company-num .num { overflow: hidden; } .company-num .num i { font-style: normal; font-size: 42px; color: #d91519; float: left; display: block; line-height: 50px; } .company-num .num span { font-size: 14px; color: #565656; float: left; display: block; line-height: 20px; margin-top: 23px; margin-left: 5px; } .company-num .tit { font-size: 16px; color: #868686; line-height: 24px; margin-top: 8px; } .business-area { background: url(/uploads/image/tzssimages/business.jpg) no-repeat center; background-size: cover; padding: 55px 0 140px; } .business-list { margin-top: 60px; justify-content: space-between; } .business-list li { width: 22.7%; position: relative; } .business-list li div { height: 0; padding-top: 53.3%; position: relative; } .business-list li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; border: 2px solid #dedede; } .business-list li:before, .business-list li:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 0; height: 0; border: 2px solid transparent; box-sizing: border-box; z-index: 1; pointer-events: none; } .business-list li:hover::after { left: auto; top: auto; bottom: 0; right: 0; } .business-list li:hover::before, .business-list li:hover::after { width: 100%; height: 100%; } .business-list li:hover::before { border-top-color: #d91519; border-right-color: #d91519; transition: width 0.15s ease-out, height 0.15s ease-out 0.15s; } .business-list li:hover::after { border-bottom-color: #d91519; border-left-color: #d91519; transition: border-color 0s ease-out 0.3s, width 0.15s ease-out 0.3s, height 0.15s ease-out 0.45s; } .business-list li i { display: block; background-repeat: no-repeat; background-position: center; margin-bottom: 24px; text-align: center; } .business-list li i:after { display: block; line-height: 1.1; content: ''; font-family: 'iconfont'; font-size: 40px; color: #d91519; font-style: normal; } .business-list li:nth-of-type(1) i:after { /* background-image: url(/uploads/image/tzssimages/icon_01.png); */ content: '\e676'; } .business-list li:nth-of-type(2) i:after { /* background-image: url(/uploads/image/tzssimages/icon_02.png); */ content: '\e675'; } .business-list li:nth-of-type(3) i:after { /* background-image: url(/uploads/image/tzssimages/icon_03.png); */ content: '\e677'; } .business-list li:nth-of-type(4) i:after { /* background-image: url(/uploads/image/tzssimages/icon_04.png); */ content: '\e678'; } .business-list li p { color: #484848; font-size: 18px; line-height: 1.5; } .company-wrapper { width: 100%; max-width: 1322px; margin: 30px auto 0; } .company-wrapper .txt { font-size: 18px; color: #565656; line-height: 2; text-align: justify; } .culture { padding: 45px 0 65px; } .culture-swiper .swiper-slide .tit { font-size: 16px; color: #565656; line-height: 1.2; margin-top: 0.6em; text-align: center; } .culture-flex { justify-content: space-between; } .culture-right { width: 22.6%; position: relative; } .culture-tit { font-size: 28px; color: #1b1b1b; line-height: 40px; margin-bottom: 25px; } .culture-mag { position: relative; } .culture-mag-padding { position: relative; padding-top: 105%; border: 1px solid #dedede; } .culture-swiper, .display-swiper { width: 100%; position: absolute; top: 0; left: 0; height: 100%; } .culture-swiper .swiper-container, .display-swiper .swiper-container { height: 100%; } .culture-swiper .swiper-slide a { display: flex; align-items: center; flex-direction: column; justify-content: center; height: 100%; } .culture-swiper .swiper-slide .pic { padding: 0 17.5%; position: relative; } .culture-swiper .swiper-slide .pic img { display: block; width: 100%; } .culture-swiper .swiper-button-prev { left: 2%; } .culture-swiper .swiper-button-next { right: 2%; } .culture-swiper .swiper-button-prev:after, .culture-swiper .swiper-button-next:after { color: #868686; font-size: 40px; } .culture-swiper .swiper-button-next.swiper-button-disabled, .culture-swiper .swiper-button-prev.swiper-button-disabled { opacity: 1; } .culture-swiper .swiper-button-next.swiper-button-disabled:after, .culture-swiper .swiper-button-prev.swiper-button-disabled:after { color: #aeaead; } .culture-mid { width: 39.28%; } .promotional { height: 0; padding-top: 60.6%; position: relative; } .promotional-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; cursor: pointer; } .promotional-video img { display: block; width: 100%; height: 100%; } .promotional-video:after { content: '\e607'; font-family: 'iconfont'; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; background: rgba(0, 0, 0, .5); width: 70px; height: 70px; text-align: center; line-height: 70px; border-radius: 100%; font-size: 40px; pointer-events: none; transition: all .6s; z-index: 1; } .promotional-video:hover:after { transform: translate(-50%, -50%) scale(1.1); } .culture-left { width: 33.33%; } .history-display { height: 0; padding-top: 71.42%; position: relative; } .display-swiper .swiper-slide a, .display-swiper .swiper-slide a img { display: block; height: 100%; width: 100%; } .display-swiper .swiper-pagination-bullet { background: rgba(255, 255, 255, .5); opacity: 1; width: 10px; height: 10px; border-radius: 100%; padding: 0; } .display-swiper .swiper-pagination-bullet-active { background: #da1218; } .business-swiper { position: relative; } .business-swiper-btn { display: flex; width: 100%; position: absolute; z-index: 2; top: 0; left: 0; } .business-swiper-btn li { width: 25%; display: flex; align-items: center; justify-content: center; color: #fff; position: relative; background: rgba(0, 0, 0, .2); cursor: pointer; transition: all .3s; height: 80px; } .business-swiper-btn li:not(:last-of-type) { margin-right: 1px; } .business-swiper-btn i { font-size: 44px; } .business-swiper-btn p { font-size: 20px; margin-left: 10px; } .business-swiper-btn li.on { background: #d9181c; } .business-swiper-btn li.on p { font-weight: bold; } .business-swiper .swiper-slide a { display: block; padding-top: 40%; position: relative; } .business-swiper .swiper-slide img { display: block; height: 100%; width: 100%; position: absolute; top: 0; left: 0; } /* responsive */ @media screen and (max-width: 1500px) { .news-list { margin-left: 20px; } .news-swiper { width: 750px; height: 347px; } .news-swiper .swiper-slide a { height: 347px; } .news-list .date { width: 90px; height: 90px; padding-top: 16px; padding-left: 14px; } .news-list .day { font-size: 22px; } .news-list .year { font-size: 16px; } .news-list .tit { font-size: 16px; padding-top: 7px; margin-bottom: 10px; } .news-list li { margin-bottom: 14px; } .culture-swiper .swiper-slide .tit { font-size: 14px; } .culture-swiper .swiper-button-prev:after, .culture-swiper .swiper-button-next:after { font-size: 36px; } } @media screen and (max-width: 1400px) {} @media screen and (max-width: 1230px) { .news-flex { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .news-swiper, .news-swiper .swiper-slide a { width: 100%; height: 44.5vw; } .news-list { width: 100%; margin-left: 0; margin-top: 15px; flex: unset; } .news-list .date { font-weight: normal; width: 80px; height: 85px; margin-right: 10px; } .news-list .day { font-size: 20px; } .news-list .year { font-size: 15px; } .news-list .tit { padding-top: 4px; margin-bottom: 6px; } .banner img { top: 0.75rem; left: 0.3rem; width: 40%; } .business-area { padding-bottom: 60px; } .business-list { flex-wrap: wrap; } .business-list li p { font-size: 16px; } .business-list li i { margin-bottom: 18px; } .business-list li div { padding-top: 60%; } .company-num { justify-content: space-around; } .company-num li { margin: 0; } .culture-flex { flex-wrap: wrap; } .business-swiper-btn i { font-size: 38px; } .business-swiper-btn p { font-size: 18px; } } @media screen and (max-width: 960px) { .company-about { background-size: cover; } .business-list li { width: 47%; margin-bottom: 4vw; } .culture-swiper { position: static; } .culture-swiper .swiper-slide a { display: block; padding-bottom: 15px; } .culture-left, .culture-mid, .culture-right { width: 100%; } .culture-left, .culture-mid { margin-bottom: 50px; } .culture-mag-padding { height: auto; padding: 0; } .display-swiper .swiper-pagination-bullet { width: 8px; height: 8px; } .business-swiper-btn li { height: 70px; } .business-swiper-btn i { font-size: 32px; } .business-swiper-btn p { font-size: 16px; margin-left: 8px; } } @media screen and (max-width: 768px) { .content { padding-left: 15px; padding-right: 15px; } .banner .swiper-button-prev, .banner .swiper-button-next { display: none; } .index-tit { font-size: 18px; } .index-tit:after { height: 1px; width: 40px; margin-left: -20px; } .news, .realty { padding: 25px 0 20px; } .realty-swiper .swiper-pagination { bottom: 20px; } .news-flex, .business-list { margin-top: 25px; } .business-area { padding: 30px 0 20px; } .business-list li {} .business-list li a { border-width: 1px; } .business-list li i { margin-bottom: 0.08rem; } .business-list li i:after { font-size: 0.24rem; } .business-list li p { font-size: 14px; } .company-about { padding: 25px 0 40px; } .company-num { margin-top: 20px; } .company-num .num i { font-size: 24px; line-height: 30px; } .company-num .num span { font-size: 10px; line-height: 16px; margin-top: 11px; } .company-num .tit { font-size: 14px; margin-top: 0px; } .company-wrapper .txt { font-size: 14px; line-height: 1.6; } .company-wrapper { margin-top: 15px; } .culture-swiper .swiper-button-prev:after, .culture-swiper .swiper-button-next:after { font-size: .14rem; } .culture { padding: 25px 0 40px; } .culture-swiper .swiper-slide .tit { font-size: 14px; } .culture-left, .culture-mid { margin-bottom: 30px; } .culture-tit { font-size: 18px; line-height: 24px; margin-bottom: 15px; } .promotional-video:after { width: 50px; height: 50px; line-height: 50px; font-size: 26px; } .business-swiper-btn li { height: 60px; } .business-swiper-btn i { font-size: 24px; } .business-swiper-btn p { font-size: 14px; margin-left: 4px; } } @media screen and (max-width: 560px) { .business-swiper-btn li { height: 44px; } .business-swiper-btn i { display: none; } .business-swiper-btn p { font-size: 12px; white-space: nowrap; } } @media screen and (max-width: 480px) { .culture-swiper .swiper-button-prev:after, .culture-swiper .swiper-button-next:after { font-size: .2rem; } .banner { display: none; } } @media screen and (max-width: 400px) {}