@charset "utf-8"; #footer{ position: relative; background: #f4f4f4; } #footer .mainBox{ overflow: hidden; } #footer .form-box { padding: 15px 0; flex: 1; } #footer .form-box .form-group{display: flex; margin:5px 0 0;} #footer .form-box .form-control{ padding: 5px 10px; font-size: 14px; border: 0; margin-right: 10px; flex: 1; height: 34px;} #footer .form-box .form-control.pad{flex: 2;} #footer .form-box .btn{height: 34px; width: 180px; flex-shrink:0; line-height: 34px; font-size: 14px; animation: Flash 3s infinite; -webkit-animation: Flash 3s infinite; background: #000000;} #footer .form-box .btn:hover{ background: #000000; animation-iteration-count:1;-webkit-animation-iteration-count:1; } #footer .box{ margin: 0 auto; width: 1200px; position: relative; padding: 20px 0px 40px 0px; overflow: hidden; background: url(../img/footer-bg.png) no-repeat right 50px top 100px; } #footer .box div.link{ color: #000000; overflow: hidden; margin: 20px 0 0; float: left; min-height: 200px; } #footer .box div.link dl{ margin-right: 50px; float: left; } #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: #e52027; } #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: 20px 0; font-size: 12px; color: #6e6e6e; line-height: 1.8em; overflow: hidden; } #footer .cop img{ display: block; width: 300px; margin-bottom: 8px; } #footer .cop div{ padding:0 0 0 ; color: #6e6e6e; float: left; } #footer .cop span{ display: block; float: right; } #footer .cop a{ color: #6e6e6e; } #footer .qr{ float: right; margin: 20px 0; } #footer .qr dt{ font-size: 16px; font-weight: bold; margin-bottom: 10px; } #footer .qr div{ float: left; margin-right: 10px; } #footer .qr div p{ display: block; padding: 5px 0; color: #6e6e6e; text-align: center; font-size: 13px; line-height: 1.6em; } #footer .qr img{ display: block; width: 100px; height: 100px; } #bottom-coolgee{ width: 100%; position: fixed; z-index: 10; bottom: -90px; left: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #bottom-coolgee .bottom-coolgee-box{ width: 100%; max-width: 1920px; min-width:1200px; padding: 0 2rem; margin: 0 auto; height: 90px; background: #e52027; position: relative; display: flex; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #bottom-coolgee .form-box { padding: 15px 0; flex: 1; } #bottom-coolgee .form-box .title{ color: #fff; font-size: 14px; } #bottom-coolgee .form-box .form-group{display: flex; margin:5px 0 0;} #bottom-coolgee .form-box .form-control{ padding: 5px 10px; font-size: 14px; border: 0; margin-right: 10px; flex: 1; height: 34px;} #bottom-coolgee .form-box .form-control.pad{flex: 2;} #bottom-coolgee .form-box .btn{height: 34px; width: 180px; flex-shrink:0; line-height: 34px; font-size: 14px; animation: Flash 3s infinite; -webkit-animation: Flash 3s infinite; background: #bc292f;} #bottom-coolgee .form-box .btn:hover{ background: #bc292f;animation-iteration-count:1;-webkit-animation-iteration-count:1; } @keyframes Flash { 0% {background: #bc292f;} 5% {background: #FCE442;} 10% {background: #bc292f;} 15% {background: #FCE442;} 20% {background: #bc292f;} 25% {background: #FCE442;} 30% {background: #bc292f;} 100% {background: #bc292f;} } @-webkit-keyframes Flash { 0% {background: #000000;} 5% {background: #FCE442;} 10% {background: #000000;} 15% {background: #FCE442;} 20% {background: #000000;} 25% {background: #FCE442;} 30% {background: #000000;} 100% {background: #000000;} } @media screen and (max-width: 1700px) { #bottom-coolgee .bottom-coolgee-box{ padding: 0 1rem; } } @media screen and (max-width: 1460px) { #bottom-coolgee .bottom-coolgee-box{ padding: 0 .5rem; } #bottom-coolgee .form-box .form-control.pad{ display: none; } } @media screen and (max-width: 1460px) { #footer{ position: relative; padding: 0; } #footer .box{ padding: 0 ; } #footer .box div.link{ overflow: hidden; margin: 20px 0 0; } #footer .box div.link a{ padding: 5px 0; color: #aaa; display: inline-block; font-size: 16px; line-height: 1.6em; } #footer .box div.link a:hover{ color: #fff; } #footer .cop{ border-top: 1px solid #333; padding: 15px 0; font-size: 12px; color: #888; text-align: center; } #footer .cop a{ color: #888; } } .kf{ position: fixed; z-index: 9; right: 0; top: 45%; } .kf img{ width: 60px; transition: all 0.2s ease-in-out; } .kf:hover img{ width: 220px; } #bottom-coolgee .link { padding: 15px 0 10px 80px; width: 200px; } #bottom-coolgee .link .title{ color: #fff; font-size: 14px; padding-left: 3px; } #bottom-coolgee .link-con{ margin-top: 5px; font-weight: bold; font-size: 26px; color: #FCE442; } #bottom-coolgee .link-con a{ display: inline-block; position: relative; width: 38px; height: 38px; background-color: #000; background-size: 25px; background-repeat: no-repeat; background-position: center; border-radius: 100%; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #bottom-coolgee .link-con a.block-1{ background-image: url(../img/side-06.png); } #bottom-coolgee .link-con a.block-2{ background-image: url(../img/side-05.png); } #bottom-coolgee .tel { padding: 15px 0 10px 80px; width: 300px; } #bottom-coolgee .tel .title{ color: #fff; font-size: 14px; } #bottom-coolgee .tel .tel-con{ margin-top: 5px; font-weight: bold; font-size: 26px; color: #FCE442; } #side{ position: fixed; z-index: 9; top: 50%; /* margin-bottom: -200px; */ right:0px; margin-top: -150px; width: 70px; -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; } #side a{ position: relative; display: block; z-index: 1; width: 70px; margin:1px 0 0 0; color: #fff; height: 70px; font-size: 12px; background-color: #e52027; background-size: 35px; background-repeat: no-repeat; background-position: center 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #side a b{ font-weight: normal; display: block; 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; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #side.open a.btn span{ transform: rotate(135deg); } #side.open a.block-1{ background-image: url(../img/icon/side-01.png); } #side.open a.block-2{ background-image: url(../img/icon/side-05.png); } #side.open a.block-3{ background-image: url(../img/icon/side-04.png) ; } #side.open a.block-3.pc div{ width: 165px; background-color: #e52027; border-radius: 10px; position: absolute; left: 80px; transition: all 0.2s ease-in-out;} #side.open a.block-3.pc div span{display: block; font-size: 16px; padding-left: 15px; height: 70px; color: #fff; line-height: 20px; padding-top: 15px;} #side.open a.block-3.pc:hover div{ position: absolute; left: -95px;} #side.open a.block-4{ background-image: url(../img/icon/side-03.png); } #side a.block-4 div{display: none !important;} #side a.block-4:hover div{display: block !important; position: absolute; border: 1px solid #eee; width: 202px; height: 240px; background: #fff; right: 70px; top: 0;} #side a.block-4 img{width: 200px; height: 200px; border: 0 solid #fff; margin: 0 auto; display: block;} #side a.block-4 span{padding: 5px 10px; display: block; color: #333; text-align: center; width: 100%;} #side.open a.block-5{ background-image: url(../img/icon/side-02.png); } #side a.block-5 div{display: none;} #side a.block-5:hover div{display: block; position: absolute; border: 1px solid #eee; width: 202px; height: 240px; background: #fff; right: 55px; top: 0;} #side a.block-5 img{width: 200px; height: 200px; border: 0 solid #fff; margin: 0 auto; display: block;} #side a.block-5 span{padding: 5px 10px; display: block; color: #333; text-align: center; width: 100%;} #side a.block-6{background-image: url(../img/icon/side-10.png);} #side a.block-6 div{display: none !important;} #side a.block-6:hover div{display: block !important; position: absolute; border: 1px solid #eee; width: 202px; height: 240px; background: #fff; right: 55px; top: 0;} #side a.block-6 img{width: 200px; height: 200px; border: 0 solid #fff; margin: 0 auto; display: block;} #side a.block-6 span{padding: 5px 10px; display: block; color: #333; text-align: center; width: 100%;} /*微信*/ #side .wx-ewm{display: none;} #side .wx-ewm.open{display: flex; 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;} #side .wx-ewm.open span{padding: 10px; color: #fff; display: block; text-align: center; width: 100%;} #side .wx-ewm.open .gb{position: absolute; background: none; right: 0; top: 0; width:100%; height: 100%; } @media screen and (max-width: 768px) { #footer{ position: relative; background: #f4f4f4; padding: 0rem 0.5rem .8rem; } #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{ 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 50px; 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-right: 10px; } #footer .qr div p{ display: block; padding: 5px 0; color: #6e6e6e; text-align: center; font-size: 13px; line-height: 1.6em; } #footer .qr img{ display: block; width: 150px; height: 150px; } /* 侧边 */ #side{ position: fixed; z-index: 9; top: auto; /* margin-bottom: -200px; */ right:0px; bottom: 0px; margin-top: 0; background-color: #fff; display: flex; width: 100%; -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; } #side a{ position: relative; display: block; z-index: 1; width: 50%; margin:0 1px 0 0; color: #fff; height: 50px; font-size: 10px; background-color: #e52027; background-size: 28px; background-repeat: no-repeat; background-position: center 4px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #side a b{ font-weight: normal; display: block; text-align: center; padding-top: 33px; } #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; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #side.open a.btn span{ transform: rotate(135deg); } #side.open a.home{ background-image: url(../img/icon/side-home.png); } #side.open a.block-1{ background-image: url(../img/icon/side-11.png); background-size:35px ; background-position: center 0; } #side.open a.block-2{ background-image: url(../img/icon/side-05.png); } #side.open a.block-3{ background-image: url(../img/icon/side-04.png) ; } #side.open a.block-3.pc div{ width: 165px; background-color: #e52027; border-radius: 10px; position: absolute; left: 80px; transition: all 0.2s ease-in-out;} #side.open a.block-3.pc div span{display: block; font-size: 16px; padding-left: 15px; height: 70px; color: #fff; line-height: 20px; padding-top: 15px;} #side.open a.block-3.pc:hover div{ position: absolute; left: -95px;} #side.open a.block-4{ background-image: url(../img/icon/side-03.png); } #side a.block-4 div{display: none !important;} #side a.block-4:hover div{display: none !important; position: fixed; border: 1px solid #eee; width: 202px; height: 240px; background: #fff; right: auto; left: 50%; margin-left: -101px; top: auto; bottom: 50px;} #side a.block-4 img{width: 200px; height: 200px; border: 0 solid #fff; margin: 0 auto; display: block;} #side a.block-4 span{padding: 5px 10px; display: block; color: #333; text-align: center; width: 100%;} #side.open a.block-5{ background-image: url(../img/icon/side-02.png); } #side a.block-5 div{display: none;} #side a.block-5:hover div{display: block; position: absolute; border: 1px solid #eee; width: 202px; height: 240px; background: #fff; right: 55px; top: 0;} #side a.block-5 img{width: 200px; height: 200px; border: 0 solid #fff; margin: 0 auto; display: block;} #side a.block-5 span{padding: 5px 10px; display: block; color: #333; text-align: center; width: 100%;} #side a.block-6{background-image: url(../img/icon/side-10.png);} #side a.block-6 div{display: none !important;} #side a.block-6:hover div{display: block !important; position: absolute; border: 1px solid #eee; width: 202px; height: 240px; background: #fff; right: 55px; top: 0;} #side a.block-6 img{width: 200px; height: 200px; border: 0 solid #fff; margin: 0 auto; display: block;} #side a.block-6 span{padding: 5px 10px; display: block; color: #333; text-align: center; width: 100%;} /*微信*/ #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;} }