* { margin: 0px; padding: 0px; box-sizing: border-box; } ::-webkit-scrollbar { width: 5px; background-color: #F5F5F5; } /* 婊氬姩妲 */ ::-webkit-scrollbar-track { border-radius: 5px; } /* 婊氬姩鏉℃粦鍧 */ ::-webkit-scrollbar-thumb { border-radius: 10px; background: #297849; } html { border: none; overflow-x: hidden; position: relative; margin: 0px auto; height: 100%; font-family: 'PingFang SC', 脙茠脗楼脙鈥毭偮久冣€毭偮兤捗偮冣€毭偮矫冣€毭偮兤捗偮┟兟⒚⑩€毬偮好兟⒚⑩€毬偮γ兤捗偮┟冣€毭偮幻兟⒚⑩€毬嬇? 'Microsoft YaHei', Arial, 脙茠脗漏脙鈥毭偮幻兟⒚⑩€毬嬇撁兤捗偮っ冣€毭偮矫兟⒚⑩€毬呪€? 脙茠脗楼脙鈥毭偮兟⒚⑩€毬偮姑兤捗偮っ冣€毭偮矫兟⒚⑩€毬呪€淃 } @font-face { font-family: YIN; src: url("../font/BAHNSCHRIFT.TTF"); font-weight: normal; font-style: normal; } @font-face { font-family: AIN; src: url("../font/CgFuturaMaxiBd.ttf"); font-weight: normal; font-style: normal; } @font-face { font-family: BIN; src: url("../font/BROWNSTD-REGULAR.WOFF.TTF"); font-weight: normal; font-style: normal; } @font-face { font-family: CIN; src: url("../font/BROWNSTD-LIGHT.WOFF"); font-weight: normal; font-style: normal; } ol, ul, li { list-style: outside none none; } a { text-decoration: none; } a img { border: 0px none; } table, tr, td, th { border-collapse: collapse; padding: 0px; margin: 0px; } img { max-width: 100%; } input, textarea, button { padding: 0px 2px; resize: none; outline: none; border: none; background: none; appearance: none !important; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: rgb(153, 153, 153); } .flex-column { flex-direction: column; } .dis-flex-center-center { display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .color-white { color: white; } .dis-flex-between { display: -webkit-flex; display: flex; justify-content: space-between; } .blue { color: rgb(16, 90, 166) !important; padding-top: 18px; margin-bottom: 10px; } .blue span { margin-left: 10px; } @font-face { font-family: PIN; src: url("../font/PINGFANG REGULAR.TTF"); font-weight: normal; font-style: normal; } @keyframes jello { 0%, 11.1%, 100% { transform: none; } 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { transform: skewX(-0.195312deg) skewY(-0.195312deg); } } .inner { margin: 0px auto; padding-left: 8vw; padding-right: 8vw; } h2, h3, h4, h5, h6 { font-weight: normal; } .dis-flex { display: flex; justify-content: space-between; align-items: center; } .scoll-top { background-color: rgb(255, 255, 255); } .seBg { background-color: rgb(255, 255, 255); } .ibox-scoll { animation: 850ms ease 350ms 1 normal both running fadedown; backface-visibility: visible !important; } header { position: fixed; left: 0px; top: 0px; width: 100%; height: 99px; z-index: 9; color: rgb(255, 255, 255); box-shadow: rgb(220, 220, 220) 0px 2px 10px -1px; } .top { position: fixed; right: 0px; top: 0px; height: 99px; } .index-header { position: relative; } .index-header::after { content: ''; position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 90px; background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0)); } .index-logo, .index-nav-right, .menu-handler { position: relative; z-index: 99; } .scoll-top.index-header::after { display: none; } .seBg .index-header::after { display: none; } header .m1440 { display: flex; align-items: center; height: 100%; } header .img-w { display: none; } header a { color: rgb(255, 255, 255); } .banner img { float: left; } .banner { width: 100%; padding-top: 90px; } .banner .swiper-container { width: 100%; } .banner .swiper-slide { background-size: cover; position: relative; } .banner .swiper-pagination { bottom: 21%; margin-left: 8px; position: absolute !important; } .banner .swiper-pagination-bullet { opacity: 1; border-radius: 50%; background: rgb(255, 255, 255); width: 8px; height: 8px; margin-right: 10px; } .banner .swiper-pagination .swiper-pagination-bullet-active { position: relative; background: rgba(16, 90, 166, 0.9); opacity: 1; margin-right: 10px; } .banner .swiper-pagination .swiper-pagination-bullet-active::before { position: absolute; content: ""; inset: -12px; border: 1px solid rgba(16, 90, 166, 0.9); border-radius: 50%; } .banner .swiper-pagination-fraction, .swiper-pagination-custom, .banner .swiper-container-horizontal>.swiper-pagination-bullets { top: 90%; width: 100%; display: flex; justify-content: flex-start; left: 35px; } .banner .swiper-pagination span:nth-child(2) { position: relative; left: 40px; } .banner .swiper-pagination span:nth-child(3) { position: relative; left: 80px; } .banner .swiper-pagination span:nth-child(4) { position: relative; left: 120px; } .banner .swiper-pagination span:nth-child(5) { position: relative; left: 160px; } .index-header { height: 90px; transition: all 1s ease 0s; position: absolute; z-index: 99; width: 100%; box-sizing: border-box; padding-left: 4vw; padding-right: 4vw; } .index-logo { width: 15%; display: flex; } .index-logo img { width: 100%; margin-top: 9px; max-height: 72px; } .index-logo .img3 { display: none; } .scoll-top .index-logo img { margin-top: 9px; } .seBg .index-logo img { margin-top: 9px; } .index-nav-right { width: 85%; display: flex; align-items: center; justify-content: space-between; } .index-header-right { display: flex; align-items: center; justify-content: space-between; } .index-nav-con { width: 80%; display: flex; justify-content: flex-start; margin-right: 3%; margin-left: 2%; } .telCall { display: flex; align-items: center; padding: 7px 15px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 30px; } .telCall img { margin-right: 5px; } .telCall span { color: rgb(255, 255, 255); font-family: DIN; font-size: 20px; } .index-nav { width: 100%; } .showNav { cursor: pointer; } .index-nav li { transition: all 0.5s ease 0s; float: left; width: calc(12.5%); text-align: center; box-sizing: border-box; font-size: 16px; } .index-nav li>a:first-child { color: rgb(255, 255, 255); display: inline-block; position: relative; transition: all 0.6s ease 0s; } .index-header-right .sousuo img { display: inline-block; vertical-align: bottom; margin-right: 10px; } .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; } .la-close { font-family: sans-serif; font-size: 35px; } .search_sec { position: fixed; top: 0px; width: 100%; height: 100%; background-color: rgba(26, 32, 49, 0.95); z-index: 2147483647; opacity: 0; visibility: hidden; transform: scale(0.9); } .search_sec.active { opacity: 1; visibility: visible; transform: scale(1); } .search_sec.active .search_field { margin: 0px; } .search_field { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; margin-top: -50px; transition: all 1s ease-in-out 0s; } .search_field .container { max-width: 800px; margin: 0px auto; } .search_field form { position: relative; } .search_field form input { width: 100%; height: 66px; background-color: rgb(229, 229, 229); color: rgb(38, 38, 38); font-size: 17px; padding: 0px 30px; border: 0px; box-sizing: border-box; border-radius: 5px; } .search_field form button { position: absolute; top: 24px; right: 24px; background-color: inherit; border: 0px; } .close-search { position: absolute; top: 60px; right: 70px; color: rgb(198, 199, 202); font-size: 40px; } .close-search:hover { color: rgb(198, 199, 202); } .erweima-pic img { height: 120px; width: 120px; } .navH>a:first-child { line-height: 90px; } .navH>a:first-child { position: relative; transition: all 0.5s; } .scoll-top .navH>a:first-child { position: relative; transition: all 0.5s; } .seBg .navH>a:first-child { position: relative; transition: all 0.5s; } .index-nav li.on>a:first-child { color: #287846; } .index-nav li.on>a:first-child::after { background: url(../images/r2.png); height: 8px; width: 12px; background-size: 100%; background-repeat: no-repeat; transform: rotateZ(-180deg); } .index-nav li>a:first-child { font-size: 16px; position: relative; } .index-nav li>a:first-child::after { position: absolute; content: ''; top: 42px; height: 8px; width: 12px; right: -20px; background: url(../images/r3.png); background-repeat: no-repeat; transition: all 0.3s; background-size: 100%; z-index: 99; } .index-nav li>a:first-child:hover { color: #287846; } .index-nav li>a:first-child:hover::after { transform: rotateZ(-180deg); background: url(../images/r2.png); height: 8px; width: 12px; background-size: 100%; background-repeat: no-repeat; } .ibox-scoll { animation: 850ms ease 250ms 1 normal both running fadedown; backface-visibility: visible !important; } .seBg .navH.on>a:first-child, .scoll-top .navH.on>a:first-child { color: rgb(41, 120, 73); } .seBg .index-nav li>a:first-child, .scoll-top .index-nav li>a:first-child { color: rgb(51, 51, 51); } .seBg .index-nav li>a:first-child::after, .scoll-top .index-nav li>a:first-child::after { position: absolute; content: ''; top: 42px; height: 8px; width: 12px; right: -20px; background: url(../images/r1.png); background-repeat: no-repeat; transition: all 0.3s; background-size: 100%; z-index: 99; } .seBg .index-nav li.on>a:first-child::after, .scoll-top .index-nav li.on>a:first-child::after { background: url(../images/r2.png); height: 8px; width: 12px; background-size: 100%; background-repeat: no-repeat; transform: rotateZ(-180deg); } .seBg .index-nav li>a:first-child:hover, .scoll-top .index-nav li>a:first-child:hover { color: #287846; } .seBg .index-nav li>a:first-child:hover::after, .scoll-top .index-nav li>a:first-child:hover::after { transform: rotateZ(-180deg); background: url(../images/r2.png); height: 8px; width: 12px; background-size: 100%; background-repeat: no-repeat; } .xnav { display: flex; align-items: center; justify-content: center; background: rgb(245, 245, 245); padding: 25px 0; position: fixed; left: 0; right: 0; } .tran { transform: translateY(0px); transition: all 0.5s; } .xnav a { color: rgb(85, 85, 85); padding: 0 20px; display: flex; align-items: center; transition: all 0.5s; } .xnav a span { display: inline-block; width: 5px; height: 5px; background: rgb(170, 170, 170); margin-right: 12px; border-radius: 50%; transition: all 0.5s; } .xnav a:hover { color: rgb(41, 120, 73); } .xnav a:hover span { background: rgb(41, 120, 73); } @-webkit-keyframes fadedown { 0% { transform: translateY(-100%); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } @keyframes fadedown { 0% { transform: translateY(-100%); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } .logo .img2 { display: none; } .scoll-top .logo .img1 { display: none; } .scoll-top .logo .img2 { display: block; } .scoll-top .logo .img3 { display: none; } .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 .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; } .seBg .logo .img1 { display: none; } .seBg .logo .img2 { display: block; } .seBg .logo .img3 { display: none; } .seBg .nav a:hover .txt, .seBg .nav a.hov .txt { border-color: rgb(8, 65, 57); } .seBg .nav>li>a::before { border-top: 5px solid rgb(8, 65, 57); } .seBg .erweima-pic { position: absolute; top: 40px; left: -85px; z-index: 99; display: none; width: auto; } .seBg .erweima-pic img { height: 120px; width: 120px; position: relative; left: 43px; } .top { position: fixed; left: 0px; top: 0px; width: 100%; z-index: 9990 !important; } .menu-handler { width: 64px; float: right; height: 54px; display: none; cursor: pointer; } .menu-handler span { position: relative; display: block; margin: 25.5px auto 0px; width: 28px; height: 3px; background-color: rgb(41, 120, 73); transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s; } .menu-handler span::after, .menu-handler span::before { content: ""; position: absolute; display: inline-block; width: 100%; height: 3px; left: 0px; background-color: rgb(41, 120, 73); transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s; } .menu-handler span::before { top: -9px; transition-property: top, transform; } .menu-handler span::after { bottom: -9px; transition-property: bottom, transform; } .menu-handler.active span { background-color: transparent; transition-delay: 0s, 0s; } .menu-handler.active span::after, .menu-handler.active span::before { transition-delay: 0s, 0.3s; } .menu-handler.active span::before { top: 0px; transform: rotate(45deg); } .menu-handler.active span::after { bottom: 0px; transform: rotate(-45deg); } .menuBox a:link, .menuBox a:visited { color: rgb(255, 255, 255); } .menuBox a:active, .menuBox a:hover { color: rgb(255, 255, 255); } .menuBox { background-color: rgba(0, 0, 0, 0.8); color: rgb(255, 255, 255); position: fixed; display: none; right: 0px; top: 0px; height: 100vh; overflow: hidden auto; transform: translateX(100%); width: 400px; z-index: 980; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; } .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 rgb(219, 219, 219); border-bottom: 1px solid rgb(219, 219, 219); background-color: rgb(232, 232, 232); } .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 22px 10px 80px; line-height: 1.4; color: rgb(51, 51, 51); font-size: 15px; } .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; opacity: 0; transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1) 0s; } .menuOpen .pusher-black { visibility: visible; opacity: 1; } .menuOpen .menuBox { transform: translateX(0px); } .slideTop img { float: left; } .sideWord { position: absolute; top: 42%; left: 7vw; z-index: 99; color: rgb(255, 255, 255); opacity: 0.95; } .s1 { font-size: 3vw; margin-bottom: 30px; letter-spacing: 1px; position: relative; } .s2 { width: 3vw; height: 3px; background: #fff; } .index-header-right a { display: block; float: left; margin-left: 0; color: #fff !important; } .scoll-top .index-header-right a { color: rgb(20, 20, 24) !important; } .seBg .index-header-right a { color: rgb(20, 20, 24) !important; } .index-header-right .sousuo img { display: inline-block; vertical-align: bottom; margin-right: 10px; } .scoll-top .index-header::after { display: none; } .seBg .index-header::after { display: none; } .seBg .index-header::after { display: none; } .topEwm { display: flex; align-items: center; font-size: 16px; color: #fff; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 25px; margin-right: 20px; width: 8em; } .topPhone { display: flex; align-items: center; font-size: 18px; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 25px; color: #fff; } .tops { background: url("../images/oa1.png") left center no-repeat; width: 20px; height: 19px; display: inline-block; margin-right: 5px; } .phone { background: url("../images/tel1.png") left center no-repeat; width: 16px; height: 16px; display: inline-block; margin-right: 5px; } .search-btn { background: url("../images/search.png") left center no-repeat; width: 40px; height: 40px; } .scoll-top { box-shadow: rgba(235, 235, 235, 0.6) 0px 1px 0px; } .scoll-top .topEwm { color: rgb(51, 51, 51); border: 1px solid rgb(225, 225, 225); } .scoll-top .topPhone { color: rgb(51, 51, 51); border: 1px solid rgb(225, 225, 225); } .scoll-top .tops { background: url("../images/oa.png") left center no-repeat; text-indent: 30px; width: 28px; height: 30px; display: inline-block; } .scoll-top .phone { background: url("../images/tel.png") left center no-repeat; text-indent: 30px; width: 28px; height: 30px; display: inline-block; } .scoll-top .search-btn { background: url("../images/search1.png") left center no-repeat; text-indent: 30px; width: 40px; height: 40px; } .seBg { box-shadow: rgba(235, 235, 235, 0.6) 0px 1px 0px; } .seBg .topEwm { color: rgb(51, 51, 51); border: 1px solid rgb(225, 225, 225); display: flex; justify-content: center; } .seBg .topPhone { color: rgb(51, 51, 51); border: 1px solid rgb(225, 225, 225); } .seBg .tops { background: url("../images/oa.png") left center no-repeat; text-indent: 30px; width: 28px; height: 30px; display: inline-block; } .seBg .phone { background: url("../images/tel.png") left center no-repeat; text-indent: 30px; width: 28px; height: 30px; display: inline-block; } .seBg .search-btn { background: url("../images/search1.png") left center no-repeat; text-indent: 30px; width: 40px; height: 40px; } .hideEwm { opacity: 0; position: absolute; width: 100px; left: -42px; top: 45px; z-index: 999; transition: all 0.6s; } .fl { float: left; } .fr { float: right; } /* 氓鈥β趁ぢ号矫λ嗏€樏ぢ宦 */ .About { display: flex; margin-top: 100px; margin-bottom: 90px; width: 100%; padding-right: 8vw; position: relative; } .abPic { width: 45%; overflow: hidden; margin-right: 8%; } .abPic img { float: left; width: 100%; min-height: 660px; } .abRight { width: 47%; position: relative; } .abBg { position: absolute; top: 20%; right: 30px; width: 40%; } .abtit1 { font-size: 48px; letter-spacing: 1px; color: #000; margin-bottom: 22px; position: relative; z-index: 99; margin-top: 10px; } .abtit2 { margin-top: 10px; font-size: 30px; letter-spacing: 1px; color: #000; margin-bottom: 35px; position: relative; z-index: 99; } .abDesc p { font-size: 16px; color: rgb(102, 102, 102); line-height: 33px; margin-bottom: 23px; position: relative; z-index: 99; text-indent: 2em; } .Adv { display: flex; align-items: center; margin-top: 45px; margin-bottom: 80px; justify-content: space-between; position: relative; z-index: 99; } .year { color: #287846; font-size: 60px; font-family: AIN; letter-spacing: 1px; position: relative; z-index: 99; } .num { color: #287846; font-size: 22px; margin-left: 10px; font-weight: 600; } .adv1 { margin-bottom: 7px; height: 75px; width: 220px; } .adv2 { margin-top: 5px; font-size: 16px; color: rgb(102, 102, 102); } .num1 { font-size: 18px; } .abFlex { display: flex; align-items: center; position: relative; z-index: 99; } .abPoint { margin-right: 60px; } .abPoint span { display: inline-block; width: 4px; height: 4px; background: #287846; border-radius: 50%; margin-right: 5px; } .abPoint span:nth-child(2) { opacity: 0.7; } .abPoint span:nth-child(3) { opacity: 0.5; } .abLink { display: flex; transition: all 0.5s; align-items: center; } .abLink:hover .link1 { color: rgb(41, 120, 73); text-shadow: 1px 0 0 rgb(41, 120, 73); border-bottom: 1px solid rgb(41, 120, 73); } .abLink:hover { transform: translateX(15px) } .abLink:hover .link2 { transform: translateX(15px) rotateZ(360deg); } .link1 { color: #333333; font-size: 16px; padding: 0 90px 16px 75px; border-bottom: 1px solid rgb(170, 170, 170); display: flex; align-items: end; position: relative; top: 0; transition: all 0.5s; } .link2 { transition: all 0.5s; position: relative; left: -40px; top: 0; border-radius: 50%; } .zy-brand { position: relative; } .brandImg { position: absolute; top: 0; left: 0; } .pubTit { padding: 55px 0; text-align: center; position: relative; z-index: 99; } .pubTit>p:nth-child(1) { font-size: 48px; margin-bottom: 5px; color: #000; } .pubTit>p:nth-child(2) { font-size: 24px; color: #999999; letter-spacing: 10px; font-family: BIN; } /* 忙艙聧氓艩隆盲录藴氓艩驴 */ .Wis { position: relative; } .Wis .gallery-thumbs { width: 70% !important; margin: auto; z-index: 999; position: absolute; bottom: 100px; margin-left: 15%; } .Wis .gallery-thumbs .swiper-wrapper {} .Wis .gallery-thumbs .swiper-slide { display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; } .Wis .gallery-top {} .Wis .gallery-top .swiper-slide { position: relative; height: 780px; width: 100% !important; cursor: pointer; background-size: cover !important; } .serIcon { width: 66px; height: 66px; border: 2px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .ico1 { position: absolute; transition: all 0.4s; } .ico2 { position: absolute; transform: translateY(-200%); transition: all 0.4s; opacity: 0; } .Wis .gallery-thumbs .swiper-slide-thumb-active .serIcon { background: #fff; } .Wis .gallery-thumbs .swiper-slide-thumb-active .ico2 { transform: translateY(0%); opacity: 1; } .serName { font-size: 16px; color: #fff; margin-top: 20px; } .serWide { width: 68%; margin: auto; background: rgba(41, 120, 73, 0.9); padding: 45px 60px; font-size: 14px; color: #fff; line-height: 34px; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 230px; } .w1 { text-align: center; margin-bottom: 60px; } .w2 { display: flex; align-items: center; letter-spacing: 1px; font-size: 16px; } .w2 img { margin-right: 10px; } .Service { position: relative; } .serTit { position: absolute; font-size: 48px; color: #fff; text-align: center; top: 70px; z-index: 999; width: 100%; } /* 茅隆鹿莽鈥郝β∷喢ぢ锯€ */ .caseTit { padding: 45px 0; text-align: center; position: relative; z-index: 99; } .caseTit>p:nth-child(1) { font-size: 48px; margin-bottom: 5px; color: #000; } .caseTit>p:nth-child(2) { font-size: 24px; color: #999999; letter-spacing: 10px; } .Case { display: flex; flex-wrap: wrap; } .Case>a:nth-child(3n+3) { margin-right: 0; } .casePart { width: 31.3%; margin-right: 3%; position: relative; transition: all 0.5s; overflow: hidden; } .casePart:hover img { transform: scale(1.15); } .casePart img { float: left; transition: all 0.8s; width: 100%; height: 100%; } .ca2 { text-align: center; font-size: 22px; color: #fff; width: 100%; z-index: 999; transition: all 0.35s; position: absolute; bottom: 0; height: 52px; background-image: linear-gradient(transparent, rgb(41, 120, 73, 0.8)); } .casePart:hover .ca2 { height: 62px; background-image: linear-gradient(rgba(41, 120, 73, 0.1), rgb(1, 120, 103)); } /* 忙鈥撀懊┾€斅幻碘€灻 */ .News { background: url(../images/newsBg.jpg); background-repeat: no-repeat; background-size: cover; padding-bottom: 60px; margin-top: 65px; } .newsTit { padding: 60px 0 30px 0; text-align: center; position: relative; z-index: 99; } .newsTit>p:nth-child(1) { font-size: 48px; margin-bottom: 5px; color: #000; } .newsTit>p:nth-child(2) { font-size: 24px; color: #999999; letter-spacing: 10px; } .newsBox { display: flex; align-items: center; margin-bottom: 45px; justify-content: center; } .newsBox a { letter-spacing: 1px; color: rgb(51, 51, 51); font-size: 22px; border-radius: 4px; box-shadow: 1px 1px 8px 1px rgb(230, 230, 230); margin: 0 13px; background: #fff; padding: 12px 50px; } .newSwtich { display: flex; align-items: center; } .newSwtich p { letter-spacing: 1px; color: rgb(51, 51, 51); font-size: 22px; border-radius: 4px; box-shadow: 1px 1px 8px 1px rgb(230, 230, 230); margin: 0 13px; background: #fff; padding: 12px 50px; transition: all 0.5s; cursor: pointer; } .newSwtich .on { background: rgb(41, 120, 73); color: #fff; } .newsFlex { display: flex; flex-wrap: wrap; } .newsFlex>a:nth-child(3n+3) { margin-right: 0; } .newsPart { width: 31.3%; margin-right: 3%; position: relative; transition: all 0.5s; overflow: hidden; background: #fff; box-shadow: 1px 1px 10px 1px rgb(240, 240, 240); } .newsImg { overflow: hidden; } .newsImg img { float: left; width: 100%; } .newsImg { overflow: hidden; position: relative; transition: all 0.5s; } .newsImg img { float: left; width: 100%; } .newsImg::before { content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0px; } .newsImg img { float: left; transition: all 0.8s; } .newsPart:hover .newsImg img { transform: scale(1.12); } .newsPart:hover .newsImg::before { animation: gradient-rectangle 1.4s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.18, 0.96); } .newsPart:hover .newsDesc::after { height: 100%; } .newsPart:hover .n1, .newsPart:hover .n2, .newsPart:hover .n3, .newsPart:hover .n4 { color: #fff; } .newsPart:hover .n4 { border-bottom: 1px solid #fff; } .newsDesc { padding: 20px 25px 25px 25px; position: relative; } .newsDesc::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 0; background: rgb(41, 120, 73); transition: all 0.5s; } .n1 { font-size: 14px; color: #888888; position: relative; z-index: 99; transition: all 0.5s; } .n2 { font-size: 22px; color: #333333; line-height: 32px; margin-bottom: 18px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; position: relative; z-index: 99; transition: all 0.5s; } .n3 { font-size: 14px; color: #888888; line-height: 24px; margin-bottom: 35px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; position: relative; z-index: 99; transition: all 0.5s; height: 48px; } .n4 { display: inline; font-size: 14px; color: rgb(102, 102, 102); border-bottom: 1px solid rgb(110, 110, 110); position: relative; z-index: 99; transition: all 0.5s; } /* 盲赂拧氓艩隆氓聬藛盲陆艙 */ .Cooper { display: flex; } .coSame { width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 300px; transition: all 0.5s; cursor: pointer; } .coSame:hover .co1 { background: rgb(41, 120, 73); transform: rotateY(180deg); } .co1 { margin-top: 12px; width: 80px; height: 80px; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.5s; } .co1 img { transition: all 0.5s; } .co2 { font-size: 26px; color: #fff; margin-top: 25px; } .Cooper>a:nth-child(1) { background: url(../images/j1.jpg); background-repeat: no-repeat; background-size: cover; } .Cooper>a:nth-child(2) { background: url(../images/j2.jpg); background-repeat: no-repeat; background-size: cover; } /* footer */ footer { padding-top: 45px; background: url(../images/foot.jpg); background-size: cover; background-repeat: no-repeat; } .foot { display: flex; justify-content: space-between; padding-bottom: 25px; } .footp { color: #fff; font-weight: 600; font-size: 16px; margin-bottom: 30px; } .footA a { font-size: 14px; margin-bottom: 13px; color: rgb(170, 170, 170); display: block; transition: all 0.4s; } .foot>div:nth-child(6) { text-align: center; } .footA a:hover { color: #fff; } .footEwm { display: flex; } .footEwm img { width: 110px; } .footBottom { padding: 23px 8vw; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgb(255, 255, 255, 0.1); } .footBottom p { font-size: 14px; color: rgb(170, 170, 170); } .foLocal { font-size: 15px; color: rgb(170, 170, 170); cursor: pointer; appearance: none; background: url("../images/down.png") 96% center no-repeat scroll transparent; border: none; letter-spacing: 1px; width: 85px; } .foLocal:focus { text-decoration: #000; } /* 盲潞潞氓艩鈥好碘€灻β郝 */ .Source { background: #fff; box-shadow: 1px 1px 8px 1px rgb(235, 235, 235); } .sideNav { display: flex; align-items: center; justify-content: space-between; } .localNav a { position: relative; margin-right: 50px; font-size: 18px; color: rgb(102, 102, 102); font-weight: 600; position: relative; height: 90px; line-height: 90px; } .localNav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -33px; height: 3px; width: 0; transition: all 0.5s; background: #287846; } .localNav .on { width: 100%; color: #287846; } .localNav .on::after { width: 100%; } .localNav a:hover::after { width: 100%; } .localNav a:hover { color: #287846; } .Back { display: flex; align-items: center; font-size: 18px; color: rgb(51, 51, 51); position: relative; height: 18px; overflow: hidden; transition: all 0.4s; } .Back:hover { transform: translateX(-10px); text-shadow: 1px 0 0 rgb(41, 120, 73); } .Back img { margin-left: 10px; } .ba1 { transition: all 0.4s; } .ba2 { position: absolute; right: 0; transform: translateY(-100%); transition: all 0.4s; } .Back:hover { color: #287846; } .Back:hover .ba1 { opacity: 0; } .Back:hover .ba2 { transform: translateY(0); } /* 盲潞潞氓艩鈥好碘€灻β郝 */ .jobKindcon { margin-bottom: 55px; margin-top: 18px; } .jobMore { display: flex; padding: 25px 40px; background: rgb(255, 255, 255); font-size: 18px; color: rgb(51, 51, 51); letter-spacing: 1px; cursor: pointer; align-items: center; } .jobNeed { margin: 0 40px; padding: 40px 5px; background: rgb(255, 255, 255); display: none; border-top: 1px solid rgb(229, 229, 229); } .jobNeed>p:last-child { margin-bottom: 0px; } .jobNeed p { font-size: 15px; color: rgb(102, 102, 102); line-height: 30px; letter-spacing: 1px; } .Join { box-shadow: rgba(33, 72, 168, 0.2) 1px 1px 10px 1px; padding-bottom: 70px; } .jobTitle { margin-top: 60px; } .jobTit { margin-top: 45px; margin-bottom: 30px; text-align: center; } .jobTit>p:nth-child(1) { color: rgb(0, 0, 0); margin-bottom: 15px; font-weight: 600; } .jobTit>p:nth-child(2) { color: rgb(31, 77, 158); margin-bottom: 20px; font-weight: 600; } .jobMenu { display: flex; align-items: center; justify-content: space-between; background: rgb(245, 245, 245); padding: 30px 15px; font-size: 18px; font-weight: 600; letter-spacing: 1px; } .jobFlex { display: flex; align-items: baseline; margin-bottom: 18px; } .j1 { font-size: 16px; color: rgb(51, 51, 51); font-weight: 600; width: 10em; } .jobNeed>ul:last-child { margin-bottom: 0px; } .jobMenu p { width: 20%; } .jobTitle { display: flex; padding: 25px 40px; background: rgb(245, 245, 245); border: 1px solid rgb(245, 245, 245); } .jobTitle p { font-size: 20px; color: rgb(51, 51, 51); } .jobTitle p:nth-child(1) { width: 25%; } .jobTitle p:nth-child(2) { width: 20%; } .jobTitle p:nth-child(3) { width: 18%; } .jobTitle p:nth-child(4) { width: 14%; } .jobTitle p:nth-child(5) { width: 18%; } .jobTitle p:nth-child(6) { width: 5%; text-align: center; } .jobMore li:nth-child(1) { width: 25%; } .jobMore li:nth-child(2) { width: 20%; } .jobMore li:nth-child(3) { width: 18%; } .jobMore li:nth-child(4) { width: 14%; } .jobMore li:nth-child(5) { width: 18%; } .jobMore li:nth-child(6) { width: 5%; text-align: center; } .jobMore li:nth-child(6) img { margin: auto; } .j2 { width: 80%; } .jhs { transform: scale(1.1); box-shadow: rgb(220, 220, 220) 1px 1px 10px 1px; } .jobKind { border: 1px solid rgb(220, 220, 220); margin-bottom: 18px; } .giveTo { display: flex; align-items: center; height: 50px; justify-content: center; border-radius: 25px; width: 180px; color: #fff; font-size: 18px; background: rgb(41, 120, 73); margin-top: 50px; transition: all 0.5s; } .giveTo:hover { transform: translateY(6px); box-shadow: 1px 1px 15px 1px rgba(41, 120, 73, 0.6); } .giveTo img { margin-right: 12px; } /* 忙聬艙莽麓垄盲赂颅氓驴茠 */ .returnTo { display: inline-block; width: 170px; text-align: center; font-size: 16px; color: rgb(255, 255, 255); height: 56px; line-height: 56px; letter-spacing: 1px; margin: 0px; cursor: pointer; } .returnTo .w { background: rgb(229, 229, 229); position: relative; transition: all 0.25s ease 0s; transform-style: preserve-3d; pointer-events: none; } .returnTo .f { background: rgb(229, 229, 229); color: rgb(51, 51, 51); display: flex; justify-content: center; align-items: center; } .returnTo .t { padding: 0px 15px; position: absolute; background: rgb(41, 120, 73); width: 100%; height: 100%; left: 0px; display: flex; justify-content: center; color: rgb(255, 255, 255); top: -48px; transform-origin: center bottom; transform: rotateX(90deg); backface-visibility: hidden; align-items: center; } .returnTo:hover .w { transform: translateY(30px) translateZ(-30px) rotate3d(1, 0, 0, -90deg); } .returnTo img { margin-right: 12px; position: relative; } .Search { background: rgb(250, 250, 250); padding: 3vw 60px 2.5vw 60px; margin-top: -90px; position: relative; z-index: 99; } .seaForm { display: flex; align-items: center; } .seaForm input { width: 69%; background: #fff; height: 56px; line-height: 56px; padding: 20px 40px; color: rgb(170, 170, 170); font-size: 16px; border: 1px solid rgb(238, 238, 238); } .seaForm button { margin: 0 2.5%; width: 170px; height: 56px; line-height: 56px; text-align: center; color: #fff; font-size: 20px; background: rgb(41, 120, 73); cursor: pointer; } .re1 { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .seaHot { font-size: 16px; color: rgb(51, 51, 51); margin-top: 32px; } .sultTit { padding: 45px 0; font-size: 20px; color: #888888; } .sultTit .gw { font-weight: 600; } .gw { color: #287846; } .resultBox { box-shadow: 1px 1px 10px 1px rgb(235, 235, 235); border-radius: 5px; } .resultBox>a:last-child { border-bottom: none; } .reSame { border-bottom: 1px solid rgb(229, 229, 229); padding: 35px 25px; display: flex; justify-content: space-between; align-items: center; color: rgb(51, 51, 51); font-size: 18px; transition: all 0.4s; background: #fff; } .reSame:hover { transform: scale(1.02); box-shadow: 1px 1px 10px 1px rgba(41, 120, 73, 0.6); } .re2 { font-size: 14px; } .Result { margin-bottom: 60px; } /* 莽驴禄茅隆碌 */ .changePage { padding-bottom: 90px; display: flex; align-items: center; justify-content: center; } .changePage p { margin-right: 9px; font-size: 15px; color: rgb(51, 51, 51); } .changePage p span { color: #287846; font-family: 'DIN'; margin: 0 8px; } .changePage a { padding: 10px 15px; border: 1px solid rgb(229, 229, 229); border-radius: 5px; font-size: 14px; letter-spacing: 1px; text-align: center; color: rgb(51, 51, 51); margin-right: 12px; transition: all 0.4s; border-radius: 4px; } .changePage a:hover { background: #287846 !important; color: #fff; } .changePage .on { background: #287846 !important; color: #fff; } .getSize { cursor: pointer; transition: all 0.5s; } .pageEnter input { font-size: 14px; letter-spacing: 1px; color: rgb(51, 51, 51); padding: 8px 0; border: 1px solid rgb(208, 208, 208); border-radius: 5px; width: 45px; text-align: center; } .changePage>a:last-child { margin-right: 0; background: rgb(242, 242, 242); } .changePage>a:first-child { background: rgb(242, 242, 242); } /* 猫聛鈥澝陈幻λ嗏€樏ぢ宦 */ .Contact { display: flex; margin-top: 75px; box-shadow: 1px 1px 10px 1px rgb(230, 230, 230); border-radius: 10px; margin-bottom: 75px; } .Message { width: 58%; margin-right: 4%; padding: 40px 0 55px 45px; } .me1 { font-size: 34px; color: rgb(51, 51, 51); margin-bottom: 15px; } .me2 { font-size: 14px; color: rgb(102, 102, 102); } .me3 { font-size: 34px; color: rgb(255, 255, 255); margin-bottom: 15px; } .me4 { font-size: 14px; color: rgba(255, 255, 255, 0.6); padding-bottom: 15px; } .messForm { padding-top: 25px; } .messFlex { display: flex; flex-wrap: wrap; } .messFlex>p:nth-child(2n+2) { margin-right: 0; } .messPut { width: 48%; margin-right: 4%; display: flex; align-items: center; padding: 18px 25px; border-radius: 25px; background: rgb(246, 246, 246); letter-spacing: 1px; margin-top: 25px; } .messPut input { font-size: 16px; color: rgb(102, 102, 102); width: 90%; } .Message input::-webkit-input-placeholder, .Message textarea::-webkit-input-placeholder { color: rgb(102, 102, 102); } .messPut img { margin-right: 12px; } .Message textarea { background: rgb(246, 246, 246); height: 140px; padding: 18px 25px; font-size: 16px; color: rgb(102, 102, 102); letter-spacing: 1px; border-radius: 25px; margin-top: 25px; width: 100%; } .Message button { height: 58px; line-height: 58px; color: #fff; text-align: center; background: rgb(41, 120, 73); border-radius: 25px; margin-top: 35px; width: 50%; margin-left: 25%; font-size: 20px; letter-spacing: 1px; transition: all 0.5s; cursor: pointer; } .Message button:hover { color: rgb(41, 120, 73); border: 1px solid rgb(41, 120, 73); background: transparent; box-shadow: 1px 1px 15px 1px rgba(41, 120, 73, 0.2); } .Type { width: 38%; padding: 40px 45px; background: url(../images/conall.jpg); background-repeat: no-repeat; background-size: cover; } .conType { margin-top: 35px; display: flex; align-items: flex-start; cursor: pointer; transition: all 0.5s; } .conType:hover { transform: translateX(12px); } .conType:hover img { animation: jello 1.4s; } .conType>li:nth-child(2) { width: 90%; } .conType img { transition: all 0.5s; width: 32px; } .conType>li:nth-child(1) { margin-right: 10px; width: 45px; } .conType>li:nth-child(2)>p:nth-child(1) { font-size: 20px; color: #fff; margin-bottom: 10px; } .conType>li:nth-child(2)>p:nth-child(2) { font-size: 24px; color: #fff; } .f16 { font-size: 16px !important; } /* 猫碌掳猫驴鈥好λ嗏€樏ぢ宦?猫聧拢猫陋鈥懊碘€灻绰 */ .Brand { display: flex; padding-top: 50px; } .Brand>a:last-child { margin-right: 0px; } .brSame { width: 33.3%; margin-right: 4%; padding: 23px; border: 2px solid rgb(238, 238, 238); display: flex; align-items: center; justify-content: space-between; position: relative; transition: all 0.5s ease 0s; background: #fff; } .brSame::after { content: ""; position: absolute; left: 0px; right: 0; top: 0; bottom: 0; height: 0px; background-image: url("../images/idbg.jpg"); background-size: 100% 100%; background-repeat: no-repeat; transition: all 0.5s ease 0s; } .brSame:hover::after { background-image: url("../images/idbg.jpg"); background-size: 100% 100%; background-repeat: no-repeat; height: 100%; } .brSame:hover .br2 { color: rgba(255, 255, 255, 0.9); } .br1 { color: rgb(197, 197, 197); font-size: 24px; margin-bottom: 30px; position: relative; z-index: 99; } .br2 { color: rgb(54, 54, 54); font-size: 30px; letter-spacing: 1px; position: relative; z-index: 99; } .brIcon { position: relative; z-index: 99; } .Brand .brIcon, .Brand .br1, .Brand .br2 { position: relative; z-index: 99; transition: all 0.6s ease 0s; } .brand1 .brIcon { width: 60px; height: 70px; background: url("../images/id2.png") 0% 0% / cover no-repeat; } .brand2 .brIcon { width: 70px; height: 70px; background: url("../images/id1.png") 0% 0% / cover no-repeat; } .brand3 .brIcon { width: 60px; height: 70px; background: url("../images/id3.png") 0% 0% / cover no-repeat; } .brand1:hover .brIcon { background: url("../images/id22.png"); } .brand2:hover .brIcon { background: url("../images/id11.png"); } .brand3:hover .brIcon { background: url("../images/id33.png"); } .brand1.on .brIcon { background: url("../images/id22.png"); } .brand2.on .brIcon { background: url("../images/id11.png"); } .brand3.on .brIcon { background: url("../images/id33.png"); } .brSame.on .br2 { color: rgba(255, 255, 255, 0.9); } .brSame.on { background: url("../images/idbg.jpg"); } .bgg { background: rgb(248, 248, 248); } .Honor { display: flex; flex-wrap: wrap; padding-bottom: 70px; } .Honor>div:nth-child(4n+4) { margin-right: 0; } .hoFlex { width: 23.5%; margin-right: 2%; margin-top: 2%; background: #fff; padding: 30px; box-shadow: 1px 1px 10px 1px rgb(245, 245, 245); transition: all 0.6s; cursor: pointer; } .hoFlex:hover { box-shadow: 1px 1px 10px 1px rgb(220, 220, 220); } .hoFlex:hover .hoImg img { transform: scale(1.05); } .hoDesc { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .hoName { font-size: 22px; color: rgb(51, 51, 51); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .hoImg { overflow: hidden; } .hoImg img { float: left; width: 100%; transition: all 0.5s; } /* 忙鈥撀懊┾€斅幻ぢ嘎ヂ科 */ .Art { padding-top: 15px; margin-bottom: 70px; } .artSame { margin-top: 30px; display: flex; border: 1px solid rgb(230, 230, 230); transition: all 0.5s; } .artPic { width: 25%; overflow: hidden; } .artPic img { width: 100%; float: left; height: 100%; transition: all .5s; } .artDesc { width: 70%; padding: 1.5vw 30px; } .ar1 { font-weight: 600; color: #287846; font-size: 24px; margin-bottom: 1vw; } .ar2 { margin-bottom: 1vw; } .ar2 span { font-size: 14px; color: rgb(136, 136, 136); margin-right: 40px; } .ar3 { font-size: 14px; color: rgb(136, 136, 136); line-height: 23px; width: 88%; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 1.3vw; } .ar4 { font-size: 14px; color: rgb(102, 102, 102); display: inline; position: relative; transition: all 0.5s; } .ar4::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgb(102, 102, 102); transition: all .5s; width: 100%; } .event_item .more { cursor: pointer; } .artSame:hover { transform: scale(1.02); } .artSame:hover .artPic img { transform: scale(1.1); } .artSame:hover .ar4 { color: rgb(41, 120, 73); } .artSame:hover .ar4::after { background-color: rgb(41, 120, 73); } .artSame:hover .artRow::after { width: 100%; } .artRow { width: 5%; border-left: 1px solid rgb(230, 230, 230); display: flex; align-items: center; justify-content: center; position: relative; } .artRow::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: rgb(41, 120, 73); transition: all .5s; width: 0; } .artRow .arrow { position: relative; z-index: 99; display: inline-block; width: 12px; height: 20px; background: url(../images/sp1.png); background-repeat: no-repeat; background-size: cover; transition: all 0.5s; } .artSame:hover .arrow { width: 12px; height: 20px; background: url(../images/sp2.png); background-repeat: no-repeat; background-size: cover; } .backTo { display: inline-block; width: 150px; text-align: center; font-size: 16px; color: rgb(255, 255, 255); height: 47px; line-height: 47px; margin: 0px; border-radius: 30px; } .backTo .w { background: rgb(41, 120, 73); position: relative; transition: all 0.25s ease 0s; transform-style: preserve-3d; pointer-events: none; border-radius: 30px; color: #fff; } .backTo .f { background: rgb(41, 120, 73); color: rgb(51, 51, 51); display: flex; justify-content: center; align-items: center; border-radius: 30px; color: #fff; } .backTo .t { padding: 0px 15px; position: absolute; border: 1px solid rgb(41, 120, 73); width: 100%; height: 100%; background: #fff; left: 0px; display: flex; justify-content: center; color: rgb(41, 120, 73); top: -48px; transform-origin: center bottom; transform: rotateX(90deg); backface-visibility: hidden; align-items: center; border-radius: 30px; } .backTo:hover .w { transform: translateY(30px) translateZ(-30px) rotate3d(1, 0, 0, -90deg); } .backTo img { margin-left: 10px; position: relative; } .readMore { display: inline-block; width: 20%; text-align: center; font-size: 16px; color: rgb(255, 255, 255); height: 55px; line-height: 55px; margin: 0px; border-radius: 0; margin-top: 50px; margin-left: 40%; } .readMore .w { background: rgb(41, 120, 73); position: relative; transition: all 0.25s ease 0s; transform-style: preserve-3d; pointer-events: none; border-radius: 0; color: #fff; } .readMore .f { background: rgb(41, 120, 73); color: rgb(51, 51, 51); display: flex; justify-content: center; align-items: center; border-radius: 0; color: #fff; } .readMore .t { padding: 0px 15px; position: absolute; border: 1px solid rgb(41, 120, 73); width: 100%; height: 100%; background: #fff; left: 0px; display: flex; justify-content: center; color: rgb(41, 120, 73); top: -48px; transform-origin: center bottom; transform: rotateX(90deg); backface-visibility: hidden; align-items: center; border-radius: 0; } .readMore:hover .w { transform: translateY(30px) translateZ(-30px) rotate3d(1, 0, 0, -90deg); } /* 忙鈥撀懊┾€斅幻γζ掆€γ┞÷ */ .Detail { background: #fff; border-radius: 10px; padding: 50px 80px; position: relative; z-index: 99; margin-top: -80px; padding-bottom: 70px; } .tailTop { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(230, 230, 230); padding-bottom: 30px; } .tailTit { font-size: 34px; color: #000; margin-bottom: 18px; } .tailDate { display: flex; } .tailDate span:first-child { padding-left: 0; } .tailDate span:last-child { border-right: none; } .tailDate span { font-size: 15px; color: rgb(136, 136, 136); padding: 0 20px; border-right: 1px solid rgb(200, 200, 200); line-height: 16px; } .tailBox { width: 82%; margin: auto; padding: 70px 0; line-height: 30px; } .tailBottom { padding: 50px 0 35px 0; border-top: 2px solid rgb(41, 120, 73); border-bottom: 2px solid rgb(41, 120, 73); display: flex; justify-content: space-between; } .tailLink { display: flex; flex-direction: column; } .tailLink a { font-size: 16px; color: rgb(102, 102, 102); margin-bottom: 20px; transition: all 0.4s; } .tailLink .on { color: rgb(41, 120, 73); text-shadow: 1px 0 0 rgb(41, 120, 73); } .tailLink a:hover { color: rgb(41, 120, 73); text-shadow: 1px 0 0 rgb(41, 120, 73); transform: translateY(5px); } .pubw { text-align: center; font-size: 32px; font-weight: 600; padding: 40px 0; color: rgb(51, 51, 51); } .pb50 { padding-bottom: 50px; } /* 忙艙聧氓艩隆茅垄鈥犆ヅ概?莽禄聫猫聬楼茅垄鈥犆ヅ概 */ .farmSame { margin-top: 30px; } .pb30 { padding-bottom: 30px; } .farmSame { width: 100%; display: inline-block; transition: all 0.5s; } .farmSame:hover .farmMore::after { width: 100%; } .farmSame:hover { transform: scale(0.96); box-shadow: 1px 1px 15px 1px rgb(200, 200, 200); } .farmPic { overflow: hidden; position: relative; } .farmPic img { float: left; width: 100%; } .farmPic::before { content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0px; } .farmPic img { float: left; transition: all 0.6s; } .farmSame:hover .farmPic img { transform: scale(1.1); } .farmSame:hover .farmPic::before { animation: gradient-rectangle 1.4s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.18, 0.96); } .farmDesc { padding: 30px 40px; display: flex; align-items: center; justify-content: space-between; background: rgb(240, 240, 240); } .fa1 { font-size: 30px; font-weight: 600; margin-bottom: 15px; } .fa2 { font-size: 16px; line-height: 25px; color: rgb(102, 102, 102); } .farmWord { width: 80%; } .farmMore { display: flex; align-items: center; background: #fff; border: 2px solid rgb(220, 220, 220); width: 165px; height: 55px; justify-content: space-between; padding: 0 18px; transition: all 0.5s; position: relative; } .farmMore::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 0; height: 100%; background: #287846; transition: all 0.5s; } .fa3 { font-size: 16px; color: rgb(51, 51, 51); position: relative; z-index: 99; transition: all 0.5s; } .fa4 { display: inline-block; width: 10px; height: 12px; background: url(../images/tri.png); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 99; transition: all 0.5s; } .farmSame:hover .farmMore { border: 2px solid transparent; } .farmSame:hover .fa3 { color: #fff; } /* 忙艙聧氓艩隆莽戮拧莽戮艩猫搂鈥?忙艩鈥⒚碘€灻柯惷宦 */ .modelTit { padding: 50px 0; } .modelTit>p:nth-child(1) { font-size: 45px; color: rgb(51, 51, 51); font-weight: 600; margin-bottom: 10px; text-align: center; } .modelTit>p:nth-child(2) { text-align: center; font-size: 22px; color: rgb(51, 51, 51); font-family: BIN; } .modelFlex { display: flex; } .Model { width: 72%; } .Toge { width: 28%; } .Toge>div:last-child { border-bottom: none; } .toSame { display: flex; align-items: center; background: #fff; padding: 34px 38px; border-bottom: 1px solid rgb(230, 230, 230); position: relative; cursor: pointer; } .toSame::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; transition: all 0.5s; height: 0; background: rgb(41, 120, 73); transition: all 0.5s; } .to1 { font-size: 30px; color: rgb(51, 51, 51); margin-right: 20px; position: relative; z-index: 99; transition: all 0.5s; font-family: AIN; } .to2 { font-size: 23px; color: rgb(51, 51, 51); position: relative; z-index: 99; transition: all 0.5s; } .to3 { position: relative; z-index: 99; transition: all 0.5s; position: absolute; right: 30px; } .Toge .on::after { height: 100%; } .Toge .on .to1 { color: #fff; } .Toge .on .to2 { color: #fff; } .Toge .toSame:hover::after { height: 100%; } .Toge .toSame:hover .to1 { color: #fff; } .Toge .toSame:hover .to2 { color: #fff; } .moSame { height: 549px; padding: 60px 40px; background-size: cover; position: relative; background-repeat: no-repeat; display: inline-block; } .moTit { width: 38%; font-size: 15px; color: #fff; line-height: 42px; padding-top: 3vw; } .moTo { display: inline-block; width: 150px; text-align: center; font-size: 16px; color: rgb(255, 255, 255); height: 47px; line-height: 47px; margin: 0px; border-radius: 30px; position: absolute; left: 40px; bottom: 60px; display: none; } .moTo .w { background: transparent; position: relative; transition: all 0.25s ease 0s; transform-style: preserve-3d; pointer-events: none; border-radius: 30px; color: #fff; } .moTo .f { border: 1px solid #fff; background: transparent; color: rgb(51, 51, 51); display: flex; justify-content: center; align-items: center; border-radius: 30px; color: #fff; } .moTo .t { padding: 0px 15px; position: absolute; border: 1px solid rgb(41, 120, 73); width: 100%; height: 100%; background: #fff; left: 0px; display: flex; justify-content: center; color: rgb(41, 120, 73); top: -48px; transform-origin: center bottom; transform: rotateX(90deg); backface-visibility: hidden; align-items: center; border-radius: 30px; } .moTo:hover .w { transform: translateY(30px) translateZ(-30px) rotate3d(1, 0, 0, -90deg); } .moTo img { margin-left: 10px; position: relative; } .pb70 { padding-bottom: 70px; } /* 氓鈥ε∶ヂ宦好ヂ仿ッぢ寂 */ .parSame { margin-top: 65px; display: flex; align-items: center; transition: all 0.5s; cursor: pointer; } .parSame:hover .par2::after { width: 100%; } .parSame:hover .parImg img { border-radius: 5pc 20px; transform: scale(0.95); } .parImg { overflow: hidden; width: 60%; } .parImg img { float: left; width: 100%; transition: all 0.5s; } .parDesc { width: 40%; padding: 60px; position: relative; transition: all 0.5s; padding-left: 0; } .par2::after { content: ''; position: absolute; left: 0; right: 0; bottom: 32%; width: 0%; height: 1px; background: rgb(41, 120, 73); transition: all 0.5s; } .par3 { color: rgb(51, 51, 51); font-size: 18px; line-height: 34px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; padding-left: 60px;margin-bottom: 3vw;} .parSame:hover .par1 { color: rgb(41, 120, 73); } .wapParty { display: none; } .nflex { display: flex; align-items: center; justify-content: space-between; } .par1 { color: #333333; font-size: 40px; font-weight: 600; transition: all 0.5s; margin-bottom: 2vw; padding-left: 60px; } .par2 { position: relative; height: 1px; background: rgb(225, 225, 225); } .Party { padding-bottom: 70px; } /* 盲录聛盲赂拧忙鈥撯€∶ヅ掆€ */ .Explain { margin-top: 50px; margin-bottom: 70px; position: relative; } .exbg1 { position: absolute; left: 0; top: 0px; } .exbg2 { position: absolute; right: 0; bottom: 0px; } .Plain { width: 82%; margin: auto; display: flex; } .plainDesc { width: 40%; margin-right: 10%; margin-top: 20px; } .plainDesc>p:nth-child(1) { font-size: 30px; color: #333333; margin-bottom: 35px; } .textIn p { font-size: 16px; color: #666666; line-height: 42px; text-indent: 2em; } .plainImg { width: 50%; overflow: hidden; } .plainImg img { float: left; width: 100%; } .Company { background: url(../images/cuwbg.jpg); background-repeat: no-repeat; background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 400px; background-attachment: fixed; position: relative; } .Comp {} .Company::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); } .comp1 { color: #fff; font-weight: 600; letter-spacing: 1px; font-size: 54px; margin-bottom: 30px; position: relative; z-index: 99; } .comp2 { position: relative; z-index: 99; } /* 盲录聛盲赂拧忙鈥灺棵︹劉炉 */ .Hope { position: relative; padding: 55px 0; } .hoBg { position: absolute; left: 0; right: 0; bottom: 0; } .hoBox { display: flex; flex-wrap: wrap; position: relative; z-index: 99; } .hoBox>div:nth-child(4) { margin-right: 0; } .hoSame { width: 23.5%; background: #fff; margin-right: 2%; /*box-shadow: 1px 1px 10px 1px rgb(235, 235, 235);*/ padding-bottom: 25px; transition: all 0.5s; cursor: pointer; position:relative; } .hoSame figure{ width:90%; position:absolute; left: 5% ; top: 60%;transition: all 0.36s; height:270px; box-shadow: 1px 1px 10px 1px rgb(235, 235, 235);background: #fff; padding-bottom: 10px} /*.hoSame:hover { border-radius: 20px; transform: translateY(8px); box-shadow: 1px 1px 10px 1px rgb(225, 225, 225); }*/ .hoSame:hover figure{transform: translateY(-8px);box-shadow: 1px 1px 10px 1px rgba(40 ,120, 70,0.3);} .hoSame:hover .hoPic { border-radius: 20px 0; transition: all 0.5s; } .hoSame:hover .hoPic img { transform: scale(1.15); } .hoSame:hover .hoIcon img { transform: scale(0.92); } .hoPic { overflow: hidden; transition: all 0.5s; } .hoPic img { float: left; width: 100%; transition: all 0.5s; } .hoMiss { display: flex; } .hoIcon { margin-right: 20px; } .hoIcon img { transition: all 0.5s; } .hoSion>p:nth-child(1) { font-size: 27px; color: rgb(51, 51, 51); margin-bottom: 4px; } .hoSion>p:nth-child(2) { font-size: 27px; color: rgb(51, 51, 51); } .hoBottom { font-size: 18px; text-align: center; color: rgb(51, 51, 51); line-height: 30px; padding: 0 25px; } .hoMiss { padding: 25px; } /* 猫碌掳猫驴鈥好λ嗏€樏ぢ宦?氓鈥標溍ヂ仿ッ┞E矫┾€♀€ */ .Enterprise { display: flex; flex-wrap: wrap; padding-top: 20px; padding-bottom: 70px; } .Enterprise>a:nth-child(3n+3) { margin-right: 0; } .enterSame { width: 31.6%; margin-top: 2.5%; margin-right: 2.5%; } .enPic { overflow: hidden; } .enPic img { float: left; width: 100%; } .enPic { overflow: hidden; position: relative; transition: all 0.5s; } .enPic img { float: left; width: 100%; } .enPic::before { content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0px; } .enPic img { float: left; transition: all 0.8s; } .enterSame:hover .enPic img { transform: scale(1.12); } .enterSame:hover .enPic::before { animation: gradient-rectangle 1.4s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.18, 0.96); } .enWord { height: 60px; line-height: 60px; box-shadow: 1px 1px 10px 1px rgb(230, 230, 230); position: relative; z-index: 99; width: 90%; margin: auto; text-align: center; background: #fff; padding: 0 15px; font-size: 16px; color: rgb(51, 51, 51); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; margin-top: -30px; transition: all 0.5s; font-family: "氓戮庐猫陆炉茅鈥衡€γ┞烩€?; } .enterSame:hover .enWord { transform: translateY(10px); } /* 氓鈥βヂ徛该偓盲禄鈥 */ .introBg { background: url(../images/cir.jpg); background-repeat: no-repeat; background-size: cover; padding-top: 65px; padding-bottom: 70px; } .Introduce { display: flex; } .introTit { width: 5.5em; font-size: 40px; color: rgb(51, 51, 51); font-weight: 600; } .introFlex { width: 86%; border-left: 1px solid rgb(170, 170, 170); padding-left: 5%; } .introDesc p { font-size: 16px; line-height: 32px; margin-bottom: 20px; } .introAdv { display: flex; } .introAdv { margin-top: 60px; width: 80%; display: flex; justify-content: space-between; } /*猫搂鈥犆┞⑩€?/ .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: 40px; height: 40px; } .video-popwrap { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 36663; border-radius: 5px; border: 10px solid #fff; } .popbg { display: none; position: fixed; bottom: 0; left: 0; right: 0; top: 0; background: rgba(0, 0, 0, 0.8); z-index: 233; } .popclose { position: absolute; top: -60px; right: -85px; border-radius: 100%; color: #fff; cursor: pointer; height: 60px; width: 60px; text-align: center; line-height: 43px; font-size: 58px; z-index: 33333; } .conn2_right { position: relative; display: inline-block; height: 100%; vertical-align: top; margin-top: 70px; width: 100%; } .conn2_right .img img { width: 100%; } .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; } .video-cirle img { position: relative; z-index: 99; } .video-cirle:after { content: ""; position: absolute; border-radius: 50%; top: 50%; left: 50%; z-index: 1; } .video-cirle::before { content: ""; position: absolute; border-radius: 50%; top: 50%; left: 50%; z-index: 1; } .video-cirle:after { width: 64px; height: 64px; background: rgba(255, 255, 255, 0.5); margin-left: -32px; margin-top: -32px; -webkit-animation: warn 2s linear 0s infinite; -moz-animation: warn 2s linear 0s infinite; animation: warn 2s linear 0s infinite; } .video-cirle::before { width: 50px; height: 50px; background: rgba(255, 255, 255, 0.8); margin-left: -25px; margin-top: -25px; -webkit-animation: warn 2s linear 0s infinite; -moz-animation: warn 2s linear 0s infinite; animation: warn 2s linear 0s infinite; } @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; } } /* 氓卤鈥⒚ε撯€好ε撀β澛 */ .Future { padding-bottom: 70px; background: url(../images/world.jpg); background-repeat: no-repeat; background-size: cover; } .fuTit { padding-top: 60px; text-align: center; letter-spacing: 1px; color: rgb(51, 51, 51); font-size: 40px; } /* 氓艙掳氓鈥郝 */ .networkimg { width: 86%; margin: 0px auto; position: relative; margin-top: -60px; position: relative; } .networkimg li { position: absolute; animation: 1s linear 0s infinite alternate none running ani-svg; } .networkimg li:nth-child(1) { top: 62.5%; left: 69.3%; } .networkimg li:nth-child(2) { top: 61.8%; left: 70.1%; } .networkimg li:nth-child(3) { top: 61.7%; left: 68.5%; } .networkimg li:nth-child(4) { top: 58.8%; left: 66%; } .networkimg li:nth-child(5) { top: 60.4%; left: 65.5%; } .networkimg li:nth-child(6) { top: 59.9%; left: 74.2%; } .networkimg li:nth-child(7) { top: 60.3%; left: 69.7%; } .networkimg li:nth-child(8) { top: 65.3%; left: 69.7%; } .networkimg li:nth-child(9) { top: 65.3%; left: 67.7%; } .networkimg li:nth-child(10) { top: 66.3%; left: 68.7%; } .networkimg li:nth-child(11) { top: 62.3%; left: 66.7%; } .networkimg li:nth-child(12) { top: 66.3%; left: 71.7%; } .Future .dot_box { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; } .Future .dot { position: relative; display: inline; } .Future .dot_box .dot_circle { display: block; width: 10px; height: 10px; background: #fff; position: relative; z-index: 3; border-radius: 50%; } .Future .dot:after { content: ""; position: absolute; border-radius: 50%; top: 50%; left: 50%; z-index: 999; } .Future .dot::before { content: ""; position: absolute; border-radius: 50%; top: 50%; left: 50%; z-index: 999; } .Future .dot:after { width: 18px; height: 18px; background: rgba(255, 255, 255, 0.4); margin-left: -4px; margin-top: -4px; -webkit-animation: warn 2s linear 0s infinite; -moz-animation: warn 2s linear 0s infinite; animation: warn 2s linear 0s infinite; } .Future .dot::before { width: 30px; height: 30px; background: rgba(255, 255, 255, 0.5); margin-left: -10px; margin-top: -10px; -webkit-animation: warn 2s linear 0s infinite; -moz-animation: warn 2s linear 0s infinite; animation: warn 2s linear 0s infinite; } /* 氓录鈧ヂр€ */ .deAll { display: flex; transition: all 0.5s; margin-bottom: 70px; } .deAll>a { transition: all 0.5s; } .deAll>a:nth-child(2), .deAll>a:nth-child(4) { position: relative; } .deAll .on { width: 40%; } .deAll .on .deBegin { opacity: 0; width: 0; } .deAll .on .deAfter { opacity: 1; width: 100%; } .deFlex { width: 20%; position: relative; z-index: 99; transition: all 0.5s; height: auto; } .deBegin { display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.5s; } .beImg { font-size: 20px; color: #fff; top: 90px; position: absolute; z-index: 99; transition: all 0.5s; font-family: BIN; } .beWord { font-size: 26px; font-weight: 600; color: rgb(255, 255, 255); padding: 0px 15px; position: absolute; z-index: 99; transition: all 0.2s; text-align: center; top: 200px; } .deAfter { display: flex; align-items: center; justify-content: center; opacity: 0; position: absolute; cursor: pointer; transition: all 0.2s; top: 0; } .bePic, .dePic { overflow: hidden; } .bePic img { height: 520px; width: 100%; } .dePic img { width: 100%; height: 520px; } .deBegin, .deAfter { height: 520px; background-repeat: no-repeat; background-size: cover; } /* end */ .sizeOn { position: fixed; left: 20%; right: 20%; width: 60%; top: 20%; bottom: 20%; height: 60%; transition: all 0.5s; box-shadow: none; border: 1px solid rgb(230, 230, 230); z-index: 999; } .wapw { display: none; overflow: hidden; margin-top: -60px; } .wapw img { width: 100%; float: left; } /* 忙艙聧氓艩隆茅垄鈥犆ヅ概?茅隆鹿莽鈥郝ぢ烩€姑宦 */ .jectFlex { padding-bottom: 70px; } .jectSame { padding-top: 55px; display: flex; transition: all 0.5s; cursor: pointer; } .jectSame:hover .je1 { color: rgb(41, 120, 73); } .jectSame:hover { transform: translateY(10px); } .jectSame:hover .jectDesc { box-shadow: 1px 1px 10px 1px rgb(230, 230, 230); } .jectPic { width: 60%; border-radius: 15px; overflow: hidden; position: relative; } .jectPic img { float: left; width: 100%; height: 100%; } .jectDesc { width: 40%; padding: 60px 40px 50px 40px; background: #fff; margin: 10vw 0; transition: all 0.5s; } .je1 { font-size: 34px; color: rgb(51, 51, 51); margin-bottom: 30px; font-weight: 600; transition: all 0.5s; } .je2 { font-size: 18px; color: rgb(102, 102, 102); line-height: 34px; } .wapProject { display: none; } .jectPic::before { content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0px; } .jectPic img { float: left; transition: all 0.8s; } .jectSame:hover .jectPic img { transform: scale(1.12); } .jectSame:hover .jectPic::before { animation: gradient-rectangle 1.4s; animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.18, 0.96); } .sub-item { display: none; padding: 0 30px; } .sub-item a { font-size: 15px; color: rgba(255, 255, 255, 0.9) !important; padding: 8px 12%; display: block; } /* 鏂板椤甸潰 */ .Add { background-image: url(../images/buss9.jpg); background-repeat: no-repeat; background-size: cover; padding-bottom: 140px; } .addPic { padding-top: 60px; padding-bottom: 65px; text-align: center; } .addPic img { margin: auto; } .addWord p { font-size: 20px; color: rgb(102, 102, 102); text-align: center; line-height: 42px; margin-bottom: 4px; } .addWord p:nth-child(2) { color: rgb(51, 51, 51); } .addFlex { display: flex; flex-wrap: wrap; margin-top: 55px; } .addFlex>div:nth-child(4) { margin-right: 0; } .addSame { width: 22.7%; margin-right: 3%; background: #fff; border-radius: 8px; box-shadow: 1px 1px 6px 1px rgb(240, 240, 240); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 55px 0; transition: all 0.5s; cursor: pointer; } .addSame:hover { box-shadow: 1px 1px 6px 1px #287846; } .addSame:hover img { animation: jello 1.5s; } .addSame img { transition: all 0.5s; } .addSame p { font-size: 26px; color: #333333; margin-top: 35px; } .addBg { width: 90%; margin-left: 10%; background: url(../images/buss01.png); background-repeat: no-repeat; background-size: 100% 100%; /* height: 400px; */ display: flex; flex-direction: column; justify-content: space-between; /* align-items: center; */ padding: 68px; } .abgFlex { display: flex; margin-top: 75px; position: relative; } .buss1 { position: absolute; left: 0; top: 49px; } .ad1 { font-size: 30px; margin-left: 20%; color: rgba(255, 255, 255, 0.9); margin-bottom: 30px; /* padding-top: 80px; */ width: 85%; /* margin: auto; */ margin-left: 15%; } .ad2 { font-size: 22px; margin: auto; color: rgba(255, 255, 255, 1); margin-bottom: 30px; width: 85%; margin-left: 14%; } .ad3 { font-size: 18px; margin: auto; color: rgba(255, 255, 255, 0.9); margin-bottom: 30px; width: 85%; margin-left: 15%; } .ad4 { font-size: 22px; color: rgb(255, 255, 255); position: relative; /* width: 95%; */ /* margin-right: 5%; */ display: flex; align-items: center; justify-content: flex-end; text-align: right; } .ad4 img { margin-right: 10px; } .Phone { background: url(../images/buss11.jpg); background-repeat: no-repeat; background-size: cover; padding: 200px 0 260px 0; } .ph1 { text-align: center; } .ph1 a { color: #fff; letter-spacing: 1px; font-weight: 600; font-size: 44px; position: relative; } .phFlex { display: flex; margin-top: 60px; align-items: center; justify-content: center; } .phFlex p { font-size: 22px; color: #fff; margin: 0 65px; } .ph1 a::after { content: ''; position: absolute; height: 2px; background-color: #fff; bottom: 5px; left: 0px; right: 0; }