body{font-size: 16px;} .w90{ width: 90%;max-width: 1720px; margin: 0 auto;} .w80{ width: 80%;max-width: 1500; margin: 0 auto;} .banImg{ width: 100%; height: 100vh; object-fit: cover;} header{ width: 100%; height: 100px; position: fixed; top: 0; left: 0; z-index: 100; border-bottom: 1px solid rgba(255, 255, 255, .25); color: #fff;} header .con{ padding: 0 5vw;} header .icon2{ display: none;} nav li{ position: relative; line-height: 100px;} nav li .oneNav{ font-size: 18px; padding: 0 30px; display: inline-block; white-space: nowrap;} nav li dl{position:absolute;text-align: center;min-width: 100%; width: auto;top:110px;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 10px; 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{ 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 .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; } nav li:hover dl{ 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%); } nav li>a:hover:after{top:0} nav li>a:hover span{transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%)} .topSearch .text{ height: 50px; line-height: 50px; border-radius: 30px; width: 233px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; } .topSearch .submit{ width: 50px; height: 50px; background: url(../images/searchBtn-w.png) no-repeat center center; background-size: 35% auto;} .h_nav{ height: 60px; width: 60px; background-color:var(--blue); padding: 18px 8px ; align-items: flex-end; display: none;} .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); } .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;} .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; } header::after{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,.15); z-index: 1; display: block; content: ''; } header.bg { box-shadow: 0 0 10px rgba(0,0,0,.15);} header.bg .icon2{ display: block;} header.bg .icon1{ display: none;} header::before{ width: 100%; height: 0; z-index: 2; position: absolute; left: 0; top: 0; background-color: #fff; display: block; content: ''; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; } header.bg::before{ height: 100%; } header.bg{ color: #333;} header.bg .topSearch .text{ background-color: #f5f5f5;} header.bg .topSearch .submit{ background: url(../images/searchBtn.png) no-repeat center center; background-size: 35% auto;} .banner .swiper-slide .txt{ position: absolute;z-index: 10; left: 10%; height: 100%; top: 0;} .banner .swiper-slide .txt .more{ border-color: rgba(255, 255, 255, .6); width: 230px; height: 50px;} .banner .swiper-slide .txt .more::before{ width: 0; height: 100%; position: absolute; left: 0; top: 0; background-color: #fff; display: block; content: ''; transition: all .36s; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .banner .swiper-slide .txt .more:hover{ color: #333; box-shadow: 0 0 10px rgba(255, 255, 255, .25);} .banner .swiper-slide .txt .more:hover:before{ width: 100%;} .svg-swiper-pagination {position: absolute;z-index: 1;display: flex;flex-wrap: wrap; padding-left: 10vw;} .svg-swiper-pagination .swiper-pagination-bullet {background: transparent;opacity: 1;position: relative;width: 12px;height: 12px;outline: none; margin: 0 22px !important; bottom: 60px; position: relative;} .svg-swiper-pagination .swiper-pagination-bullet:after {content: "";position: absolute;left: 50%;top: 50%;z-index: 0;width: 10px;height: 10px;background-color: transparent; border: 1px solid #fff;border-radius: 50%;margin: -6px 0 0 -6px;transition: opacity .3s} .svg-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after {background-color: #fff;} .svg-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .svg {opacity: 1} .svg-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .circle2 {-webkit-animation: svgCircleAnmi 6s linear forwards;animation: svgCircleAnmi 6s linear forwards} .svg-swiper-pagination .svg {width: 50px;height: 50px; position: absolute; top: -19px; left: -19px;transform: rotate(-90deg);opacity: 0;transition: opacity .3s;display: block} .svg-swiper-pagination .circle1 { stroke: transparent} .svg-swiper-pagination .circle2 { stroke: #fff; stroke-dasharray: 0 339} .idxAbout{ background: url(../images/idxAboutBg.jpg) no-repeat center top; background-size: cover;} .idxMore::before{ transition: all .36s; width: 50px; height: 50px; background-color: var(--blue); display: block; content: ''; position: absolute; left: -25px; margin-top: -25px; border-radius: 50%; top: 50%;-webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .idxMore:hover::before{ width:calc(100% + 50px); border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; } .idxMore:hover{ color: #fff;} .numUl img{ width: 38px; margin-right: 12px;} .numUl .txt{ margin-left: 50px;} .idxPro{ background: url(../images/idxProBg.jpg) no-repeat center top; background-size: cover; height: 980px;} .idxPro .bg1,.idxPro .bg2{ width: 100%; height: 70%; position: absolute; left: 0px; bottom: 0px; background: url(../images/banner-bg.png) no-repeat top center; background-size: 100%; } .idxPro .bg1{z-index: 2;animation: move1 70s linear infinite alternate; -webkit-animation: move1 70s linear infinite alternate;} .idxPro .bg2{ z-index: 3; animation: move2 70s linear infinite alternate; -webkit-animation: move2 70s linear infinite alternate; } .idxPro .bg3{ width: 1130px; z-index: 4; height: 1130px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform:; -moz-transform:; -ms-transform:; -o-transform:; } .idxPro .bg4{ width: 745px; height:745px; z-index: 5; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform:; -moz-transform:; -ms-transform:; -o-transform:; } /* #proSwiper{ width:1454px; padding-top: ;} */ #proSwiper{ width:1454px; } #proSwiper .swiper-slide{ transform: scale(.45); transition: all .36s; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-transform: scale(.45); -moz-transform: scale(.45); -ms-transform: scale(.45); -o-transform: scale(.45); } /* #proSwiper .swiper-slide .img{ width: 28vw; height: 28vw; background-color: #fff;} */ #proSwiper .swiper-slide-active,#proSwiper .swiper-slide-duplicate-active { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } #proSwiper .swiper-slide .more{ opacity: 0; width: 280px; height: 60px; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; } #proSwiper .swiper-slide .img{ width: 100%; height:0;padding-bottom:100%; border-radius:50% ; -webkit-border-radius:50% ; -moz-border-radius:50% ; -ms-border-radius:50% ; -o-border-radius:50% ; } #proSwiper .swiper-slide .img img{ max-width: 80%; 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%); } #proSwiper .swiper-slide-active .img,#proSwiper .swiper-slide-duplicate-active .img{background-color: #fff;} #proSwiper .swiper-slide-active .more,#proSwiper .swiper-slide-duplicate-active .more{ opacity: 1;} .idxCooperate{ background: url(../images/idxCooperateBg.jpg) no-repeat center center; background-size: cover;} .idxCooperate .w80{ height: 550px;} .idxCooperate ul{ width: 78%; position: absolute;right: 0; top: 0; height: 100%;} .idxCooperate ul li{ transition: all .36s; width: 120px; height: 120px; position: absolute; box-shadow: 3px 0 29px rgba(0, 74, 255, .1) ; border: 1px solid #f7f9ff; animation: moves 1s linear infinite; -webkit-animation: moves 1.5s linear infinite; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } /* */ .idxCooperate ul li img{ max-width: 90%; max-height: 90%;} .idxCooperate ul li:nth-child(2n){ animation: moves 2.5s linear infinite; -webkit-animation: moves 2.5s linear infinite; } .idxCooperate ul li:nth-child(3n){ animation: moves 2s linear infinite; -webkit-animation: moves 2s linear infinite; } .idxCooperate ul li:nth-child(1){ left: 0; top: 54%; } .idxCooperate ul li:nth-child(2){ left: 13.4%; top: 22%; } .idxCooperate ul li:nth-child(3){ left: 14.8%; top: 53%; } .idxCooperate ul li:nth-child(4){ left: 27.6%; top:7%; } .idxCooperate ul li:nth-child(5){ left:30%; top: 40%; width:140px; height: 140px; } .idxCooperate ul li:nth-child(6){ left: 32%; top:73.5%; } .idxCooperate ul li:nth-child(7){ left:47.3%; top: 8%; } .idxCooperate ul li:nth-child(8){ left: 48%; top: 39.2%; width: 150px; height: 150px; } .idxCooperate ul li:nth-child(9){ left: 50.3%; bottom: 0; } .idxCooperate ul li:nth-child(10){ left: 70%; top: 0%; } .idxCooperate ul li:nth-child(11){ left: 65.3%; top: 29.2%; } .idxCooperate ul li:nth-child(12){ left:85%; top: 7%; } .idxCooperate ul li:nth-child(13){ left: 66.2%; top: 63.5%;width:140px; height: 140px; } .idxCooperate ul li:nth-child(14){ left: 79.4%; top: 37%; } .idxCooperate ul li:nth-child(15){ top: 60%; right: 0; } .idxCooperate ul li:hover{ animation: none; -webkit-animation: none; margin-left: 10px;} .object{ object-fit: cover;} .idxNews .left{ width: 64%;} .idxNews .left .newsItem .img{ width: 423px; height: 266px; object-fit: cover;} .idxNews .left .newsItem .txt{ width: calc(100% - 450px);} .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{ background-position: 100% calc(100% - 1px); background-size: 100% 1px} /* .newsItem:hover { color: var(--blue);} */ .newsItem: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); } .newsItem .more i{ border: 1px dashed var(--blue); width: 24px; height: 24px; border-radius: 50%; display: inline-block; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .newsItem .more i::after{ transition:all .36s ; content: "\ea66"; display: block; font-family: "iconfont" !important; font-size: 24px; line-height: 1; top: -2px; position: absolute; left: -14px; -webkit-transition:all .36s ; -moz-transition:all .36s ; -ms-transition:all .36s ; -o-transition:all .36s ; } .newsItem:hover .more i::after{ left: 80%; } .newsItem + .newsItem{ border-top: 1px solid #cecece;} .idxNews .right{ width: 32.6%;} .opacity0{ opacity: 0;} footer{ background-color: #1f1f1f; color: #fff;} footer .top{ border-bottom: 1px solid rgba(255, 255, 255, .1);} footer .center{ border-bottom: 1px solid rgba(255, 255, 255, .1);} .friendLinks{border: 1px solid rgba(255, 255, 255, .25); width: 300px; height: 50px; line-height: 50px;} .friendLinks option{background-color: #1f1f1f; padding: 10px 0; } .friendLinks .iconfont{ position: absolute; right: 20px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .friendLinks::after{ width: 1px; height: 40%; top:30%; right: 20%; position: absolute; display: block; content: '';background-color: rgba(255, 255, 255, .25);;} .footNav{ width: 60%;} .footNav dt{ margin-bottom: 15px;} .footNav dd a{ color: rgba(255, 255, 255, .4); font-size: 14px; line-height: 2.4;} .footNav dd a:hover{ color: #fff;} .ewmUl li .img{ background: url(../images/ewmBg.png) no-repeat center center; background-size: 100% 100%; width: 140px;} .neibanImg{ max-height: 100vh; min-height: 300px; object-fit: cover;} .neiBan .txt{ position: absolute; left: 0; top: 0; z-index: 5;} .neiBan .txt .line{ width: 66px; height: 4px; border: 1px solid #fff; background: transparent;} .linka a:hover{ color: var(--blue);} .mainbav{ width: 80vw; position: absolute; left: 10vw; bottom: 50px; z-index: 10;} .mainbav li { position: relative;} .mainbav li dl{ width: 100%; position: absolute; left: 0; top: 80px; background-color: #fff; } .mainbav li dl{ visibility:hidden; opacity:0; filter:alpha(opacity=0); transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); -webkit-transform: translateY(20px); -moz-transform: translateY(20px); transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; } .mainbav li:hover dl{ 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); } .mainbav li dl a{ display: block; padding:10px 15px; color: #666;} .mainbav li dl a:hover{ color: var(--blue);} .subnav{ width:auto; padding: 0 52px; line-height: 80px; white-space: nowrap;} .subnav.on{ background-color: var(--blue); color: #fff;} .profile{ background: url(../images/idxProBg.jpg) no-repeat center top; background-size: cover; } .profile .bg1,.profile .bg2{ width: 100%; height: 70%; position: absolute; left: 0px; bottom: 0px; background: url(../images/banner-bg.png) no-repeat top center; background-size: 100%; } .profile .bg1{z-index: 2;animation: move1 70s linear infinite alternate; -webkit-animation: move1 70s linear infinite alternate;} .profile .bg2{ z-index: 3; animation: move2 70s linear infinite alternate; -webkit-animation: move2 70s linear infinite alternate; } .enTit{ color: rgba(102, 102, 102, .05); font-size: 100px; font-style: italic; margin-top: -40px;} .profile .left .con::before{ width: 40px; height: 39px; background: url(../images/yin.png) no-repeat center top; background-size: 100% 100%; display: block; content: ''; position: absolute; top: 0; left: 0; } .videoButton>img{animation: yuan 5s infinite linear;} .videoButton span { display: block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .culture{ background: url(../images/cultureBg.jpg) no-repeat center center; background-size: cover; padding: 120px 0; height:90vh; background-attachment: fixed; position: relative; } .culture .ENG{ font-size: 136px; letter-spacing: .6em; opacity: .2; } .culture .title{ position: absolute; bottom: 25px; left: 50% ; transform:translateX(-50%) ; -webkit-transform:translateX(-50%) ; -moz-transform:translateX(-50%) ; -ms-transform:translateX(-50%) ; -o-transform:translateX(-50%) ; } .culture li{ border-right: 1px solid rgba(255, 255, 255, .15); width: 25%; padding-top: 30vh;perspective: 200px;} .culture li .line{ width: 40px; height: 3px;} .culture li div{ position: relative; z-index: 5;} .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,.2); 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) ; } .culture li:hover{ padding-top: 25vh;} .honors .title::after{ width: 50%; height: 1px; background-color: #cdcdcd; position: absolute; left: 25%; bottom: 0; display: block; content: ''; z-index: 1;} .honors .title::before{ width: 4%; height:3px; background-color: var(--blue); position: absolute; left: 48%; bottom: 0; display: block; content: '' ; z-index: 2;} .honors .swiper-slide .img{ height: 415px;} .honors .swiper-slide .img img{ max-width: 100%; max-height: 100%;} .honors .prev,.honors .next{ width: 70px; height: 70px;} .honors .prev:hover,.honors .next:hover{ background-color: var(--blue); color: #fff;} .history{ background: url(../images/historyBg.jpg) no-repeat center center; background-size: cover;} .history .title::after{ width: 50%; height: 1px; background-color: #cdcdcd; position: absolute; left: 25%; bottom: 0; display: block; content: ''; z-index: 1;} .history .title::before{ width: 4%; height:3px; background-color: var(--blue); position: absolute; left: 48%; bottom: 0; display: block; content: '' ; z-index: 2;} .history-top .swiper-slide { position: relative; cursor: pointer;} .history-top .swiper-slide .yuan{ width: 40px; height: 40px; border-radius: 50%; background: url(../images/yuanbg.png) no-repeat center center; background-size:90% 90%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .history-top .swiper-slide .yuan::after{ width: 100%; height: 1px; display: block; content: ''; background-color: #cccccc; position: absolute; left: 0; bottom: 20px; z-index: -1;} .history-top .swiper-slide:first-child .yuan::after{ width: 50%; left: 50%;} .history-top .swiper-slide:last-child .yuan::after{ width:50% } .history-top .swiper-slide .yuan span{ background-color: #9c9c9c; width: 33% ; height: 33%; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .history-top .swiper-slide.swiper-slide-active .color-999{ color: var(--blue); transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); } .history-top .swiper-slide.swiper-slide-active .yuan{background: url(../images/yuanbgH.png) no-repeat center center; background-size: 100% 100%; } .history-top .swiper-slide.swiper-slide-active .yuan span{ background-color: var(--blue); background-size: 100% 100%; } .history .bottom{ padding-left: 10vw;} .historyBotUl{ width: 100%; overflow-x: scroll;} .historyBotUl::-webkit-scrollbar { height: 1px;} .historyBotUl::-webkit-scrollbar-thumb { border-radius: 3px; background: transparent; height: 1px; } .historyBotUl::-webkit-scrollbar-track { border-radius: 3px; background: transparent; height: 1px; } .historyBotUl li{ width: 26vw;} .historyBotUl li .img{ display: none; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; } .historyBotUl li .txt .years{ filter: grayscale(100%); opacity: .2; -webkit-filter: grayscale(100%); } .historyBotUl li .txt .f22{ color: #888;} .historyBotUl li>div{ width: 26vw;;} .historyBotUl li.on{ width: 52vw;} .historyBotUl li.on .img{ display: block;} .historyBotUl li.on .txt .years{ filter: grayscale(0%); opacity: 1; -webkit-filter: grayscale(0%); } .historyBotUl li.on .txt .f22{ color: #333;} /* .history .bottom ul{ width: 30%;} .history .bottom ul li{ display: none;} .history .bottom ul li.on{ display: block;} .history .bottom ul{ width: 100000px;} .history .bottom ul li{ margin-right: 100px;} .history .bottom ul li .gallery-thumbs{ width: 60%;} .gallery-thumbs .swiper-slide .f20{filter: grayscale(100%); opacity: .2;} .gallery-thumbs .swiper-slide .f22{ color: #666;} .gallery-thumbs .swiper-slide.swiper-slide-thumb-active .f20{ filter: grayscale(0%); opacity: 1; -webkit-filter: grayscale(0%); } .gallery-thumbs .swiper-slide.swiper-slide-thumb-active .f22{ color: #333;} .gallery-thumbs .swiper-slide>div{ flex: 1;} .gallery-thumbs .swiper-slide .img{ display: none;} .gallery-thumbs .swiper-slide.swiper-slide-thumb-active .img{ display: block; } .gallery-thumbs .swiper-slide{ width: 25%; } .gallery-thumbs .swiper-slide.swiper-slide-thumb-active{ width: 50%; } .gallery-thumbs .swiper-slide.swiper-slide-next{ } */ .proBanImg{ width: 40%;} .prolist li{ width: calc((100% - 76px) / 3); margin-right: 38px; margin-bottom: 38px ;} .prolist li:nth-child(3n){ margin-right: 0;} .prolist li .img{ height: 310px;}.prolist li .img img{ max-width: 100%; max-height: 100%;} .prolist li .desc i{ width: 6px; height: 6px; border-radius: 50%; background-color: #dadada; display: inline-block; margin-right: 12px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .prolist li .btn a{ height: 48px; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; } .prolist li:hover{ box-shadow: 0 0 0 8px rgba(0, 74, 255, 1); transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); } .ljzx_btn:hover{ border-color: var(--blue); color: var(--blue);} .proInfoTop{ background: url(../images/proInfoTopBg.jpg) no-repeat center center; background-size: cover;} .proInfoTop{ margin-top: 100px;} #proInfoTopSwiper .swiper-slide{ height: 640px;} #proInfoTopSwiper .swiper-slide img{ max-width: 90%; max-height: 90%;} .proLine{ width: 100%; height: 1px; background-color: #cdcdcd;} .proLine::after{ background-color: var(--blue); width:8%; height: 3px; position: absolute; left: 0; bottom: -1px; display: block; content: '';} .proInfoTop .txt .btn a{ width: 30%; border: 1px solid #dadada; border-left: none;} .proInfoTop .txt .btn a:first-child{ width: 40%; border-color: var(--blue);} .proInfoTop .txt .btn a:hover{ color: var(--blue);} .proInfoTop .txt .btn a:first-child:hover{ color: #fff;} .proInfoTop .right .prev,.proInfoTop .right .next{ width: 64px; height: 64px; position: absolute; top: 50%; margin-top: -32px; z-index: 10;} .proInfoTop .right .prev{ left: 15px;} .proInfoTop .right .next{ right: 15px;} .proInfoTop .right .prev:hover,.proInfoTop .right .next:hover{ background-color: var(--blue); color: #fff; box-shadow: 0 0 10px rgba(0,0,0,.15);} .contactLine{ width: 35PX; height: 4px; background-color: #4f4f4f;} .yamleft{ width: 60%;} .yamImg{ position: absolute; right: 1px; top: 50%; transform: translateY(-50%); max-height:calc(100% - 3px); z-index: 10; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .contactStyle .submit{ width: 35%; border-radius: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px; -ms-border-radius: 35px; -o-border-radius: 35px; } .gbookBox .submit,.gbooksubmit{ width: 35%; border-radius: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px; -ms-border-radius: 35px; -o-border-radius: 35px; } .newslist li{ width: calc((100% - 76px) / 3); margin-right: 38px; margin-bottom: 38px ;} .newslist li:nth-child(3n){ margin-right: 0;} .newslist li .img img{ height: 290px; width: 100%; object-fit: cover;} /* .newsItem:hover { color: var(--blue);} */ .newslist 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); } .newslist li .more i{ border: 1px dashed var(--blue); width: 24px; height: 24px; border-radius: 50%; display: inline-block; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .newslist li .more i::after{ transition:all .36s ; content: "\ea66"; display: block; font-family: "iconfont" !important; font-size: 24px; line-height: 1; top: -2px; position: absolute; left: -14px; -webkit-transition:all .36s ; -moz-transition:all .36s ; -ms-transition:all .36s ; -o-transition:all .36s ; } .newslist li:hover .more i::after{ left: 80%; } .newslist li .txt::after{ width: 0; height: 2px; position: absolute; left: 0; bottom: 0; background-color: var(--blue); display: block; content: ''; transition: all .36s; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .newslist li:hover .txt::after{ width: 100%;} .newsInfoTop{ margin-top: 100px;} .newLeft{ width: 64%;} .newRight{ width: 30%;} .newRight .title{ line-height: 1; border-left: 3px solid var(--blue);} .morenuewsUl li .img img{ width: 185px; height: 115px; object-fit: cover;} .morenuewsUl li .txt{ width: calc(100% - 210px);} .morenuewsUl 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); } .morenuewsUl li:hover { color: #0b4f9b;} .newsPage{ border-top: 3px solid #f1f1f1; } .newsPage a{ width: 40%;} .contactCon .yuan{ width: 60px; height: 60px;} .contactCon .item:hover .yuan{ background-color: var(--blue); color: #fff;} .map{ height: 90vh;} .gbookBox{ width: 40vw; position: absolute; right: 10vw; z-index: 10; top: 50% ; transform:translateY(-50%) ; -webkit-transform:translateY(-50%) ; -moz-transform:translateY(-50%) ; -ms-transform:translateY(-50%) ; -o-transform:translateY(-50%) ; } .zahnwei{ margin-top: -110px; padding-top: 110px;}