* { padding: 0px; margin: 0px; box-sizing: border-box; outline: none; } html, body { color: rgb(51, 51, 51); font-size: 16px; font-family: 微软雅黑; text-align: left; margin-left: auto !important; margin-right: auto !important; overflow-x:hidden; } html { overflow-x: hidden; } a{color:#333} body {} li { list-style: none; } a { text-decoration: none; } img, input { border: 0px; outline: none; } .icon img { transition: all 0.3s ease 0s; } .icon:hover img { animation: 0.6s linear 0s 1 normal none running icon-yh; } @keyframes icon-yh { 0% { transform: rotateZ(0deg); } 10% { transform: rotateZ(10deg); } 20% { transform: rotateZ(0deg); } 30% { transform: rotateZ(-10deg); } 40% { transform: rotateZ(0deg); } 50% { transform: rotateZ(10deg); } 60% { transform: rotateZ(0deg); } 70% { transform: rotateZ(-10deg); } 80% { transform: rotateZ(0deg); } 90% { transform: rotateZ(10deg); } 100% { transform: rotateZ(0deg); } } .wap { display: none; } .top>img.wap { display: none; } .clearfix::after { content: ""; clear: both; display: block; overflow: hidden; font-size: 0px; height: 0px; } .clearfix { zoom: 1; } body .clear { clear: both; height: 0px !important; width: 0px !important; border: none !important; margin: 0px !important; padding: 0px !important; float: none !important; } .px1320 { max-width: 1320px; margin: 0px auto; } .px1300 { max-width: 1300px; margin: 0px auto; } .px1400 { max-width: 1400px; margin: 0px auto; } .px1620 { max-width: 1620px; margin: 0px auto; } .t-search-zzc { position: fixed; z-index: 99998; inset: 0px; background: #000; opacity:0.6; width: 100%; height: 100%; } .t-search { padding: 0px 0px 10px; display: block; position: fixed; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 99999; } .t-search>div { min-width: 500px; margin: 0px auto; position: relative; padding: 5px 0px; background: rgb(255, 255, 255); } .t-search>div input[type="text"] { display: block; width: 100%; padding: 0px 70px 0px 20px; font-size: 16px; height: 30px; box-sizing: border-box; } .t-search>div input[type="text"]::placeholder { color: rgb(80, 79, 79); font-size: 16px; } .search-btn { position: absolute; right: 0px; top: 0px; height: 40px; width: 50px; background: rgb(1, 137, 144); } .search-btn input { display: block; width: 20px; margin: 10px auto; } .b-top { line-height: 40px; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999999; display: none; } .b-top .close { position: fixed; right: 20%; top: 20%; transform: translateX(-50%) translateY(-50%); z-index: 99999; cursor: pointer; width: 30px; height: 30px; } .b-top .close img { width: 100%; } .pic { padding-top: 75%; position: relative; overflow: hidden; } .pic img { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; transition: all 1s ease 0s; } .pic img:hover { transform: scale(1.05); } .header { position: fixed; left: 0px; right: 0px; top: 0px; height: 124px; z-index: 99999; border-bottom: 1px solid rgba(255, 255, 255, 0.3); transition: top 0.5s ease 0s; /*background:rgb(1, 137, 144);*/ } .logo { float: left; margin-top: 10px; } .logo a { display: block; } .logo a img { width: 100%; } .headerRight { margin-left: 600px; position: relative; } .tool { text-align: right; line-height: 31px; height: 31px; margin-top: 25px; margin-bottom: 25px; } .tool a { font-size: 14px; color: rgb(255, 255, 255); position: relative; float: right; line-height: 31px; } .tool a::before { content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: -22px; width: 18px; height: 18px; background: url("../images/icon-home.png") no-repeat; } .tool a:hover { text-decoration: underline; } .search { float: right; border-left: 1px solid rgb(255, 255, 255); height: 25px; width: 35px; margin-left: 14px; padding-left: 14px; padding-top: 4px; cursor: pointer; } .search img { width: 100%; } .nav { height: 44px; } .navItem { float: left; width: 11.1%; cursor: pointer; position: relative; text-align: center; height: 44px; } .navItem>a { text-align: center; color: rgb(255, 255, 255); font-size: 18px; } .navItem>div { top: 43px; position: absolute; z-index: 99; opacity: 0; visibility: hidden; transition: all 0.3s ease 0s; left: -30px !important; right: -16px !important;width: 160%; } .navItem::before { position: absolute; bottom: 1px; left: 50%; width: 0px; height: 2px; background: rgb(1, 137, 144); content: ""; transition: width 0.5s ease 0s; } .navItem::after { position: absolute; bottom: 1px; right: 50%; width: 0px; height: 2px; background: rgb(1, 137, 144); content: ""; transition: width 0.5s ease 0s; } .navItem:hover::before, .navItem:hover::after { width: 50%; } .navItem:hover div { opacity: 1; visibility: inherit; } .navItem>div>ul { background: rgb(255, 255, 255); } .navItem>div>ul>li { height: 45px; line-height: 45px; text-align: center; border-bottom: 1px solid rgb(243, 240, 240); } .navItem>div>ul>li>a { font-size: 16px; color: rgb(34, 34, 34); } .navItem>div>ul>li:last-child { border-bottom: 0px; } .navItem:nth-last-child(2)>div {} .navItem>div>ul>li:hover a { color: rgb(1, 137, 144); } .head_rgb.hide { top: -100%; } .head_wit { top: -100%; } .head_wit.show { top: 0px; } .head_wit { background: rgb(1, 137, 144); border: 0px; height: 100px; line-height: 100px; } .head_wit .logo { margin-top: 0px; } .head_wit .logo a { padding-top: 18px; line-height: 100px; height: 100px; } .head_wit .navItem div { top: 100px; } .head_wit .navItem { height: 100%; } .head_wit .navItem::before, .head_wit .navItem::after { background: rgb(224, 207, 138); height: 3px; } .footer { background: url("../images/bg-footer.png") 100% 100% / cover no-repeat rgb(255, 255, 255); padding-top: 190px; padding-bottom: 64px; } .footerLeft { float: left; width: 27.6%; /* margin-right: -0.6%; */ } .footerLeft ul { float: left; } .footerLeft ul:first-child { margin-right: 20%; } .footerLeft ul li { text-align: left; margin-bottom: 18px; } .footerLeft ul li a { display: inline-block; color: rgba(255, 255, 255, 0.67); font-size: 14px; } .footerLeft ul li:hover a { text-decoration: underline; } .footerMid { float: left; width: 44.3%; margin-right: 3.3%; margin-left: 3.4%; } .footerRight { float: left; width: 21%; } .footerlogo { margin-bottom: 15px; } .footerlogo a { display: block; max-width: 480px; margin: 0px auto; } .footerlogo a img { width: 100%; } .footerMid p { font-size: 14px; color: rgba(255, 255, 255, 0.9); text-align: center; line-height: 30px; } .footerRight ul { float: left; margin-right: 9%; } .footerRight ul:last-child { margin-right: 0px; } .footerRight ul li { text-align: left; margin-bottom: 18px; } .footerRight ul li a { display: inline-block; color: rgba(255, 255, 255, 0.67); font-size: 14px; } .footerRight ul li:hover a { text-decoration: underline; } @media screen and (max-width: 1620px) { .header>div { padding: 0px 20px; } .logo a { max-height: 65px; } .headerRight { margin-left: 470px; } } @media screen and (max-width: 1400px) { .logo a { max-width: 340px; } .headerRight { margin-left: 360px; } .navItem>a { font-size: 16px; } .navItem>div>ul>li>a { font-size: 14px; } .footer { padding: 59px 20px; } .footer .px1400 { padding-top: 100px; } } @media screen and (max-width: 1200px) { .head_wit { line-height: 80px; height: 80px !important; } .navItem>div>ul { min-width: 110px; } .navItem>div { top: 39px; } .head_wit .logo a { padding-top: 8px; } .navItem::before, .navItem::after { bottom: 5px; } .logo a { max-width: 300px; } .headerRight { margin-left: 320px; } .navItem>a { font-size: 14px; } .navItem>div>ul>li>a { font-size: 12px; } .tool a { font-size: 12px; } .tool { margin-top: 15px; margin-bottom: 15px; } .header { height: 100px; } } @media screen and (max-width: 1024px) { .pc { display: none !important; } .m-top { max-width: 1920px; margin: 0px auto; position: fixed; right: 20px; top: 18px; width: 25px; height: 25px; z-index: 9999; } .wap { display: block !important; } .wap-menu { position: absolute; top: 0px; right: 0px; z-index: 99999; font-size: 0px; } .wap-menu img { height: 25px; cursor: pointer; } .close-menu { display: none; position: absolute; right: 0px; top: 0px; cursor: pointer; } .m-head { position: fixed; top: 0px; left: 0px; right: 0px; background: rgb(1, 137, 144); z-index: 999; padding: 10px 20px; } .m-logo { font-size: 0px; } .m-logo a { font-size: 0px; line-height: 40px; display: block; } .m-logo img { max-height: 40px; max-width: 80%; vertical-align: middle; } .m-tlink { font-size: 12px; padding: 10px 15px 0px; color: rgba(255, 255, 255, 0.6); } .m-tlink a { font-size: 12px; margin: 0px 8px; color: rgb(255, 255, 255); display: inline-block; line-height: 24px; border-radius: 5px; } .m-tlink a:hover { text-decoration: underline; } .m-tlink a img { vertical-align: -2px; padding-right: 5px; height: 14px; } .m-search { margin: 15px; padding: 5px 50px 5px 10px; position: relative; line-height: 35px; border: 1px solid rgb(255, 255, 255); } .m-search input[type="text"] { display: block; width: 100%; line-height: 25px; background: none; color: rgb(255, 255, 255); font-size: 12px; } .m-search input[type="text"]::placeholder { color: rgb(255, 255, 255); } .m-search input[type="image"] { position: absolute; right: 10px; top: 10px; height: 15px; } .m-nav { position: fixed; top: 60px; right: -100%; bottom: 0px; z-index: 999; background: rgb(1, 137, 144); border-top: 1px solid rgba(255, 255, 255, 0.2); overflow-y: scroll; width: 100%; max-width: 375px; } .m-nav .top-r { color: rgb(255, 255, 255); padding-left: 15px; } .m-nav ul { padding: 0px 15px; } .m-nav ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.2); position: relative; } .m-nav ul li>span.on { transform: rotateZ(90deg); } .m-nav ul li ul { display: none; } .m-nav ul li ul li { border: none; } .m-nav>ul>li a { display: block; font-size: 14px; line-height: 20px; padding: 15px 0px; position: relative; color: rgb(255, 255, 255); } .m-nav>ul>li ul li a { padding: 10px 0px; } .m-nav>ul>li>span { position: absolute; width: 20px; height: 20px; background: url("../images/m-nav_down.png") center center / 14px 14px no-repeat; right: 0px; top: 15px; cursor: pointer; display: block; color: rgb(255, 255, 255); transition: all 0.3s ease 0s; } .footerLeft, .footerMid, .footerRight { float: none; width: 100%; } .footer .footerLeft ul, .footerRight ul { float: none; width: 100%; margin-right: 0px; } .footerLeft ul li, .footerRight ul li { float: left; width: 25%; text-align: center; } .footerMid { margin: 20px 0; } .footer { padding-bottom: 20px; } } @media screen and (max-width: 768px) {} @media screen and (max-width: 488px) { .footerLeft ul li, .footerRight ul li { float: left; width: 50%; } .footerRight ul li, .footerLeft ul li { margin-bottom: 5px; } }