@charset "utf-8"; #footer{ position: relative; background: #fff; } #footer .mainBox{ } #footer .top{ height: 80px; background: url(../img/logo2.png) no-repeat left center; border-bottom: 1px solid #DCDCDC; } #footer .top .link-block{border: 1px solid #EAEAEA; margin-top: 19px; display: block; float: right; z-index: 99; position: relative; background-color: #fff; line-height: 45px; height: 45px; padding: 0 20px; width: 280px;} #footer .top .link-block span{position: absolute; right: 10px; top: 0;transition:all 0.2s ease-out 0s; font-size: 18px;} #footer .top .link-block:hover>span{transform: rotate(180deg);} #footer .top .link-block div{position: absolute; opacity: 0; width: 100%; height: 50px; bottom: 0; left: 0; background-color: #fff;border: 1px solid ##EAEAEA; box-shadow: 0 1px 10px rgba(0,0,0,0.1);} #footer .top .link-block div a{display: block; opacity: 0; position: relative; padding: 0 10px; margin: 0 10px; line-height: 0px; transition:all 0.3s ease-out 0s; border-bottom: 1px solid #f1f1f1;} #footer .top .link-block div a span{transform: rotate(-90deg);} #footer .top .link-block:hover div a{ line-height: 50px; opacity: 1; transition:all 0.3s ease-out 0s;} #footer .top .link-block div a:hover{ color: #E40012; padding-left: 15px;} #footer .top .link-block div a:hover span{right: 5px;} #footer .top .link-block:hover div{display: block; height: auto; bottom: -250px; opacity: 1; transition:all 0.3s ease-out 0s;} #footer .top .link{ float: right; margin-top: 28px; padding-right: 20px; } #footer .top .link a{ font-size: 15px; margin: 0 15px; } #footer .top .link a:hover{ color: #E40012; } #footer .bottom{ height: 60px; background: #f1f1f1; } #footer .bottom .link{ margin-top: 10px; float: left; } #footer .bottom .link a{ font-size: 14px; display: inline-block; vertical-align: middle; height: 40px; line-height: 40px; color: #000; opacity: .6; } #footer .bottom .link span{ width: 1px; height: 14px; opacity: 0.3; background: #888; display: inline-block; vertical-align: middle; margin: 0 20px 0 20px; } #footer .bottom .link a:hover{ opacity: 1; } #footer .bottom .cop{ float: right; margin-top: 10px; padding-right: 20px; } #footer .bottom .cop a, #footer .bottom .cop span{ display: inline-block; vertical-align: middle; font-size: 13px; margin: 0 0 0 10px; height: 40px; line-height: 40px; color: #000; opacity: .6; } #footer .bottom .cop a:hover{ opacity: 1; } /* 底部菜单 */ #footer .box{ position: relative; padding:0px 0px 40px; overflow: hidden; } #footer .box .link{ overflow: hidden; float: left; padding-top: 40px; width: calc(100% - 120px); } #footer .box .link .block{ float: left; width: 12%; } #footer .box .link .block:last-child{ width: 11%; } #footer .box .link .block h2{ font-size: 18px; font-weight: normal; margin-bottom: 20px; } #footer .box .link .block h2 a{ font-size: 18px; font-weight: normal; color: #000; } #footer .box .link .block h2 a:hover{ color: #E40012; } #footer .box .link .block a{ font-size: 15px; width: 100%; color: #666666; display: block; margin: 5px 0; } #footer .box .link .block a:hover{ color: #E40012; } #footer .box .ewm{ float: right; } #footer .box .ewm div{ padding-top: 20px; } #footer .box .ewm div>div{ float: left; } #footer .box .ewm div img{ width: 114px; } #footer .box .ewm div>div span{ font-size: 12px; color: #888; display: block; text-align: center; } .cookies{ display: none; position: fixed; z-index: 999; bottom: 0; left: 0; width: 100%; height: 60px; line-height: 60px; background-color: rgba(255,255,255,.95); box-shadow: 0 0 18px rgba(0,0,0,0.1); } .cookies .mainBox{position: relative; font-size: 14px;} .cookies a{color: #E40012;} .cookies .cookies-close{ cursor: pointer; width: 40px; height: 40px; position: absolute; right: 0; top: 2px; font-size: 22px; } /* 侧边悬浮按钮 */ #side{ display: none; position: fixed; z-index: 99; bottom: -50px; transform: translate(0, 0); right:0px; width: 48px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #side.on{ right: 0px; bottom: 0; } #side a{ position: relative; display: block; z-index: 1; right: 0; width: 48px; margin:0 0 1px; height: 48px; background-color:#1576D1; background-size: 30px; background-repeat: no-repeat; background-position: center; transition: all 0.2s ease-in-out; } #side a b{ font-size: 11px; font-weight: normal; display: none; text-align: center; padding-top: 45px; } #side a.btn{ display: none; z-index: 2; } #side a.btn span{ width: 48px; height: 48px; display: block; background: url(../img/icon/side-00.png) no-repeat center 10px; transition: all 0.2s ease-in-out; } #side.open a.btn span{ transform: rotate(135deg); } #side.open a.block-home{ display: none; } #side.open a.block-gotop{ z-index: 1; opacity: 0; background-image: url(../img/icon/side-01.png); } #side.open.on a.block-gotop{ opacity: 1; } #side.open a.block-qq{background-image: url(../img/icon/side-05.png);} #side.open a.block-tel{ background-image: url(../img/icon/side-04.png) ;} #side.open a.block-tel.pc div{ width: 260px; background: rgba(0,0,0,1) url(../img/icon/side-04.png) no-repeat 15px center; background-size: 30px; position: absolute; left: 80px; transition: all 0.2s ease-in-out;} #side.open a.block-tel.pc div span{display: block; font-size: 17px; padding-left: 50px; height: 48px; color: #fff; line-height: 48px; } #side.open a.block-tel.pc:hover div{ position: absolute; left: -135px;} #side.open a.block-weixin{background-image: url(../img/icon/side-03.png); z-index: 2;} #side a.block-weixin div{display: block; position: absolute; z-index: 0; border: 1px solid #eee; width: 202px; height: 240px; background: #fff; right: 55px; top: auto; bottom: 0; left: 180px; transition: all 0.3s ease-in-out;} #side a.block-weixin:hover div{ position: absolute; left: -202px;} #side a.block-weixin img{width: 200px; height: 200px; border: 0 solid #fff; margin: 0 auto; display: block;} #side a.block-weixin span{padding: 5px 10px; display: block; color: #333; text-align: center; width: 100%;} #side.open a.block-qr{ background-image: url(../img/icon/side-02.png); } #side a.block-qr div{display: block; position: absolute; z-index: 0; border: 1px solid #eee; width: 202px; height: 240px; background: #fff; right: 55px; top: auto; bottom: -190px; left: 180px; transition: all 0.3s ease-in-out;} #side a.block-qr:hover div{ position: absolute; left: -202px;} #side a.block-qr img{width: 200px; height: 200px; border: 0 solid #fff; margin: 0 auto; display: block;} #side a.block-qr span{padding: 5px 10px; display: block; color: #333; text-align: center; width: 100%;} #side a.block-talk{background-image: url(../img/icon/side-10.png); background-size: 30px;} #side a.block-talk div{display: none;} #side a.block-talk:hover div{display: block; position: absolute; border: 1px solid #eee; width: 202px; height: 240px; background: #fff; right: 55px; top: 0;} #side a.block-talk img{width: 200px; height: 200px; border: 0 solid #fff; margin: 0 auto; display: block;} #side a.block-talk span{padding: 5px 10px; display: block; color: #333; text-align: center; width: 100%;} #side a.block-skype{background-image: url(../img/icon/side-06.png); background-size: 30px;} #side.open a.mobile{display: none;} /*微信*/ #side .wx-ewm{display: none;} #side .wx-ewm.open{display: none; flex-wrap: wrap; flex-direction: column; position: fixed; z-index: 9; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.8); justify-content: center; align-content: center;} @media screen and (max-width: 768px) { .cookies{ display: none !important; } #footer{ display: none; position: relative; background: #f4f4f4; padding: 0rem 0.5rem .2rem; } #footer .mainBox{ overflow: hidden; } #footer .box{ margin: 0 auto; width: 100%; position: relative; padding: 0px 0px; overflow: hidden; background: url(../img/footer-bg.png) no-repeat right 50px top 100px; } #footer .box div.link{ display: none; color: #000000; overflow: hidden; margin: 20px 0 0; float: left; min-height: 200px; } #footer .box div.link dl{ margin-right: 60px; float: left; display: none; } #footer .box div.link dt{ font-size: 16px; font-weight: bold; margin-bottom: 10px; } #footer .box div.link dd p, #footer .box div.link dd a{ display: block; padding: 5px 0; color: #6e6e6e; font-size: 13px; line-height: 1.6em; } #footer .box div.link dd a:hover{ color: #274b94; } #footer .box div.link dl.con-2 {width: 300px;} #footer .box div.link dl.con-2 a{ float: left; width: 100px;} #footer .cop{ border-top: 1px solid #ddd; padding: 10px 0 10px; font-size: 12px; color: #6e6e6e; line-height: 1.8em; overflow: hidden; text-align: center; } #footer .cop img{ display: block; width: 300px; margin-bottom: 8px; } #footer .cop div{ padding:0 0 0 ; color: #6e6e6e; float: none; } #footer .cop span{ display: block; float: none; } #footer .cop a{ color: #6e6e6e; } #footer .qr{ float: none; margin: 20px 0; } #footer .qr dt{ font-size: 16px; font-weight: bold; margin-bottom: 10px; text-align: center; } #footer .qr dd{ text-align: center; } #footer .qr div{ display: inline-block; float: none; margin: 10px; } #footer .qr div p{ display: block; padding: 5px 0; color: #6e6e6e; text-align: center; font-size: 12px; line-height: 1.6em; } #footer .qr img{ display: block; width: 35px; height: 35px; } /* 侧边 */ /*微信*/ #side .wx-ewm{display: none !important;} #side .wx-ewm.open{display: flex !important; flex-wrap: wrap; flex-direction: column; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.8); justify-content: center; align-content: center;} #side .wx-ewm.open img{width: 260px; height: 260px; border: 8px solid #fff; margin: 0 auto; display: block; position: relative; z-index: 1;} #side .wx-ewm.open span{padding: 10px; color: #fff; display: block; text-align: center; width: 100%;} #side .wx-ewm.open .bg{position: absolute; background: none; right: 0; top: 0; width:100%; height: 100%; z-index: 0;} /*微信*/ .wx-ewm-box{display: none !important;} .wx-ewm-box.open{display: flex !important; flex-wrap: wrap; flex-direction: column; position: fixed; z-index: 9; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.8); justify-content: center; align-content: center;} .wx-ewm-box.open img{width: 160px; height: 160px; border: 8px solid #fff; margin: 0 auto; display: block; position: relative; z-index: 1;} .wx-ewm-box.open span{padding: 10px; color: #fff; display: block; text-align: center; width: 100%;} .wx-ewm-box.open .bg{position: absolute; background: none; right: 0; top: 0; width:100%; height: 100%; z-index: 0;} .mobile-menu{ position: fixed; z-index: 999; bottom: 0; left: 0; height: 50px; width: 100%; display: flex !important; background-color: rgba(255,255,255,0.85); border-top: 1px solid rgba(0,0,0,0.04); backdrop-filter: saturate(100%) blur(10px); } .mobile-menu a{ width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } .mobile-menu a::before{ position: absolute; top: 50%; height: 35px; width: 1px; background-color: rgba(0,0,0,0.1); opacity: 0.6; content: ""; right: 0; transform: translate(0,-50%); } .mobile-menu a:last-child::before{ display: none; } .mobile-menu a span{ font-size: 22px; color: #000; margin-top: 5px; width: 26px; height: 26px; background: url(../img/bottom-icon-01.svg) no-repeat center center; background-size: 77%; } .mobile-menu a.m-menu-02 span{background-image: url(../img/bottom-icon-02.svg);background-size: 68%; background-position: center 2px;} .mobile-menu a.m-menu-03 span{background-image: url(../img/bottom-icon-03.svg);} .mobile-menu a.m-menu-04 span{background-image: url(../img/bottom-icon-04.svg);background-size: 68%; background-position: center 2px;} .mobile-menu a.menu-btn span{background-image: url(../img/bottom-icon-05.svg);background-size: 70%; background-position: center 3px;} .mobile-menu a b{ color: #000; font-weight: normal; font-size: 12px; transform: scale(.9); } /* .mobile-menu .iconlink, .mobile-menu .iconrising, .mobile-menu .iconlink{ background-color: #fff; color: #fff; border-radius: 100%; transform: scale(.8); } */ }