body{font-size: 17px;} /* .w90{ width: 1760px; margin: 0 auto; } .pl-w90{padding-left: calc((100% - 1760px)/2);} .pr-w90{padding-right: calc((100% - 1760px)/2);} .mr-w90{margin-right: calc((100% - 1760px)/2);} .ml-w90{margin-left: calc((100% - 1760px)/2);} */ .inner{ width:1500px; margin: 0 auto; } .pl-inner{ padding-left: calc((100vw - 1500px)/2);} .pr-inner{ padding-right: calc((100vw - 1500px)/2);} .ml-inner{ margin-left: calc((100vw - 1500px)/2);} .mr-inner{ margin-right: calc((100vw - 1500px)/2);} .w80{ width: 1660px; margin: 0 auto; } .pl-w80{padding-left: calc((100% - 1660px)/2);} .pr-w80{padding-right: calc((100% - 1660px)/2);} .mr-w80{margin-right: calc((100% - 1660px)/2);} .ml-w80{margin-left: calc((100% - 1660px)/2);} header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 100 ; color: #fff;} header .con{ } .logoImg{ height: 75px; filter: drop-shadow(500px 0 0 #fff); transform: translateX(-500px); transition: all 0s; -webkit-transition: all 0s; -moz-transition: all 0s; -ms-transition: all 0s; -o-transition: all 0s; -webkit-filter: drop-shadow(500px 0 0 #fff); -webkit-transform: translateX(-500px); -moz-transform: translateX(-500px); -ms-transform: translateX(-500px); -o-transform: translateX(-500px); } .oneNav{ line-height: 100px; white-space: nowrap; font-weight: bold; display: block; padding: 0 2vw; font-size: 18px; } .oneNav span { position: relative;} .oneNav span::after{ width: 100%; height: 2px; display: block; content: ''; background:#fff; transition: all .36s; transform:scale(0,1) ; position: absolute; left: 0; bottom: -10px; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-transform:scale(0,1) ; -moz-transform:scale(0,1) ; -ms-transform:scale(0,1) ; -o-transform:scale(0,1) ; } nav li{ position: relative;} nav li:last-child .oneNav{ padding-right: 0;} nav li.on .oneNav span::after,nav li:hover .oneNav span::after{ transform: scale(1,1); -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); } nav:hover > li:not(:hover) .oneNav{ color: #333; } nav:hover > li:not(:hover) .oneNav span::after{ transform:scale(0,1) ; } nav li dl{position:absolute;text-align: center;min-width:150px; width: auto;top:100%;left: 50%; background:#fff; -webkit-box-shadow:0 13px 42px 11px rgba(0,0,0,.15);box-shadow:0 13px 42px 11px rgba(0,0,0,.15); border-bottom-left-radius:5px;border-bottom-right-radius:5px;} nav li dl dd{white-space: nowrap;height:50px;line-height:50px;border-bottom:1px solid #eee;transition:all .36s ease;-ms-transition:all .36s ease;-o-transition:all .36s ease;-webkit-transition:all .36s ease;-moz-transition:all .36s ease} nav li dl dd:last-child{border-bottom:0} nav li dl dd a{ padding: 0 20px; font-size:14px; color:#333!important; font-weight: normal!important; transition:all .36s ease;-ms-transition:all .36s ease;-o-transition:all .36s ease;-webkit-transition:all .36s ease;-moz-transition:all .36s ease;display:block } nav li dl dd:hover{background:var(--black)} nav li dl dd:hover a{color:#fff!important;} /* nav li dl:before{content:"";position:absolute;border-width:0 9px 9px;border-style:solid;border-color:transparent transparent #f6f1e1;top:-9px;left:50%;margin-left:-9px} */ nav li dl{pointer-events: none; visibility:hidden; opacity:0; filter:alpha(opacity=0); transform:translateX(-50%) translateY(20px); -ms-transform:translateX(-50%) translateY(20px); -o-transform:translateX(-50%) translateY(20px); -webkit-transform:translateX(-50%) translateY(20px); -moz-transform:translateX(-50%) translateY(20px); transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; } nav li:hover dl{ pointer-events: auto;visibility:visible; opacity:1; filter:alpha(opacity=100); transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); } .getBtn:hover{ background: var(--orange); color: #fff;} .getBtn ul{position:absolute;text-align: center; top: 99%; left: 0; width: 100%; background: #fff; color: #333; box-shadow: 0 0 20px rgba(0, 0, 0, .15);} .getBtn ul a{ font-size: 14px; display: block; text-align: center; line-height: 40px; border-bottom: 1px solid #e5e5e5;} .getBtn ul{ visibility:hidden; opacity:0; filter:alpha(opacity=0); transform: translateY(20px); -ms-transform:; -o-transform:; -webkit-transform:; -moz-transform:; transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -webkit-filter:alpha(opacity=0); } .getBtn:hover ul{ visibility:visible; opacity:1; filter:alpha(opacity=100); transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0); } .getBtn ul a:hover{ background: var(--orange); color: #fff;} header::after{ position: absolute; left: 0; bottom: 0; display: block; content: ''; transition: all .36s; width: 100%; height: 1px; background-color: rgba(255, 255, 255, .15); -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } header.scroll,header:hover{ box-shadow: 0 0 15px rgba(0, 0, 0, .15); color: #333;} header.scroll::after,header:hover::after{ background-color: #fff; height: 100%;} header.scroll .oneNav span::after,header:hover .oneNav span::after{background: var(--orange);} header.scroll nav li.on .oneNav ,header:hover nav li:hover .oneNav { color: var(--orange);} header.scroll .getBtn ,header:hover .getBtn{ border-color: #e5e5e5;} header.scroll .logoImg,header:hover .logoImg{ filter: none; transform: none; -webkit-filter: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; } .h_nav{ height: 60px; width: 60px; background-color:var(--orange); padding: 18px 8px ; align-items: flex-end; display: flex;} .h_nav .burger{ width: 100%; height: 1px ; background: #fff; transition: .8s; display:inline-block; } .h_nav .burger:first-child{ animation: long 2s linear infinite; -webkit-animation:; } .h_nav .burger:nth-of-type(2){ width: 50%;} .h_nav .burger:nth-of-type(3){ animation: long 3s linear infinite; -webkit-animation: long 3s linear infinite; } .h_nav.close .burger:first-child{ display: none;} .h_nav.close .burger:nth-of-type(3){ display: none;} .h_nav.close .burger:nth-of-type(2) { position: relative; z-index: 1; width: 80%;} .h_nav.close .burger:nth-of-type(2):before, .h_nav.close .burger:nth-of-type(2):after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: 0; z-index: 1;} .h_nav.close .burger:nth-of-type(2) { background: transparent; transform: rotate(-180deg); } .h_nav.close .burger:nth-of-type(2):before, .h_nav.close .burger:nth-of-type(2):after { opacity: 1; transition: all .3s; } .h_nav.close .burger:nth-of-type(2):before { transform: rotate(45deg); } .h_nav .burger:nth-of-type(2):after { transform: rotate(-45deg); } .nav{ color: #fff !important; width: 100%; height: calc(100vh - 60px) ; transition:all .6s ; transform: translateX(100%); background-color: #000; position: fixed; top: 60px; right: 0; flex-direction: column; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); -webkit-transition:all .6s ; -moz-transition:all .6s ; -ms-transition:all .6s ; -o-transition:all .6s ; } .nav.show{ transform:translateX(0) ; -webkit-transform:translateX(0) ; -moz-transform:translateX(0) ; -ms-transform:translateX(0) ; -o-transform:translateX(0) ; } .nav li.go-child{ border-top: 1px solid rgba(255, 255, 255, 0.25); position: relative;} .nav li.go-child>a{ line-height: 60px; padding: 0 20px; font-size: 16px;} .h_nav.close{align-items: center; justify-content: center;} .erji{ width: 60px; height: 60px; position: absolute; right: 0 ; top: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; z-index: 10; background: url(../images/jia.png) no-repeat center center; background-size: 40% auto;} .nav li.go-child.on .erji{ background: url(../images/jian.png) no-repeat center center; background-size: 40% auto;} .nav-down li a{ line-height: 50px; border-top: 1px solid rgba(255, 255, 255, 0.25); display: block; padding-left: 25px; font-size: 14px; opacity: 0.8; } .nav{ overflow-y: scroll; } .nav::-webkit-scrollbar {/*滚动条整体样式*/ /*高宽分别对应横竖滚动条的尺寸*/ width: 1px;} .nav::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 3px; background: #555; width: 1px; } .nav::-webkit-scrollbar-track {/*滚动条里面轨道*/border-radius: 3px; background: #000; width: 1px; } .zwHeader{ height: 100px;} .zw{margin-top: -100px; padding-top: 100px;} .idxBan .swiper-slide::after{ display: block; z-index:4; content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, .6);} .idxBanImg{ width: 100%; height: 100vh; object-fit: cover; min-height: 360px;} .idxBan .swiper-slide-active .idxBanImg{ animation: swiper_img_move 8s linear 0s infinite normal both ; -webkit-animation: swiper_img_move 8s linear 0s infinite normal both ; } .idxbanMore{ background-image: linear-gradient(to right,var(--orange),#315bc4 50%,var(--orange));} .idxBan .idxbanMore:hover{ transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; } .idxbanMore:hover{ box-shadow: 0 0 20px rgba(255, 255, 255, .3); transform: translateX(15px); -webkit-transform: translateX(15px); -moz-transform: translateX(15px); -ms-transform: translateX(15px); -o-transform: translateX(15px); } .idxBan .pagination{ z-index: 10; position:absolute; bottom:36px; left:50%; z-index:10; transform:translateX(-50%); height:34px; text-align:center; padding: 0 27px; background-color:rgba(0,0,0,.08); border-radius:34px; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); } .idxBan .pagination .swiper-pagination-bullet{ width: 48px; height: 4px; transition: all .36s; border-radius: 0; background: #fff; margin: 0 5px; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .idxBan .pagination span.swiper-pagination-bullet-active{ width: 90px;} /* .idxBan .pagination span{display:block;margin:0 auto; width:48px;opacity:.5;cursor:pointer;border-radius:0;position:relative;background:0 0} .idxBan .pagination span:after{content:'';position:absolute;height:2px;width:100%;background:#fff;left:50%;transform:translateX(-50%) scaleX(1);transition:ease .4s} .idxBan .pagination span+span{margin-top:10px} .idxBan .pagination span.swiper-pagination-bullet-active{height:4px;opacity:1} .idxBan .pagination span.swiper-pagination-bullet-active:after{content:'';transform:translateX(-50%) scaleX(4)} .idxBan .pagination span:hover:after{transform:translateX(-50%) scaleX(4)} */ .commonBtn {width: auto; white-space: nowrap;line-height:56px;text-align: center; display: inline-block;perspective: 500;-webkit-perspective: 500; } .commonBtn .w {position: relative;-webkit-transition: all 0.25s;-o-transition: all 0.25s;transition: all 0.25s;-webkit-transform-style: preserve-3d; transform-style: preserve-3d;pointer-events: none; } .commonBtn .t {position: absolute; width: 100%;height: 100%;left: 0; top: -56px;-webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom;-webkit-transform: rotateX(90deg); transform: rotateX(90deg);-webkit-backface-visibility: hidden; backface-visibility: hidden; } .commonBtn:hover .w { transform: translateY(28px) translateZ(-28px) rotate3d(1, 0, 0, -90deg); -webkit-transform: translateY(28px) translateZ(-28px) rotate3d(1, 0, 0, -90deg); -moz-transform: translateY(28px) translateZ(-28px) rotate3d(1, 0, 0, -90deg); -ms-transform: translateY(28px) translateZ(-28px) rotate3d(1, 0, 0, -90deg); -o-transform: translateY(28px) translateZ(-28px) rotate3d(1, 0, 0, -90deg); } .commonBtn:hover{ box-shadow: 0 0 15px rgba(0, 0, 0, .15);} .idxProUl{ } .idxProUl li{ width: calc( (100% - 2px)/3); margin-right: 1px;perspective: 800px;} .idxProUl li:nth-child(3n){ margin-right: 0;} .idxProUl li::after{display: block;content: '';position: absolute;left: 0;top: 0;z-index: 2;width: 100%;height: 100%;background: rgba(0, 0, 0, .32);transform-origin: left center 0; transition: 0.54s; opacity: 0; visibility: hidden; transform: rotateY(60deg); } .idxProUl li:hover:after{ opacity: 1; transform: rotateY(0); visibility: visible; } .idxProUl li .desc{ transform: translateY(20px); -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); } .idxProUl li:hover .desc{ opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .idxProUl li .more:hover{ box-shadow: 0 0 25px rgba(242, 153, 37, .5); transform: translateX(15px);} .idxProUl li .more::after{display: block; content: ''; transition: all .36s; width: 0; height: 100%; position: absolute; left: 0; top: 0; background:var(--orange);} .idxProUl li .more:hover::after{ width: 100%;} .idxProUl li:hover img{ transform: scale(1.1);} .idxProUl li:hover .more{border-color: var(--orange);} .idxProUl li:hover .more::after{ width: 100%;} .idxAbout{ background: url(../images/idxAboutBg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed;} .idxAbout::after{display: block; content: ''; transition: all .36s; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(75, 75, 75, .88);} .idxAbout .play { position: absolute; display: block; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 6 } .styleSwiper .img{ width: 100%; height: 0; padding-bottom: 60%;} .styleSwiper .swiper-slide{ transform: scale(.8); -webkit-transform: scale(.8); -moz-transform: scale(.8); -ms-transform: scale(.8); -o-transform: scale(.8); } .styleSwiper .swiper-slide-active{ transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .styleSwiper .swiper-slide-active .text{ opacity: 1;} .style .prev,.style .next{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .style .prev{ left: 20%;} .style .next{ right: 20%;} .style .next:hover,.style .prev:hover{ background: var(--orange); color: #fff;} .idxAbout .play:before { content: ''; position: absolute; top: 0; left: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: rgba(255, 255, 255, .5); opacity: 0; width: 100%; height: 100%; border-radius: 100% !important; border-radius: inherit; -webkit-animation: ks 3s infinite; -moz-animation: ks 3s infinite; animation: ks 3s infinite; display: block; z-index: -1 } .idxAbout .play:after { content: ''; position: absolute; top: 0; left: 0; border-radius: 100% !important; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: rgba(255, 255, 255, .5); opacity: 0; width: 100%; height: 100%; border-radius: inherit; -webkit-animation: ks 3s infinite; -moz-animation: ks 3s infinite; animation: ks 3s infinite; display: block; z-index: -1; -webkit-animation-delay: .4s; -moz-animation-delay: .4s; animation-delay: .4s } .idxAboutText .line{ width: 2em; height: 4px;} .linka a:hover{ color: var(--orange);} .idxAboutNav a:last-child{ border: none;} /* .aboutCoo .x-li{ width: 13.5vw; height: 5.7vw;} */ .aboutCoo .x-li{ width: 260px; height: 110px;} .aboutCoo .x-xia::after {content: "";position: absolute;left: 0;top: 50%;transform: translateY(-50%) rotate(180deg);width: 20%;height: 100%;pointer-events: none;z-index: 10;background: linear-gradient(270deg, #f5f5f5 0%, hsla(0, 0%, 100%, 0));} .aboutCoo .x-xia::before {content: "";position: absolute;right: 0;top: 50%;transform: translateY(-50%);width: 20%;height: 100%;pointer-events: none;z-index: 10;background: linear-gradient(270deg, #f5f5f5 0%, hsla(0, 0%, 100%, 0));} .idxValus{ background: url(../images/idxAboutBg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed;} .idxValus::after{display: block; content: ''; transition: all .36s; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, .5);} .idxValus2{ background: url(../images/idxAboutBg2.jpg) no-repeat center center; background-size: cover; background-attachment: fixed;} .idxValus2::after{display: block; content: ''; transition: all .36s; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, .5);} /* .mainBg{ background: url(../images/mainBg.png) no-repeat right bottom 7vw ; background-size: 33vw auto;} */ .newsItem .img{ width: 100%; height: 0; padding-bottom: 65.2%;} .newsItem .tit span{ /*text-decoration: underline; */background-image: linear-gradient(currentColor 0, currentColor 0); background-image: linear-gradient(currentColor 0 0); background-position: 0 calc(100% - 1px); background-size: 0 1px; background-repeat: no-repeat; transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1), background-position 0s 400ms cubic-bezier(0.645, 0.045, 0.355, 1), color 0ms; -webkit-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1), background-position 0s 400ms cubic-bezier(0.645, 0.045, 0.355, 1), color 0ms; -moz-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1), background-position 0s 400ms cubic-bezier(0.645, 0.045, 0.355, 1), color 0ms; -ms-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1), background-position 0s 400ms cubic-bezier(0.645, 0.045, 0.355, 1), color 0ms; -o-transition: 400ms cubic-bezier(0.645, 0.045, 0.355, 1), background-position 0s 400ms cubic-bezier(0.645, 0.045, 0.355, 1), color 0ms; } .newsItem:hover .tit span{ color: var(--orange); background-position: 100% calc(100% - 1px); background-size: 100% 1px} .newsItem:hover .more{ padding-left: 25px; padding-right: 25px; background: var(--orange); color: #fff;} .honorSwiper .img{ background: url(../images/honorIconBg.png) no-repeat center bottom; padding-bottom: 80px;} .honorSwiper .img .pic{ width: 100%; height: 0; padding-bottom: 80%;} .honorSwiper .swiper-wrapper .swiper-slide:nth-child(2n){ padding-top: 70px;} .honorSwiper .title img{ flex-shrink: 0;} .swiperBtn{ width: 70px; height: 70px;} .swiperBtn:hover{ background: var(--orange); color: #fff; } .aboutHonor .pagination{ height: 5px; background: #dbe3ed; position: relative; left: auto; bottom: auto; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .aboutHonor .pagination .swiper-pagination-progressbar-fill{ background: var(--orange);} .idxChooseUl li{ width: 18%;perspective: 800px; height: 77vh; transition: all .3s;} .idxChooseUl li.on{ width: 46%;} .idxChooseUl li img.idxChooseImg{ width: 100%; height: 77vh; object-fit: cover;} .idxChooseUl li .posi-a{ background: rgba(0, 0, 0, .4);transform-origin: left center 0; transition: 0.54s; opacity: 1; transform: rotateY(0); visibility: visible; } .idxChooseUl li.on .posi-a{ opacity: 0; visibility: hidden; transform: rotateY(60deg); } .idxChooseUl li .text{ position: absolute; left: 0; top: 0; z-index: 6; transition: all 1s; opacity: 0; transform: translateX(-100%);} .idxChooseUl li .bottom{ background-image: linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0)); position: absolute; left: 0; bottom: 0; z-index: 7; transition: all 1s; transform: translateY(100%); opacity: 0;} .idxChooseUl li .more::after{display: block; content: ''; transition: all .36s; width: 0; height: 100%; position: absolute; left: 0; top: 0; background:var(--orange);} .idxChooseUl li .more:hover::after{ width: 100%;} .idxChooseUl li .more:hover{ border-color: var(--orange);} .idxChooseUl li.on .text{ opacity: 1; transform: translateX(0);} .idxChooseUl li.on .bottom{opacity: 1;transform: translateY(0);} .idxChooseIcon{ max-width: 5.7vw;} .chooseSwiper .swiper-slide .posi-a{background-image: linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0));} footer{ background: url(../images/footerBg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed;} footer::after{display: block; content: ''; transition: all .36s; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, .88);} .footLogo{ height: 100px;filter: drop-shadow(500px 0 0 #fff); transform: translateX(-500px); -webkit-transform: translateX(-500px); -moz-transform: translateX(-500px); -ms-transform: translateX(-500px); -o-transform: translateX(-500px); } .FXlIST A{ width:50px; height: 50px; background: #fff;} .FXlIST A img{ transition: all 0s; -webkit-transition: all 0s; -moz-transition: all 0s; -ms-transition: all 0s; -o-transition: all 0s; } .FXlIST A:hover{ opacity: .8;} .FXlIST A:hover img{ filter: drop-shadow(100px 0 0 #fff); transform: translateX(-100px); -webkit-filter: drop-shadow(100px 0 0 #fff); -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); } .FXlIST A:last-child{ margin-right: 0;} .footForm .submit{ height: 45px;} .neiBanImg{ width: 100%; min-height: 260px; object-fit: cover; max-height: 100vh;animation: zoomBig 2s forwards; -webkit-animation: zoomBig 2s forwards;} .neiBan .text{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 10;} .neiBan::before{ display: block; content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, .38); z-index: 5;} .HistoryTop::after{ display: block; content: ''; width: 100%; height: 1px; position: absolute; left: 0; bottom: 10px; background: #e5e5e5;} .HistoryTop .swiper-slide i{ width: 20px; height: 20px;} .mySwiper{ width: 60px; height: 60px; background: rgba(0, 0, 0, .45); z-index: 10; position: absolute;} .mySwiper:hover{ background: var(--orange); } .History .mySwiper{ top: 50%; transform: translateY(-50%);} .History .prev{ left: 0;} .History .next{ right: 0;} .HistoryTop .swiper-slide.swiper-slide-thumb-active{ color: var(--orange);} .HistoryTop .swiper-slide.swiper-slide-thumb-active i{ border-color: var(--orange); background: var(--orange);} .groupLine{ width: 2em; height: 3px;} .aboutYs{ background: url(../images/aboutYsBg.jpg) no-repeat center center; background-size: 100% auto} .aboutYsUl li .round{ width: 6.5vw; height: 6.5vw;}.aboutYsUl li .round img{ transition: all 0s;} .aboutYsUl li .round::before{display: block; content: ''; width:0; transition: all .36s; height: 100%; position: absolute; left: 0; bottom: 0; background: var(--orange);} .aboutYsUl li .round img{ max-width: 88%; max-height: 88%;} .aboutYsUl li .text{ width: calc(100% - 8.6vw);} .aboutYsUl li:hover .round::before{ width: 100%;} .aboutYsUl li:hover .img img{filter: grayscale(100%) brightness(500%);} /* .aboutServiceUl li{ transition: all .36s;} .aboutServiceUl li:nth-child(3n){ margin-right: 0;} */ .aboutServiceUl li::before{display: block; content: ''; width:0; transition: all .36s; height: 100%; position: absolute; left: 0; bottom: 0; background: #6f6f6f;} .aboutServiceUl li:hover::before{ width: 100%;} .aboutServiceUl li:hover{ color: #fff; transform: translateY(-15px);} .aboutServiceUl li:hover .color-555{ color: #fff;} .aboutServiceUl li:hover h5{ background: transparent; border-color: #fff;} .CorporateUl li{ background: #f0f0f0; height: 320px; justify-content: center;} .CorporateUl li:nth-child(2n){ background: #f9f9f9;} .CorporateIcon{ height: 80px;} .CorporateUl li .text{ z-index: 10; transform: translateX(105%);} .CorporateUl li:hover{ box-shadow: 0 0 15px rgba(0, 0, 0, .15);} .CorporateUl li:hover .text{ transform: translateX(0);} .prolsit {display: grid; grid-gap: 3vw; grid-template-columns: repeat(3,1fr);} .prolsit li {min-width:0} .prolsit li .img{ width: 100%; height: 0; padding-bottom: 125%;} .prolsit li a::after{ height: 50%; display: block; content: ''; z-index: 5; position: absolute; width: 100%; left: 0; bottom: 0; background-image: linear-gradient(to top,rgba(0,0,0,.5),transparent);} .prolsit li .text{ position: absolute; bottom: 0; left: 0; z-index: 10; transform:translateY(50px) ; -webkit-transform:translateY(50px) ; -moz-transform:translateY(50px) ; -ms-transform:translateY(50px) ; -o-transform:translateY(50px) ; } .prolsit li .text .line{ width: 2em; height: 2px; background: var(--orange);} .prolsit li .text .round{ width: 50px; height: 50px; opacity: 0;} .prolsit li:hover{ transform: translateY(-8px); box-shadow: 0 0 15px rgba(0, 0, 0, .15); -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); -ms-transform: translateY(-8px); -o-transform: translateY(-8px); } .prolsit li:hover .text{ transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .prolsit li:hover .text .round{ opacity: 1;} /* .prolsit li .desc{ height: 6.5em;} .prolsit li:hover{ box-shadow: 0 0 15px rgba(0, 0, 0, .15);} .prolsit li:hover .img img{ transform: scale(1.1);} .prolsit li:hover .groupLine{ width: 6em;} .prolsit li:last-child{ margin-bottom: 0;} */ .proInfoSwiper .swiper-slide .img{ width: 100%; height: 0; padding-bottom: 66%;} .h-60{ height: 60px;} .border-black{ border: 2px solid var(--black);} .proColorList{display: grid; grid-gap: 1vw; grid-template-columns: repeat(6,1fr);} .proColorList .item {min-width:0} .proColorList .item .img{ width: 100%; height: 0; padding-bottom: 100%;} .pop{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; display: none;} .pop .bg{ background: rgba(0, 0, 0, .6);} .pop .con{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 10;} .formPop .con{ width: 90%; max-width: 1000px;} .pop .close{ width: 50px; height: 50px; position: absolute; right: -20px; top: -25px;} .pop .close:hover{ background: var(--orange); color: #fff; transform: rotate(180deg);} .proInfoSwiper .btn{ width: 50px; height: 80px; background: rgba(0, 0, 0, .5); position: absolute; top: 50%; transform: translateY(-50%); z-index: 15;} .proInfoSwiper .prev{ left: 0;} .proInfoSwiper .next{ right: 0;} .proInfoSwiper .btn:hover{ background: var(--orange); } .newslist li .img{ height: 0; padding-bottom: 57%;} .newslist li .text{ width: 64%;} .newslist li .text .date::after{ display: block; content: '';transition: all .36s; width: 100%; height:2px; left: 0; bottom: 0; background: var(--orange); position: absolute; left: 0; bottom: 0;} /* .newslist li .text .date::before{ display: block; content: ''; width:200%; height: 1px; left: 0; bottom: 1px; background: var(--orange); position: absolute; left: 0; bottom: 0;} */ .newslist li:last-child{ margin-bottom: 0;} .newslist li:hover .more{ background: var(--orange); color: #fff; padding: 0 20px;} .newslist li:hover .img img{ transform: scale(1.1);} .newslist li:hover .img{ box-shadow: 0 0 15px rgba(242, 153, 37, .2);} .newslist li:hover .text .date::after{ width: 300%;} .ReturnBtn:hover{ opacity: .6;} .contactLine{ width: 1px;} .culturelistline{ height: 3px; width: 2.2em;} .culturelist li:nth-child(2n){ flex-direction: row-reverse;} .culturelist li:hover .img{ box-shadow: 0 0 20px rgba(242, 153, 37, .2);} .culturelist li:hover .img img{ transform: scale(1.1);} .culturelist li:hover .culturelistline{ width: 5em;} .teamIcon{ height: 70px;} /* 你原来的保持不动（下面是新增/覆盖） */ /* ====== 三列卡片布局 ====== */ .newslist-grid{ display: flex; flex-wrap: wrap; gap: 40px; /* 卡片间距，按你图二的留白风格 */ } /* 三列：一行 3 个 */ .newslist-grid > li{ width: calc((100% - 80px) / 3); /* gap=40px，两段间距=80px */ margin: 0 !important; padding: 0 !important; border: 0 !important; /* 覆盖 border-bottom 的线（图二是卡片，不是分割线） */ } /* 卡片整体（点击区域）改成竖向 */ .newslist-grid > li > a{ display: flex; flex-direction: column; height: 100%; } /* 覆盖你原本的左右比例：现在卡片里都占满 */ .newslist-grid li .w32, .newslist-grid li .text{ width: 100% !important; } /* 图片比例沿用你原来的 57%（也就是 16:9-ish） */ .newslist-grid li .img{ height: 0; padding-bottom: 57%; overflow: hidden; border-radius: 20px; /* 图二圆角卡片视觉更像 */ } /* 文字区做一点内边距，形成卡片感 */ .newslist-grid li .text{ padding-top: 18px; } /* 你的 hover 效果保留（放大、阴影、more 变色、date 下划线拉长） */ .newslist li:hover .more{ background: var(--orange); color: #fff; padding: 0 20px;} .newslist li:hover .img img{ transform: scale(1.1);} .newslist li:hover .img{ box-shadow: 0 0 15px rgba(242, 153, 37, .2);} .newslist li:hover .text .date::after{ width: 300%;} /* 让 date 的 after 在卡片模式下不要“冲出过头”太夸张（可选，不想改就删掉这段） */ .newslist-grid li:hover .text .date::after{ width: 120%; } /* ====== 响应式：平板 2 列、手机 1 列 ====== */ @media (max-width: 1200px){ .newslist-grid > li{ width: calc((100% - 40px) / 2); } } @media (max-width: 768px){ .newslist-grid > li{ width: 100%; } }