body{font-size: 16px;} .inner{ width:1580px; margin: 0 auto; } .pl-inner{ padding-left: calc((100vw - 1580px)/2);} .pr-inner{ padding-right: calc((100vw - 1580px)/2);} .ml-inner{ margin-left: calc((100vw - 1580px)/2);} .mr-inner{ margin-right: calc((100vw - 1580px)/2);} header{ padding: 0 3vw 0 4vw;position: fixed; top: -200px; left: 0; width: 100%; z-index: 100 ; color: #fff;} header.sticky-on {opacity: 1; top: 0;} .zw{ margin-top: -110px; padding-top: 110px;} .zwHeader{ height: 100px;} .subNav a{} .subNav a.on,.subNav a:hover{ background: var(--blue); color: #fff;} .subNav:hover a:not(:hover) { color: #333; background: #f8f8f8;} .oneNav{ line-height: 100px; white-space: nowrap; display: block; padding: 0 1.5vw; font-size: 18px; font-weight: bold;} .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.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-bf/public/static/homeottom: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(--blue)} 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%); } .logoImg{ height: 60px; transition: all 0s; filter: drop-shadow(300px 0 0 #fff); transform: translateX(-300px); -webkit-filter: drop-shadow(300px 0 0 #fff); -webkit-transform: translateX(-300px); -moz-transform: translateX(-300px); -ms-transform: translateX(-300px); -o-transform: translateX(-300px); -webkit-transition: all 0s; -moz-transition: all 0s; -ms-transition: all 0s; -o-transition: all 0s; } 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(--blue);} header.scroll nav li.on .oneNav ,header:hover nav li:hover .oneNav { color: var(--blue);} 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; } header.scroll .z_menu_btn .cir,header:hover .z_menu_btn .cir { background: var(--blue);} /* .z_menu_btn:hover .cir{ background: var(--blue);} */ .z_menu_btn .cir{ width: 2.7vw; height: 2.7vw;} .z_menu_btn .line {width: 1.25vw;height: 1px; margin: 10px 0; } .z_menu_btn .tit {height: 20px;line-height: 20px; } .z_menu_btn:hover .tit span { -webkit-transform: translateY(-20px); transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); } .z_menu_btn:hover .cir{ background: var(--blue);} .z_menu_btn.on .line1 { -webkit-transform: translateY(5.5px) rotate(45deg); transform: translateY(5.5px) rotate(45deg); -moz-transform: translateY(5.5px) rotate(45deg); -ms-transform: translateY(5.5px) rotate(45deg); -o-transform: translateY(5.5px) rotate(45deg); } .z_menu_btn.on .line2 { -webkit-transform: translateY(-5.5px) rotate(-45deg); transform: translateY(-5.5px) rotate(-45deg); -moz-transform: translateY(-5.5px) rotate(-45deg); -ms-transform: translateY(-5.5px) rotate(-45deg); -o-transform: translateY(-5.5px) rotate(-45deg); } /* .searchBtn:hover{ color: var(--blue);} .searchBox{ background : var(--blue); z-index: 15; 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%); } */ .languageBtn dl{ line-height: 40px; position:absolute;text-align: center;min-width:100px; 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);}.languageBtn dl a{ display: block; border-bottom: 1px solid #e5e5e5;} .languageBtn dl a:hover{ background: var(--blue); color: #fff;} .languageBtn 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; } .languageBtn: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%); } .languageBtn .iconfont{ transform: scale(0.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); } .h_nav{ height: 60px; width: 60px; background-color:var(--blue); 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 .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;} .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;} .nav{ overflow-y: scroll; padding-bottom: 63px; } .nav::-webkit-scrollbar {/*滚动条整体样式*/ /*高宽分别对应横竖滚动条的尺寸*/ width: 1px;} .nav::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 3px; background: #000; width: 1px; } .nav::-webkit-scrollbar-track {/*滚动条里面轨道*/border-radius: 3px; background: rgba(0,0,0,.1); width: 1px; } .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; } .navClose{ position: absolute; right: 20px; top: 20px; z-index: 10;} .navClose:hover{ letter-spacing: 5px;} .navs__pop { z-index: 101;position: fixed;left: 0;top: 0;width: 100vw; background: var(--blue); overflow: hidden;height: 0;transition: 1s cubic-bezier(0.77, 0, 0.175, 1);-webkit-transition: 1s cubic-bezier(0.77, 0, 0.175, 1);-moz-transition: 1s cubic-bezier(0.77, 0, 0.175, 1);-ms-transition: 1s cubic-bezier(0.77, 0, 0.175, 1);-o-transition: 1s cubic-bezier(0.77, 0, 0.175, 1);} .navs__pop.show {height: 100%; } .navs__menu-wrap {position: relative;height: 100vh; } .Circles {position: absolute;overflow: hidden;top: 0;left: 0;right: 0;bottom: 0;pointer-events: none !important;z-index: 0; } .Circles-circle {display: block;position: absolute;will-change: transform;transition: 1.2s cubic-bezier(0.165, 0.84, 0.44, 1); } .Circles-circle:nth-child(1) {width: 21.87vw;height: 21.87vw;top: -7.26vw;left: -7.26vw; } .Circles-circle:nth-child(1) .Circles-dot {opacity: 0.05; } .Circles-circle:nth-child(2) {width: 35vw;height: 35vw;top: -11.7vw;left: -11.7vw;transition: 2.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .Circles-circle:nth-child(2) .Circles-dot {opacity: 0.04; } .Circles-circle:nth-child(3) {width: 48vw;height: 48vw;top: -16vw;left: -16vw;transition: 2.4s cubic-bezier(0.165, 0.84, 0.44, 1);-webkit-transition: 2.4s cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition: 2.4s cubic-bezier(0.165, 0.84, 0.44, 1);-ms-transition: 2.4s cubic-bezier(0.165, 0.84, 0.44, 1);-o-transition: 2.4s cubic-bezier(0.165, 0.84, 0.44, 1);} .Circles-circle:nth-child(3) .Circles-dot {opacity: 0.03; } .Circles-circle:nth-child(4) {width: 63.4vw;height: 63.4vw;top: -21.1vw;left: -21.1vw;transition: 3.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .Circles-circle:nth-child(4) .Circles-dot {opacity: 0.02; } .Circles-circle:nth-child(5) {width: 92vw;height: 92vw;top: -30.7vw;left: -30.7vw;transition: 3.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .Circles-circle:nth-child(5) .Circles-dot {opacity: 0.02; } .Circles-dot {position: absolute;left: 0;top: 0;right: 0;bottom: 0; } .Circles-dot:after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #f2f2f2;border-radius: 50%;transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s;will-change: transform;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;-webkit-transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s;-moz-transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s;-ms-transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s;-o-transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s;} .navs__menus {position: absolute;left: 0;top: 0; width: 100%; height: 100%; } .navs__logos {text-align: center; } .navs__logos img {display: block;/* width: 233px; */margin: auto; } .navs__li {margin-top: 90px; } .navs__li .left .navs__item{ white-space: nowrap; } .navs__li .left dt { margin-bottom: 5px;} .navs__li .left dt a{ color: #fff; } .navs__li .left dd{ color: rgba(255, 255, 255, 0.6); font-size: 14px; margin-bottom: 10px;} .navs__li .left dd a:hover{ color: #fff;} .ewmImg{ width: 140px;} .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 ; } .idxBan .swiper-slide::after{ display: block; content: ''; position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; background-image: linear-gradient(125deg,rgba(0,0,0,.6),transparent);} .f250{ font-size: 248px;} .idxBan .swiper-slide .text{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 10; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); } .idxBan .swiper-slide .text .tit{ position: absolute; left: 0; bottom: 0; z-index: 2;} .idxBan .swiper-slide .text .DIN{ letter-spacing: .1em;-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;background-image: linear-gradient(to right, rgba(255,255,255,.1),rgba(255,255,255,.5), rgba(255,255,255,.1));} .idxBan .swiper-pagination{ bottom: 3%;} .idxBan .swiper-pagination .swiper-pagination-bullet{ width: 40px; transition: all .36s; height: 4px; background: rgba(255, 255, 255, .65); opacity: 1; border-radius: 0; -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 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ width: 60px; background: var(--blue);} .idxbanMore .right{ width: 38px; height: 38px; margin-left: 90px;} .idxbanMore .right::before{ width:20%; height: 20%; border-radius: 50%; position: absolute; left: 40%; top: 40%; display: block; content: ''; background: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .idxbanMore .right::after{ width:200%; height: 1px; position: absolute; right: 50%; top:49%; display: block; content: ''; background: rgba(255, 255, 255, .45); } .idxbanMore:hover{ box-shadow: 0 0 15px rgba(255, 255, 255, .15) ; background: var(--blue); border-color: var(--blue);} .idxbanMore:hover .right{ margin-left: 60px;} .common.btn { white-space: nowrap;line-height:60px;text-align: center; display: inline-block;perspective: 500;-webkit-perspective: 500; } .common.btn .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; } .common.btn .t {position: absolute; width: 100%;height: 100%;left: 0; top: -60px;-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; } .common.btn:hover .w { transform: translateY(30px) translateZ(-30px) rotate3d(1, 0, 0, -90deg); -webkit-transform: translateY(30px) translateZ(-30px) rotate3d(1, 0, 0, -90deg); -moz-transform: translateY(30px) translateZ(-30px) rotate3d(1, 0, 0, -90deg); -ms-transform: translateY(30px) translateZ(-30px) rotate3d(1, 0, 0, -90deg); -o-transform: translateY(30px) translateZ(-30px) rotate3d(1, 0, 0, -90deg); } .idxAbout .jule { height: auto; position: absolute; left: 10%; top: 60%; transform: translateY(-50%);} .idxAbout .jule .idxAboutLogo{ height: 200px;} .jule img { animation: hotBefore2 20s ease infinite; -webkit-animation: hotBefore2 20s ease infinite;} .lint_cai{ position: absolute; left: 0; bottom: 18%; width: 100%;pointer-events: none;} .honor_line {width: 4000px;height: 64px;position: absolute;left: 0%;bottom: 35%;display: flex;pointer-events: none;} .honor_line img {width: 50%;} .honor_line.hl1 {-webkit-animation: moves 5s linear infinite;animation: moves 5s linear infinite;} .honor_line.hl2 { -webkit-animation: moves 20s linear infinite ; animation: moves 20s linear infinite ; } .honor_line.hl3 { -webkit-animation: moves 10s linear infinite ; animation: moves 10s linear infinite ; } .videoPlay{ position: absolute; font-size: 60PX !important; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 50; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); } .idxAboutImg{ height: 300px;} .idxPro{ background: url(../images/idxProBg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed;} .idxPro::after{ display: block; content: ''; background: rgba(29, 32, 136, .78); position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;} .idxCoo::after{ display: block; content: ''; background: rgba(29, 32, 136, .78); position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;} .idxProCon::before{ display: block; content: ''; background: url(../images/idxProConBg.jpg) no-repeat top right #fff; position: absolute; right: 0; bottom: 0; width: calc(100% - 5vw); height: 100%;} .idxProSwiper .swiper-slide .img{ height: 0; padding-bottom: 100%;} .idxProSwiper .swiper-slide .more{ position: absolute; left: 1em; bottom: 0; z-index: 5;} .idxProSwiper .swiper-slide .more::before{ transition: all .36s; transform: scale(0); display: block; border-radius: 50%; content: ''; background: var(--yellow); position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .idxProSwiper .swiper-slide:hover .more::before{ transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .idxProSwiper .swiper-slide:hover .more{ color: #fff;} .idxProSwiper .swiper-slide:hover .font30 { color: var(--red);} .idxProSwiper .swiper-slide:hover .img{ box-shadow: 0 0 15px rgba(0, 0, 0, .15);} .idxProSwiper .swiper-slide: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); } .idxProSwiper .swiper-slide:hover{ color: var(--blue);} .mySwiperBtn{ width: 66px; height: 66px; } .idxPro .mySwiperBtn {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%); } .mySwiperBtn.prev{ left: -33px;} .mySwiperBtn.next{ right: -33px;} .mySwiperBtn:hover{ background: var(--yellow);} .idxPro .pagination{ position: relative; top: auto; left: auto; bottom: auto; right: auto; width: 50vw; height: 5px; background: rgba(255, 255, 255, .45);} .idxPro .pagination .swiper-pagination-progressbar-fill{ background: var(--yellow);} .idxSer{ background: #f5faff;} .icon-youjiantou{ display: inline-block; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); } a:hover .icon-youjiantou{ transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); } .idxSerImg{ width: 25.5vw; position: absolute; left: 0; bottom: 0;} .idxSerUl .round{ width: 10vw; height: 10vw; background: url(../images/bg1.png) no-repeat center top; background-size: 100% 100%;} .idxSerIcon{ height: 75px; filter: drop-shadow(-5px 10px 10px rgba(29,32,136,0.25)); -webkit-filter: drop-shadow(-5px 10px 10px rgba(29,32,136,0.25)); } .idxSerUl li .num{ position: absolute; right: .5em; top: -.2em;-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent ;background-image: linear-gradient(to bottom, #8fb5ff, transparent); } .idxSerUl li .round::before{ transition: all .36s; transform: scale(0); display: block; border-radius: 50%; content: ''; background: #fff; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .idxSerUl li.on .round::before{ transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .idxSerSwiper .swiper-slide{ height: auto;} .idxCoo{ background: url(../images/idxCooBg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed;} .idxCooSwiper .swiper-slide{ height: auto;} .idxCoo .mySwiperBtn{ position: relative; left: auto !important; right: auto !important; top: auto !important; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; } .idxNews{ background: #f5faff;} .newslist li{ width: calc((100% - 120px)/3); margin-right: 60px;} .newslist li::after{ display: block; content: ''; width: 0; height: 100%; background: #fff; position: absolute; left: 0; top: 0; transition: all .36s; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .newslist li .tit{ height: 3.5em;} .newslist li:nth-child(3n){ margin-right: 0;} .newslist .imgBox{ transition: all .6s; transform: translateY(-105%); width: 100%; height: 0; padding-bottom: 55.5%; -webkit-transform: translateY(-105%); -moz-transform: translateY(-105%); -ms-transform: translateY(-105%); -o-transform: translateY(-105%); -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; } .newslist li:hover{ box-shadow: 0 0 20px rgba(0, 0, 0, .15); color: var(--red);} .newslist li:hover .imgBox{ transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .newslist li:hover::after{ width: 100%;} footer{ background: #2d2d2d;} .footContact{ width: 32%;} .ewmBox{ width: 140px;} .ewmBox .img{ background: url(../images/ewmBg.png) no-repeat center center; background-size: 100% 100%;} .footNav dd{ line-height: 2.4;} footer a:hover{ color: #fff; opacity: .8;} .footSearch{ width: 88%;} footer .bottom{ border-top: 1px solid rgba(255, 255, 255, .15);} .neiBan{ height: 50vw;} .neiBanImg{ width: 72vw; height: 38vw; position: absolute;right: 0;top: 19vw; object-fit: cover;} .neiBanText{padding-top: 10vw;} .neiBanText .tit{-webkit-text-stroke: 1.5px #fff; text-stroke: 1.5px #fff; font-weight: 400; color: rgba(0,0,0,0); } .neiBanText .iconfont{margin-top: 9vw; } .w62{ width: 62%;} .brief{ background: url(../images/briefBg.jpg) no-repeat center center; background-size: 80% auto;} .twoTit{ text-stroke: 2px var(--blue); -webkit-text-stroke: 2px var(--blue); position: absolute; left: .1em; top: .1em;} .sinceText{ margin-top: -.8em; } @keyframes scaleIn { from { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(1.05); transform: scale(1.05);} } .cultureImg img{ display: none; animation: scaleIn 2s forwards cubic-bezier(0.4, 0, 0.49, 0.93); -webkit-animation: scaleIn 2s forwards cubic-bezier(0.4, 0, 0.49, 0.93);} .cultureImg .on{ display: block;} /* .culture{ background: url(../images/cultureBg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed;} */ .culture::after{ display: block; content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, .2); z-index: 8;} .cultureUl li{ cursor: pointer; color: transparent;-webkit-text-stroke: 1px #fff; text-stroke: 1px #fff; opacity: .5; } .cultureUl li.on{ opacity: 1; color: #fff;-webkit-text-stroke: 1px transparent; text-stroke: 1px transparent;} .cultureBtn{ position: absolute; right: 0; bottom: 105%;} .mySwiperBtn.swiper-button-disabled{ opacity: .5; cursor: no-drop;} .honor{ background: url(../images/honorBg.png) no-repeat bottom center #e9eff4; background-size: 100% auto;} .honorUl li.on{ background: var(--yellow);} .honorImgBox{ border: 5px solid #333; } .swiTabCon .swiper-slide{ height: auto;} .slide-c .swiper-slide .title{ height: 3em;} /* height: 400px; */ .proList li{ width: calc((100% - 100px)/3); margin-right: 50px;} .proList li:nth-child(3n){ margin-right: 0;} .proList li .img{ height: 0; padding-bottom: 100%;} .proList li .more{ position: absolute; left: 1em; bottom: 0; z-index: 5;} .proList li .more::before{ transition: all .36s; transform: scale(0); display: block; border-radius: 50%; content: ''; background: var(--yellow); position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .proList li:hover .more::before{ transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .proList li:hover .more{ color: #fff;} .proList li:hover .img{ box-shadow: 0 0 15px rgba(0, 0, 0, .15);} .proList 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); } .proList li:hover{ color: var(--red);} .linka a:hover{ color: var(--blue);} .infoTop{ background: url(../images/infoTopBg.jpg) no-repeat top center; background-size: cover;} .location .iconfont{ transform: scale(0.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); } .infoTop .line{ width: 100%; height: 1px; background: #cdcdcd;} .infoTop .line::after{ display: block; content: ''; width: 2em; height: 3px; position: absolute; left: 0; top: -1px; background:var(--yellow); z-index: 1;} .infoTop .button { border-width: 2px;} .infoTop .button a{ border-width: 2px; flex: 1;} .infoBot{ background: #f2f7fd;} .infoTit span::before{display: block; content: ''; width: 4px; height: 100%; position: absolute; left: 0; top: 0; background:var(--yellow); z-index: 1;} .newsLeft{ width: 65%;} .newsRight{ width: 31%;} .newsRight .tit::after{ height: 1em; width: 6px; background: var(--blue); display: block; content: ''; 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%); } .newsRightUl{ position: sticky; right: 0; top: 110px;} .newsRightUl a .img{ width: 185px; height: 115px;} .newsRightUl a .img img{ width: 100%; height: 100%; object-fit: cover;} .newsRightUl a .text{ width: calc(100% - 204px);} .newsRightUl a: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); } .job{ background: url(../images/jobBg.jpg) no-repeat left top; background-size: cover;} .joblist{ display: grid; grid-gap: 40px; grid-template-columns: repeat(3,1fr);} .joblist li{ box-shadow: 0 0 10px rgba(0, 0, 0, .05);} .joblist li button::after{ display: block; content: ''; width: 0; height: 100%; position: absolute; left: 0; top: 0; background:var(--yellow); z-index: 1; transition:all .36s ; -webkit-transition:all .36s ; -moz-transition:all .36s ; -ms-transition:all .36s ; -o-transition:all .36s ; } .joblist li button:hover{ transform: translateX(25px); -webkit-transform: translateX(25px); -moz-transform: translateX(25px); -ms-transform: translateX(25px); -o-transform: translateX(25px); } .joblist li button:hover::after{ width: 100%;} .joblist li button .iconfont{ opacity: 0; transform: translateX(10px); -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); } .joblist li button:hover .iconfont{ opacity: 1; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } .none{ display: none;} .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; } .mapBox{ width: 100%; height: 80vh;} .mapInner::after{ display: block; content: ''; width:50%; height: 100%; position: absolute; right: 0; top: 0; z-index: 5; background-image: linear-gradient(to right,transparent,#fff); } @media screen and (min-width:900px) { .mapAdd{ position: absolute; right: 0; top: 50%; z-index: 10; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } } .messages{ background: url(../images/messagesBg.jpg) no-repeat center center; background-size: cover;} .messages textarea:focus,.messages input:focus { border-color: var(--blue)} .text-stroke{-webkit-text-stroke: 1.5px #e7e9ea; text-stroke: 1.5px #e7e9ea; color: transparent; } .sustainableTop{ width: 100%; position: absolute; top: -1px; left: 0; z-index: 10;} .sustainableImg{ height: 80vh;} .serveOne{ background: url(../images/serveOneBg.jpg) no-repeat center top; background-size: cover;} .serveOneRightSwiper{ height: 378px;} .serveOneRightSwiper .swiper-slide{ height: calc(100% / 3);} .serveOneRightSwiper .swiper-slide { opacity: 0; transition: all .36s; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .serveOneRightSwiper .swiper-slide.swiper-slide-active{ opacity: 1;} .serveOneRightSwiper .swiper-slide.swiper-slide-active i{ color: var(--blue); } .serveOneRightSwiper .swiper-slide.swiper-slide-next{ opacity: .2 ;} .serveOneLeftSwiper .swiper-slide.swiper-slide-active,.serveOneLeftSwiper .swiper-slide.swiper-slide-active .serveOneImg{ opacity: 1;} .serveOneRound{ width: 13vw; height: 13vw; background-image: linear-gradient(to bottom,#012ec4,#1d2089); position: absolute; 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%); } .serveOneRound::after{ display: block; content: ''; width: 120%; height: 120%; position: absolute; left: -10%; top: -10%; border: 1px dashed rgba(29, 32, 136, .18); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .serveTwo{ } .serveTwoUl{ display: grid; grid-gap: 75px; grid-template-columns: repeat(3,1fr);} .serveTwo::after{ display: block; content: ''; width:100%; height: 50%; z-index: 1; position: absolute; left:0; top: 0; background: url(../images/serveTwoBg.jpg) no-repeat center top; background-size: cover; } .serveTwoUl li{ padding-bottom:10vh; perspective: 800px} .serveTwoUl li:before{content: "";width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 2;transform-origin: left center 0;transition: 0.54s; transform: rotateY(60deg);-webkit-transform: rotateY(60deg);-moz-transform: rotateY(60deg); opacity: 0;visibility: hidden; background: #f9d52d} .serveTwoUl li:hover:before {opacity: 1; visibility: visible; transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); } .serveTwoUl li:hover div{ color: #fff !important;} .serveTwoUl li:hover{ box-shadow: 10px 15px 15px rgba(255, 255, 255, .3); transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); } .serveThere{ background: url(../images/serveThereBg.jpg) no-repeat center bottom; background-size: cover; padding-bottom: 280px;} .serveThere .text-stroke{-webkit-text-stroke: 1.5px #d2d6d7; text-stroke: 1.5px #d2d6d7; color: transparent; } .posi-center{ position: absolute; 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%); } .serveThereImg{ width: 30vw;} .serveThereIcon{ width: 8vw;} .serveThereImgUl li{ transition: all .36s; position: absolute; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .serveThereImgUl li:hover img{ transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); } .serveThereImgUl li:nth-child(1){ left: 27%; top: 10%;} .serveThereImgUl li:nth-child(2){ right: 27%; top: 10%;} .serveThereImgUl li:nth-child(3){ left: 49.5%; top: 86%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } .serveThereTextUl li{ position: absolute; width: 20vw;} .serveThereTextUl li:nth-child(1){ right:73%; top: 15%; } .serveThereTextUl li:nth-child(1) .tit{ justify-content: flex-end;} .serveThereTextUl li:nth-child(2){ left: 73%; top: 15%;} .serveThereTextUl li:nth-child(3){ left:50%; margin-left: -11vw; top:115%; text-align: center;} .serveThereTextUl li:nth-child(3) .tit{ display: flex; justify-content: center; align-self: center; } .opacity1{ opacity: .05;} .color-text{-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;background-image: linear-gradient(to right, #1343d8, #0989f4);} .bg-text{background-image: linear-gradient(67deg, var(--purple), var(--blue));} .serveFour .right{ background: url(../images/serveFourRight.jpg) no-repeat right top var(--blue); background-size: auto 100%;} s{position:absolute;top:1px;right:0;width:32px;height:32px;background:url("img/arrow.png") no-repeat;} ._citys { width: 450px; display: inline-block; border: 2px solid #eee; padding: 5px; position: relative; background-color: #fff; } ._citys span { display: flex; align-items: center; justify-content: center; color: var(--red); height: 15px; width: 15px; line-height: 15px; text-align: center; border-radius: 3px; position: absolute; right: 10px; top: 10px; border: 1px solid var(--red); cursor: pointer; } ._citys0 { width: 95%; height: 34px; line-height: 34px; display: inline-block; border-bottom: 2px solid var(--red); padding: 0px 5px; font-size:14px; font-weight:bold; margin-left:6px; } ._citys0 li { display: inline-block; line-height: 34px; font-size: 15px; color: #888; width: 80px; text-align: center; cursor: pointer; } ._citys1 { width: 100%; display: inline-block; padding: 10px 0; display: grid; grid-gap: 10px; grid-template-columns: repeat(4,1fr);} ._citys1 a { height: 35px; display: inline-block; background-color: #f5f5f5; color: #666; line-height: 35px; text-align: center; cursor: pointer; font-size: 12px; border-radius: 5px; overflow: hidden; } ._citys1 a:hover { color: #fff; background-color: var(--red); } .params-container {display: table;} .param-item {display: table-row;} .param-cell {display: table-cell;} /* 上传内容 */ label{ position: relative;} #fileinp{ position: absolute; height: 100%; cursor: pointer; left: 0; top: 0; opacity: 0;} #btn{ margin-right: 5px;} #text{color: #bababa;font-size: 14px;} #btn{ width: 94px; height: 38px; padding: 5px 10px; background: var(--yellow); color: #FFF; border: none; border-radius: 5px;} #x_nei_content>span{ display: inline-block; width: 228px; height: 38px; line-height: 38px; text-align: center; background-color: #f8f8f8; border: 1px solid #c7c7c7; /* position: absolute; */ bottom: -2rem;margin-left: calc((100% - 114px) / 2);cursor: pointer; } #x_down_all{ margin-top: 8rem;} .cooperationTit .line{ width: 30%; height: 1px;} .Performance .title::before{ width: 50%; height: 100px; border-radius: 40px; display: block; content: ''; position: absolute; left: 25%; top: -5%; background: #fff; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; } .Performance .title::after{ border-radius: 20px 20px 0 0; width:100%; height: calc(100% - 40px); display: block; content: ''; position: absolute; left: 0; top: 40px; background: #fff; -webkit-border-radius: 20px 20px 0 0; -moz-border-radius: 20px 20px 0 0; -ms-border-radius: 20px 20px 0 0; -o-border-radius: 20px 20px 0 0; } .Performance .line{ width: 1em; height: 2px;} .duiIcon{ height: 1.5em;} .precautionsUl li:last-child{ margin-bottom: 0;} .Performance .con{ height: 40vw; border-radius: 0 0 20px 20px; -webkit-border-radius: 0 0 20px 20px; -moz-border-radius: 0 0 20px 20px; -ms-border-radius: 0 0 20px 20px; -o-border-radius: 0 0 20px 20px; } .PerformanceImg{ width:33.3vw; height: 33.3vw;shape-outside: circle(50%);border: 2px dashed #e5e5e5;border-radius: 50%;} .PerformanceImg img{ width: 80%; height: 80%; object-fit: cover;} /* .PerformanceImg::before{ border: 1px dashed #e5e5e5; border-radius: 50%; position: absolute; left: -8% ; top: -8%; width:116%; height: 116%; display: block; content: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } */ .PerformanceImg::after{ background-image: linear-gradient(to right, #fff , transparent); position: absolute; left: 0% ; top: 0%; width:100%; height: 100%; display: block; content: ''; } /* .PerformanceLi{ transform:translateX(-1em) ; -webkit-transform:translateX(-1em) ; -moz-transform:translateX(-1em) ; -ms-transform:translateX(-1em) ; -o-transform:translateX(-1em) ; } .PerformanceLi + .PerformanceLi{ margin-top: 2vw;} */ .PerformanceLi i{font-style:italic} .PerformanceLi i::before{ display: block; content: ''; width: 100%; height: .2em; position: absolute; left: 20%; bottom:0; background: var(--yellow);} .PerformanceAritce{ height: 1.5vw;} .PerformanceUl li:nth-child(1){ font-weight: bold;} .PerformanceUl li:nth-child(2){ font-weight: bold;} .PerformanceUl li:nth-child(1) i,.PerformanceUl li:nth-child(2) i{ color: var(--red);} @media screen and (min-width:900px) { .PerformanceUl li{ position: absolute;} .PerformanceUl li:nth-child(n+8){ display: none !important;} .PerformanceUl1 li{ left: 32.4vw; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .PerformanceUl2 li:nth-child(1){ left: 32vw; top: 30%;} .PerformanceUl2 li:nth-child(2){ left:32vw; bottom: 35%;} .PerformanceUl3 li:nth-child(1){ left: 32vw; top: 30%;} .PerformanceUl3 li:nth-child(2){ left: 32.5vw; top: 50%; transform: translateY(-50%); } .PerformanceUl3 li:nth-child(3){ left: 31.5vw; bottom: 30%;} .PerformanceUl4 li:nth-child(1){ left: 29.5vw; top: 15%;} .PerformanceUl4 li:nth-child(2){ left: 32.5vw; top: 35%; } .PerformanceUl4 li:nth-child(3){ left: 32vw; bottom: 35%;} .PerformanceUl4 li:nth-child(4){ left: 28.6vw; bottom: 15%;} .PerformanceUl5 li:nth-child(1){ left: 28.2vw; top: 10%;} .PerformanceUl5 li:nth-child(2){ left: 31.8vw; top: 28%; } .PerformanceUl5 li:nth-child(3){ left: 32.5vw; top: 50%; transform: translateY(-50%); } .PerformanceUl5 li:nth-child(4){ left: 31.5vw; bottom: 28%;} .PerformanceUl5 li:nth-child(5){ left: 27.5vw; bottom: 10%;} .PerformanceUl6 li:nth-child(1){ left: 26.5vw; top: 5%;} .PerformanceUl6 li:nth-child(2){ left: 30.5vw; top: 20%; } .PerformanceUl6 li:nth-child(3){ left: 32.5vw; top: 36%; } .PerformanceUl6 li:nth-child(4){ left: 32vw; bottom: 36%;} .PerformanceUl6 li:nth-child(5){ left: 29.5vw; bottom: 20%;} .PerformanceUl6 li:nth-child(6){ left: 24vw; bottom: 5%;} .PerformanceUl7 li:nth-child(1){ left: 24vw; top: 0%;} .PerformanceUl7 li:nth-child(2){ left: 29.5vw; top: 15%; } .PerformanceUl7 li:nth-child(3){ left: 32vw; top: 30%; } .PerformanceUl7 li:nth-child(4){ left:32.5vw; top: 50%; transform: translateY(-50%);} .PerformanceUl7 li:nth-child(5){ left: 31.5vw; bottom: 30%;} .PerformanceUl7 li:nth-child(6){ left: 28.6vw; bottom: 15%;} .PerformanceUl7 li:nth-child(7){ left:21vw; bottom: 0%;} } @media screen and (max-width:900px) { .Performance .title::before{ height: 60px; top: 0;} .Performance .title::after{ height: calc(100% - 25px); top: 25px;} .Performance .con{ height: auto;} .PerformanceAritce{ height: 15px; margin-right: 5px;} .PerformanceLi{ flex-wrap: wrap;} .PerformanceLi i{ margin-right: 5px;} .PerformanceLi + .PerformanceLi{ margin-top: 8px; line-height: 2;} }