.tNav{ width: 100%; height: 60px; line-height: 60px; background: rgba(0, 0, 0, 0.02) ; box-sizing: border-box; } .tNav ul{ width: 800px; margin: 0 auto; display: flex; display: -webkit-flex; font-size: 16px; justify-content: center; box-sizing: border-box; } .tNav ul li a{ display: inline-block; cursor: pointer; color: #333333; } .tNav ul li{ width: 100px; margin: 0 45px; height: 60px; text-align: center; } .tNav ul li:hover,.tNav ul li.on{ border-bottom: 2px solid #0FA2F0; } .tNav ul li:hover a,.tNav ul li.on a{ color: #0FA2F0; } .title p{ color: #333333 !important; text-align: center !important; } .main{ background: url(../images/mainbg.png) top no-repeat; background-size: 100%; margin:2% 0 0; } .comInfo p{ color: #666666; line-height: 28px; margin-bottom: 10px; text-align: justify; } .comInfo p span{ /*color: #0FA2F0;*/ } #culture{ background: url(../images/whmbbg.png) no-repeat; background-size: 100% 100%; padding: 40px 0; margin-bottom: 40px; } #culture .culList{ display: flex; display: -webkit-flex; } #culture .culList>div{ width: 200px; box-sizing: border-box; padding: 30px 20px; height: 260px; background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.3) 100%); box-shadow: 0 0 2px #e5e5e5; cursor: pointer; position: relative; overflow: hidden; } .culList>div h2{ margin-bottom: 15px; position: relative; z-index: 2; } .culList>div p{ font-size: 14px; color: #666666; position: relative; z-index: 2; } .culList>div span{ display: block; width: 20px; height: 4px; background: #0FA2F0; margin-bottom: 10px; position: relative; z-index: 2; } .culList>div:hover{ color: #fff; } .cuBg{ width: 100%; height: 260px; position: absolute; bottom: -260px; left: 0; background: url(../images/whbg.png) no-repeat !important; background-size: 100%; animation: b 1s forwards; transition: all 0.8s; z-index: 1; } .culList>div:hover .cuBg{ transition: all 0.8s; animation: a 1s forwards; } .culList>div:hover p{ color: #fff; } .culList>div:hover span{ background: #fff; } .zyt{ box-sizing: border-box; height: 280px; padding: 10px !important; border: 1px solid #e5e5e5; } .swiper-container2{ padding-bottom: 10px; } #fzlc{ min-height: 624px; background: url(../images/lcbg.png) no-repeat; background-size: 100% 100%; } .img_ar{ width: 250px; min-height: 624px; } @keyframes a { 0%{ top: -260px; } 100%{ top: 0; } } @keyframes b { 0%{ top: 0; } 100%{ top: 260px; } }