body{font-size: 14px;} .inner{ width:1600px; margin: 0 auto; } .pl-inner{ padding-left: calc((100vw - 1600px)/2);} .pr-inner{ padding-right: calc((100vw - 1600px)/2);} .ml-inner{ margin-left: calc((100vw - 1600px)/2);} .mr-inner{ margin-right: calc((100vw - 1600px)/2);} .samllinner{ width:1460px; margin: 0 auto; } .pl-samllinner{ padding-left: calc((100vw - 1460px)/2);} .pr-samllinner{ padding-right: calc((100vw - 1460px)/2);} .ml-samllinner{ margin-left: calc((100vw - 1460px)/2);} .mr-samllinner{ margin-right: calc((100vw - 1460px)/2);} header{ background: #fff; z-index: 100; position: relative;} .logoImg{ height: 60px;} .oneNav{ line-height:100px; white-space: nowrap; display: block; padding: 0 1.6vw; font-size: 18px; } .oneNav span { position: relative;} .oneNav span::after{ width: 100%; height: 2px; display: block; content: ''; background:var(--color); 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.on .oneNav span ,nav li:hover .oneNav span { color: var(--color);} 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:100%; 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; 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{ height:50px;line-height:50px; display: block; 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.flex-between + dd.flex-between{ border-top: 1px solid #e5e5e5;} nav li dl dd.flex-between:first-child{ padding-top: 0;} nav li dl dd.flex-between:last-child{ padding-bottom: 0;} nav li dl dd a:hover{color:var(--color) !important;} nav li dl dd .img { width: 150px; height: 100px;} nav li dl dd .text{ width: 257px;} /* 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%); -webkit-filter:alpha(opacity=100); } .h_nav{ height: 60px; width: 60px; background-color:var(--color); 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: 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 { align-items: center; justify-content: center;} .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); } .idxBan,.idxBan .swiper-slide,.neiBan{ width: 100%; height: calc(100vh - 100px); } .idxBan .text{ position: absolute; left: 0; bottom: 0; z-index: 10;} .idxBan .pagination{ bottom: 7%;} .idxBan .pagination .swiper-pagination-bullet { width: 10px; height: 10px;opacity: 1; margin: 0 4px; background: #fff;} .idxBan .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: var(--color);} .idxAbout{ background: url(../images/idxAboutBg.jpg) no-repeat center center / cover; height: 100vh;} .idxAbout .logoIco{ height: 100%; position: absolute; right: 0; top: 0; bottom: 0;} .idxMore{ height: 2.6em;} .idxMore::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: #fff; border-radius: 40px; transition: transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transform: scaleX(0); transform-origin: right; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; } .idxMore:hover {color: var(--color);} .idxMore:hover::before {transform: scaleX(1);transform-origin: left;} .idxAboutMen{ position: absolute; bottom: 0; right: 15%; z-index: 5; height: 80%;} .idxKy li{ height:95vh;} .idxKy li.on,.idxKy li:hover{ width: 60%;} .idxKy li .idxKyImg{ max-width: none !important; width:62vw; height: 100%; position: absolute; right: -1vw; top: 0; object-fit: cover;} .idxKy li .text{ z-index: 10; position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .idxKy:hover li:not(:hover) { width: 40%; } .idxNews .button div{ width: 50px; height: 50px;} .idxNews .button div:hover{ background: var(--color); color: #fff;} .newsSwiper .swiper-slide{ height: 500px;} .newsSwiper .swiper-slide .text{ background: rgba(255, 255, 255, .6); position: absolute; left: 0; bottom: 0; z-index: 5;} .newsSwiper .swiper-slide:hover .text{ padding-top: 40px; padding-bottom: 40px;} .newsSwiper .swiper-slide:hover .bigImg{ transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); } .idxHMOs{ height: 70vh; background: url(../images/idxHMOsBg.jpg) no-repeat center center / cover; background-attachment: fixed;} .idxHMOs::after{ display: block ; transition: all .2s; opacity: 0; content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background:rgba(0,0,0,.3) ; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } .idxHMOs:hover::after{ opacity: 1;} .idxProSwiper .swiper-slide{ height: 75vh;} .idxProTit dl{position:absolute;text-align: center; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; 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;} .idxProTit li dl dd{white-space: nowrap;height:30px;line-height:30px; transition:all .36s ease;-ms-transition:all .36s ease;-o-transition:all .36s ease;-webkit-transition:all .36s ease;-moz-transition:all .36s ease} .idxProTit li dl dd:last-child{border-bottom:0} .idxProTit li dl dd { padding: 0 20px; font-size: 14px; 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 } .idxProTit li dl dd:hover{background:#f2f2f2} .idxProTit 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; } .idxProTit 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%); } footer .top{ background: url(../images/footBg.jpg) no-repeat center center / cover;} footer a:hover{ color: rgba(255, 255, 255, 1);} .footLogo{ height: 68px;} footer{ background: #022233;} .footNav li{ margin-right: 7.8vw;} .friendlink a{ margin-left: 2vw;} .outLink li{ margin-left: 1vw;} .ewmBox:hover .ewm{ display: block;} .ewmBox .ewm{ display: none; width: 110px; position: absolute; left: 50%; bottom: 110%; margin-left: -55px; } .footKefu{ width: 8.4vw; height: 8.4vw ; position: absolute; right: 0; top: -4.2vw;} .footKefu .round{ background: #072a3d;} .footKefu:hover .round{ background: var(--color);} .mainBg{ background: url(../images/mainBg.png) no-repeat center top / cover;} .w46{ width: 46%;} .neiBan .inner{ position: absolute; z-index: 10; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); } .neiBan::after{ display: block; content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background:rgba(0,0,0,.2) } .descBanImg{ width: 100%; min-height: 260px; object-fit: cover;} .descBan .inner{ text-align: center; position: absolute; z-index: 10; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); } .descBan::after{ display: block; content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background:rgba(0,0,0,.1) } .aboutBan::after{ display: block; content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; /*background-image: linear-gradient(to bottom,rgba(20,143,250,.6),transparent);*/ } .patentSwiper{perspective: 120px } .patentSwiper .swiper-wrapper{ } .patentSwiper .swiper-slide{ border: 10px solid #d45454; opacity: .4; transform: scale(.75); -webkit-transform: scale(.75); -moz-transform: scale(.75); -ms-transform: scale(.75); -o-transform: scale(.75); } .patentSwiper .swiper-slide-active{ position: relative; z-index: 5; opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .patentSwiper .swiper-slide-prev,.patentSwiper .swiper-slide-next{ opacity: 1; position: relative; z-index: 4; transform: scale(.85); -webkit-transform: scale(.85); -moz-transform: scale(.85); -ms-transform: scale(.85); -o-transform: scale(.85); } .patent .button{ border: 2px solid #d4d4d4; color: #d4d4d4; width: 66px; height: 66px; flex-shrink: 0;} .patent .button:hover{ border-color: #d45454; background: #d45454; color: #fff; } /* .proClassUl li{ width: 14vw;} */ .proClassUl li .img{ width: 100%; height: 0; padding-bottom: 100%;} .subNav a{ height: 90px; } .subNav a::after{ display: block; content: ''; width: 0; transition: all .36s; height: 2px; position: absolute; left: 0; bottom: 0; background:var(--color) ; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .subNav li{ padding: 0 2vw;} .subNav li.on,.subNav li:hover{ color: var(--color);} .subNav li.on a::after,.subNav li:hover a::after{ width: 100%;} .bg-8b{ background: #8bc5ec;} .w58{ width: 58%;} .proinfoCon table tr td{ line-height: 1.6; padding: 1em;} .businessUl li{ height: 60vh;} .businessUl li:hover .text{ background: rgba(20,143,250,.7);} .businessUl li .desc{ opacity: 0; } .businessUl li:hover .desc{ opacity: 1;} .businessUl:hover li:not(:hover) { width: 20%; } .businessUl li.on,.businessUl li:hover{ width: 40%;} .honorleft li{ cursor: pointer;} .honorleft li + li{ margin-top: 10px;} .honorleft li.on{ color: var(--color);} .honorRight{ height: 27vw;} .honorRight img{ transition: all 0s; -webkit-transition: all 0s; -moz-transition: all 0s; -ms-transition: all 0s; -o-transition: all 0s; } .yearsSwiper{ padding-top: 1em; transform: translateY(-1em); -webkit-transform: translateY(-1em); -moz-transform: translateY(-1em); -ms-transform: translateY(-1em); -o-transform: translateY(-1em); } .yearsSwiper{ height: 4em; margin: 0;} .yearsSwiper .swiper-slide{ opacity: .1;} .yearsSwiper .swiper-slide-active{opacity: 1;} .historyRightSwiper .swiper-slide .img{ height: 13vw;} .history .button .btn{ width: .4em; height: .4em;} .history .button .btn + .btn{ margin-top: .1em;} .history .button .btn:hover{ background: var(--color); color: #fff;} .introduceTit::after{ display: block; content: ''; width: 2em; height:2px; position: absolute; left: 0; bottom: -1px; background:var(--color) } @media screen and (min-width:900px) { .introduceRight{ overflow-y: scroll; } .introduceRight::-webkit-scrollbar {width: 5px;} .introduceRight::-webkit-scrollbar-thumb {border-radius: 3px; background: #f8f8f8; width: 5px; } .introduceRight::-webkit-scrollbar-track {border-radius: 3px; background: #f8f8f8; width: 5px; } .introduceInfo{ max-height: 35vw; overflow-y: scroll; } .introduceInfo::-webkit-scrollbar {width: 5px;} .introduceInfo::-webkit-scrollbar-thumb { border-radius: 3px; background: #808080; width: 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .introduceInfo::-webkit-scrollbar-track { border-radius: 3px; background: #f8f8f8; width: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } } .culture{ background: url(../images/cultureBg.png) no-repeat center center / cover; background-attachment: fixed;} .culture li{ height: 70vh;perspective: 200px} .culture li .desc{ height:5em;} .culture 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,.15); display: block; content: ''; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .culture li::after { transform:rotateY(45deg) ; -webkit-transform:rotateY(45deg) ; -moz-transform:rotateY(45deg) ; -ms-transform:rotateY(45deg) ; -o-transform:rotateY(45deg) ; } .culture li:hover::after{ transform:rotateY(0) ;opacity: 1; -webkit-transform:rotateY(0) ; -moz-transform:rotateY(0) ; -ms-transform:rotateY(0) ; -o-transform:rotateY(0) ; } .strategySwiper .img{ width: 100%; height: 0; padding-bottom: 50%;} .strategySwiper .swiper-slide .text .icon{ height: 76px;} .strategySwiper .swiper-slide .text .con::after{ display: block; content: '';} .strategy .btn{ width: 55px; height: 55px; position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .strategy .btn:hover{ background: var(--color); color: #fff;} .strategy .btn.prev{ left: 19%;} .strategy .btn.next{ right: 19%;} .strategySwiper .swiper-slide{ opacity: .2;} .strategySwiper .swiper-slide .text .con::after{ display: block; content: ''; width: 20px; height:90%; top: 5%; border-radius: 15px; position: absolute; left: 0; background:var(--color) ; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; } .strategySwiper .swiper-slide-active{ opacity: 1;} .strategyBottom{ background: url(../images/strategyBottomBg.png) no-repeat center bottom / 100% auto; padding-bottom: 13.8vw; padding-top: 8vw;} .dutyUl li .img{ width: 100%; height: 0; padding-bottom: 46%;} .dutyUl li .text .Shu{ position: absolute; left: 0; top: -.5em;} .dutyCon{ background: url(../images/strategyBottomBg.png) no-repeat center bottom / 100% auto; } .newslist li{ box-shadow: 0px 1px 24px rgba(108, 108, 108, 0.11); width: calc((100% - 90px)/4); margin-right: 30px;} @media screen and (min-width:1280px) { .newslist li:nth-child(4n){ margin-right: 0;} } .newslist li .img{width: 100%; height: 0; padding-bottom: 58.4%;} .newslist li:hover{ box-shadow: 0px 1px 24px rgba(20,143,250,.11) ; transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); } .newslist li .text .tit{ line-height: 1.5; height: 3em;} .childLogo{ height: 6.5vw;} .childOne .right-box .font-image img{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .w1300{ width: 90%; max-width: 1300px; margin: 0 auto;} .w1200{ width: 90%; max-width: 1200px; margin: 0 auto;} .childTwo{ background: url(../images/childTwoBg.png) no-repeat left bottom / 100% auto; padding-bottom: 13vw;} .childThere .w1300{ background: #f5f6f8;} .w42{ width: 42%;} .childThere ul{ border-top: 1.5px dashed #0000004b ;} .childThere ul li::after{ display: block; content: ''; width:1px; height: 70%; position: absolute; left: 0; top: 0; background:rgb(0 0 0 / 14%) } .childThere ul li:first-child::after{ display: none; } .childFour .divider{ width: 2em; height: 2px;} .childFourUl li{ height: 28vw;} .childFourUl li.on{ width: 50%;} .childFourUl li .desc{ opacity: 0; transform: translateY(10px); -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); } .childFourUl li.on .desc{ opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .childFive .con{ position: absolute; z-index: 10; left: 50%; transform: translateX(-50%); top: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } .childFive .divider{ width: 2em; height: 2px;} .childContact .con{ margin-top: -6vw; box-shadow: 0px 1px 24px rgba(20,143,250,.11) ;} .childContact .divider{ width: 2em; height: 2px;} .childContact .contact .w35 .tit{ border-bottom: 1px dashed #999999;} .cooperationOne .icon01{ height: 2.6em;} .jobList li .bg-f8{ background: #f8f9fd;} .w10{ width: 10%;} .jobList li .bottom { display: none;} .jobList li.on .icon-add-bold:before { content: "\e68a"; } .bg-lightBlue{ background: #daefff;} .proBan .text{ position: absolute; left: 50%; transform: translate(-50%); bottom: 20%; z-index: 10; -webkit-transform: translate(-50%); -moz-transform: translate(-50%); -ms-transform: translate(-50%); -o-transform: translate(-50%); } .zhenxuanSwiper .swiper-slide .img{ width: 100%; height: 0; padding-bottom: 130%;} .zhenxuanSwiper .swiper-slide .text .desc{ height: 5em;} .zhenxuan .pagination .swiper-pagination-bullet{ margin: 0 2px; width: 6px; height: 6px;} .w36{ width: 36%;} .references .top{ height: 3em; background: #187ec3; border-top-left-radius: 20px;border-top-right-radius: 20px;} .references .bottom{ display: none;} .references.open .icon-arrow-up-bold:before { content: "\e689"; } sup{ font-size: .5em;} .proSub a{ height: 86px; padding: 0 5vw;} .proSub a .proClassIcon{ height: 1.5em; filter: grayscale(100%); -webkit-filter: grayscale(100%); } .proSub a.on{ color: var(--color);} .proSub a.on .proClassIcon{ filter: none; -webkit-filter: none; } .w52{ width: 52%;} .HMOs{ background: url(../images/HMOsBg.jpg) no-repeat center center / cover; background-attachment: fixed;} .HMOsUl .tit::after{ display: block; content: ''; width: .3em; height: .3em; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 50%; background:#fff; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .HMOs2{ background: url(../images/HMOsBg2.jpg) no-repeat center center / cover; background-attachment: fixed;} .ourProUl{ display: grid; grid-gap: 35px; grid-template-columns: repeat(3,1fr);} .ourProUl .item {min-width:0; background: #f9f8f8;} /*.ourProUl .item .img{ height: 188px;}*/ .ourProUl .item .img{ height: 200px;} .w38{ width: 38%;} .pop{ position: fixed; z-index: 200; top: 0; left: 0; width: 100%; height: 100%; display: none;} .pop .bg{ background: rgba(0, 0, 0, .6); } .pop .con{ width: 90%; max-width: 400px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 20;}