#fullpage .section .container { max-width: 1500px; height: calc(100vh - 150px); padding: 20px 4%; margin: 0 auto; margin-top: 120px; font-size: 0; } @media screen and (min-width:768px) and (max-width:1500px) { #fullpage .section .container , #fullpage .section .container{ padding: 20px 7.4% !important; } #fullpage .section#section3 .product ul.article li article a .picture { padding-bottom: 120%!important; } #fullpage .section#section3 .product ul.article li article a .picture img { top: 30%!important; } } #fullpage .section .container.vertical-center { display: flex; align-items: center; } #fullpage .section .container > div { width: 100%; } #fullpage .section#section2 .about { position: relative; display: flex; flex-wrap: wrap; align-items: center; height: auto; } #fullpage .section#section2 .about > .content { width: 50%; display: inline-block; vertical-align: top; padding-right: 20px; box-sizing: border-box; } @media screen and (max-width: 768px) { #fullpage .section#section2 .about > .content > .title img { max-width: 40%; } } #fullpage .section#section2 .about > .content > .sub { margin-top: 20px; color: #00477b; } @media screen and (max-width: 768px) { #fullpage .section#section2 .about > .content > .sub { margin-top: 10px; } } #fullpage .section#section2 .about > .content > .sub h2 { font-size: 34px; color:#e7791a; } #fullpage .section#section2 .about > .content > .sub h2::after { content: ''; display: block; width: 30%; max-width: 50px; height: 3px; margin: 20px 0; background-color: #00477b; } @media screen and (max-width: 768px) { #fullpage .section#section2 .about > .content > .sub h2 { font-size: 24px; } #fullpage .section#section2 .about > .content > .sub h2::after { margin: 10px 0; } } #fullpage .section#section2 .about > .content > .summary p { font-size: 14px; line-height: 1.7; color: #535353; } #fullpage .section#section2 .about > .content > .button { margin-top: 20px; } #fullpage .section#section2 .about > .content > .about-num { margin-top: 20px; } #fullpage .section#section2 .about > .content > .about-num ul.content li { float: left; position: relative; width: auto; min-height: 60px; margin: 0 0 10px 0; padding: 0 4% 0 4%; border-left: 1px solid #ccc; } #fullpage .section#section2 .about > .content > .about-num ul.content li::before { content: ''; position: absolute; left: -1px; top: 0; z-index: 1; width: 2px; height: 50%; background: #e7791a; } #fullpage .section#section2 .about > .content > .about-num ul.content li h2.counter { display: inline-block; font-family: 'bebas'; line-height: 40px; font-size: 24px; color: #444; } #fullpage .section#section2 .about > .content > .about-num ul.content li i.count-unit { display: inline-block; font-size: 14px; color: #00477b; } #fullpage .section#section2 .about > .content > .about-num ul.content li p { line-height: 20px; font-size: 14px; color: #888; } #fullpage .section#section2 .about > .picture { width: 50%; padding-left:4%; } #fullpage .section#section2 .about > .picture > * { width: 100%; } @media screen and (max-width: 768px) { #fullpage .section#section2 .about > .content { width: 100%; } #fullpage .section#section2 .about > .picture { display: none; width: 100%; } #fullpage .section#section2 .about > .content > .summary p{ display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; width:100%; overflow:hidden; text-overflow:ellipsis;} } #fullpage .section#section2 .about .animate-1 { /* transform: translatex(-10%); opacity: 0; transition: transform 1s ease-in-out 200ms;*/ } #fullpage .section#section2 .about .animate-1 img{ width:40%; } #fullpage .section#section2 .about .animate-2 { /* transform: translatex(-10%); opacity: 0; transition: transform 1s ease-in-out 500ms;*/ } #fullpage .section#section2 .about .animate-3 { /* transform: translatex(-10%); opacity: 0; transition: transform 1s ease-in-out 800ms; */ text-align: justify; } #fullpage .section#section2 .about .animate-4 { /* transform: translatex(-10%); opacity: 0; transition: transform 1s ease-in-out 1100ms; */ } #fullpage .section#section2 .about .animate-5 { /* transform: translatex(-10%); opacity: 0; transition: transform 1s ease-in-out 1400ms; */ display:none; } #fullpage .section#section2 .about .animate-6 { /* transform: translatey(24vh); opacity: 0; transition: transform 1s ease-in-out 1700ms; */ } #fullpage .section#section2 { background-image: url(/uploads/image/tdimages/ljf2.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } #fullpage .section#section3 { background-image: ; background-repeat: no-repeat; background-position: center; background-size: cover; } #fullpage .section#section3 .product > .title h2 { font-size: 34px; color: #e7791a; text-align:center; } #fullpage .section#section3 .product > .title::after { content: ''; display: block; width: 30%; max-width: 85px; height: 2px; margin-top: 10px; margin-bottom: 10px; margin-left: auto; margin-right: auto; background-color: #00477b; } #fullpage .section#section3 .product > .sub { font-size: 14px; color: #666666; text-align:center; } #fullpage .section#section3 .product .swiper-container { margin-top: 20px; } #fullpage .section#section3 .product .swiper-container .swiper-wrapper .swiper-slide { transform: scale(1); } #fullpage .section#section3 .product .swiper-container .swiper-wrapper .swiper-slide-active a .content h3.title { font-size:18px; } #fullpage .section#section3 .product .swiper-container .swiper-wrapper .swiper-slide-active a .content h4.sub { font-size:15px; } #fullpage .section#section3 .product .swiper-container .swiper-wrapper .swiper-slide-active a .content p.summary { font-size:12px; line-height: 20px; } #fullpage .section#section3 .product .swiper-container .swiper-wrapper .swiper-slide-active { transform: scale(1); } #fullpage .section#section3 .product .swiper-button-box { margin-top: 10px; text-align: right; } #fullpage .section#section3 .product .swiper-button-box .swiper-button, #fullpage .section#section3 .product .swiper-button-box .swiper-button-prev, #fullpage .section#section3 .product .swiper-button-box .swiper-button-next { position: static; display: inline-block; width: 40px; height: 40px; margin: 0; text-align: center; line-height: 40px; background-image: none; background-color: #00477b; font-family: simsun; font-size: 24px; font-weight: bold; color: #fff; transition: all 0.3s; } #fullpage .section#section3 .product .swiper-button-box .swiper-button:hover, #fullpage .section#section3 .product .swiper-button-box .swiper-button-prev:hover, #fullpage .section#section3 .product .swiper-button-box .swiper-button-next:hover { background-color: #e7791a; } #fullpage .section#section3 .product .swiper-button-box .swiper-button-prev { left: auto; margin-right: 5px; } #fullpage .section#section3 .product .swiper-button-box .swiper-button-disabled { background-color: #999999; } @media screen and (max-width: 768px) { #fullpage .section#section3 .product .swiper-button-box { text-align: center; } } #fullpage .section#section3 .product ul.article { width: 100%; font-size: 0; } #fullpage .section#section3 .product ul.article li { display: inline-block; box-sizing: border-box; transition: all 0.5s linear 0s; } #fullpage .section#section3 .product ul.article li article { overflow: hidden; } #fullpage .section#section3 .product ul.article li article a { position: relative; display: block; } #fullpage .section#section3 .product ul.article li article a .picture { position: relative; width: 100%; height: 0; padding-bottom: 100%; } #fullpage .section#section3 .product ul.article li article a .picture img { position: absolute; top: 41%; left: 50%; width: 100%; height: auto; transform: translate(-50%, -50%); } #fullpage .section#section3 .product ul.article li article a .content { position: absolute; left: 0; bottom: 0px; width: 100%; text-align: center; padding: 0 10%; box-sizing: border-box; color: #000!important; /* background-color: rgba(231, 121, 26, 0.5); */ opacity: 1; transition: color 0.4s ease, opacity 0.5s, bottom 0.4s; } #fullpage .section#section3 .product ul.article li article a .content h3.title { position: relative; font-size: 18px; line-height: 16px; color: #333; } #fullpage .section#section3 .product ul.article li article a .content h4.sub { font-size: 14px; line-height: 16px; color: #f9f9f9; } #fullpage .section#section3 .product ul.article li article a .content p.summary { margin-top: 7px; font-size: 12px; min-height: 65px; color: #777; } #fullpage .section#section3 .product ul.article li article:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } #fullpage .section#section3 .product ul.article li article:hover a .content { opacity: 1; bottom: 20px; color: #fff; } #fullpage .section#section3 .product ul.article li article:hover a h3.title{ color:#e7791a; } #fullpage .section#section3 .product .animate-1 { /* transform: translatey(10vh); opacity: 0; transition: transform 1s ease-in-out 200ms; */ } #fullpage .section#section3 .product .animate-2 { /* transform: translatey(10vh); opacity: 0; transition: transform 1s ease-in-out 500ms; */ } #fullpage .section#section3 .product .animate-3 { /* transform: translatey(20vh); opacity: 0; transition: transform 1s ease-in-out 800ms; */ } #fullpage .section#section3 .product .animate-4 { /* transform: translatey(10vh); opacity: 0; transition: transform 1s ease-in-out 1100ms; */ } #fullpage .section#section4 { background-image: url(/uploads/image/tdimages/case_back.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } #fullpage .section#section4 .case { text-align: center; } #fullpage .section#section4 .case > .title h2 { font-size: 34px; color: #e7791a; } #fullpage .section#section4 .case > .title::after { content: ''; display: block; width: 30%; max-width: 85px; height: 2px; margin-top: 10px; margin-bottom: 10px; margin-left: auto; margin-right: auto; background-color: #00477b; } #fullpage .section#section4 .case > .sub { font-size: 14px; color: #666666; } #fullpage .section#section4 .case ul.case-list { display: flex; flex-wrap: nowrap; margin-top:3vh; width: 100%; justify-content: space-between; } @media screen and (max-width: 768px) { #fullpage .section#section4 .case ul.case-list { margin-top: 20px; } } #fullpage .section#section4 .case ul.case-list li { position: relative; flex: 1; display: inline-block; max-width: calc(105% / 5); margin-right: 30px; box-sizing: border-box; } #fullpage .section#section4 .case ul.case-list li:last-child { margin-right: 0; } @media screen and (max-width: 768px) { #fullpage .section#section4 .case ul.case-list li { flex: auto; width: calc(50% - 10px); max-width: none; margin:4px 5px; } #fullpage .section#section4 .case ul.case-list li:nth-child(2n 2) { margin-right: 0; } } #fullpage .section#section4 .case ul.case-list li a { display: block; position: relative; z-index: 2; padding: 12vh 10px; background: linear-gradient(rgba(0,71,123,0.1),rgba(0,71,123,0.5)); transition: all 0.7s ease-in-out 0s; -webkit-transition:all 0.7s ease-in-out; -moz-transition:all 0.7s ease-in-out; } #fullpage .section#section4 .case ul.case-list li:hover a{ padding: 10vh 10px 14vh 10px; } @media screen and (max-width: 768px) { #fullpage .section#section4 .case ul.case-list li a { padding: 30px 5px; } } #fullpage .section#section4 .case ul.case-list li a .icon img { width: auto; max-width: 66px; } #fullpage .section#section4 .case ul.case-list li a .title { margin-top: 10px; } #fullpage .section#section4 .case ul.case-list li a .title h3 { font-size: 26px; color: #fff; } @media screen and (max-width: 768px) { #fullpage .section#section4 .case ul.case-list li a .title h3 { font-size: 18px; } } #fullpage .section#section4 .case ul.case-list li a .title::after { content: ''; display: block; width: 30%; max-width: 45px; height: 2px; margin: 10px auto; background-color: #fff; } #fullpage .section#section4 .case ul.case-list li a .content { margin-top: 20px; } #fullpage .section#section4 .case ul.case-list li a .content p { font-size: 16px; font-weight: 400; color: #fff; font-family: 'bebas'; } #fullpage .section#section4 .case ul.case-list li:nth-child(1) { background-image: url(/uploads/image/tdimages/case_item_back_1.jpg); background-size: cover; } #fullpage .section#section4 .case ul.case-list li:nth-child(2) { background-image: ; background-size: cover; } #fullpage .section#section4 .case ul.case-list li:nth-child(3) { background-image: ; background-size: cover; } #fullpage .section#section4 .case ul.case-list li:nth-child(4) { background-image: url(/uploads/image/tdimages/case_item_back_4.jpg); background-size: cover; } #fullpage .section#section4 .case ul.case-list li::after { content: ''; display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: transparent; transition: background .3s; } #fullpage .section#section4 .case ul.case-list li:hover a { background:linear-gradient(rgba(0,71,123,0.2),rgba(0,71,123,0.8)); transition: all 0.7s ease-in-out 0s; -webkit-transition:all 0.7s ease-in-out; -moz-transition:all 0.7s ease-in-out; } #fullpage .section#section4 .case ul.case-list li:hover{ box-shadow: 0 0 10px rgb(0 0 0 / 20%); } #fullpage .section#section4 .case .animate-1 { /* transform: translatey(10vh); opacity: 0; transition: transform 1s ease-in-out 200ms; */ } #fullpage .section#section4 .case .animate-2 { /* transform: translatey(10vh); opacity: 0; transition: transform 1s ease-in-out 500ms; */ } #fullpage .section#section4 .case .animate-3 { /* transform: translatey(20vh); opacity: 0; transition: transform 1s ease-in-out 800ms; */ } #fullpage .section#section5 { background-image: url(/uploads/image/tdimages/news_bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } #fullpage .section#section5 .news .top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 2vh; } #fullpage .section#section5 .news .top .top-left > .title h2 { font-size: 34px; color: #e7791a; text-align:center; } #fullpage .section#section5 .news .top .top-left > .title::after { content: ''; display: block; width: 30%; max-width: 85px; height: 2px; margin-top: 10px; margin-bottom: 10px; background-color: #00477b; margin-left: auto; margin-right: auto; } #fullpage .section#section5 .news .top .top-left > .sub { font-size: 14px; color: #666666; text-align:center; } #fullpage .section#section5 .news .top .more-link { width: 100%; max-width: 180px; height: 40px; display: block; position: relative; color: #fff; font-size: 15px; line-height: 1; text-align: center; line-height: 40px; transition: all ease 0.3s; z-index: 1; border: 1px solid #00477b; } @media screen and (max-width: 768px) { #fullpage .section#section5 .news .top .more-link { display: none; } } #fullpage .section#section5 .news .top .more-link::after { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #00477b; z-index: -1; transition: all ease 0.3s; } #fullpage .section#section5 .news .top .more-link:hover { color: #00477b; } #fullpage .section#section5 .news .top .more-link:hover::after { width: 0; } #fullpage .section#section5 .news .news-box { display: flex; } @media screen and (max-width: 768px) { #fullpage .section#section5 .news .news-box { flex-wrap: wrap; margin-top: 10px; } } #fullpage .section#section5 .news .news-box .first-item { width: 48%; margin-right: 2%; margin-bottom: 4px; position: relative; } .news-item.first-item a.item-con h3 { color:#fff;} .news-item.first-item a.item-con p { color:#eee;} @media screen and (max-width: 768px) { #fullpage .section#section5 .news .news-box .first-item { width: 100%; } } #fullpage .section#section5 .news .news-box .first-item .image { width: 100%; height: 100%; position: relative; z-index: 0; } #fullpage .section#section5 .news .news-box .first-item .image img { width: 100%; height: 100%; object-fit: cover; } #fullpage .section#section5 .news .news-box .first-item .item-con { position: absolute; bottom: 0; left: 0; z-index: 9; background-color: rgba(0, 0, 0, 0.6); color: #fff; } #fullpage .section#section5 .news .news-box .first-item .item-con .time::after { background-color: #fff; } #fullpage .section#section5 .news .news-box .item-con { padding:1.47vh 0; width: 100%; display: flex; align-items: center; color: #222; background-color: #fff; transition: all ease 0.4s; } #fullpage .section#section5 .news .news-box .item-con .time { text-align: center; font-size: 18px; position: relative; width: 25%; padding: 0 25px; max-width: 120px; display: inline-block; font-weight: normal; font-family: 'bebas'; } #fullpage .section#section5 .news .news-box .other-item .item-con .time { padding: 0 10px; } @media screen and (max-width: 768px) { #fullpage .section#section5 .news .news-box .item-con .time { display: none ; } } #fullpage .section#section5 .news .news-box .item-con .time::after { content: ''; display: block; width: 1px; height: 100%; position: absolute; right: 0; top: 50%; transform: translatey(-50%); background-color: #000; } #fullpage .section#section5 .news .news-box .item-con .time span { font-size: 34px; display: block; line-height: 42px; } #fullpage .section#section5 .news .news-box .item-con .news-title { width: 70%; padding: 0 25px; display: inline-block; flex: 1; } #fullpage .section#section5 .news .news-box .item-con .news-title h3 { font-size: 16px; margin-bottom: 5px; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #fullpage .section#section5 .news .news-box .item-con .news-title p { font-size: 13px; display: block; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; opacity: .76; } @media screen and (max-width: 768px) { #fullpage .section#section5 .news .news-box .item-con .news-title p { font-size: 12px; -webkit-line-clamp: 1; } } #fullpage .section#section5 .news .news-box .other-item { width: 50%; display: flex; flex-flow: column; justify-content: space-between; } #fullpage .section#section5 .news .news-box .other-item .time { max-width: 120px; min-width: 120px; max-height: 78px; overflow: hidden; } #fullpage .section#section5 .news .news-box .other-item .time img{ width:100%; float:left; height:auto; min-height:100%; } @media screen and (max-width: 768px) { #fullpage .section#section5 .news .news-box .other-item { width: 100%; } } #fullpage .section#section5 .news .news-box .other-item .item-con:hover { color: #fff; } #fullpage .section#section5 .news .news-box .other-item .item-con:hover h3{ color: #e9710b; } #fullpage .section#section5 .news .news-box .other-item .item-con:hover p{ } li.news-item.first-item:hover a.item-con{ background-color: rgba(231,121,26,.77); } #fullpage .section#section5 .news .news-box .other-item .image { display: none; } #fullpage .section#section5 .news .news-box .other-item .news-item { width: 100%; margin-bottom: 4px; display: block; } #fullpage .section#section5 .news .animate-1 { width:100%; /* transform: translatey(10vh); opacity: 0; transition: transform 1s ease-in-out 200ms; */ } #fullpage .section#section5 .news .animate-2 { /* transform: translatey(10vh); opacity: 0; transition: transform 1s ease-in-out 500ms; */ } #fullpage .section#section5 .news .animate-3 { height: 59vh; max-height: 432px; /* transform: translatey(10vh); opacity: 0; transition: transform 1s ease-in-out 800ms; */ } #fullpage .section#section6 .footer { /* min-height: 300px; */ /* height: 100%; */ /* background-color: rgb(41, 41, 41); */ /* padding-bottom: 80px; */ /* display: flex; */ /* justify-content: space-between; */ } @media screen and (max-width: 768px) { #fullpage .section#section6 .footer { flex-wrap: wrap; } } #fullpage .section#section6 .footer .bottom-nav .bottom-nav { display: flex; text-align: center; max-width: 960px; } @media screen and (max-width: 768px) { #fullpage .section#section6 .footer .bottom-nav .bottom-nav { flex-wrap: wrap; } } #fullpage .section#section6 .footer .bottom-nav .bottom-nav .bottom-nav-item { padding: 0 10px; flex: 1; } @media screen and (max-width: 768px) { #fullpage .section#section6 .footer .bottom-nav .bottom-nav .bottom-nav-item { flex: auto; } } #fullpage .section#section6 .footer .bottom-nav .bottom-nav .bottom-nav-item .bottom-title-name > a { font-size: 18px; font-weight: bold; color: #fff; } @media screen and (max-width: 768px) { #fullpage .section#section6 .footer .bottom-nav .bottom-nav .bottom-nav-item .bottom-children-two { display: none; } } #fullpage .section#section6 .footer .bottom-nav .bottom-nav .bottom-nav-item .bottom-children-two .bottom-nav-item { padding-top: 15px; } #fullpage .section#section6 .footer .bottom-nav .bottom-nav .bottom-nav-item .bottom-children-two .bottom-nav-item > a { font-size: 14px; color: #999; } #fullpage .section#section6 .footer .bottom-nav .bottom-nav .bottom-nav-item .bottom-children-two .bottom-nav-item > a:hover { color: #fff; } #fullpage .section#section6 .footer .bottom-img { max-width: 300px; display: flex; justify-content: space-between; } @media screen and (max-width: 768px) { #fullpage .section#section6 .footer .bottom-img { margin: 0 auto; } } #fullpage .section#section6 .footer .bottom-img .img-box { width: 48%; } #fullpage .section#section6 .footer .bottom-img .img-box img { width: 100%; height: auto; } #fullpage .section#section6 .footer .bottom-img .img-box p { color: #fff; font-size: 14px; text-align: center; padding: 5px 0; } #fullpage .section#section6 .bottom { background-color: #202020; position: absolute; bottom: 0; left: 0; width: 100%; min-height: 45px; text-align: center; font-size: 14px; color: #888; line-height: 24px; padding: 0 20px; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 768px) { #fullpage .section#section6 .bottom { width: auto; } } #fullpage .section#section6 .bottom a { font-size: 14px; color: #888; } @media screen and (max-width: 768px) { #fullpage .section#section5 .news .news-box .item-con { padding:10px 0; } #fullpage .section#section5 .news .news-box .item-con .news-title p { display:none; } }