.nav{ background: url(../images/tbyy.png) no-repeat; background-size: 100%; position: fixed; top: 0; left: 0; right: 0; z-index: 99; padding: 30px 0; } .navtrs{ position: relative; } .header{ width: 80%; margin: 0 auto; } .logo{ float: left; width: 152px; height: 75px; background: url(../images/logo.png) no-repeat; background-size: 100%; } .header::after{ content: ''; display: block; clear: both; } .navtle{ float: right; width: 65%; display: flex; justify-content: space-between; } .navtle dd{ float: left; line-height: 70px; font-size: 20px; } .navtle dd .tleone{ color: white; } .ssds{ float: right; text-align: center; width: 40px; height: 40px; border-radius: 50%; background: #005EA6; line-height: 40px; margin-left: 2%; margin-top: 16px; } .ejbjb{ position: absolute; left: 0; right: 0; bottom: 0; height: 0; padding-left: 40%; background: white; opacity: 0; z-index: -1; transition: all 0.8s; } .ejTle{ overflow: hidden; } .ejTle li{ float: left; line-height: 70px; display: none; margin-right: 5%; } .ejTle li a{ font-size: 16px; transition: all 0.8s; } .ejTle li a:hover{ color: #0051A2; font-size: 18px; transition: all 0.8s; } .nav:hover .logo{ background: url(../images/logol.png) no-repeat !important; background-size: 100% 100% !important; transition: all 0.8s; } .nav:hover{ background: white; border-bottom: 1px solid #E6E6E6; transition: all 0.8s; } .nav:hover .tleone{ color: #000000 !important; transition: all 0.8s; } .navtle dd:hover{ border-bottom: 2px solid #0051A2; transition: all 0.8s; } .navtle dd:hover .ejbjb{ z-index: 9; opacity: 1; bottom: -101px; height: 70px; transition: all 0.8s; } .navtle dd:hover .ejTle li{ display: block; } /* footer */ .footer{ background: #0051A2; padding-top: 0.8rem; } .foosts{ width: 80%; margin: 0 auto; overflow: hidden; } .fotul{ float: left; width: 40%; } .fotul li{ float: left; width: 25%; } .fotul li a:nth-child(1){ font-size: 18px; font-weight: 700; line-height: 24px; opacity: 1; margin-top: 0; } .fotul li a{ color: white; display: block; font-size: 16px; line-height: 22px; margin-top: 0.15rem; opacity: 0.8; } .fobcut{ float: left; width: 40%; } .fobcut p{ margin-bottom: 0.26rem; color: white; font-size: 16px; line-height: 40px; } .fobcut p img{ margin-right: 8px; } .foewm{ float: right; } .foewm img{ width: 1.7rem; height: 1.7rem; } .foewm h6{ text-align: center; color: white; font-size: 16px; margin-top: 18px; opacity: 0.8; } .bzzx{ margin: 0.35rem 0 0.4rem; float: left; width: 100%; overflow: hidden; } .bzzx li{ float: left; margin-right: 5px; } .bzzx li a{ opacity: 0.4; color: white; } .fesple{ line-height: 0.85rem; overflow: hidden; width: 80%; margin: 0 auto; font-size: 16px; } .fesple div:nth-child(1){ float: left; } .fesple div:nth-child(2){ float: right; } .yqljd{ width: auto; position: relative; } .yqljd h2{ line-height: 0.5rem; color: white; border-bottom: 1px solid white; font-size: 0.2rem; width: 3.5rem; } .yqljd h2 img{ float: right; margin-top: 20px; transition: all 0.8s; -webkit-transition: all 0.8s; } .ljulsr { width: 4rem; background: white; position: absolute; left: 0; right: 0; bottom: -1.4rem; display: none; box-sizing: border-box; padding: 10px 0; } .ljulsr li{ line-height: 0.4rem; font-size: 16px; box-sizing: border-box; padding-left: 0.2rem; } .yqljd:hover .ljulsr{ display: block; } .yqljd:hover h2 img{ transform: rotate(180deg); transition: all 0.8s; -webkit-transition: all 0.8s; } .phone_nav{ display: none; } @media screen and (max-width:1024px) { .phone_nav{ display: block; } .navtrs,.yqljd{ display: none; } .phone_nav { padding: 8px 10px; width: 100%; height: 50px; position: fixed; left: 0; top: 0; background: white; z-index: 9999; box-sizing: content-box; } .ydlogo { float: left; width: 24%; } .ydlogo img { width: 100%; } .phone_nav .nav_main { height: 100%; position: fixed; left: 0; opacity: 0; top: 66px; width: 0; transition: all 0.4s ease 0.3s; -webkit-transition: all 0.4s ease 0.3s; background-color: #fff; overflow: hidden; } .phone_nav .nav_main li a { background-position: left; color: #333; height: 46px; line-height: 46px; display: inline-block; background-size: 32px; background-repeat: no-repeat; font-size: 14px; } .phone_nav .nav_but_box { display: block; position: absolute; width: 30px; height: 30px; right: 10.3%; top: 26%; z-index: 1; transition: all 0.7s; -webkit-transition: all 0.7s; } .phone_nav .nav_but { display: inline-block; position: relative; width: 20px; height: 2px; z-index: 2; margin: 13px 0 0 5px; background: #2f98cf; -webkit-transition-property: background-color, -webkit-transform; transition-property: background-color, -webkit-transform; transition-property: background-color, transform; transition-property: background-color, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms; } .phone_nav .nav_but:before, .nav_but:after { content: ''; display: block; width: 20px; height: 2px; position: absolute; background: #0051A2 !important; transition-property: margin, -webkit-transform; -webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; transition-duration: 300ms; -webkit-transition-duration: 300ms; } .phone_nav .nav_but:before { margin-top: -5px; } .phone_nav .nav_but:after { margin-top: 5px; } .phone_nav .nav_main ul { padding: 0 20px; height: 550px; overflow-y: auto; box-sizing: border-box; } .phone_nav .nav_main .ss .p1 input { width: 100%; height: 34px; line-height: 34px; background: none; border: 0; font-family: "Microsoft YaHei"; font-size: 14px; color: #fff; } .phone_nav .nav_main li b { display: inline-block; position: absolute; right: 10px; top: 0px; width: 50%; height: 50px; z-index: 99; } .phone_nav .nav_main li b img{ position: absolute; right: 5px; top: 20px; transform: rotate(0deg); transition: all 0.8s ease 0s; } .b_one b img{ transform: rotate(180deg) !important; transition: all 0.8s ease 0s !important; } .phone_nav .nav_main .ul { padding: 0 0 0px 20px; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.4s; -webkit-transition: max-height 0.4s; } .phone_nav .nav_main .ul li { padding: 0; border-bottom: 0; transform: translateX(0px); -webkit-transform: translateX(0px); } .phone_nav .nav_main .ul li a { padding: 0; height: auto; line-height: 30px; font-weight: normal } .phone_nav .nav_main .b_one .ul { max-height: 300px; padding: 0 0 0px 20px; margin-bottom: 10px; height: auto; } .phone_nav .nav_main li { transform: translateX(100px); -webkit-transform: translateX(100px); transition: all 0.8s ease; -webkit-transition: all 0.8s ease; border-bottom: 1px solid rgba(225, 225, 225, 0.5); padding: 0 20px; position: relative; box-sizing: border-box; width: 100%; } .phone_nav .nav_main li:nth-of-type(1) { transition-delay: 0.5s; -webkit-transition-delay: 0.1s; } .phone_nav .nav_main li:nth-of-type(2) { transition-delay: 0.2s; -webkit-transition-delay: 0.2s; } .phone_nav .nav_main li:nth-of-type(3) { transition-delay: 0.3s; -webkit-transition-delay: 0.3s; } .phone_nav .nav_main li:nth-of-type(4) { transition-delay: 0.4s; -webkit-transition-delay: 0.4s; } .phone_nav .nav_main li:nth-of-type(5) { transition-delay: 0.5s; -webkit-transition-delay: 0.5s; } .phone_nav .nav_main li:nth-of-type(6) { transition-delay: 0.6s; -webkit-transition-delay: 0.6s; } .phone_nav .nav_main li:nth-of-type(7) { transition-delay: 0.6s; -webkit-transition-delay: 0.6s; } .phone_nav .nav_main li:nth-of-type(8) { transition-delay: 0.6s; -webkit-transition-delay: 0.6s; } .phone_nav .nav_main li:nth-of-type(9) { transition-delay: 0.6s; -webkit-transition-delay: 0.6s; } .phone_nav .nav_main li:nth-of-type(10) { transition-delay: 0.6s; -webkit-transition-delay: 0.6s; } .phone_nav_one { transition-delay: 0s; -webkit-transition-delay: 0s; } .phone_nav_one .nav_main { opacity: 1; width: 100%; overflow: inherit; } .phone_nav_one .nav_but { background: rgba(0, 0, 0, 0); } .phone_nav_one .nav_but:before { margin-top: 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .phone_nav_one .nav_but:after { margin-top: 0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .phone_nav_one .nav_but_box { opacity: 0.8; } .phone_nav_one .nav_main li { transform: translateX(0); -webkit-transform: translateX(0); } .foot1400{ line-height: 30px; text-align: center; padding: 20px 0; } .foorst{ display: none; } .companyfot{ height: auto; } .footop{ padding: 25px 0; } .fooflt{ width: 100%; } .companyfot{ padding-left: 70px; height: auto; background-size: 15%; } .companyfot h4{ padding-top: 0; } .companyfot span{ display: block; } .companyfot h5, .companyfot h6{ margin-top: 0; } .fobcut p{ font-size: 14px; line-height: 35px; } .fobcut p img{ width: 25px; line-height: 35px; } .foewm{ margin: 15px 0; } .bzzx{ margin-bottom: 15px; padding-left: 21%; display: none; } .fesple{ font-size: 12px; line-height: 26px; } }