body{font-size: 16px;} .w90{ width: 90%; margin: 0 auto; max-width: 1720px;} .w80{ width: 80%; margin: 0 auto; max-width: 1500px;} header{ position: fixed; background-color: #fff; top: 0; left: 0; width: 100%; height: 100px; z-index: 100; box-shadow: 0 0 10px rgba(0, 0, 0, .15);} nav li{ position: relative;} .oneNav{ display: block; line-height: 100px; font-size: 18px; padding: 0 30px; white-space: nowrap;} .headerTop{ height: 100px;} header dl{ width: 100%; position: absolute; left: 0; top: 100px; background-color: #fff; box-shadow: 0 5px 5px rgba(0, 0, 0, .15); text-align: center; transition:all .36s ; -webkit-transition:all .53s; -moz-transition:all .53s; -ms-transition:all .53s; -o-transition:all .53s; visibility:hidden; opacity:0; transform: translateY(20px); transition:all .53s; } nav li:hover dl{visibility:visible; opacity:1; transform:translateY(0);} .language{ height: 100px;padding: 0 30px;} header dl dd a{ height: 50px; line-height: 50px; display: block;} header dl dd + dd{ border-top: 1px solid #e5e5e5;} .language:hover dl{visibility:visible; opacity:1; transform:translateY(0);} header dl dd a:hover{ background-color: var(--blue); color: #fff;} nav li.on .oneNav{ color: var(--blue);} .idxBan .title::after,.idxBan .title::before{ width: 44px; height: 44px; background-color: var(--blue); display:block; content: ''; position: absolute;} .idxBan .title::before{ top: 0; left: 0;-webkit-clip-path: polygon(0 0%, 100% 0, 0% 100%);} .idxBan .title::after{right: 0; bottom: 0;-webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%);} /*.idxBan .txt{ background: rgba(0, 0, 0, .3);}*/ .idxBan .txt{} .banImg{ min-height: 300px;} .commonlink {width: 200px;line-height:58px; display: block;perspective: 500;-webkit-perspective: 500; } .commonlink .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;} .commonlink .t {position: absolute; width: 100%;height: 100%; left: 0; top: -58px;-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;} .commonlink:hover .w { transform: translateY(29px) translateZ(-29px) rotate3d(1, 0, 0, -90deg); -webkit-transform: translateY(29px) translateZ(-29px) rotate3d(1, 0, 0, -90deg); -moz-transform: translateY(29px) translateZ(-29px) rotate3d(1, 0, 0, -90deg); -ms-transform: translateY(29px) translateZ(-29px) rotate3d(1, 0, 0, -90deg); -o-transform: translateY(29px) translateZ(-29px) rotate3d(1, 0, 0, -90deg); } .commonlink .t img{filter: grayscale(100%) brightness(500%);} .commonlink .rightbtn{ width: 58px; height: 58px;} .idxBusiness li .pic img{ height: 55px; filter: grayscale(100%); } .idxBusiness li{ width: calc((100% - 200px) / 3); margin-right: 100px; } .idxBusiness li:nth-child(3n){ margin-right: 0;} /* .idxBusiness li:nth-child(n+4){ margin-bottom: 0;} */ .linka a:hover{color: var(--blue);} /* .idxBusiness li:hover .img img{ filter: drop-shadow(80px 0 0 var(--blue)); transform: translateX(-80px); -webkit-filter: drop-shadow(80px 0 0 var(--blue)); -webkit-transform: translateX(-80px); -moz-transform: translateX(-80px); -ms-transform: translateX(-80px); -o-transform: translateX(-80px); } */ .idxBusiness li .tit span{ 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;} .idxBusiness li:hover .tit span{ background-position: 100% calc(100% - 1px); background-size: 100% 1px} .idxBusiness ul li:hover .pic img{ filter: grayscale(0%); animation: jello 1.2s; filter: grayscale(0%); opacity: 1; -webkit-animation: jello 1.2s; -webkit-filter: grayscale(0%); } .idxAbout{ background: url(../images/idxAboutBg.jpg) no-repeat bottom right; background-size: cover; padding-bottom: 200px;} .idxAbout::before{ width: 50% ; height: 100%; position: absolute; top: 0; left: 0;display: block; content: ''; background-color: var(--blue);} .entit{ font-size: 100px; margin-bottom: -30px; color: rgba(255, 255, 255, .1);} .idxAbout .more{ width: 196px; height: 55px; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; } /* .idxAbout .more:hover .t{ margin-top: -55px;} */ .idxAbout .more:hover{ box-shadow: 0 0 0 8px rgba(255, 255, 255, .4); transform:scale(.95) ; -webkit-transform:scale(.95) ; -moz-transform:scale(.95) ; -ms-transform:scale(.95) ; -o-transform:scale(.95) ; } .idxAboutRight .img{ border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .idxAboutRight .btn{ position: absolute; width: 80%; right: 0; bottom: -150px;} .idxAboutRight .prev,.idxAboutRight .next{ width: 60px; height: 60px;} .idxAboutRight .prev:hover,.idxAboutRight .next:hover{background-color: var(--blue); color: #fff;} .idxAboutRight .scrollbar{ width: calc(100% - 170px); height: 4px; background-color: #b4b4b4; opacity: 1 !important;} .idxAboutRight .scrollbar .swiper-scrollbar-drag{ background-color: var(--blue);} .idxAboutRight .swiper-button-disabled{cursor: no-drop; opacity: .4;} .idxNetwork .w80{ position: absolute; top: 0; left: 0; z-index: 5; left: 50%; transform: translateX(-50%) translateY(-50%); top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); } .idxNetwork .more{ width: 196px; height: 55px; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; } .mapClick{ opacity: .8;} .mapClick ul li{ border-radius: 50%; position: absolute; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .mapClick ul li:after,.mapClick ul li:before{content:""; position:absolute; border-radius:50%; top:50%; left:50%; z-index:1;} .mapClick ul li .dot_circle{display:block; width:7px; height:7px; background-color: var(--blue); position:relative; z-index:3; border-radius:50%;} .mapClick ul li:before {width:12px; height:12px; background:transparent; background:rgba(18,30,170,0.3); margin-top:-6px; margin-left:-6px; -webkit-animation:warn 2s linear 0.4s infinite; -moz-animation:warn 2s linear 0.4s infinite; animation:warn 2s linear 0.4s infinite; opacity:0;} .mapClick ul li:after {width:24px; height:24px;background:transparent; /*background:#7e9ec3;*/ background:rgba(18,30,170,0.2); margin-left:-12px; margin-top:-12px; -webkit-animation:warn 2s linear 0s infinite; -moz-animation:warn 2s linear 0s infinite; animation:warn 2s linear 0s infinite; opacity:0;} .mapClick ul li:nth-child(1) .dot_circle{background-color: #f00404;} .mapClick ul li:nth-child(1)::before{ background:rgba(240,4,4,0.3);} .mapClick ul li:nth-child(1)::after{background:rgba(240,4,4,0.2);} .mapClick ul li:nth-child(1){ top: 47.2%; right:34.5%;}/*上海*/ .mapClick ul li:nth-child(2){ top: 44.8%; right:35%;}/*青岛**/ .mapClick ul li:nth-child(3){ top: 49.8%; right:35%;}/* 宁波 */ .mapClick ul li:nth-child(4){ top: 52%; right:36.3%;}/*蛇口*/ .mapClick ul li:nth-child(5){ top: 54.5%; right:38.2%;}/*香港*/ .mapClick ul li:nth-child(6){ top: 64%; right:42.7%;}/*Malaysia*/ .mapClick ul li:nth-child(7){top: 67.5%; right:41.8%;}/*Singapore*/ .mapClick ul li:nth-child(8){ top: 64.6%; right:52.6%;}/*Sri Lanka*/ .mapClick ul li:nth-child(9){ top: 55.5%; right:53.6%;}/*India*/ .mapClick ul li:nth-child(10){ top: 46.2%; right:40.6%;}/*Yangtze River*/ .mapClick ul li:nth-child(11){ top: 48%; right: 63.35%;}/*Pakistan*/ .mapClick ul li:nth-child(12){ top: 51.5%; right: 69%;}/*Dubai*/ .idxCase{ background: url(../images/idxCaseBg.jpg) no-repeat center center; background-size: cover;} .idxCase .swiper-container{ height: 490px;} .idxCase .swiper-slide { border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; transition: all .36s; background: #fff; height: calc(100% / 3); -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .idxCase .swiper-slide img{ max-width: 100%; max-height: 100%;} .idxCase .swiper-pagination-bullet{ width: 14px; height: 14px; background-color: #fff; margin: 0 .5vw;} .idxCase .swiper-slide:hover{ box-shadow: 0 0 10px rgba(0, 0, 0, .15);} .idxCase .swiper-slide:hover img{ transform: scale(.9); -webkit-transform: scale(.9); -moz-transform: scale(.9); -ms-transform: scale(.9); -o-transform: scale(.9); } .idxNewItem {box-shadow: 0 0 15px rgba(0, 0, 0, .15);} .idxNews .line-clamp2{ line-height: 1.6;} .idxNewItem .img img{ height: 325px; object-fit: cover;} .idxNewItem .desc{ z-index: 2; transform: translateY(325px); -webkit-transform: translateY(325px); -moz-transform: translateY(325px); -ms-transform: translateY(325px); -o-transform: translateY(325px); } .idxNewItem:hover .desc{ transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } .idxNewsRightItem .img img{ width: 210px; height: 150px; object-fit: cover;} .idxNewsRightItem .txt{width: calc(100% - 210px);} .idxNewsRightItem: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) ; } .idxNewsRightItem .more i{ transition:all .36s ; width: 0; height: 1px; background-color: var(--blue); -webkit-transition:all .36s ; -moz-transition:all .36s ; -ms-transition:all .36s ; -o-transition:all .36s ; } .idxNewsRightItem:hover .more i{ width: 30px; } footer .center { border-top: 1px solid rgba(255, 255, 255, .15); border-bottom: 1px solid rgba(255, 255, 255, .15);} footer .center .yuan{ width: 65px; height: 65px; border-color: rgba(255, 255, 255, .3);} .wapNav{ display: none;} .h_nav{ height: 60px; width: 60px; background-color:var(--blue); padding: 18px 8px ; align-items: flex-end; display: flex;} .h_nav.close{align-items: center; justify-content: center;} .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; padding-bottom: 65px;overflow-y: scroll; 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; } .nav::-webkit-scrollbar {/*滚动条整体样式*/ /*高宽分别对应横竖滚动条的尺寸*/ width: 1px;} .nav::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 3px; background: #003f98; width: 1px; } .nav::-webkit-scrollbar-track {/*滚动条里面轨道*/border-radius: 3px; background: #000; width: 1px; } .neiBanImg{ width: 100%; min-height: 250px; object-fit: cover;} .neiBan .txt{ background: rgba(0, 0, 0, .2);} .subnav{ box-shadow: 0 10px 10px rgba(0, 0, 0, .1);} .subnav a{ display: inline-block; line-height: 100px; margin: 0 5vw; position: relative;} .subnav a::after{ width: 80%; left: 10%; height: 3px; bottom: 0; display: block; content: ''; background-color: var(--blue); position: absolute; transform: scale(0,1); transition: all .36s; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-transform: scale(0,1); -moz-transform: scale(0,1); -ms-transform: scale(0,1); -o-transform: scale(0,1); } .subnav a.on::after{ transform: scale(1,1); -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); } .subnav a.on, .subnav a:hover{ color: var(--blue);} .orient{ margin-top: -100px; padding-top: 100px;} .profile .entit{ color: rgba(0, 0, 0, .1);} .profile .right{ width: 47%;} .culture{ background: url(../images/cultureBg.jpg) no-repeat center center; position: relative; background-attachment: fixed; background-size: cover;} .aboutline{ width: 35px; height: 3px;} .history{ background: url(../images/historybg.jpg) no-repeat center center; background-size: cover;} .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;} #honorSwiper .swiper-slide{ opacity: 0.6;} #honorSwiper .swiper-slide .img{ width: 100%; height:500px; display: flex; align-items: center; justify-content: center; cursor: pointer !important;} #honorSwiper .swiper-slide img{ border: 6px solid #f5f5f5; max-width: 100%; max-height: 100%; filter: blur(1px);; } #honorSwiper .swiper-slide.swiper-slide-active{ opacity: 1;} #honorSwiper .swiper-slide .f20{ opacity: 0;} #honorSwiper .swiper-slide.swiper-slide-active .f20{ opacity: 1;} .positioning{ margin-top: -194px; padding-top: 194px;} .mainbg{ background-color: #f6f9fe;} .businessUl li .pic img{ height: 50px; filter: grayscale(100%); } .businesslink {width: 190px;line-height:50px; display: block;perspective: 500;-webkit-perspective: 500; } .businesslink .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;} .businesslink .t {position: absolute; width: 100%;height: 100%; left: 0; top: -50px;-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;} .businesslink:hover .w { transform: translateY(25px) translateZ(-25px) rotate3d(1, 0, 0, -90deg); -webkit-transform: translateY(25px) translateZ(-25px) rotate3d(1, 0, 0, -90deg); -moz-transform: translateY(25px) translateZ(-25px) rotate3d(1, 0, 0, -90deg); -ms-transform: translateY(25px) translateZ(-25px) rotate3d(1, 0, 0, -90deg); -o-transform: translateY(25px) translateZ(-25px) rotate3d(1, 0, 0, -90deg); } .businesslink .t img{filter: grayscale(100%) brightness(500%);} .businessUl li:nth-child(2n) a{ flex-direction: row-reverse;} .businessUl 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); } .businessUl li:hover{ box-shadow: 0 0 0 5px rgba(31, 49, 127, 1); transform: translateY(-6px); -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); -o-transform: translateY(-6px); } .ysLeft{ width: 24%;} .ysRight{ width: 76%;} .ysLeftUl a{ height: 70px; cursor: pointer;} .ysLeftUl a::before{ width: 75%; height: 1px; position: absolute; left: 0; bottom: 0; display: block; content: ''; background-color: #eceef0;} .ysLeftUl a i{ width: 8px; height: 8px; border-radius: 50%; background-image: linear-gradient(to right,var(--blue),transparent); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .ysLeftUl a.cur{ background-image: linear-gradient(to right,transparent, rgba(18,30,170,0.2));} .ysLeftUl a.cur::after{ width: 3px; height: 100%; position: absolute; right: 0; bottom: 0; display: block; content: ''; background-color: var(--blue);} .ysRight .title span::after{ width: 3px; height: 100%; position: absolute; left: 0; bottom: 0; display: block; content: ''; background-color: var(--blue);} .newslist li{ width: calc((100% - 60px)/3); margin-right: 30px;} .newslist li:nth-child(3n){ margin-right: 0;} .newslist li::after{ width: 0; height: 2px; position: absolute; left: 0; bottom: -1px; 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 .more span{ border: 1px solid #666; width: 28px; height: 28px; display: inline-block; } .newslist li .more span .iconfont{ display: inline-block; transform: translateX(-18px) rotate(-45deg); -webkit-transform: translateX(-18px) rotate(-45deg); -moz-transform: translateX(-18px) rotate(-45deg); -ms-transform: translateX(-18px) rotate(-45deg); -o-transform: translateX(-18px) rotate(-45deg); } .newslist li:hover::after{ width: 100%;} .newslist li:hover .more span .iconfont{ transform: translateX(18px) rotate(-45deg); -webkit-transform: translateX(18px) rotate(-45deg); -moz-transform: translateX(18px) rotate(-45deg); -ms-transform: translateX(18px) rotate(-45deg); -o-transform: translateX(18px) rotate(-45deg); } .newslist li:hover .more{ color: var(--blue);} .newslist li:hover .img{ box-shadow: 0 0 10px rgba(0, 0, 0, .1);} .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 .img img{ height: 260px; width: 100%; object-fit: cover;} .newinfoline{ width: 80%; background-color: #e5e5e5; height: 1px;} .newpage a{ width: calc((100% - 160px) / 2);} .newpage a.listOn{ width: 130px; border-radius: 25px; height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; } .newpage a:hover{ color: var(--blue);}.newpage a.listOn:hover{ color: #fff;} .newpage .iconfont{ font-size: 30px;} .contactUl li{ width: 31.3%;} .contactUl li::after{ position: absolute; content: ""; left: -81px; top: 0; height: 0; width: 165px; background: #0260b3; transition: all 0.5s cubic-bezier(.73,.02,.31,1.02); transform: rotate(-45deg); } .contactUl li:hover:after{height: 50px;} .contactUl li::before {position: absolute;content: "";right: -81px;bottom: 0;height: 0;width:165px;background: #0260b3;transition: all 0.8s cubic-bezier(.73,.02,.31,1.02); transform: rotate(-45deg);} .contactUl li:hover:before{height: 50px;} .contactUl li:hover img{animation: jello 1.2s; filter: grayscale(0%); opacity: 1;} .contactUl li:hover{ box-shadow: 0 0 10px rgba(18,30,170,0.2); transform: scale(.95); -webkit-transform: scale(.95); -moz-transform: scale(.95); -ms-transform: scale(.95); -o-transform: scale(.95); } .message{ background: url(../images/messageBg.jpg) no-repeat center bottom; background-size: cover;} .inputName{ background: url(../images/input_name.png) no-repeat left 25px center #fff; background-size: auto 30%; } .inputTel{ background: url(../images/input_tel.png) no-repeat left 25px center #fff; background-size: auto 30%; } .inputEmail{ background: url(../images/input_email.png) no-repeat left 25px center #fff; background-size: auto 25%; } .inputAdd{ background: url(../images/input_add.png) no-repeat left 25px center #fff; background-size: auto 30%; } .inputCON{ background: url(../images/input_con.png) no-repeat left TOP #fff; background-size: auto 20px; padding-left: 30px; } .input_submit{ width: 200px; height: 56px;} .talentUl li{ width: 24%;} .talentUl li::after{ width: 100%; height: 100%; transform: translateX(-105%); transition: all .36s; position: absolute; top: 0; left: 0; z-index: 1; display: block; content: ''; background: url(../images/talentBg.jpg) no-repeat right top; background-size: cover; -webkit-transform: translateX(-105%); -moz-transform: translateX(-105%); -ms-transform: translateX(-105%); -o-transform: translateX(-105%); -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; } .talentUl li .yuan{ width: 90px; height: 90px; background-color: rgba(18,30,170,0.1);} .talentUl li:hover::after{ transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } .talentUl li:hover{ color: #fff;} .talentUl li:hover .yuan{ background-color: rgba(255, 255, 255, 1);} .talentUl li .yuan::after{ width: 120%; height: 120%; position: absolute; transform:scale(.5); left: -10%; top: -10%; display: block; content: ''; transition: all .36s; background-color: rgba(255, 255, 255, .3); border-radius: 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; -webkit-transform:scale(.5); -moz-transform:scale(.5); -ms-transform:scale(.5); -o-transform:scale(.5); } .talentUl li:hover .yuan::after{ transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .joblist li { margin-bottom: 25px;} .joblist li .top span{ flex: 1; line-height: 75px;} .joblist li .bottom{ display: none;} .iconfontjian{ display: none;} .joblist li.on .iconfontjia{ display: none;} .joblist li.on .iconfontjian{ display: block;} .popup{ position: fixed; top: 0; left: 0; z-index: 99999;background:rgba(0, 0, 0, 0.5) none repeat scroll 0 0 !important;filter:Alpha(opacity=50); background:#000; width: 100%; height: 100%; display: none; font-size: 16px;} .popup-table-type{ display: table; text-align: center; width: 100%; height: 100%;} .popup-table-cell{ display: table-cell; vertical-align: middle; height: 100%; width: 100%;} .popup-container{ box-shadow: 0 0 10px 10px rgba(0,0,0,0.11);width: 90%; max-width: 1100px; margin:auto; padding: 0; position: relative; display: inline-block; border-radius: 10px;} .popup-container .map{border-radius: 15px; overflow: hidden; max-width: 100%;} .popup-container .map .con{position: absolute; bottom: 0; left: 0; width: 100%; z-index: 6; background: #fff; color: #333; padding: 15px 20px; text-align: left;} .popup-container .map .con .h3{font-size: 20px; font-weight: bold;} .popup-container .map .con .p{font-size: 16px;} .popup .closed{ position: absolute;top: -30px; right: -30px; cursor: pointer; background: #000; border-radius: 100%; padding: 10px;} .popup .closed:before{ content: "×"; font-family: "宋体"; font-size: 30px; color: #fff; line-height: 30px; } @media (max-width:640px) { .popup .closed{ right: 0;} } .inputbox{ position:relative; line-height:44px;} .inputbox label{ position:absolute; left:0; padding: 0 10px; color:#bfbfbf; z-index: 0; font-size: 16px;} .inputbox .text{ width:100%; line-height:44px;height:44px; padding:0 10px;border-radius:3px; border:1px solid #e4e4e4; background:none; position: relative; z-index: 2; font-size: 16px;transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out; } .inputbox .text:focus{ border-color:var(--blue);} .jobpopup .popup-container{background:none;box-shadow:none; max-width: 720px;} .jobpopup .popup-con{border-radius: 10px; overflow: inherit; background: #fff;padding-bottom: 62px;} .jobpopup .closed{top: 2%; right: 8%; background: none; z-index: 205;} .jobpopup .closed:before{color: #333;} .jobformbox{ display: none;} .jobform .form-tit{ border-bottom: 1px solid #eee; color: #333; font-size: 24px; text-align: left; padding: 18px 10%;} .jobform form{padding: 3% 10% 0% 10%;} .jobform .item{text-align: left; margin-bottom: 15px;} .jobform .item2 .selectbox{width: 48%;float: left;} .jobform .item2 .selectbox:last-child{float: right;} .jobform .selectbox select{display: block; background: #f9f9f9; height: 55px; padding: 10px; line-height: 30px; width: 100%; border: none; color: #999; font-size: 16px;} .jobform .name{color: #333; font-size: 18px;} .jobform .inputbox { position: relative; cursor: text; width: 100%; height: 50px; padding: 10px; line-height: 30px; font-size: 16px; background: #f9f9f9;} .jobform .inputbox span.tit { position: absolute; color: #999; top: 10px; left: 10px;} .jobform .inputbox input.text ,.jobform .inputbox select.text{ border: none; background: none; display: block; width: 100%; height: 30px; line-height: 30px; font-size: 16px;padding:0;} .jobform .file-filestyle{ line-height: 30px; font-size: 16px; } .jobform .file-filestyle input.text { border: none; background: none; display: block; width: 100%; height: 30px; font-size: 16px;} .jobform .file-filestyle span.tit { color: #333; display:block; margin-bottom:15px; } .jobform .file-filestyle .filebtn{position:relative; width: 85px; height: 80px; border:2px solid #ededed; display:inline-block; font-size:0; text-align: center; line-height: 50px; cursor: pointer;} .jobform .file-filestyle .filebtn::before, .jobform .file-filestyle .filebtn::after{ position:absolute; content:''; background:#ededed;} .jobform .file-filestyle .filebtn::before{ left:20%; width:60%; height:3px; top:50%; margin-top:-1px;} .jobform .file-filestyle .filebtn::after{ left:50%; margin-left:-1px; width:3px; top:20%; height:60%;} .jobform .btns{padding-top: 0; text-align: center;position: absolute;bottom: -45px;left: 50%;margin-left: -85px;margin-left: -50px;} .jobform .btn{display: inline-block; background: var(--blue); font-size: 16px; color: #fff; width: 170px; height: 50px; text-align: center; line-height: 50px; border-radius: 55px; border: none; cursor: pointer;} @media (max-width:640px) { .jobform .form-tit{font-size: 20px;} .jobform .name,.jobform .inputbox,.jobform .file-filestyle{font-size: 14px;} .jobform .inputbox input.text{font-size: 14px;} .jobform .inputbox span.tit,.jobform .file-filestyle span.tit{top: 5px;} .jobform .inputbox{padding: 5px 10px; line-height: 20px; height: 42px;line-height: 32px;} .jobform .file-filestyle{padding: 0 10px; line-height: 20px; height: 30px;} .jobform .file-filestyle .filebtn{line-height: 90px;width: 50px;height: 50px;} .jobform .btn{font-size:14px; width: 110px;height: 34px;line-height: 34px;border-radius: 30px;} .jobform .btns { padding-top: 0; text-align: center; position: absolute; bottom: -45px; left: 50%; margin-left: -50px; } } .jobform{ position: relative; } .friendLinks{border: 1px solid rgba(255, 255, 255, .25); width: 300px; height: 50px; line-height: 50px;} .friendLinks option{background-color: #1f1f1f; padding: 15px 0; line-height: 30px; display:block; } .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);;} .wlList li{ width: calc((100% - 70px)/3); margin-right: 35px; margin-bottom: 35px;} .wlList li:nth-child(3n){ margin-right: 0;} .wlList li:hover{transform: scale(1.02); box-shadow: 0 0 10px rgba(0, 0, 0, .15);} .detailWltit .border-bottom{ border-width: 3px; border-color: var(--blue);} .contact_Con .text{ background: url(../images/contact_bg2.png) no-repeat center center; background-size: 100% 100%; width: 55%; position: absolute; left: 45%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .contactstyleUl .iconfont{ font-size: 30px;} .addItem{ background: #f6f6f8;}