/*animate琛ュ厖鍔ㄧ敾*/ * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 14px; border: none; color: rgb(51, 51, 51); overflow-x: hidden; position: relative; font: "PingFang SC Regular", "Microsoft Yahei", "寰蒋闆呴粦", "Arial", "Helvetica", "SimHei", "榛戜綋", "STXihei", "鍗庢枃缁嗛粦", sans-serif; margin: 0 auto; } .index { position: relative; } a { color: rgb(51, 51, 51); } div, section { box-sizing: border-box; } body { overflow: hidden; } div { box-sizing: border-box; } .ad47 { width: 47% !important; } @font-face { font-family: 'DIN'; /*瀛椾綋鍚嶇О*/ src: url('../font/DIN-Medium.ttf'); /*瀛椾綋婧愭枃浠?/ src: url('../font/DIN-Medium.eot?#font-spider') format('embedded-opentype'), url('../font/DIN-Medium.woff') format('woff'), url('../font/DIN-Medium.ttf') format('truetype'), url('../font/DIN-Medium.svg') format('svg'); font-weight: normal; font-style: normal; } @keyframes jello { from, 11.1%, to { -webkit-transform: none; -moz-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); -moz-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); -moz-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); -moz-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) } } input, textarea, button, select, option { border: none; } input:focus, textarea:focus, button:focus, select:focus, option:focus { outline: none; } a { text-decoration: none; } ul, li { list-style: none; } p { display: block; margin-block-start: 0em; margin-block-end: 0em; margin-inline-start: 0px; margin-inline-end: 0px; } .bg_w { background: #fff; position: relative; } .bg_g { background: rgb(243, 245, 247); position: relative; } .bgg{ background: #fff!important; position: relative; } .pt130 { padding-top: 130px; } .pt70 { padding-top: 55px; } .pt90 { padding-top: 70px; } .pb70 { padding-bottom: 90px; } @keyframes fadeInLeftSmall { from { opacity: 0; transform: translate3d(-10px, 0, 0); } to { opacity: 1; transform: none; } } .fadeInLeftSmall { animation-name: fadeInLeftSmall; } @keyframes fadeInRightSmall { from { opacity: 0; transform: translate3d(10px, 0, 0); } to { opacity: 1; transform: none; } } .fadeInRightSmall { animation-name: fadeInRightSmall; } @keyframes fadeInDownSmall { from { opacity: 0; transform: translate3d(0%, -10px, 0); } to { opacity: 1; transform: none; } } .fadeInDownSmall { animation-name: fadeInDownSmall; } @keyframes fadeOutDownSmall { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0%, 10px, 0); } } .fadeOutDownSmall { animation-name: fadeOutDownSmall; } @keyframes fadeInUpSmall { from { opacity: 0; transform: translate3d(0%, 10px, 0); } to { opacity: 1; transform: none; } } .fadeInUpSmall { animation-name: fadeInUpSmall; } @keyframes scaleIn { 0% { opacity: 0; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); } } img { max-width: 100%; } .scaleIn { animation-name: scaleIn; } .fadeIn { animation-delay: 0.3s; animation-timing-function: linear; } /*婊氬姩鍔ㄧ敾鐨勬牱寮?/ /*.disable-hover {*/ /*pointer-events: none;*/ /*}*/ .scroll-animate.animated { visibility: hidden; } .font-fadeIn font { display: inline-block; min-width: 12px; } .scrolly { transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; } img.classGo, .pic.classGo { transition: all 1.2s ease-out; -webkit-transition: all 1.2s ease-out; -moz-transition: all 1.2s ease-out; -o-transition: all 1.2s ease-out; -ms-transition: all 1.2s ease-out; transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); filter: blur(30px); visibility: visible !important; } img.classGo.go, .pic.classGo.go { opacity: 1; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; filter: blur(0); } .inner { max-width: 1600px; margin: auto; padding-left: 15px; padding-right: 15px; } /*header*/ .index-header { border-bottom: 1px solid rgba(255, 255, 255, .2); padding: 0 15px; height: 96px; transition: all 1s ease; position: absolute; z-index: 99; width: 100%; box-sizing: border-box; display: flex; display: -webkit-flex; align-items: center; justify-content: space-between; } .index-logo { width: 15%; display: flex; } .index-logo img { margin-top: 21px; } .index-nav-right { width: 85%; display: flex; align-items: center; justify-content: flex-end; } .index-header-right { width: 25%; display: flex; justify-content: center; justify-content: flex-end; } .index-nav-con { width: 75%; display: flex; justify-content: flex-end; } .index-nav { width: 78%; } .index-nav li { transition: all 1s; float: left; width: calc(100%/6); text-align: center; box-sizing: border-box; font-size: 16px; } .index-nav li a { color: #ffffff; display: inline-block; position: relative; transition: all 1s; } .index-nav li:hover {} .index-nav li a:after { content: ""; width: 0; height: 3px; position: absolute; background: rgb(8, 65, 57); top: 75%; right: 50%; transition: all 1s; z-index: -1; } .index-nav li a:hover:after { width: 100%; right: 0; } .index-nav li a:hover { font-weight: bold; } .index-header-right a { display: block; float: left; margin-left: 10px; color: #141418; } .index-header-right .sousuo img { display: inline-block; vertical-align: bottom; margin-right: 10px; } .index-header-right .erweima { margin-right: 30px; background: url(../images/icon2.png) no-repeat left center; width: 22px; height: 30px; position: relative; } .index-header-right .showNav { background: url(../images/icon3.png) no-repeat left center; width: 22px; height: 30px; position: relative; } .erweima-pic { position: absolute; top: 38px; left: -85px; z-index: 99; display: none; width: auto; } .erweima-pic img { height: 120px; width: 120px; position: relative; left: 43px; } .index-header-right .erweima:hover .erweima-pic { display: block; } .search-btn { background: url(../images/icon1.png) no-repeat left center; text-indent: 30px; width: 20px; height: 30px; margin-right: 30px; } .la-close { font-family: sans-serif; font-size: 35px; } .search_sec { position: fixed; top: 0; width: 100%; height: 100%; background-color: rgba(26, 32, 49, 0.95); z-index: 999999999999; opacity: 0; visibility: hidden; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } .search_sec.active { opacity: 1; visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .search_sec.active .search_field { margin: 0; } .search_field { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 100%; margin-top: -50px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .search_field .container { max-width: 800px; margin: 0 auto; } .search_field form { position: relative; } .search_field form input { width: 100%; height: 66px; background-color: #e5e5e5; color: #262626; font-size: 17px; padding: 0 30px; border: 0; box-sizing: border-box; border-radius: 5px; } .search_field form button { position: absolute; top: 24px; right: 24px; background-color: inherit; border: 0; } .close-search { position: absolute; top: 60px; right: 70px; color: #c6c7ca; font-size: 40px; } .close-search:hover { color: #c6c7ca; } .erweima-pic img { height: 120px; width: 120px; } .index-nav li { position: relative; line-height: 95px; } .index-nav li a { font-size: 16px; } .index-nav li .show { position: absolute; display: none; top: 95px; text-align: center; width: 100%; overflow: hidden; padding: 10px 0; background: rgba(255, 255, 255, 0.6); } .index-nav li:hover .show { display: block; } .index-nav li .show p { line-height: 36px; } .index-nav li .show a { line-height: 36px; position: relative; font-size: 14px; color: #000; transition: all 1s; } .index-nav li .show a:hover { font-weight: 600; } .ibox-scoll { animation: 850ms 350ms; -webkit-animation: animation: 850ms 350ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: fadedown; animation-name: fadedown; } .scoll-top { background-color: #fff; border-bottom: 3px solid #263c8f; } @-webkit-keyframes fadedown { from { -webkit-transform: translateY(-100%); opacity: 0; } to { -webkit-transform: translateY(0); opacity: 1; } } @keyframes fadedown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .logo .img2 { display: none; } .scoll-top .logo .img1 { display: none; } .scoll-top .logo .img2 { display: block; } .scoll-top.top a:link, .scoll-top.top a:visited { color: #333333; } .scoll-top .nav a:hover .txt, .scoll-top .nav a.hov .txt { border-color: rgb(8, 65, 57); } .scoll-top .nav>li>a:before { border-top: 5px solid rgb(8, 65, 57); } .scoll-top .search-btn { background: url(../images/i1.png) center no-repeat; } .scoll-top .index-header-right .erweima { background: url(../images/i2.png) center no-repeat; } .scoll-top .index-header-right .showNav { background: url(../images/i3.png) no-repeat left center; width: 22px; height: 30px; position: relative; } .scoll-top .erweima-pic { position: absolute; top: 40px; left: -85px; z-index: 99; display: none; width: auto; } .scoll-top .erweima-pic img { height: 120px; width: 120px; position: relative; left: 43px; } .top a:link, .top a:visited { color: #fff; } .top a:active, .top a:hover { color: #fff; } .top { z-index: 999999999999; position: fixed; left: 0; top: 0; width: 100%; border-bottom: 1px solid rgba(220, 220, 220, 0.4); z-index: 1000; } .menu-handler { width: 64px; float: right; height: 54px; display: none; cursor: pointer; } .menu-handler span { position: relative; display: block; margin: 25.5px auto 0; width: 28px; height: 3px; background-color: rgb(8, 65, 57); -webkit-transition-duration: .3s, .3s; -moz-transition-duration: .3s, .3s; -ms-transition-duration: .3s, .3s; -o-transition-duration: .3s, .3s; transition-duration: .3s, .3s; -webkit-transition-delay: .3s, 0s; -moz-transition-delay: .3s, 0s; -ms-transition-delay: .3s, 0s; -o-transition-delay: .3s, 0s; transition-delay: .3s, 0s; } .menu-handler span:after, .menu-handler span:before { content: ""; position: absolute; display: inline-block; width: 100%; height: 3px; left: 0; background-color: rgb(8, 65, 57); -webkit-transition-duration: .3s, .3s; -moz-transition-duration: .3s, .3s; -ms-transition-duration: .3s, .3s; -o-transition-duration: .3s, .3s; transition-duration: .3s, .3s; -webkit-transition-delay: .3s, 0s; -moz-transition-delay: .3s, 0s; -ms-transition-delay: .3s, 0s; -o-transition-delay: .3s, 0s; transition-delay: .3s, 0s } .menu-handler span:before { top: -9px; -webkit-transition-property: top, transform; -moz-transition-property: top, transform; -ms-transition-property: top, transform; -o-transition-property: top, transform; transition-property: top, transform; } .menu-handler span:after { bottom: -9px; -webkit-transition-property: bottom, transform; -moz-transition-property: bottom, transform; -ms-transition-property: bottom, transform; -o-transition-property: bottom, transform; transition-property: bottom, transform; } .menu-handler.active span { background-color: transparent; -webkit-transition-delay: 0s, 0s; -moz-transition-delay: 0s, 0s; -ms-transition-delay: 0s, 0s; -o-transition-delay: 0s, 0s; transition-delay: 0s, 0s } .menu-handler.active span:after, .menu-handler.active span:before { -webkit-transition-delay: 0s, .3s; -moz-transition-delay: 0s, .3s; -ms-transition-delay: 0s, .3s; -o-transition-delay: 0s, .3s; transition-delay: 0s, .3s } .menu-handler.active span:before { top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg) } .menu-handler.active span:after { bottom: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .menuBox a:link, .menuBox a:visited { color: #fff; } .menuBox a:active, .menuBox a:hover { color: #fff; } .menuBox { background-color: rgba(0, 0, 0, 0.8); color: #fff; position: fixed; display: none; right: 0px; top: 0px; height: 100%; height: 100vh; overflow-x: hidden; overflow-y: auto; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-overflow-scrolling: touch; width: 400px; z-index: 980; -webkit-transition: all .5s cubic-bezier(.25, .46, .45, .94); -moz-transition: all .5s cubic-bezier(.25, .46, .45, .94); -ms-transition: all .5s cubic-bezier(.25, .46, .45, .94); -o-transition: all .5s cubic-bezier(.25, .46, .45, .94); transition: all .5s cubic-bezier(.25, .46, .45, .94); } .menuMoblie { padding: 60px 0px 80px; } .menuMoblie .nav-link { display: block; font-size: 20px; padding: 10px 22px 10px 80px; position: relative; } .menuMoblie .cur { opacity: 0.9; border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; background-color: #e8e8e8; } .menuMoblie .cur .nav-link { color: rgb(8, 65, 57); } .menuMoblie .subnav { padding-bottom: 12px; display: none; } .menuMoblie .subnav a { position: relative; display: block; padding: 10px 20px 10px 35px; line-height: 1.4; color: #333333; font-size: 14px; border-bottom: 1px solid rgba(170,170,170,0.5); margin-left: 0; margin-right: 0; } .subnav p:last-child a{ border-bottom: none; } .pusher-black { position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; background-color: rgba(0, 0, 0, 0.4); z-index: 900; visibility: hidden; filter: alpha(Opacity=0); opacity: 0; -webkit-transition: all .2s cubic-bezier(.02, .01, .47, 1) 0s; -moz-transition: all .2s cubic-bezier(.02, .01, .47, 1) 0s; -ms-transition: all .2s cubic-bezier(.02, .01, .47, 1) 0s; -o-transition: all .2s cubic-bezier(.02, .01, .47, 1) 0s; transition: all .2s cubic-bezier(.02, .01, .47, 1) 0s; } .menuOpen .pusher-black { visibility: visible; filter: alpha(enabled=false); opacity: 1; } .menuOpen .menuBox { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0) } /* banner鏂囧瓧 */ .slideTop img { float: left; } .bannerWord { position: absolute; top: 32%; left: 15%; z-index: 99; color: #fff; opacity: 0.85; } .bannerWord>p:nth-child(1) { font-size: 48px; margin-bottom: 6vh; letter-spacing: 1px; } .bannerWord>p:nth-child(2) { height: 8vh; width: 2px; background: #FFF; margin-bottom: 6vh; margin-left: 10px; opacity: 0.8; } .bannerWord>p:nth-child(3) { font-size: 64px; margin-bottom: 6vh; letter-spacing: 1px; word-spacing: 10px; } .bannerWord>p:nth-child(4) { font-size: 28px; font-family: 'DIN'; } /* 2 */ .sideWord { position: absolute; top: 31%; left: 15%; z-index: 99; color: #fff; opacity: 0.85; } .sideWord>p:nth-child(1) { font-size: 4.8vw; margin-bottom: 7vh; font-family: 'DIN'; letter-spacing: 1px; position: relative; } .sideWord>p:nth-child(1) img { position: absolute; width: 80px; left: -20px; z-index: -1; top: -30px; } .sideWord>p:nth-child(2) { font-size: 2.2vw; margin-bottom: 12vh; letter-spacing: 1px; } .sideWord>p:nth-child(3) { font-size: 2.6vw; margin-bottom: 6vh; letter-spacing: 1px; word-spacing: 10px; } /* Slider */ .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-loading .slick-list { background: #fff url(../images/loader.gif) center center no-repeat; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; padding: 0; border: none; outline: none; } .slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0px; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0px 5px; padding: 0px; cursor: pointer; } @-webkit-keyframes scaleUpDown { from { -webkit-transform: scale(1.08); transform: scale(1.08); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scaleUpDown { from { -webkit-transform: scale(1.08); transform: scale(1.08); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } /*main style end*/ /*index style*/ .align-vertical { height: 100%; width: 100%; position: relative; display: table; } .vertical-inner { display: table-cell; vertical-align: middle; } .transXT50 { transform: translateX(50px); -webkit-transform: translateX(50px); opacity: 0; visibility: hidden; transition: transform 0.6s, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 0.6s, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; } .transYT20 { transform: translateY(20px); -webkit-transform: translateY(20px); opacity: 0; visibility: hidden; transition: transform 0.6s, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 0.6s, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; } .transYT50 { transform: translateY(50px); -webkit-transform: translateY(50px); opacity: 0; visibility: hidden; transition: transform 0.6s, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 0.6s, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; } .transXT100 { transform: translateX(-100%); -webkit-transform: translateX(-100%); opacity: 0; visibility: hidden; transition: transform 0.6s, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 0.6s, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; } .action.transYT50, .action.transYT20 { opacity: 1; visibility: visible; transform: translateY(0px); -webkit-transform: translateY(0px); } .action.transXT50, .action.transXT100 { opacity: 1; visibility: visible; transform: translateY(0px); -webkit-transform: translateY(0px); } .dly_1 { transition-delay: 100ms; -webkit-transition-delay: 100ms; } .dly_2 { transition-delay: 200ms; -webkit-transition-delay: 200ms; } .dly_3 { transition-delay: 300ms; -webkit-transition-delay: 300ms; } .dly_4 { transition-delay: 400ms; -webkit-transition-delay: 400ms; } .dly_5 { transition-delay: 500ms; -webkit-transition-delay: 500ms; } .dly_6 { transition-delay: 600ms; -webkit-transition-delay: 600ms; } .dly_7 { transition-delay: 700ms; -webkit-transition-delay: 700ms; } .dly_8 { transition-delay: 800ms; -webkit-transition-delay: 800ms; } .dly_9 { transition-delay: 900ms; -webkit-transition-delay: 900ms; } .dly_10 { transition-delay: 1000ms; -webkit-transition-delay: 1000ms; } .dly_11 { transition-delay: 1100ms; -webkit-transition-delay: 1100ms; } .banner a:link, .banner a:visited { color: #fff; } .banner a:active, .banner a:hover { color: #fff; } .banner { position: relative; overflow: hidden; width: 100%; height: 100vh; background-color: #efefef; } .banner .img { position: absolute; left: 0px; top: 0px; bottom: 0; right: 0; height: 100%; overflow: hidden; object-fit: cover; } .banner .pimg { width: 100%; display: block; position: absolute; overflow: hidden; object-fit: cover; } .banner .bimg { display: none; width: 100%; position: relative; } .banner .item { position: relative; width: 100%; height: 100%; overflow: hidden; background-size: cover; background-position: center center; background-repeat: no-repeat; } .banner .yy { display: none; position: absolute; left: 0; bottom: 0; width: 100%; height: 40%; background: url(../images/yy.png) repeat-x scroll left bottom; background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)); background: -webkit-gradient(linear, 0% 40%, 0% 100%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)); } .banner .binbox { position: absolute; width: 1400px; overflow: hidden; left: 50%; margin-left: -700px; top: 0; height: 100%; display: table; color: #fff; } .banner .binbox .by { font-size: 50px; line-height: 1.2; letter-spacing: 3px; } .banner .binbox .zh { font-size: 30px; line-height: 1.5; margin-top: 23px; } .banner .binbox .en { font-size: 16px; font-family: "PF Din Light"; line-height: 1.2; text-transform: uppercase; margin-top: 30px; } /*.banner .binbox .line{ width: 2px; height: 42px; display: block; margin: 20px 0; background-color: #fff;}*/ .banner .binbox a { width: 180px; height: 50px; line-height: 50px; margin-top: 100px; background: #ffffff; text-align: center; display: block; color: #141418; } .banner .slick-active .pimg { visibility: visible !important; -webkit-animation: scaleUpDown 2s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940); animation: scaleUpDown 2s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940); } .banner .slick-active .bimg { visibility: visible !important; -webkit-animation: scaleUpDown 2s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940); animation: scaleUpDown 2s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940); } .banner .slick-dots { bottom: 20px; z-index: 104; } .banner .slick-dots li { position: relative; display: inline-block; margin: 0px 6px; width: 28px; height: 8px; padding: 0px; cursor: pointer; } .banner .slick-dots li a { height: 2px; width: 100%; line-height: 8px; text-indent: -10em; display: block; overflow: hidden; padding: 0px; cursor: pointer; border-radius: 0%; background-color: #fff; position: absolute; left: 0; top: 3px; } .banner .slick-dots li a:focus { outline: none; } .banner .slick-dots li.slick-active a { height: 8px; top: 0; } @-webkit-keyframes decreaseHeight { from { width: 0%; } to { width: 100%; } } @keyframes decreaseHeight { from { width: 0%; } to { width: 100%; } } @-ms-keyframes decreaseHeight { from { width: 0%; } to { width: 100%; } } @-o-keyframes decreaseHeight { from { width: 0%; } to { width: 100%; } } .ibox-inner { width: 90%; margin: 0px auto; max-width: 1600px; } .conn_banner { width: 100%; height: 100%; background-size: cover; position: fixed; } /*main*/ .index .height { height: 100vh; } @keyframes xia { 0% { top: 30%; } 100% { top: 70%; } } /*.index .section2 .conn2_right .items:hover:after{ animation: xian1 2s linear infinite; animation-delay: 5s; }*/ @keyframes xian1 { 0% { transform: translateX(0); } 100% { transform: translateX(300%); } } @keyframes xian2 { 0% { width: 20%; } 100% { width: 0%; } } /*涓氬姟*/ .i-wrap3 .inliner-list, .i-wrap3 .inliner-bg { width: 666px; height: 666px; position: absolute; top: 50%; left: 50%; margin: -333px 0 0 -333px; z-index: 5; background: url(../images/wel15.png) no-repeat center; background-size: 100% 100%; transform: scale(0); } .i-wrap3 .inliner-bg { transform: scale(0); background: none; } .i-wrap3 .inliner-bg span { width: 100%; height: 100%; display: block; position: absolute; top: 0px; left: 41px; } .i-wrap3 .inliner-bg span.one { background: url(../images/wel23.png) no-repeat center; background-size: 100% 100%; -webkit-animation: inlinerbg 1.2s infinite linear; animation: inlinerbg 1.2s infinite linear; } .i-wrap3 .inliner-bg span.two { background: url(../images/wel24.png) no-repeat center; background-size: 100% 100%; -webkit-animation: inlinerbgo 1.2s infinite linear; animation: inlinerbgo 1.2s infinite linear; } @-webkit-keyframes inlinerbg { 0% { -webkit-transform: translate(5px, -9px); transform: translate(5px, -9px); } 50% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(5px, -9px); transform: translate(5px, -9px); } } @keyframes inlinerbg { 0% { -webkit-transform: translate(5px, -9px); transform: translate(5px, -9px); } 50% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(5px, -9px); transform: translate(5px, -9px); } } @-webkit-keyframes inlinerbgo { 0% { -webkit-transform: translate(-5px, 9px); transform: translate(-5px, 9px); } 50% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(-5px, 9px); transform: translate(-5px, 9px); } } @keyframes inlinerbgo { 0% { -webkit-transform: translate(-5px, 9px); transform: translate(-5px, 9px); } 50% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(-5px, 9px); transform: translate(-5px, 9px); } } .i-wrap3 .inliner-list .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .i-wrap3 .inliner-list .bg:nth-child(1) { width: 0; background: url(../images/wel17.png) no-repeat top left; } .i-wrap3 .inliner-list .bg:nth-child(2) { height: 0; background: url(../images/wel18.png) no-repeat top left; } .i-wrap3 .inliner-list .bg:nth-child(3) { height: 0; top: auto; bottom: 0; background: url(../images/wel19.png) no-repeat bottom left; } .i-wrap3 .inliner-list .bg:nth-child(4) { height: 0; top: auto; bottom: 0; background: url(../images/wel20.png) no-repeat bottom left; } .i-wrap3 .inliner-list li { width: 8px; height: 8px; position: absolute; background: url(../images/wel16.png) no-repeat center; transition: all 0.3s; background-size: 100% 100%; z-index: 10; cursor: pointer; } .i-wrap3 .inliner-list li.li0 { top: -4px; left: 50%; } .i-wrap3 .inliner-list li.li1 { top: 50%; left: 99.4%; } .i-wrap3 .inliner-list li.li2 { top: 99.4%; left: 50%; } .i-wrap3 .inliner-list li.li3 { top: 50%; left: -4px; } .i-wrap3 .inliner-list li.on { background: url(../images/wel16_h.png) no-repeat center; background-size: 100% 100%; } .inliner-banner li.into .con, .inliner-banner-con li.into .con { transform: scale(1); } .i-wrap3 .inliner-list, .i-wrap3 .inliner-bg { transform: scale(1); } .i-wrap3 { position: relative; } .svg-box { width: 668px; position: absolute; top: 50%; left: 50%; margin: -334px 0 0 -334px; z-index: 5; } .inliner-banner, .inliner-banner-con { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; z-index: 5; } .inliner-banner-con { background: none; } .inliner-banner ul, .inliner-banner-con ul { width: 100%; height: 100%; } .inliner-banner li, .inliner-banner-con li { width: 100%; height: 100%; position: absolute; top: 0; left: 100%; text-align: center; transform: scale(0.8); z-index: 1; } .inliner-banner li.index, .inliner-banner-con li.index { z-index: 2; } .inliner-banner li:first-child, .inliner-banner-con li:first-child { left: 0; transform: scale(1); } .inliner-banner li a, .inliner-banner-con li a { display: block; width: 100%; height: 100%; } .inliner-banner li .con, .inliner-banner-con li .con { display: block; width: 606px; position: absolute; top: 50%; left: 50%; margin: -145px 0 0 -303px; transform: scale(0); } .inliner-banner li h3, .inliner-banner-con li h3 { font-size: 24px; color: #ffffff; line-height: 40px; } .inliner-banner li h2, .inliner-banner-con li h2 { font-size: 30px; color: #fff; line-height: 51px; } .inliner-banner li i, .inliner-banner-con li i { width: 28px; height: 2px; margin: 18px auto 23px; display: block; background: #798994; } .inliner-banner li .font, .inliner-banner-con li .font { font-size: 15px; color: #fff; line-height: 25px; width: 72%; margin: 0 auto; } .inliner-banner li .more, .inliner-banner-con li .more { width: 178px; height: 40px; line-height: 40px; text-align: center; background: rgb(8, 65, 57); color: #fff; font-size: 14px; margin: 60px auto 0; } .ibox-inner-box { border-bottom: 1px solid #e5e5e5; } .index-title { padding: 80px 0; } .index-title .t1 { font-size: 56px; font-family: arial; margin-bottom: 30px; color: #333333; } .index-title .t2 { font-size: 26px; color: #333333; } .nav-box { position: fixed; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; padding: .75rem; z-index: 299990; display: none; } /* .nav-box:before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateX(-100%); background-color: #fff; transition: all .3s ease-in-out; } */ .nav-box .line-box .line { position: absolute; background-color: #0c0513; /* z-index: 3; */ } .nav-box .line-box .line:nth-child(1), .nav-box .line-box .line:nth-child(3) { width: 0; height: .75rem; } .nav-box .line-box .line:nth-child(2), .nav-box .line-box .line:nth-child(4) { width: .75rem; height: 0; } .nav-box .line-box .line:nth-child(1) { top: 0; left: 0; } .nav-box .line-box .line:nth-child(2) { top: 0; right: 0; } .nav-box .line-box .line:nth-child(3) { bottom: 0; right: 0; } .nav-box .line-box .line:nth-child(4) { bottom: 0; left: 0; } .nav-box .nav-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: .75rem; box-sizing: border-box; /* background-color: #11142e; */ } .nav-box .nav-wrap:before, .nav-box .nav-wrap:after { content: ""; position: absolute; width: 0; height: 50%; background-color: rgb(24, 55, 49); transition: all 1s ease-in-out; } .nav-box .nav-wrap:before { left: 0; top: 0; } .nav-box .nav-wrap:after { right: 0; bottom: 0; } .nav-box .top-box { height: 140px; position: relative; z-index: 3; border-bottom: 1px solid rgba(255, 255, 255, .05); opacity: 0; filter: alpha(opacity=0); transition: opacity .3s; } .nav-box .top-box .nav-logo { float: left; width: 260px; line-height: 140px; text-align: center; border-right: 1px solid rgba(255, 255, 255, .05); display: flex; height: 140px; align-items: center; justify-content: center; } .nav-box .top-box .nav-logo img { width: 80%; } .nav-box .top-box .nav-close { float: right; width: 200px; height: 140px; position: relative; /* border-left: 1px solid rgba(255,255,255,.05); */ } .nav-box .top-box .nav-close img { width: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .3s; } .nav-box .top-box .nav-close:hover { transform: rotate(-90deg); } .nav-box .nav { position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); font-size: 0; text-align: center; z-index: 3; } .nav-box .nav li { display: inline-block; *display: inline; zoom: 1; margin: 0 2.5%; width: 150px; /* transform: scale(0); */ opacity: 0; filter: alpha(opacity=0); transition: opacity .3s; perspective: 650px; -webkit-perspective: 650px; box-sizing: border-box; /* height: 60px; */ } .nav-box .nav li a.tit { display: block; position: relative; background-color: transparent; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; width: 100%; height: 60px; line-height: 60px; transform: translate3d(0, 0, 0); transition: transform .25s; box-sizing: border-box; } .nav-box .nav li .face { position: absolute; width: 100%; height: 100%; line-height: 60px; box-sizing: border-box; z-index: 3; } .nav-box .nav li a.tit .en { font-size: 16px; color: #fff; height: 100%; transition: background-color .3s; font-family: arial; border: 2px solid #fff; transform: translate3d(0, 0, 30px); -webkit-transform: translate3d(0, 0, 30px); } .nav-box .nav li .red { font-size: 40px; line-height: 50px; color: #e60012; text-transform: uppercase; } .nav-box .nav li .cn { /* color: #e60012; */ color: #fff; font-size: 24px; background-color: #e60012; transform: rotateX(90deg) translate3d(0, 0, 30px); -webkit-transform: rotateX(90deg) translate3d(0, 0, 30px); } .nav-box .nav li .hover .red { color: #fff; } .nav-box .nav li:nth-child(1) { display: none; } .nav-box .nav li:hover .hover span:nth-child(2) { -webkit-transition-delay: .045s; transition-delay: .045s } .nav-box .nav li:hover .hover span:nth-child(3) { -webkit-transition-delay: .09s; transition-delay: .09s } .nav-box .nav li:hover .hover span:nth-child(4) { -webkit-transition-delay: .135s; transition-delay: .135s } .nav-box .nav li:hover .hover span:nth-child(5) { -webkit-transition-delay: .18s; transition-delay: .18s } .nav-box .nav li:hover .hover span:nth-child(6) { -webkit-transition-delay: .225s; transition-delay: .225s } .nav-box .nav li:hover .hover span:nth-child(7) { -webkit-transition-delay: .27s; transition-delay: .27s } .nav-box .nav li:hover .hover span:nth-child(8) { -webkit-transition-delay: .315s; transition-delay: .315s } .nav-box .nav li:hover .hover span:nth-child(9) { -webkit-transition-delay: .36s; transition-delay: .36s } .nav-box .nav li:hover .hover span:nth-child(10) { -webkit-transition-delay: .405s; transition-delay: .405s } .nav-box .nav li:hover .hover span:nth-child(11) { -webkit-transition-delay: .45s; transition-delay: .45s } .nav-box .nav li:hover .hover span:nth-child(12) { -webkit-transition-delay: .5s; transition-delay: .5s } .nav-bottom { position: absolute; left: 0; bottom: 8.3%; width: 100%; padding: 0 2.5rem; box-sizing: border-box; z-index: 3; opacity: 0; filter: alpha(opacity=0); transition: opacity .3s; } .nav-bottom .left { float: left; font-size: .6rem; line-height: 1.25rem; color: #fff; } .nav-bottom .left .tel { padding-left: .625rem; background-repeat: no-repeat; background-position: left center; background-image: url('../img/nav-tel.png'); background-size: .325rem; font-family: arial; } .nav-bottom .message-btn { position: relative; float: right; width: 9rem; font-size: .4rem; line-height: .5rem; /* padding-bottom: 1.125rem; */ padding: .8rem; background-repeat: no-repeat; background-position: 92% center; background-image: url('../img/nav-message.png'); background-size: .2rem; color: #fff; transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1); } .nav-bottom .message-btn:before, .nav-bottom .message-btn:after { content: ''; position: absolute; -webkit-transition: inherit; transition: inherit; z-index: -1; top: 0; width: 0; height: 100%; box-sizing: border-box; } .nav-bottom .message-btn:before { right: 0; border: 1px solid #fff; border-left: 0; border-right: 0; } .nav-bottom .message-btn:after { left: 0; } /* .nav-bottom .message-btn .line{ position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: rgba(255,255,255,.5); overflow: hidden; } .nav-bottom .message-btn .line:before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: #e60013; transform: scaleX(0); transform-origin: bottom right; transition: all .3s; } */ .nav-box.animate .line-box .line:nth-child(1), .nav-box.animate .line-box .line:nth-child(3) { width: 100%; } .nav-box.animate .line-box .line:nth-child(2), .nav-box.animate .line-box .line:nth-child(4) { height: 100%; } .nav-box.animate .nav-wrap:before, .nav-box.animate .nav-wrap:after { width: 100%; } .nav-box.animate .nav li { /* transform: scale(1); */ opacity: 1; filter: alpha(opacity=100); } .nav-box.animate .nav li { transition-delay: 1s; } .nav-box.animate .top-box { opacity: 1; filter: alpha(opacity=100); transition-delay: 1s; } .nav-box.animate .nav-bottom { opacity: 1; filter: alpha(opacity=100); transition-delay: 1s; } .hideNav { opacity: 0; position: absolute; left: 0; top: 50%; width: 80%; left: 10%; transform: translateY(-50%); text-align: center; z-index: 20000090; color: #fff; display: flex; justify-content: space-between; transition-delay: 1s; } .nav-box.animate .hideNav { opacity: 1; filter: alpha(opacity=100); transition-delay: 1s; } .hideNav_common { text-align: center; } .hideNav_common p { margin-bottom: 55px; letter-spacing: 2px; font-size: 24px; } .hideNav_common a { letter-spacing: 1px; margin-bottom: 25px; display: block; font-size: 16px; color: #fff; opacity: 0.7; } /* 鍏徃浠嬬粛 */ .banner .item img { max-width: inherit !important; } .compIntro_container { position: relative; background: #fff; padding: 60px 0; z-index: 3; } .compIntro { position: relative; padding: 60px 15px; background: #fff; } .hidden_pic { position: absolute; width: 33%; top: 28%; left: 0; z-index: -1; } .compIntro_con { overflow: hidden; } .compView_pic { width: 35%; overflow: hidden; float: left; } .compView_pic img { width: 100%; height: 100%; float: left; } .compView { float: right; width: 65%; padding: 0px 0 0 50px; position: relative; box-sizing: border-box; } .compView_con { display: flex; align-items: center; justify-content: space-between; } .index .height { height: 100vh; } .compView_title>p:nth-child(1) { font-size: 34px; line-height: 48px; color: #000; font-weight: 600; letter-spacing: 1px; margin-bottom: 15px; margin-top: 25px; } .compView_title>p:nth-child(2) { font-size: 18px; color: #000; font-weight: 600; letter-spacing: 1px; margin-bottom: 20px; word-spacing: 12px; } .compView_icon { display: flex; } .compView_icon>div:last-child { margin-right: 0px; } .compView_icon_common { cursor: default; margin-right: 30px; text-align: center; width: 105px; border: 1px solid rgb(200, 200, 200); border-radius: 50%; height: 105px; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all 1.2s; } .compView_icon_common:hover { box-shadow: 1px 1px 8px 1px rgba(8, 65, 54); } .compView_icon_common:hover img { animation: jello 1.5s; } .compView_icon_common>p:nth-child(1) { width: 35px; height: 30px; } .compView_icon_common>p:nth-child(2) { font-size: 15px; color: rgb(102, 102, 102); letter-spacing: 1px; width: 40px; margin-top: 5px; } .compView_parh { font-size: 16px; color: rgb(51, 51, 51); line-height: 42px; margin-top: 35px; } /* 鐐瑰嚮鏌ョ湅鏇村 */ .viewMore { display: inline-block; font-size: 16px; color: #000; padding: 12px 48px; border: 1px solid rgb(8, 65, 57); transition: all 1s; word-spacing: 8px; border-radius: 35px; letter-spacing: 1px; margin-top: 65px; position: relative; margin-bottom: 50px; } .viewMore:after { content: ""; width: 0%; height: 100%; position: absolute; background: rgb(8, 65, 57); top: 0%; left: 0%; transition: all 1s; z-index: 0; border-radius: 35px; } .viewMore:hover { color: #fff; } .viewMore:hover:after { width: 100%; right: 0; } .viewMore>span:nth-child(1) { position: relative; z-index: 1; } .viewMore>span:nth-child(2) { position: relative; margin-left: 5px; z-index: 1; background: rgb(4, 111, 95); color: #fff; padding: 13px 18px; border-radius: 50%; font-size: 25px; position: absolute; right: -16px; top: -2px; } /*瑙嗛*/ .video-box { position: relative; } .item-video .tu { display: block; display: flex; align-items: center; justify-content: center; } .item-video .tu img { display: block; object-fit: cover; width: 100%; height: 100%; } .item-video a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 67px; height: 67px; } .item-video a::before { position: absolute; top: 10px; right: 10px; left: 10px; bottom: 10px; content: ''; display: block; border: 3px dashed #fff; border-radius: 100%; transition: all 0.6s; transform: scale(0); animation: ro 15s infinite linear; opacity: 0; } .item-video a:hover::before { opacity: 0.6; transform: scale(1); top: -10px; right: -10px; left: -10px; bottom: -10px; } .video-popwrap { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 36663; display: none; border-radius: 5px; border: 10px solid #fff } .popbg { position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: rgba(0, 0, 0, 0.8); z-index: 233; display: none; } .popclose { position: absolute; top: -30px; right: -20px; border-radius: 100%; color: #fff; cursor: pointer; height: 50px; width: 50px; text-align: center; line-height: 43px; font-size: 40px; z-index: 33333; background: #022; } .tj-indexPart3-list { margin-bottom: 50px; } .tj-indexPart3-list li { width: 48%; float: left; border-bottom: 1px solid #eeeeee; transition: all 0.6s; padding: 10px; float: left; position: relative; overflow: hidden; z-index: 1; background: #ffffff; box-sizing: border-box; margin-top: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .tj-indexPart3-list li .left .number .day { color: #141418; font-size: 40px; margin-top: 10px; margin-bottom: 10px; } .tj-indexPart3-list li .left .number .year { font-size: 14px; color: #141418; position: relative; margin-bottom: 20px; } .tj-indexPart3-list li .left .number .year span { display: inline-block; position: absolute; right: 0; } .tj-indexPart3-list li .left .details span { display: inline-block; color: #333333; font-weight: bold; font-family: arial; margin-right: 10px; } .tj-indexPart3-list li .left .details { font-size: 16px; letter-spacing: 1px; line-height: 25px; color: #141418; } .tj-indexPart3-list li:nth-child(2n) { float: right; } .tj-indexPart3-list li .left .left .more { margin-top: 30px; margin-bottom: 20px; } .tj-indexPart3-list li:hover { transform: translateX(15px); } .tj-indexPart3-list li:nth-child(3n+1) { margin-left: 0; } .tj-indexPart3-list li .left .t1 { font-size: 15px; font-weight: bold; color: #333333; margin-bottom: 5px; display: none; } .compAdv_con { width: 35%; } .conn2_right { position: relative; width: 65%; display: inline-block; height: 100%; vertical-align: top; } .conn2_right>.img { width: 100%; margin: auto; background: url(../images/view.jpg)center no-repeat; background-size: cover; } .conn2_right>.img>img { opacity: 0; } .conn2_right .items { position: absolute; top: 0; right: 0; background: rgba(24, 61, 137, .95); width: 100%; height: 50%; text-align: center; overflow: hidden; cursor: pointer; } .conn2_right .items .conn2_2 { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: auto; width: 70%; } .conn2_right .item { display: inline-block; width: 48%; } .conn2_right .item .img { width: 100%; margin: 0 auto; } .conn2_right .items h3 { font-size: 60px; font-family: impact; color: #FFFFFF; } .conn2_right .items p { font-size: 18px; padding-top: 30px; color: #FFFFFF; } .conn2_right .items i.xian { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); left: -100%; width: 100%; height: 1px; background: #FFFFFF; } .conn2_right .items .xian { position: absolute; top: 50%; transform: translateY(-50%); width: 20%; height: 1px; overflow: hidden; } .conn2_right .items .xian1 { position: absolute; top: 50%; transform: translateY(-50%); width: 20%; height: 1px; overflow: hidden; left: 80%; } .conn2_right .items .xian span { display: block; width: 100%; height: 1px; position: absolute; background: #FFFFFF; } .conn2_right .items .xian1 span { display: block; width: 100%; height: 1px; position: absolute; background: #FFFFFF; } .conn2_right .items:hover .xian span { animation: xian1 1.5s infinite linear; } .conn2_right .items:hover .xian1 span { animation: xian1 1.5s infinite linear; animation-delay: 1s; } .conn2_right .items .xian span:nth-of-type(1) { left: -100%; } .conn2_right .items .xian span:nth-of-type(2) { left: -200%; display: none; } .conn2_right .items .xian1 span:nth-of-type(1) { left: -100%; } .conn2_right .items .xian1 span:nth-of-type(2) { left: -200%; display: none; } .compAdv { display: flex; } .compAdv_con { width: 35%; display: flex; background: rgb(243, 245, 247); justify-content: center; align-items: center; padding: 0 50px; } .compAdv_common { width: 33.3%; } .compAdv_common>p:nth-child(1) { font-size: 15px; color: #000; margin-bottom: 45px; } .compAdv_common>p:nth-child(1) span { font-size: 60px; font-family: 'DIN'; margin-right: 8px; } .compAdv_common>p:nth-child(2) { height: 1px; background: rgb(200, 200, 200); position: relative; margin-bottom: 45px; } .compAdv_common>p:nth-child(2) span { height: 1px; background: #000; width: 35px; position: absolute; left: 10px; } .compAdv_common>p:nth-child(3), .compAdv_common>p:nth-child(4) { font-size: 14px; left: 1px; color: #000; margin-bottom: 3px; } /* 涓氬姟棰嗗煙 */ .workWide { background: url(../images/green.jpg); background-repeat: no-repeat; } .slide_campus { position: relative; overflow: hidden; display: flex; justify-content: space-between; } .slide_campus .hd { width: 16%; } .slide_campus .hd ul li { margin-bottom: 5vh; transition: all 1s; } .slide_campus .hd ul li span { cursor: pointer; border-radius: 30px; letter-spacing: 1px; color: #000; font-size: 18px; transition: all 0.8s; color: #fff; position: relative; padding: 0 5px; } .on span { color: rgb(197, 157, 95) !important; } .slide_campus .hd ul li span:after { display: none; content: ""; width: 0; height: 4px; position: absolute; background: rgb(197, 157, 95); top: 50%; right: 50%; transition: all 1s; } .slide_campus .hd ul li.on { font-weight: 600; } .slide_campus .hd ul li.on span:after { width: 100%; right: 0; } .slide_campus .bd { width: 84%; position: relative; margin-bottom: 40px; } .slide_campus .hd ul { position: absolute; /*bottom: 30vh;*/ } .slide_campus .hd ul>li:last-child { margin-bottom: 0; } .courseBox {} .compUsbox { display: flex; background: #fff; padding: 15px 25px 5px 25px; justify-content: space-between; position: absolute; bottom: 5%; left: 3%; right: 3%; align-items: center; transition: all 1.2s; } .opshow { transition: all 5s; opacity: 1 !important; } .op1 { opacity: 1 !important; } .compUs_common:hover .compUsbox { opacity: 1; } .compUs_common:hover .compUs_pic img { transform: scale(1.05); } .compUs_common { display: inline-block; margin-right: 30px; transition: all 0.8s; cursor: pointer; position: relative; } .compUs_pic { overflow: hidden; } .compUs_pic img { width: 100%; height: 100%; float: left; transition: all 1.4s; } .b_blue { transition: all 0.8s; } .compUs { display: flex; align-items: center; } .compUs_common:hover .b_blue { color: rgb(8, 65, 57); } .compUs_word>p:nth-child(1) { letter-spacing: 1px; font-size: 18px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #000; } .compUs_word>p:nth-child(2) { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; font-size: 15px; margin-top: 5px; padding-bottom: 10px; color: #000; } .compContainer .swiper-slide { width: 50% !important; margin-right: 30px !important; padding-bottom: 90px; } .workWide_title { padding: 70px 0; } .workWide_title>p:nth-child(1) { font-size: 40px; color: #FFF; letter-spacing: 3px; margin-bottom: 35px; } .workWide_title>p:nth-child(2) { font-size: 16px; color: #fff; letter-spacing: 1px; word-spacing: 5px; display: flex; align-items: center; } .workWide_title>p:nth-child(2) span { height: 1px; background: #fff; width: 60px; display: inline-block; margin-right: 15px; } .insideAll { display: flex; align-items: center; justify-content: center; position: relative; top: -40px; margin-bottom: 20px; z-index: 99999999999; } .insideAll span { letter-spacing: 1px; color: #fff; font-size: 14px; margin: 0 40px; position: relative; top: -5px; } /* 鏂伴椈璧勮 */ .newsTitle { display: flex; align-items: center; justify-content: space-between; } .workWide_title_b { padding: 70px 0; } .workWide_title_b>p:nth-child(1) { font-size: 40px; color: rgb(51, 51, 51); letter-spacing: 3px; margin-bottom: 35px; } .workWide_title_b>p:nth-child(2) { font-size: 16px; color: rgb(51, 51, 51); letter-spacing: 1px; word-spacing: 5px; display: flex; align-items: center; } .workWide_title_b>p:nth-child(2) span { height: 1px; background: rgb(51, 51, 51); width: 60px; display: inline-block; margin-right: 15px; } /* 鏂伴椈璧勮 */ .slide_news { position: relative; } .slide_news .hd { position: absolute; top: -100px; left: 300px; } .slide_news .hd ul { display: flex; } .slide_news .hd ul li { margin-right: 5vw; cursor: pointer; letter-spacing: 1px; color: #000; font-size: 18px; transition: all 0.8s; color: #000; position: relative; padding: 0 5px; } .slide_news .hd ul li span { display: none; width: 0; height: 4px; position: absolute; background: rgba(8, 65, 57, 0.6); top: 50%; right: 50%; transition: all 1s; } .bold { font-weight: 600 !important; } .titleOn { width: 100% !important; right: 0 !important; } .newsBo { display: flex; flex-wrap: wrap; padding-bottom: 30px; } .newsBo>li:nth-child(3n+3) { margin-right: 0; } .newsBo_common { width: 32.5%; margin-right: 1.2%; margin-bottom: 30px; transition: all 1.2s; } .newsBo_pic { overflow: hidden; margin-bottom: 15px; } .newsBo_common:hover {} .newsBo_common:hover .newsBo_pic img { transform: scale(1.1); } .newsBo_common:hover .newsBobox_word { color: rgb(8, 65, 57); } .newsBobox_pic { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; align-content: center; border-radius: 50%; border: 1px solid rgb(200, 200, 200); } .newsBobox_pic img { transition: all 0.8s; } .newsBo_common:hover .newsBobox_pic img { transform: translateX(22px); } .compUs_common:hover .newsBobox_pic img { transform: translateX(22px); } .newsBo_pic img { transition: all 1.6s; } .newsBo_common a>p:nth-child(2) { font-size: 18px; color: rgb(85,85,85); margin-bottom: 15px; font-family: 'DIN'; height: 55px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .newPen .newsBo_common { padding: 20px 15px 5px 20px; border: 1px solid rgb(220, 220, 220); transition: all 0.8s; cursor: pointer; background: #fff; } .newPen .newsBo_common:hover { box-shadow: 1px 1px 10px 1px rgba(8, 65, 57, 0.8); transform: scale(1.05); } .newsBo_common a>p:nth-child(3) { font-size: 18px; color: #000; line-height: 36px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; width: 98%; white-space: nowrap; } .newsBobox { padding: 6px 15px 10px 0px; display: flex; align-items: center; justify-content: space-between; transition: all 1.2s; } .newPencon { padding-top: 130px; padding-bottom: 50px; } .bLine { height: 1px; background: rgb(170, 170, 170); width: 100%; position: relative; } .bLine::before { content: ""; width: 0%; height: 2px; position: absolute; background: rgb(8, 65, 57); top: 0%; left: 0%; transition: all 1s; z-index: 0; } .newsBobox_word { color: rgb(119, 119, 119); transition: all 1.2s; font-size: 16px; letter-spacing: 1px; } .wwg { transition: all 0.8s; font-weight: 600; font-size: 18px; } .newsBo_common:hover .bLine::before { width: 100%; left: 0; } .newsBo_common:hover .wwg { color: rgb(8, 65, 57) !important; } /* footer */ footer { background: rgb(8, 65, 57); position: relative; } .footerMain { width: 100%; } .footerTitle { display: flex; align-items: center; justify-content: space-between; } .footerTitle>div:nth-child(1) { width: 80%; } .footerTitle>div:nth-child(2) { width: 31%; } .footerTitle>div:nth-child(2)>p:nth-child(1) { font-size: 18px; letter-spacing: 1px; margin-bottom: 15px; color: #fff; } .footerTitle>div:nth-child(2)>p:nth-child(2) { font-size: 28px; color: #fff; font-family: 'DIN'; letter-spacing: 1px; } .footerLink { display: flex; justify-content: space-between; margin-top: 65px; } .footerEwm { width: 30%; display: flex; justify-content: flex-end; margin-right: 8%; } .footerLink_con { width: 60%; text-align: center; color: #fff; display: flex; justify-content: space-between; } .footerLink_common { text-align: center; } .footerLink_common p { margin-bottom: 40px; letter-spacing: 2px; font-size: 19px; } .footerLink_common a { letter-spacing: 1px; margin-bottom: 18px; display: block; font-size: 16px; color: #fff; opacity: 0.7; transition: all 1s; position: relative; } .hideNav_common a { transition: all 1s; } .hideNav_common a span { position: relative; } .hideNav_common a:hover { transform: translateY(5px); } .hideNav_common a span:after { content: ""; width: 0; height: 2px; position: absolute; background: #fff; opacity: 0.7; bottom: -10px; right: 50%; transition: all 1s; z-index: -1; } .hideNav_common a span:hover:after { width: 100%; right: 0; } .footerLink_common a span { position: relative; } .footerLink_common a:hover { transform: translateY(5px); } .footerLink_common a span:after { content: ""; width: 0; height: 2px; position: absolute; background: #fff; opacity: 0.7; bottom: -10px; right: 50%; transition: all 1s; z-index: -1; } .footerLink_common a span:hover:after { width: 100%; right: 0; } .footerEwm>div:nth-child(1) { margin-right: 4%; } .footerEwm_common { text-align: center; } .footerEwm_common>p:nth-child(1) { width: 120px; height: 120px; } .footerEwm_common>p:nth-child(2) { color: #fff; letter-spacing: 1px; margin-top: 10px; font-size: 15px; } .footerSupport { width: 92%; display: flex; align-items: center; justify-content: space-between; font-size: 16px; color: #fff; letter-spacing: 1px; padding: 25px 0; margin-top: 80px; } .footerBack { /* position: absolute; right: 0; */ } .bottom_line { background: rgba(170, 170, 170, 0.2); height: 1px; width: 100%; position: absolute; left: 0; bottom: 80px; right: 0; } .footerBack { cursor: pointer; width: 7.5vw; display: flex; flex-direction: column; justify-content: center; background: rgb(4, 111, 95); align-items: center; align-content: center; position: absolute; right: 0; top: 0; bottom: 0; } .footerBack>div:nth-child(1) { margin-bottom: 60px; } .footerBack>p:nth-child(2) { color: #fff; font-size: 16px; font-family: 'DIN'; transform: rotate(90deg); letter-spacing: 1px; width: 120px; } .footer { display: flex; justify-content: space-between; padding: 65px 0 0 0; } /* 鏃堕棿鏍 */ .progressCon { padding-bottom: 90px; } .historyTree_con { background: #fff; padding-bottom: 100px !important; } #timeline { background: #fff; padding: 0px 0 90px 0; margin-top: 120px; } .historyTree_con { padding: 0 5vw; background: #fff; border-radius: 3px; } #timeline { position: relative; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; } #timeline:before { content: ""; width: 4px; height: 100%; background: rgb(242, 245, 249); left: 15%; top: 0px; position: absolute; margin-left: -2px; } #timeline:after { content: ""; clear: both; display: table; width: 100% } .timeline-date { display: flex; align-items: center; padding-top: 90px; } #timeline .timeline-item { position: relative; transition: all 0.6s; cursor: pointer; } #timeline .timeline-date .timeline-icon { border: 2px dashed rgb(6, 118, 101); width: 30px; height: 30px; position: absolute; left: 15%; margin-left: -15px; overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .timeline-icon-special { position: absolute; top: 40%; left: 9.2%; } .timeline-icon-special span { width: 18px; height: 18px; border-radius: 50%; background: rgb(153, 153, 153); display: inline-block; box-sizing: border-box; } #timeline .timeline-date .timeline-icon span { width: 18px; height: 18px; border-radius: 50%; background: rgb(6, 118, 101); display: inline-block; border: 3px solid rgb(242, 244, 245); box-sizing: border-box; } #timeline .timeline-item .timeline-content { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; left: 16%; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-size: 16px; line-height: 38px; width: 80%; margin-top: 25px; margin-left: 5%; letter-spacing: 1px; } .treeDate { font-size: 24px; color: rgb(6, 118, 101); font-family: 'DIN'; position: relative; } .treeTitle { font-size: 26px; letter-spacing: 1px; font-weight: normal; } .treeMore { width: 13%; height: 50px; line-height: 50px; font-size: 16px; letter-spacing: 1px; color: #fff; border-radius: 4px; text-align: center; background: rgb(8, 65, 57); position: relative; left: 8%; top: 97px; cursor: pointer; transition: all 0.8s; } .treeMore:hover { transform: translateY(10px); box-shadow: 0 2px 3px -1px rgb(8, 65, 57); } /* 骞翠唤 */ .historyTree_time { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; left: 16%; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 80%; margin-left: 5%; letter-spacing: 1px; top: -30px; } /* 瀵艰埅鍙婃墍鍦ㄤ綅缃 */ .commonNavcon { display: flex; align-items: center; justify-content: space-between; background: #fff; margin-top: -130px; position: relative; z-index: 99; padding-right: 50px; padding-left: 0 !important; top: 20px; } .commonNav { width: 100%; /* overflow-x: auto; */ width: 100%; white-space: nowrap; box-sizing: border-box; float: none; left: auto; display: flex; position: relative; overflow-x: auto; width: 100%; white-space: nowrap; box-sizing: border-box; } .commonNav a { display: inline-block; padding: 3.2vh 35px; text-align: center; } .commonNav a { transition: all 0.8s; font-size: 17px; letter-spacing: 1px; } .commonNav a:hover { color: rgb(8, 65, 57); } .localAt { width: 35%; display: flex; align-items: center; justify-content: flex-end; } .localAt { letter-spacing: 1px; } .localAt a, .localAt span { color: rgb(102, 102, 102); font-size: 14px; } .localAt>span { margin: 0 15px; color: rgb(102, 102, 102); } .bg_green { background: rgb(8, 65, 57) !important; color: #fff; } .bg_green:hover{ color: #fff!important; } .navOn a{ color: #fff!important; } .navOn a::after{ width: 100%!important; left: 0!important; } .scoll-top .navOn a{ font-weight: 600; color: rgb(8,65,57)!important; } .scoll-top .navOn a::after{ width: 100%!important; left: 0!important; } /* 鍏徃浠嬬粛 */ .moreIntro { display: flex; align-items: flex-end; margin-top: -375px; } .moreIntro_left { width: 68%; padding: 50px 40px; position: relative; box-sizing: border-box; margin: 0 2%; box-shadow: 0px 2px 10px -1px rgb(220, 220, 220); border-radius: 4px; background: #fff; } .moreIntro_left { height: 552px; overflow-y: auto; } .moreIntro_left { overflow-x: hidden; overflow-y: auto; color: #000; } .moreIntro_left::-webkit-scrollbar { width: 5px; /*height: 4px;*/ } .moreIntro_left::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgb(8, 65, 57); background: rgb(8, 65, 57); } .moreIntro_left::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(220, 220, 220, 0.8); border-radius: 0; background: rgba(220, 220, 220, 0.8); } .moreIntro_right { width: 35%; display: flex; background: #fff; justify-content: center; align-items: center; padding: 70px 40px; box-shadow: 0px 2px 10px -1px rgb(220, 220, 220); border-radius: 4px; position: relative; z-index: 99; } /* 浼佷笟鏂囧寲 */ .company { padding-bottom: 80px; } .cultureBg { background: url(../images/culture.jpg); background-size: cover; background-repeat: no-repeat; height: 575px; position: relative; } .cultureWordcon { display: flex; justify-content: flex-end; } .cultureWord { background: url(../images/cu2.jpg); background-size: cover; background-repeat: no-repeat; width: 835px; height: 320px; position: absolute; top: 50%; margin-top: -160px; padding: 43px 10px; display: flex; flex-direction: column; } .cultureWord p { width: 82%; margin: auto; color: #fff; letter-spacing: 1px; font-size: 15px; line-height: 32px; } .cultureWord>p:nth-child(1) { font-size: 30px; font-weight: bold; letter-spacing: 2px; margin-bottom: 15px; } /* 鍦板浘 */ .common-map-box { padding: 0 50px; position: relative; } .common-map-box .rect-5133 { padding-bottom: 51.33%; } .common-map-box .dot_box { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; } .common-map-box .dot_box .dot { position: absolute; } .common-map-box .dot_box .dot .dot_circle { display: block; width: 7px; height: 7px; background: rgb(6, 118, 101); position: relative; z-index: 3; border-radius: 50%; } .common-map-box .dot:after, .common-map-box .dot:before { content: ""; position: absolute; border-radius: 50%; top: 50%; left: 50%; z-index: 1; } .common-map-box .dot:before { width: 18px; height: 18px; background: transparent; background: rgba(8, 65, 57, 0.2); margin-top: -9px; margin-left: -9px; -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; } .common-map-box .dot:after { width: 24px; height: 24px; background: transparent; /*background:#7e9ec3;*/ background: rgba(8, 65, 57, 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; } .common-map-box .dot_box .dot2 .dot_circle { display: block; width: 10px; height: 10px; background: rgb(6, 118, 101); position: relative; z-index: 3; border-radius: 50%; } .common-map-box .dot2:before { width: 24px; height: 24px; background: transparent; background: rgba(8, 65, 57, 0.2); margin-top: -12px; margin-left: -12px; -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; } .common-map-box .dot2:after { width: 44px; height: 44px; background: transparent; /*background:#7e9ec3;*/ background: rgba(8, 65, 57, 0.2); margin-left: -22px; margin-top: -22px; -webkit-animation: warn 2s linear 0s infinite; -moz-animation: warn 2s linear 0s infinite; animation: warn 2s linear 0s infinite; opacity: 0; } @keyframes warn { 0% { transform: scale(0.5); opacity: 0; } 25% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.2); opacity: 0.8; } 75% { transform: scale(1.3); opacity: 0.4; } 100% { transform: scale(1.4); opacity: 0; } } @-webkit-keyframes warn { 0% { transform: scale(0.5); opacity: 0; } 25% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.2); opacity: 0.8; } 75% { transform: scale(1.3); opacity: 0.4; } 100% { transform: scale(1.4); opacity: 0; } } /* 涓浗鍦板浘 */ .mapCon { position: relative; height: 60vw; overflow: hidden; margin: 0 auto!important; margin-bottom: 60px!important; } .map { display: flex; justify-content: space-between; } .mapSwitch { padding: 80px 0; background: rgb(237, 237, 237); width: 70%; overflow: hidden !important; position: relative; top: 40px; } .mapSwitch .swiper-container { margin: inherit !important; } .mapDesc { width: 30%; padding: 4vw 60px; background: #fff; border-top: 20px solid rgb(8, 65, 57); border-bottom: 20px solid rgb(8, 65, 57); border-left: 20px solid rgb(8, 65, 57); position: absolute; right: 0; bottom: 0; top: 40px; z-index: 99; } .mapDesc::before { content: ''; position: absolute; left: 0; right: 0; bottom: 40%; background: #fff; z-index: 999; } .mapSwitch .swiper-slide { width: 100% !important; } .box2 img { width: 54vw !important; } .mapDesc_title { margin-bottom: 5vw; } .mapDesc_title>p:nth-child(1) { letter-spacing: 1px; font-size: 2.5vw; margin-bottom: 4vh; line-height: 50px; } .mapDesc_title>p:nth-child(2) { word-spacing: 4px; font-size: 20px; color: rgb(102, 102, 102); margin-bottom: 30px; letter-spacing: 1px; } .mapDesc_title>p:nth-child(3) { width: 40px; height: 3px; background: rgb(8, 65, 57); } .mapDesc_word p { font-size: 16px; letter-spacing: 1px; color: rgb(102, 102, 102); margin-bottom: 20px; } .mapDesc_word p span { font-size: 30px; font-family: 'DIN'; font-style: italic; margin: 0 10px; color: rgb(6, 118, 101); letter-spacing: 0; } .tabCity { z-index: 9999999; } .common-map-box em img { width: 100%; } .map .swiper-container { overflow: inherit; } .map .swiper-slide { overflow: hidden; z-index: -1; } /* 鍔炲叕鐜 */ .enviroment { margin-bottom: 65px; } .enviroTitle { padding: 65px 0 50px 0; } .enviroTitle>p:nth-child(1) { font-size: 34px; color: rgb(51, 51, 51); letter-spacing: 1px; margin-bottom: 25px; } .enviroTitle>p:nth-child(2) { width: 40px; height: 3px; background: rgb(8, 65, 57); } /* 浜烘墠鐞嗗康 */ .personThink { display: flex; position: relative; } .thinkDesc { width: 50%; padding: 120px 0px; } .thinkDesc_title { margin-bottom: 60px; } .thinkDesc_title>p:nth-child(1) { font-size: 34px; color: #000; letter-spacing: 1px; margin-bottom: 20px; } .thinkDesc_title>p:nth-child(2) { letter-spacing: 1px; color: rgb(102, 102, 102); font-size: 16px; } .perParh1 { font-size: 22px; color: #000; letter-spacing: 1px; margin-bottom: 10px; } .perParh2, .perParh3 { width: 98%; font-size: 16px; color: rgb(102, 102, 102); letter-spacing: 1px; margin-bottom: 40px; line-height: 36px; } .thinkDesccon { position: relative; /* padding-bottom: 60px; */ } .thinkDesc_right { width: 50%; } .thinkDesc_pic { position: absolute; right: 0; top: 50px; overflow: hidden; } .thinkDesc_pic img { width: 45vw; } /* 绂忓埄寰呴亣 */ .goodFor { display: flex; justify-content: space-between; /* margin-top: -170px; */ } .goodFor_pic { width: 50%; overflow: hidden; } .goodFor_title { display: flex; align-items: center; font-size: 32px; color: #000; letter-spacing: 1px; margin-bottom: 40px; } .goodFor_title img { width: 50px; height: 50px; margin-right: 15px; } .goodFor_right { height: 555px; width: 50%; padding: 40px 65px; background: rgb(242, 245, 249); display: flex; flex-direction: column; align-content: center; justify-content: center; } .goodFor_word p { display: flex; align-items: center; font-size: 16px; letter-spacing: 1px; color: #000; margin-bottom: 18px; line-height: 26px; } .goodFor_word p span { width: 20px; height: 20px; margin-right: 10px; } .joinHeader { display: flex; justify-content: space-between; margin-top: -170px; } .joinHeader>div { width: 50%; } .joinHeader>div img { float: left; } .goodFor_pic img { height: 100%; float: left; } /* 浜烘墠鎷涜仒 */ .jobNeed { margin-top: 70px; padding-bottom: 50px; } .jobNeed_title { font-size: 30px; letter-spacing: 1px; color: #000; font-weight: 600; padding-bottom: 25px; border-bottom: 1px solid rgb(220, 220, 220); } .jobNeed_title span { font-family: 'DIN'; font-size: 20px; margin-left: 25px; color: rgb(51, 51, 51); font-weight: normal; letter-spacing: 0; } .eachJob { margin-bottom: 50px; } .jobType { border-bottom: 1px solid rgb(220, 220, 220); padding-bottom: 40px; margin-top: 50px; margin-bottom: 50px; display: flex; align-items: baseline; justify-content: space-between; } /* .jobNeedcon>div:nth-child(2)>div:nth-child(2) { display: block; } */ .jobType_left { width: 70%; } .jobType_left>p:nth-child(1) { font-size: 24px; color: rgb(51, 51, 51); letter-spacing: 1px; margin-bottom: 30px; } .jobType_desc { line-height: 17px; display: flex; } .jobType_desc p { font-family: 'DIN'; width: 33.3%; line-height: 20px; font-size: 16px; color: rgb(51, 51, 51); } .jobType_desc>p:nth-child(1) { text-align: left; } .jobType_desc>p:nth-child(2) { text-align: center; border-left: 1px solid rgb(51, 51, 51); border-right: 1px solid rgb(51, 51, 51); } .jobType_desc>p:nth-child(3) { text-align: right; } .jobOpen { width: 120px; height: 40px; line-height: 40px; letter-spacing: 1px; color: #fff; font-size: 15px; background: rgb(8, 65, 57); text-align: center; border-radius: 4px; cursor: pointer; } .jobDetail { padding: 50px 75px; background: rgb(242, 245, 249); border-radius: 2px; margin-top: 50px; display: none; } .jobDuty { display: flex; } .jobDuty_common { width: 50%; } .jobDuty_name { font-size: 20px; letter-spacing: 1px; margin-bottom: 30px; } .jobDuty_word p { color: rgb(102, 102, 102); font-size: 15px; letter-spacing: 1px; margin-bottom: 8px; } .jobContact { margin-top: 80px; display: flex; margin-bottom: 10px; } .jobContact p { margin-right: 30px; font-size: 20px; color: #000; } .jobContact p span { font-size: 22px; color: rgb(8, 65, 57); font-family: 'DIN'; } /* 鑱旂郴鎴戜滑 */ .contact_container { max-width: 1100px; margin: auto; display: flex; justify-content: space-between; padding: 0 15px; margin-bottom: 40px; } .havePro_form { height: 670px; width: 50%; background: rgb(8, 65, 57); box-shadow: 0 2px 3px -1px rgb(8, 65, 57); padding: 30px 60px 0px 60px; z-index: 9; position: relative; top: -60px; } .havePro_form_title { padding: 25px 0; color: #fff; font-size: 30px; letter-spacing: 1px; display: flex; flex-direction: column; justify-content: end; align-items: flex-end; } .havePro_form_title>p:nth-child(2) { margin-top: 12px; font-size: 25px; font-family: 'DIN'; } .havePro_form_enter { margin-top: 15px; } .havePro_form_enter input { padding: 18px 18px; background: #fff; letter-spacing: 1px; background: rgb(250, 250, 250); border-radius: 4px; font-size: 14px; margin-bottom: 20px; display: block; width: 100%; color: rgb(102, 102, 102); } .havePro_form_enter input::-webkit-input-placeholder { color: rgb(102, 102, 102); } .havePro_form_enter input::-moz-input-placeholder { color: rgb(102, 102, 102); } .havePro_form_enter input::-ms-input-placeholder { color: rgb(102, 102, 102); } .askNow { border-radius: 4px; background: rgb(21, 124, 109); letter-spacing: 1px; font-size: 18px; color: #fff; padding: 18px 0; margin-top: 10px; width: 100%; transition: all 1s; cursor: pointer; } .askNow:hover { transform: translateY(10px); } .contactType { width: 50%; background: #fff; padding: 45px 70px 60px 65px; position: relative; margin-bottom: 25px; box-shadow: 1px 1px 10px 1px rgb(220 220 220); top: -150px; height: 620px; } .contact_pic { overflow: hidden; } .contactAddress_common { margin-top: 45px; } .contactAddress_common>p:nth-child(1) { display: flex; align-items: center; margin-bottom: 10px; } .contactAddress_common>p:nth-child(1) span { line-height: 17px; font-size: 18px; color: #000; font-weight: bold; font-family: 'DIN'; } .contactAddress_common>p:nth-child(1) span:nth-child(1) { padding-right: 30px; border-right: 2px solid rgb(0, 0, 0); width: 95px; } .contactAddress_common>p:nth-child(1) span:nth-child(2) { padding-left: 30px; } .contactAddress_common>p:nth-child(2) { font-size: 15px; color: #000; line-height: 24px; font-family: 'DIN'; } .havePro_form_enter textarea { width: 100%; height: 100px; background: rgb(250, 250, 250); border-radius: 4px; margin-right: 55px; box-sizing: border-box; text-indent: 15px; padding: 15px 0; margin-bottom: 15px; color: rgb(102, 102, 102); } /* 浼佷笟璧勮川 */ .compTitle { padding: 60px 15px; font-size: 32px; color: #000; letter-spacing: 1px; } .compQuan_container { box-shadow: 1px 1px 10px 1px rgb(220, 220, 220); } .compQuan_container>div:last-child { border-bottom: none; } .compQuan { padding: 30px 70px; border-bottom: 1px solid rgb(220, 220, 220); display: flex; transition: all 0.6s; align-items: center; } .word_g { transition: all 0.6s; font-weight: 600; } .compQuan:hover { box-shadow: 1px 1px 10px 1px rgb(220, 220, 220); } .compQuan:hover .word_g { color: rgb(8, 65, 57); font-weight: 600; } .compQuan>p:nth-child(1) { color: #000; font-weight: 600; font-family: 'DIN'; font-size: 20px; width: 7%; } .compQuan>div:nth-child(2) { width: 2%; position: relative; top: 5px; } .compQuan>div:nth-child(2) img {} .compQuan>p:nth-child(3) { width: 87%; color: rgb(51, 51, 51); line-height: 24px; font-size: 16px; letter-spacing: 1px; padding-left: 3%; transition: all 0.6s; font-weight: 400; -webkit-transition: all .6s; } /* 鏂伴椈璇︽儏 */ .articleTitle { padding: 20px 0 40px 0; border-bottom: 1px solid rgb(220, 220, 220); text-align: center; } .articleTitle>p:nth-child(1) { font-size: 26px; font-weight: 600; margin-bottom: 25px; color: #000; letter-spacing: 1px; } .articleTitle>p:nth-child(2) { display: flex; justify-content: center; } .articleTitle>p:nth-child(2) span { margin-right: 30px; color: rgb(102, 102, 102); font-size: 15px; letter-spacing: 1px; } .article_word { font-size: 16px; line-height: 42px; color: rgb(102, 102, 102); width: 96%; margin: auto; margin-top: 30px; } .article_pic { overflow: hidden; margin-top: 30px; } .article_pic img { width: 100%; transition: all 1.4s; } .article_pic img:hover { transform: scale(1.2); } .articleLink { margin-top: 65px; margin-bottom: 80px; display: flex; justify-content: space-between; } .articleLink_left { display: flex; flex-direction: column; } .articleLink_left a { font-size: 16px; display: inline-block; transition: all 0.8s; } .articleLink_left a:nth-child(1) { margin-bottom: 10px; } .articleLink_left a:hover { color: rgb(8, 65, 57); font-weight: 600; } .articleBack { display: flex; align-items: center; font-size: 16px; letter-spacing: 1px; width: 110px; height: 45px; line-height: 45px; border-radius: 18px; background: rgb(242, 245, 249); display: flex; align-items: center; justify-content: center; transition: all 0.4s; } .articleBack img { margin-right: 10px; } /* 涓氬姟棰嗗煙 */ .busBo { display: flex; flex-wrap: wrap; padding-bottom: 30px; } .busBo>li:nth-child(3n+3) { margin-right: 0; } .busBo_common { width: 32%; margin-right: 2%; margin-bottom: 40px; transition: all 1.2s; box-shadow: 1px 1px 10px 1px rgb(220, 220, 220); } .busBo_pic { overflow: hidden; } .busBo_pic img { float: left; transition: all 1s; } .w_white { transition: all 1s; } .busBo_common:hover .w_white { color: #fff; } .busBo_common:hover .busWord { color: #fff; background: rgb(8, 65, 57); } .busWord { padding: 20px; transition: all 0.6s; } .busWord>p:nth-child(1) { font-size: 18px; letter-spacing: 1px; font-weight: bold; margin-bottom: 3px; height: 70px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .busWord>p:nth-child(2) { font-size: 15px; letter-spacing: 1px; } .changePage_con { padding-bottom: 80px; margin-top: 80px; } .changePage { display: flex; align-items: center; justify-content: center; padding: 10px 0 30px 0; } .changePage a { margin-right: 35px; padding: 10px 15px; border: 1px solid #084139; border-radius: 10px; font-size: 16px; transition: all 0.6s; color: #084139; box-sizing: border-box; display: inline-block; transition: all 0.8s; } .changePage>a:last-child { margin-right: 0; border: 1px solid #084139; } .changePage>a:first-child { border: 1px solid #084139; } .changePage a:hover, .changePage a.change_r { background: #084139; color: #fff; border: none; border: 1px solid #084139; } #myvideo { width: 50vw; } /* 渚ц竟鎮诞妗 */ .float-bar { position: fixed; right: 1px; top: 50%; width: 80px; z-index: 105; display: none; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .float-bar li { margin-bottom: 2px; width: 80px; height: 80px; background-color: rgba(8, 65, 57, .8); float: right; border-radius: 5px; transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; } .float-bar li .ico { display: block; height: 80px; background-position: center; background-repeat: no-repeat; cursor: pointer; } .float-bar .tel { position: relative; } .float-bar .tel-con { position: absolute; right: 100px; top: 0; width: 0px; height: 100px; text-align: center; line-height: 58px; padding-top: 20px; background: rgba(8, 65, 57, .8); overflow: hidden; opacity: 0; } .float-bar .tel-con p { font-size: 18px; color: #fff; opacity: 0; transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; } .float-bar li h4 { color: #fff; font-weight: normal; text-align: center; font-size: 14px; opacity: 0; position: relative; top: -10px; transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; } .float-bar .tel .ico { background-image: url(../images/ico-17.png); } .float-bar .shang .ico { background-image: url(../images/ico-18.png); } .float-bar .weix .ico { background-image: url(../images/ico-19.png); } .float-bar .top1 .ico { background-image: url(../images/ico-20.png); } .float-bar li:hover { background-color: rgba(8, 65, 57, 0.8); } .float-bar .tel:hover, .float-bar .shang:hover, .float-bar .weix:hover { width: 100px; height: 100px; } .float-bar li:hover h4 { opacity: 1; } .float-bar .tel:hover .tel-con, .float-bar .shang:hover .tel-con, .float-bar .weix:hover .tel-con { width: 200px; opacity: 1; transition: all 0.5s 0.5s; } .float-bar .tel:hover .tel-con p { opacity: 1; } .float-bar .qr-con { position: absolute; height: 120px; width: 120px; right: 110px; bottom: 58px; background-color: #fff; border: 1px solid #dedede; opacity: 0; visibility: hidden; box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; } .float-bar .weix:hover .qr-con { visibility: visible; opacity: 1; } .fd-link { border-top: 1px solid #ccc; } .fd-tel { border-bottom: 0; } .btn-down-at { display: block; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; transition: all 0.3s ease 0.6s; cursor: pointer; position: absolute; left: 50%; bottom: 50px; z-index: 100; margin-left: -21px; overflow: hidden; } .btn-down-at i { display: block; width: 100%; height: 100%; background: url(../images/ico_16.png) no-repeat center; position: absolute; left: 0; top: 0; animation: downico 1.5s ease-out infinite; } @keyframes downico { 0% { top: 0; opacity: 1; } 35% { top: 50%; opacity: 0; } 65% { top: -50%; opacity: 0; } 100% { top: 0; opacity: 1; } } @media screen and (max-width:1025px) { .float-bar { display: none !important; } .footerLink_con { display: none; } .changePage_con { margin-top: 40px; padding-bottom: 40px; } .changePage { display: flex; align-items: center; justify-content: center; padding: 10px 0 20px 0; } .changePage a { padding: 8px 18px; font-size: 14px; color: rgb(85, 85, 85); box-sizing: border-box; display: inline-block; letter-spacing: 1px; } .changePage>a:last-child { margin-right: 0; border: none; border: 1px solid rgb(180, 180, 180); border-radius: 20px; padding: 8px 35px; background: transparent; } .changePage>a:first-child { border: 1px solid rgb(180, 180, 180); border-radius: 20px; padding: 8px 35px; } } /* 寮圭獥 */ .centerOutcon { position: fixed; top: 20%; left: 15%; right: 10%; bottom: 10%; display: none; z-index: 99; } .close_btn{ display: none; } .centerOut { width: 360px; height: 280px; position: fixed; z-index: 999999999; top: 50%; margin-top: -150px; left: 50%; cursor: pointer; margin-left: -180px; } /* 浜岀骇鑿滃崟鏍 */ .commonNav li { position: relative; } .commonNav li dl { top: 80px; position: absolute; text-align: center; width: 145px; background: #fff; left: 50%; margin-left: -72.5px; -webkit-box-shadow: 0 13px 10px 0px rgba(151, 150, 150, 0.22); box-shadow: 0 13px 10px 0px rgba(8, 65, 57, 0.22); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px } .commonNav li dl dd { 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 } .commonNav li dl dd:last-child { border-bottom: 0 } .commonNav li dl dd a { 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 } .commonNav li dl dd:hover { background: rgb(8, 65, 57) } .commonNav li dl dd:hover a { color: #fff !important; } .commonNav li dl:before { content: ""; position: absolute; border-width: 0 9px 9px; border-style: solid; border-color: transparent transparent #fff; top: -9px; left: 50%; margin-left: -9px } .commonNav 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 .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease } .commonNav li:hover dl { visibility: visible; opacity: 1; filter: alpha(opacity=100); transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; -moz-transform: none } .commonNav li>a:hover { color: rgb(8, 65, 57); } .bg_green a:hover { color: #fff !important; } /* 2021-7-22 */ .lightType { display: flex; flex-wrap: wrap; padding-top: 85px; } .lightType a { display: inline-block; padding: 9px 30px; border-radius: 4px; color: #000; font-size: 16px; letter-spacing: 1px; margin-bottom: 15px; } .bg_blue { background: rgb(8, 65, 57) !important; color: #fff !important; } .gard { padding-bottom: 50px; margin-top: 30px; } #pc1 img{ max-width: 80%; }