body{font-size: 16px;} .w90{ width: 90vw; margin: 0 auto; max-width: 1920px;} .zwHeader{ height: 100px;} .zw{margin-top: -100px; padding-top: 100px;} header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 100; color: #fff;} header .con{ width: ;} header .logoTxt{ transition:all 0s ; filter: drop-shadow(150px 0 0 #fff); transform: translateX(-150px); -webkit-filter: drop-shadow(150px 0 0 #fff); -webkit-transform: translateX(-150px); -moz-transform: translateX(-150px); -ms-transform: translateX(-150px); -o-transform: translateX(-150px); -webkit-transition:all 0s ; -moz-transition:all 0s ; -ms-transition:all 0s ; -o-transition:all 0s ; } nav{ width: 45vw; } .oneNav{ line-height: 100px; display: block; font-size: 18px; font-weight: bold;} .oneNav:hover{ color: var(--black);} .searchRound{ width: 50px; height: 50px; border-color: #fff;} header::after{ display: block; transition: all .36s; content: ''; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; background: rgba(255, 255, 255, .2); -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } header.show::after{ height: 100%; background: rgba(255, 255, 255, 1);} header.show{ color: #333; box-shadow: 0 0 10px rgba(0, 0, 0, .15);} header.show .logoTxt{ filter: none; transform: none; -webkit-filter: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; } header.show .searchRound{ border-color: #333;} nav li .oneNav span:after{ width: 100%; height: 3px; display: block; transition: all .36s; content: ''; background-color: #fff; position: absolute; left: 0; bottom: -1px; transform: scale(0,1); -webkit-transform: scale(0,1); -moz-transform: scale(0,1); -ms-transform: scale(0,1); -o-transform: scale(0,1); -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } 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); } header.show nav li .oneNav span:after{ background: var(--black);} nav:hover > li:not(:hover) .oneNav span:after{transform: scale(0,1); } .searchBox{ background : var(--black); z-index: 70; transform: translateY(-105%); transition:all .6s ; -webkit-transition:all .6s ; -moz-transition:all .6s ; -ms-transition:all .6s ; -o-transition:all .6s ; -webkit-transform: translateY(-105%); -moz-transform: translateY(-105%); -ms-transform: translateY(-105%); -o-transform: translateY(-105%); } .searchBox .form{ width: calc(100% - 80px);} .searchBox .keys{ width: 80%; background: url(../images/search-w.png) no-repeat left center; } .searchBox .submit{ width: 90px; height: 40px; border: 1px solid #fff;} .searchBox input::-webkit-input-placeholder {color:rgba(255, 255, 255, .65);} .searchBox input:-moz-placeholder {color:rgba(255, 255, 255, .65);;} .searchBox input::-moz-placeholder {color:rgba(255, 255, 255, .65);;} .searchBox input:-ms-input-placeholder {color: rgba(255, 255, 255, .65);;} .searchBox.show{ transform: translateY(0%); -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); } .h_nav{ height: 100px; width: 5vw; background-color:var(--black); padding: 35px 20px ; align-items: flex-end; display: flex; position: absolute; right: 0; top: 0; z-index: 60;} .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: long 2s linear infinite; } .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); } .h_nav.close{align-items: center; justify-content: center;} .in-nav { width: 100%; height: 100vh; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 50; -webkit-clip-path: circle(0% at 100% 0px); clip-path: circle(0% at 100% 0px); transition: -webkit-clip-path 1.5s; transition: clip-path 1.5s; transition: clip-path 1.5s, -webkit-clip-path 1.5s; -webkit-transition: clip-path 1.5s, -webkit-clip-path 1.5s; -moz-transition: clip-path 1.5s, -webkit-clip-path 1.5s; -ms-transition: clip-path 1.5s, -webkit-clip-path 1.5s; -o-transition: clip-path 1.5s, -webkit-clip-path 1.5s; color: #fff;} .in-nav.show {-webkit-clip-path: circle(150% at 100% 0px);clip-path: circle(150% at 100% 0px)} .in-nav .con{ padding-left: 14.5vw;} .headerContact{ margin-left: 14.5vw; width: 40vw; } .idxBan .swiper-slide .text{ padding-top: 12%; background: rgba(0, 0, 0, .1);} .idxBan .pagination{ z-index: 10; position: absolute; left: 5vw; bottom: 50px;} .idxBan .swiper-pagination-bullet{ opacity: 1; border-radius:50% ; background: #fff; width: 5px; height: 5px; margin-right: 30px; position: relative; -webkit-border-radius:50% ; -moz-border-radius:50% ; -ms-border-radius:50% ; -o-border-radius:50% ; } .idxBan .swiper-pagination-bullet::after{ display: block; transform: scale(0,0); transition: all .36s; width: 500%; height: 500%; content: ''; position: absolute; left: -200%; top: -200%; border-radius: 50%; border: 1px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-transform: scale(0,0); -moz-transform: scale(0,0); -ms-transform: scale(0,0); -o-transform: scale(0,0); -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .swiper-pagination-bullet.swiper-pagination-bullet-active::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); } .banImg{ width: 100% ;height: 100vh; object-fit: cover;} .banNum{ width: 5vw; position: absolute; top: 0; height: 100%; right: 0; background: rgba(255, 255, 255, .9); z-index: 10;} .banNum li.on{color: var(--black);} .banNum li:last-child{ border-bottom: none;} .idxBan .swiper-slide-active .banImg{ animation: swiper_img_move 8s linear 0s infinite normal both ; -webkit-animation: swiper_img_move 8s linear 0s infinite normal both ; } .idxBan .scrollbar{ opacity: 1 !important; width: 100%; height: 1px; position: absolute; left: 0; top: 60%; z-index: 5; background: rgba(255, 255, 255, .5);} .idxBan .scrollbar .swiper-scrollbar-drag{ background-color: #fff;} .idxAbout .left .text{ top: 5vw; left: 5vw; position: absolute; z-index: 2; } .idxAbout .left .button{ position: absolute; right: 20px; bottom: 70px; z-index: 2;} .swiperBtn{ width: 70px; height: 70px; } .swiperBtn:hover{ background: var(--black); color: #fff; border-color: var(--black);} .idxAbout .right{ padding: 5vw; background: url(../images/idxAboutBg.jpg) no-repeat bottom right; background-size: auto 80%;} .idxAbout .right .line{ transform:rotate(225deg) ; -webkit-transform:rotate(225deg) ; -moz-transform:rotate(225deg) ; -ms-transform:rotate(225deg) ; -o-transform:rotate(225deg) ; } .idxAbout .right .more{ transform:rotate(225deg) ; -webkit-transform:rotate(225deg) ; -moz-transform:rotate(225deg) ; -ms-transform:rotate(225deg) ; -o-transform:rotate(225deg) ; } .idxAbout .right .more:hover{ transform:rotate(180deg) ; -webkit-transform:rotate(180deg) ; -moz-transform:rotate(180deg) ; -ms-transform:rotate(180deg) ; -o-transform:rotate(180deg) ; } .idxHonor{ background: url(../images/idxHonorBg.jpg) no-repeat center bottom; background-size: cover; background-attachment: fixed;} .idxHonorSwiper .swiper-slide{ padding-top: 80px; padding-bottom: 0;} .idxHonorSwiper .swiper-slide:nth-child(2n){ padding-top: 0; padding-bottom: 80px;} .idxHonorSwiper .swiper-slide .img img{max-width: 100%; max-height: 100%;} .idxHonorSwiper .swiper-slide:hover .img{ box-shadow: 0 0 10px rgba(0, 0, 0, .15); transform: scale(0.95); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); } .idxCase .title .right .more{ transform:rotate(225deg) ; -webkit-transform:rotate(225deg) ; -moz-transform:rotate(225deg) ; -ms-transform:rotate(225deg) ; -o-transform:rotate(225deg) ; } .idxCase .title .right .more:hover{ transform:rotate(180deg) ; -webkit-transform:rotate(180deg) ; -moz-transform:rotate(180deg) ; -ms-transform:rotate(180deg) ; -o-transform:rotate(180deg) ; } .idxCaseUl li{ width: calc((100% - 72px)/3); margin-right: 36px;} .idxCaseUl li:nth-child(3n){ margin-right: 0;} .idxCaseUl li:hover .img{ box-shadow: 0 0 15px rgba(0, 0, 0, .15); transform: scale(0.98); -webkit-transform: scale(0.98); -moz-transform: scale(0.98); -ms-transform: scale(0.98); -o-transform: scale(0.98); } .idxCaseUl li:hover .img img{ transform:scale(1.1) ; -webkit-transform:scale(1.1) ; -moz-transform:scale(1.1) ; -ms-transform:scale(1.1) ; -o-transform:scale(1.1) ; } .idxCaseUl li:hover { color: var(--blue);} .idxNewsUl li .img{ width: 23%;} .idxNewsUl li .title{ width: 30%;} .idxNewsUl li .desc{ width: 23%;} .idxNewsUl li .more .iconfont{ transform:rotate(-45deg) ; -webkit-transform:rotate(-45deg) ; -moz-transform:rotate(-45deg) ; -ms-transform:rotate(-45deg) ; -o-transform:rotate(-45deg) ; } .idxNewsUl li .more:hover{ color: var(--black);} .idxNewsUl li .more:hover .iconfont{ transform:rotate(0) ; -webkit-transform:rotate(0) ; -moz-transform:rotate(0) ; -ms-transform:rotate(0) ; -o-transform:rotate(0) ; } .idxNewsUl li:hover{ box-shadow: 0 0 15px rgba(0, 0, 0, .15);} .idxNewsUl li:hover .img img{ transform:scale(1.1) ; -webkit-transform:scale(1.1) ; -moz-transform:scale(1.1) ; -ms-transform:scale(1.1) ; -o-transform:scale(1.1) ; } .idxNewsUl li .title 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; } .idxNewsUl li:hover .title span{ background-position: 100% calc(100% - 1px); background-size: 100% 1px} .footEwm{ width: 126px;} .footround{ border: 1px solid #aaaaaa; width: 50px; height: 50px; flex-shrink: 0;} .footAdd{ width: 221px;} .outlinkRound{ width: 40px; height: 40px; } .outlinkRound:hover .iconfont{ color: var(--black);} .popEwm{ display: none; position: absolute; animation: topFloat .3s; left: 50%; width: 120px;margin-left: -60px; z-index: 10; bottom: 120%; -webkit-animation: topFloat .3s; } .outlinkRound:hover .popEwm{ display: block;} footer .top .left a:hover{ font-weight:bold;} .font130{ font-size: 130px;} .neiBan{ overflow: hidden;} .neibanImg{ width: 100%; max-height: 100vh; min-height: 360px; object-fit: cover; animation: zoomBig 2s forwards; -webkit-animation: zoomBig 2s forwards; } .neiBan .text{ background: rgba(0, 0, 0, .3); padding: 100px 0;} .neiBan .text .line{ width: 6vw; height: 4px;} .subNav{ width: 100%; bottom: 0; left: 0; position: absolute; z-index: 20; } .subNav a{ line-height: 100px; display: block; padding: 0 4vw; position: relative; } .subNav a span{ position: relative;} .subNav a span::after{ width: 100%; height: 3px; display: block; content: ''; position: absolute; left: 0; bottom: -5px; background: #fff; transition: all .36s; transform: scale(0,1); -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); } .subNav a:hover span:after,.subNav a.on 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); } .subNav:hover > a:not(:hover) span:after{ transform: scale(0,1); -webkit-transform: scale(0,1); -moz-transform: scale(0,1); -ms-transform: scale(0,1); -o-transform: scale(0,1); } .introduction .img{} .introductioneng{ font-size: 260px; margin-top: -.5em; color: transparent;} .introductionNum li{ width: 25%;} .scope .left{ width: 33%; } .scope .left .top,.scopeUl{padding-left: 5vw;} .scopeUl li{ cursor: pointer; text-stroke:1px rgba(255,255,255,.4); -webkit-text-stroke: 1px rgba(255,255,255,.4); color: transparent;} .scopeUl li .scopeRight{ opacity: 0; transition: all .36s; transform:translateX(20px); -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-transform:translateX(20px); -moz-transform:translateX(20px); -ms-transform:translateX(20px); -o-transform:translateX(20px); } .scopeUl li:hover,.scopeUl li.on { color: #fff;} .scopeUl li:hover .scopeRight,.scopeUl li.on .scopeRight{ opacity: 1; transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); } .scopeUl:hover > li:not(:hover) { color: transparent; } .scopeUl:hover > li:not(:hover) .scopeRight{ opacity: 0;transform:translateX(20px); } .scopeSwiper{ width: 67%;} .scopeSwiper .swiper-slide>img{ width: 100%; height: 100%; object-fit: cover;} .scopeSwiper .text{ position: absolute; left: 0; bottom: 0;} .culture{ background: url(../images/cultureBg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed;} .cultureUl { background: rgba(0, 0, 0, .3);} .cultureUl li{ padding: 26vh 0; width: 25%; border-right: 1px solid rgba(255, 255, 255, .2);perspective: 200px;} .cultureUl li:last-child{ border-right: none;} .cultureUl li .line{ width: 20px; height: 3px;} .cultureUl li::after{ width: 100%; height: 100%;opacity: 0; z-index: 1; transition: all .36s; display: block; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.5); display: block; content: ''; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .cultureUl li::after { transform:rotateY(45deg) ; -webkit-transform:rotateY(45deg) ; -moz-transform:rotateY(45deg) ; -ms-transform:rotateY(45deg) ; -o-transform:rotateY(45deg) ; } .cultureUl li:hover::after{ transform:rotateY(0) ;opacity: 1; -webkit-transform:rotateY(0) ; -moz-transform:rotateY(0) ; -ms-transform:rotateY(0) ; -o-transform:rotateY(0) ; } .cultureUl li:hover .line{ width: 50px;} .style .next,.style .prev{ width: 5vw; opacity: .3; 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: 22%;} .style .next{ right: 22%;} .style .next:hover,.style .prev:hover{opacity: 1;} .styleSwiper .img{ border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; } .styleSwiper .txt{ background-image: linear-gradient(to top,rgba(0,0,0,.2),transparent); text-align: center; position: absolute; left: 0; bottom: 0;} .styleSwiper .swiper-slide:hover .txt{ transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); } .styleSwiper .swiper-slide:hover img{ transform:scale(1.1) ; -webkit-transform:scale(1.1) ; -moz-transform:scale(1.1) ; -ms-transform:scale(1.1) ; -o-transform:scale(1.1) ; } .style .pagination{ position: relative; left: auto; top: auto; bottom: auto; right: auto;} .gcyjCon table tr:first-child{ background: var(--black); color: #fff;} .gcyjCon table tr:first-child td{ color: #fff; font-size: 22px;} .newsBan .subNav{ position: relative; left: auto; bottom: auto;} .newsBan .subNav a span::after{ background: var(--black);} .newsBan .subNav a.on{ color: var(--black);} .newsTopSwiper .swiper-slide .more .iconfont{ transform:rotate(-45deg) ; -webkit-transform:rotate(-45deg) ; -moz-transform:rotate(-45deg) ; -ms-transform:rotate(-45deg) ; -o-transform:rotate(-45deg) ; } .newsTopSwiper .swiper-slide .more:hover{ opacity: 1;} .newsTopSwiper .swiper-slide .more:hover .iconfont{ transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); } .newsTop .pagination { left: 0; bottom: 70px; z-index: 10; position: absolute;} .newsTop .pagination .swiper-pagination-bullet{ background: #fff; margin-right: 15px; width: 10px; height: 10px;} .location .icon-youjiantou1{ transform:scale(0.5) ; -webkit-transform:scale(0.5) ; -moz-transform:scale(0.5) ; -ms-transform:scale(0.5) ; -o-transform:scale(0.5) ; } .linka a:hover{ color: var(--black);} .newsBack i{ width: 60px; height: 2px; margin-right: 15px; transition: all .36s; background: var(--black); -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .newsBack:hover i{ width: 100px;} .newsBack:hover { font-weight: bold;} .newsPage a i{ width: 60px; height: 2px; margin-right: 15px; transition: all .36s; background: var(--black); -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .newsPage a:hover{ font-weight: bold;} .newsPage a:hover i{ width: 100px;} .newsPage a:last-child{ flex-direction: row-reverse;} .newsPage a:last-child i{ margin-right: 0; margin-left: 15px;} .bidList li::after{ width: 60%; opacity: 0; transition: all .36s; height: 100%; display: block; content: ''; background: var(--black); position: absolute; left: 0; top: 0; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .bidList li:hover{ box-shadow: 0 0 20px rgba(0, 0, 0, .2);} .bidList li:hover::after{ width: 100%; opacity: 1;} .bidList li:hover div{ color: #fff !important;} .none{ display: none;} .jobSection .text{ margin-left: 5vw;} .joblist li.on{ background: var(--black); color: #fff;} .joblist li.on .iconfont{ color: #fff; } .pop{ width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 200; display: none;} .pop .bg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, .3) ; z-index: 1;} .pop .con{ width:1000px; background-image: linear-gradient(to bottom,#f0f0f0,#fff); position: absolute; left:50%; margin-left: -500px; top: 50%; transform:translateY(-50%) ; z-index: 5; -webkit-transform:translateY(-50%) ; -moz-transform:translateY(-50%) ; -ms-transform:translateY(-50%) ; -o-transform:translateY(-50%) ; } .pop .close{ width: 50px; position: absolute; right: 0; top: -60px;filter: grayscale(100%) brightness(500%);} .pop .close:hover{ transform: rotate(90deg); filter: grayscale(0%) brightness(100%); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-filter: grayscale(0%) brightness(100%); } .popjobInfo{max-height: 36vh; overflow-y: scroll;} .popjobInfo::-webkit-scrollbar {/*婊氬姩鏉℃暣浣撴牱寮?/ /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉$殑灏哄*/ width: 2px;} .popjobInfo::-webkit-scrollbar-thumb {/*婊氬姩鏉¢噷闈㈠皬鏂瑰潡*/border-radius: 3px; background: var(--black); width: 2px; } .popjobInfo::-webkit-scrollbar-track {/*婊氬姩鏉¢噷闈㈣建閬?/border-radius: 3px; background: #f2f5f9; width: 2px; } .contactSylteEwm img{ width: 170px;} .contactSylteRound{ width: 115px; height: 115px;} .maxImg img{ max-width: 100%; max-height: 100%; } .contactSylte .border-bottom-black{ border-width: 4px;} .contactSylteUl li{ width: 25%;} .contactSylteUl li .desc{ height: 4em;} .contactSylteIcon{ max-height: 56px; max-width: 56px;} .honorlist li{ width: calc((100% - 180px)/4); margin-right: 60px; height: 476px;} .honorlist li:nth-child(4n){ margin-right: 0;} .searchTop form{ width: 700px;} .searchTop form .text{ width: calc(100% - 70px); } .searchTop form .submit{ width: 70px; height: 70px; background: url(../images/searchbig.png) no-repeat center center; background-size: 35% auto;} .searchlist li::after{ width: 0; height: 2px; position: absolute; left: 0; bottom: 0; background-color: var(--black); display: block; content: ''; transition: all .36s; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .searchlist li .left{ width:70% ;} .searchlist li .right{ width: 70px; height: 70px;} .searchlist li:hover::after{ width: 100%;} .searchlist li:hover .right{ background-color: var(--black); color: #fff; transform: scale(0.95); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); } .idxNewsUl li .img img{ width: 100%; height: 295px; object-fit: cover;}