3226 lines
64 KiB
CSS
3226 lines
64 KiB
CSS
@charset "utf-8";
|
|
/*--------------------全局样式 ===> 开始-----------------------*/
|
|
/*@import url(bootstrap.min.css);
|
|
@import url(font-awesome.min.css);
|
|
*/
|
|
html,
|
|
body {
|
|
font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
|
background-color: #f7f7f7;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
input,
|
|
button {
|
|
outline: none;
|
|
-o-outline: none;
|
|
-moz-outline: none;
|
|
-webkit-outline: none;
|
|
}
|
|
input:-webkit-autofill {
|
|
background-color: rgba(0,0,0,0) !important;
|
|
}
|
|
.transition {
|
|
transition: all 0.3s;
|
|
-o-transition: all 0.3s;
|
|
-moz-transition: all 0.3s;
|
|
-webkit-transition: all 0.3s;
|
|
}
|
|
.transition-slow {
|
|
transition: all 1s;
|
|
-moz-transition: all 1s;
|
|
-webkit-transition: all 1s;
|
|
}
|
|
.transform:hover {
|
|
-webkit-transform: scale(1.15);
|
|
-moz-transform: scale(1.15);
|
|
-ms-transform: scale(1.15);
|
|
-o-transform: scale(1.15);
|
|
transform: scale(1.15);
|
|
-webkit-box-shadow: inset 0 0 80px #000000;
|
|
-moz-box-shadow: inset 0 0 80px #000000;
|
|
box-shadow: inset 0 0 80px #000000;
|
|
}
|
|
.rotate:hover {
|
|
transform: rotate(10deg);
|
|
-ms-transform: rotate(10deg); /* IE 9 */
|
|
-webkit-transform: rotate(10deg); /* Chrome, Safari, Opera */
|
|
}
|
|
a:hover,
|
|
a:active {
|
|
text-decoration: none;
|
|
}
|
|
|
|
@font-face {font-family: 'webfont-bold';
|
|
src: url('//at.alicdn.com/t/webfont_71guunw65xj.eot'); /* IE9*/
|
|
src: url('//at.alicdn.com/t/webfont_71guunw65xj.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
url('//at.alicdn.com/t/webfont_71guunw65xj.woff') format('woff'), /* chrome、firefox */
|
|
url('//at.alicdn.com/t/webfont_71guunw65xj.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
|
|
url('//at.alicdn.com/t/webfont_71guunw65xj.svg#思源黑体-粗') format('svg'); /* iOS 4.1- */
|
|
}
|
|
|
|
@font-face {font-family: 'webfont-fine';
|
|
src: url('//at.alicdn.com/t/webfont_zn7vhn4q9xp.eot'); /* IE9*/
|
|
src: url('//at.alicdn.com/t/webfont_zn7vhn4q9xp.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
url('//at.alicdn.com/t/webfont_zn7vhn4q9xp.woff') format('woff'), /* chrome、firefox */
|
|
url('//at.alicdn.com/t/webfont_zn7vhn4q9xp.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
|
|
url('//at.alicdn.com/t/webfont_zn7vhn4q9xp.svg#思源黑体-极细') format('svg'); /* iOS 4.1- */
|
|
}
|
|
/*--------------------全局样式 ===> 结束-----------------------*/
|
|
|
|
/*----------------------首页 ===> 开始------------------------*/
|
|
/*Header头部*/
|
|
div.wraper {
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
div.header {
|
|
width: 100%;
|
|
top: 0px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
div.header span {
|
|
display: inline-block;
|
|
}
|
|
div.header img.logo {
|
|
position: absolute;
|
|
top: 22px;
|
|
left: 6%;
|
|
width: 110px;
|
|
height: auto;
|
|
}
|
|
div.header span.menubtn {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 6%;
|
|
color: #FFFFFF;
|
|
cursor: pointer;
|
|
}
|
|
div.header span.menubtn i {
|
|
display: block;
|
|
width: 22px;
|
|
height: 2px;
|
|
background: #FFF;
|
|
margin-bottom: 5px;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/*Status状态圆圈*/
|
|
div.status {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 7%;
|
|
top: 0px;
|
|
margin: auto;
|
|
height: 120px;
|
|
}
|
|
div.status ul {
|
|
padding: 0px;
|
|
}
|
|
div.status ul li {
|
|
list-style-type: none;
|
|
margin-bottom: 5px;
|
|
}
|
|
div.status span.status_bar {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: none;
|
|
border: 1px solid #FFFFFF;
|
|
border-radius: 6px;
|
|
transition: 0.9s;
|
|
-o-transition: 0.9s;
|
|
-moz-transition: 0.9s;
|
|
-webkit-transition: 0.9s;
|
|
cursor: pointer;
|
|
}
|
|
div.status span.select {
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
|
|
/*下一页按钮*/
|
|
span.nextbtn {
|
|
cursor: pointer;
|
|
text-align: center;
|
|
display: inline-block;
|
|
width: 36px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
border-radius: 20px;
|
|
margin: auto;
|
|
font-size: 18px;
|
|
color: #FFFFFF;
|
|
border: #FFF solid 1px;
|
|
position: absolute;
|
|
bottom: 40px;
|
|
left: 0px;
|
|
right: 0px;
|
|
z-index: 2;
|
|
}
|
|
|
|
|
|
/*分区*/
|
|
div.sectionwrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
z-index: 0;
|
|
top: 0;
|
|
transition: 1s cubic-bezier(0.8,0.1,0.1,1);
|
|
-o-transition: 1s cubic-bezier(0.8,0.1,0.1,1);
|
|
-moz-transition: 1s cubic-bezier(0.8,0.1,0.1,1);
|
|
-webkit-transition: 1s cubic-bezier(0.8,0.1,0.1,1);
|
|
}
|
|
div.sectionwrap div.section {
|
|
height: 100%;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
position: relative;
|
|
left: 0px;
|
|
}
|
|
div.section div.textwrap {
|
|
color: #ffffff;
|
|
text-align: center;
|
|
width: 90%;
|
|
height: 180px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0;
|
|
margin: auto;
|
|
z-index: 2;
|
|
}
|
|
div.section div.hellowrap {
|
|
top: 0px !important;
|
|
bottom: 0px;
|
|
}
|
|
div.textwrap h1 {
|
|
margin: 0px;
|
|
font-size: 60px;
|
|
}
|
|
div.sectionwrap div#main,div#sec01,div#sec02,div#sec03,div#sec04 {
|
|
background: linear-gradient(#0548d4, #c2e1b8);
|
|
filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr='#4f4df8', endColorStr='#854df8', gradientType='0');
|
|
}
|
|
div#main div.colormask {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(253, 92, 0, 0.5);
|
|
}
|
|
div#sec01 div.colormask {
|
|
position: absolute;
|
|
width: 100%;
|
|
background-color: rgba(229, 89, 52, 0.5);
|
|
}
|
|
div#sec02 div.colormask {
|
|
position: absolute;
|
|
width: 100%;
|
|
background-color: rgba(155, 197, 61, 0.5);
|
|
}
|
|
div#sec03 div.colormask {
|
|
position: absolute;
|
|
width: 100%;
|
|
background-color: rgba(91, 192, 235, 0.5);
|
|
}
|
|
div#sec04 div.colormask {
|
|
position: absolute;
|
|
width: 100%;
|
|
background-color: rgba(253, 92, 0, 0.5);
|
|
}
|
|
div.textwrap span.contact {
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
padding: 8px 55px;
|
|
border-radius: 25px;
|
|
border: 1px solid #FFFFFF;
|
|
position: relative;
|
|
top: 20px;
|
|
color: #FFF;
|
|
}
|
|
.index-title {
|
|
font-family: 'webfont-bold';
|
|
font-size: 45px;
|
|
}
|
|
.index-content {
|
|
font-family: 'webfont-fine';
|
|
font-size: 20px;
|
|
}
|
|
div.textwrap span.contact {
|
|
font-family: 'webfont-fine';
|
|
font-size: 20px;
|
|
}
|
|
|
|
/*隐藏菜单*/
|
|
div.menu_hide {
|
|
color: #555555;
|
|
width: 0;
|
|
height: 5px;
|
|
z-index: 6;
|
|
position: fixed;
|
|
top: 0px;
|
|
right: 0px;
|
|
}
|
|
div.menu_hide .menu-mask {
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(255,255,255,0.5);
|
|
position: fixed;
|
|
z-index: -1;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
div.menu_hide .name {
|
|
display: none;
|
|
width: 80px;
|
|
line-height: 80px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 7%;
|
|
}
|
|
div.menu_hide .name img {
|
|
width: 100%;
|
|
}
|
|
div.menu_hide ul.nav {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 80px 0 0;
|
|
//background-color: rgba(0, 0, 0, 0.9);
|
|
background: url(../image/poster01.jpg);
|
|
position: absolute;
|
|
bottom: 0px;
|
|
}
|
|
div.menu_hide ul.nav li {
|
|
position: relative;
|
|
display: block;
|
|
list-style-type: none;
|
|
}
|
|
div.menu_hide ul.nav li span {
|
|
display: inline-block;
|
|
}
|
|
div.menu_hide ul.nav li i[name=angle] {
|
|
position: absolute;
|
|
right: 7%;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
margin: auto;
|
|
height: 20px;
|
|
}
|
|
div.menu_hide img.closemenu {
|
|
display: none;
|
|
width: 20px;
|
|
height: auto;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
z-index: 3;
|
|
right: 30px;
|
|
top: 30px;
|
|
}
|
|
ul.nav > li > a {
|
|
display: block;
|
|
opacity: 0;
|
|
line-height: 55px;
|
|
text-decoration: none;
|
|
font-size: 16px;
|
|
padding: 0 0 0 7%;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
border-top: 1px solid #fff;
|
|
position: relative;
|
|
left: 7%;
|
|
top: 0px;
|
|
}
|
|
ul.nav > li:last-child > a {
|
|
border-bottom: 1px solid #fff;
|
|
}
|
|
ul.nav > li > a:focus,
|
|
ul.nav > li > a:hover,
|
|
ul.nav > li > a:active {
|
|
color: #FFFFFF;
|
|
background-color: rgba(253, 92, 0, 1);
|
|
}
|
|
div.menu_hide .add-info {
|
|
display: none;
|
|
width: 100%;
|
|
padding-left: 7%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
div.menu_hide .add-info a{
|
|
cursor: default;
|
|
display: block;
|
|
padding-bottom: 20px;
|
|
}
|
|
div.menu_hide .add-info p {
|
|
color: #CCC;
|
|
line-height: 22px;
|
|
}
|
|
div.menu_hide .add-info span {
|
|
display: block;
|
|
line-height: 22px;
|
|
color: #999;
|
|
margin: 0;
|
|
}
|
|
|
|
/*----------------------设备适配===>平板电脑-------------------*/
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
|
|
div.header span.menubtn i {
|
|
width: 24px;
|
|
height: 3px;
|
|
}
|
|
div.textwrap h1 {
|
|
margin: 0px;
|
|
font-size: 120px;
|
|
}
|
|
div.textwrap p.index-title {
|
|
font-size: 70px;
|
|
}
|
|
div.textwrap p.index-content {
|
|
font-size: 35px;
|
|
}
|
|
div.section div.textwrap {
|
|
height: 290px;
|
|
}
|
|
div.textwrap span.contact {
|
|
font-size: 20px;
|
|
padding: 12px 80px;
|
|
border-radius: 35px;
|
|
position: relative;
|
|
top: 50px;
|
|
}
|
|
div.menu_hide .name {
|
|
width: 100px;
|
|
line-height: 110px;
|
|
}
|
|
div.menu_hide ul.nav {
|
|
padding-top: 110px;
|
|
}
|
|
div.menu_hide ul.nav li > a {
|
|
font-size: 18px;
|
|
line-height: 70px;
|
|
}
|
|
div.header img.logo {
|
|
top: 30px;
|
|
width: 100px;
|
|
}
|
|
div.header span.menubtn {
|
|
top: 25px;
|
|
}
|
|
div.menu_hide img.closemenu {
|
|
width: 30px;
|
|
top: 40px;
|
|
right: 40px;
|
|
}
|
|
|
|
div.menu_hide .add-info a{
|
|
padding-bottom: 40px;
|
|
}
|
|
div.menu_hide .add-info p {
|
|
font-size: 16px;
|
|
}
|
|
div.menu_hide .add-info span {
|
|
font-size: 14px;
|
|
line-height: 26px;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/*----------------------设备适配===>PC端-------------------*/
|
|
@media (min-width: 992px) and (max-width: 1119px) {
|
|
div.header span.menubtn i {
|
|
width: 24px;
|
|
height: 3px;
|
|
}
|
|
div.textwrap h1 {
|
|
margin: 0px;
|
|
font-size: 140px;
|
|
}
|
|
div.textwrap p.index-title {
|
|
font-size: 65px;
|
|
}
|
|
div.textwrap p.index-content {
|
|
font-size: 35px;
|
|
}
|
|
div.section div.textwrap {
|
|
height: 280px;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
}
|
|
div.textwrap span.contact {
|
|
font-size: 20px;
|
|
padding: 12px 80px;
|
|
border-radius: 35px;
|
|
position: relative;
|
|
top: 50px;
|
|
cursor: pointer;
|
|
}
|
|
div.menu_hide ul.nav li > a {
|
|
font-size: 16px;
|
|
}
|
|
div.header img.logo {
|
|
top: 34px;
|
|
width: 100px;
|
|
}
|
|
div.header span.menubtn {
|
|
top: 32px;
|
|
}
|
|
div.menu_hide img.closemenu {
|
|
width: 25px;
|
|
top: 27px;
|
|
right: 30px;
|
|
}
|
|
span.nextbtn:hover{
|
|
-webkit-transform: scale(1.1);
|
|
-moz-transform: scale(1.1);
|
|
-ms-transform: scale(1.1);
|
|
-o-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
/*----------------------设备适配===>大屏电脑-------------------*/
|
|
@media (min-width: 1120px) {
|
|
div.header span.menubtn i {
|
|
width: 26px;
|
|
height: 4px;
|
|
}
|
|
div.textwrap h1 {
|
|
margin: 0px;
|
|
font-size: 140px;
|
|
}
|
|
div.textwrap p.index-title {
|
|
font-size: 110px;
|
|
}
|
|
div.textwrap p.index-content {
|
|
font-size: 30px;
|
|
}
|
|
div.section div.textwrap {
|
|
height: 340px;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
}
|
|
div.textwrap span.contact {
|
|
font-size: 18px;
|
|
padding: 12px 80px;
|
|
border-radius: 35px;
|
|
position: relative;
|
|
top: 40px;
|
|
cursor: pointer;
|
|
}
|
|
div.textwrap span.contact:hover {
|
|
background-color: #FFFFFF;
|
|
color: #FD5C00;
|
|
}
|
|
div.menu_hide .name {
|
|
width: 120px;
|
|
line-height: 120px;
|
|
}
|
|
div.menu_hide ul.nav {
|
|
padding-top: 120px;
|
|
}
|
|
div.menu_hide ul.nav li > a {
|
|
font-size: 16px;
|
|
line-height: 80px;
|
|
}
|
|
ul.nav > li > a:hover {
|
|
padding-left: 8%;
|
|
}
|
|
div.header img.logo {
|
|
top: 34px;
|
|
width: 120px;
|
|
}
|
|
div.header span.menubtn {
|
|
top: 32px;
|
|
}
|
|
div.menu_hide img.closemenu {
|
|
width: 30px;
|
|
top: 40px;
|
|
right: 50px;
|
|
}
|
|
span.nextbtn:hover{
|
|
-webkit-transform: scale(1.1);
|
|
-moz-transform: scale(1.1);
|
|
-ms-transform: scale(1.1);
|
|
-o-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
}
|
|
div.menu_hide img.closemenu:hover{
|
|
transform: rotate(180deg);
|
|
-ms-transform: rotate(180deg);
|
|
-moz-transform: rotate(180deg);
|
|
-webkit-transform: rotate(180deg);
|
|
}
|
|
div.menu_hide .add-info a{
|
|
padding-bottom: 40px;
|
|
}
|
|
div.menu_hide .add-info p {
|
|
font-size: 16px;
|
|
}
|
|
div.menu_hide .add-info span {
|
|
font-size: 14px;
|
|
line-height: 26px;
|
|
}
|
|
|
|
}
|
|
/*----------------------首页 ===> 结束------------------------*/
|
|
|
|
/*----------------------解决方案 ===> 开始---------------------*/
|
|
/*购物车清单*/
|
|
div.cart-box {
|
|
display: none;
|
|
overflow: auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.7);
|
|
position: fixed;
|
|
z-index: 7;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
div.cart-box .cartgb {
|
|
width: 35px;
|
|
height: 35px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
z-index: 1;
|
|
right: 6%;
|
|
top: 40px;
|
|
}
|
|
div.cart-box .cartgb:hover {
|
|
transform: rotate(180deg);
|
|
-o-transform: rotate(180deg);
|
|
-moz-transform: rotate(180deg);
|
|
-webkit-transform: rotate(180deg);
|
|
}
|
|
|
|
div.alt-back {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
div.big-box {
|
|
width: 100%;
|
|
max-width: 500px;
|
|
height: 510px;
|
|
margin: auto;
|
|
padding: 50px 0 0;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
div.cartwrap {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: auto;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
z-index: 6;
|
|
right: 0px;
|
|
left: 0px;
|
|
top: 0px;
|
|
}
|
|
div.cartwrap span {
|
|
display: block;
|
|
width: 98px;
|
|
height: 98px;
|
|
border-radius: 50%;
|
|
background-color: #FFFFFF;
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
div.cartwrap span i {
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
margin: auto;
|
|
color: #FD5C00;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
div.cartwrap span img {
|
|
width: 60px;
|
|
position: relative;
|
|
right: 2px;
|
|
top: 22px;
|
|
}
|
|
.cartlist {
|
|
width: 0;
|
|
height: 3px;
|
|
margin: auto;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.cartlist .upper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 80px;
|
|
background: url('../image/gwc-titleback.jpg');
|
|
background-size: cover;
|
|
}
|
|
.cartlist .upper span.cartname {
|
|
display: none;
|
|
}
|
|
.cartlist .upper span.colse {
|
|
display: none;
|
|
}
|
|
.cartlist .list-box {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.cartlist .goods,
|
|
.cartlist .client-info,
|
|
.cartlist .prompt {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.cartlist .goods{
|
|
overflow: auto;
|
|
}
|
|
.cartlist .client-info,
|
|
.cartlist .prompt {
|
|
left: 100%;
|
|
}
|
|
|
|
/* goods */
|
|
.cartlist .goods ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.cartlist .goods li {
|
|
overflow: hidden;
|
|
line-height: 50px;
|
|
padding: 10px 30px;
|
|
border-bottom: #f5f5f5 solid 1px;
|
|
position: relative;
|
|
}
|
|
.cartlist .goods li:last-child {
|
|
border: none;
|
|
}
|
|
.cartlist .goods img {
|
|
width: 50px;
|
|
height: 50px;
|
|
float: left;
|
|
}
|
|
.cartlist .goods .name {
|
|
float: left;
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
.cartlist .goods .price {
|
|
position: absolute;
|
|
right: 16%;
|
|
top: 10px;
|
|
color: #FD5C00;
|
|
}
|
|
.cartlist .goods i {
|
|
width: 30px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
margin: auto;
|
|
text-align: center;
|
|
font-size: 22px;
|
|
color: #CCC;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: 20px;
|
|
bottom: 0;
|
|
top: 0;
|
|
transition: 0.3s;
|
|
-o-transition: 0.3s;
|
|
-moz-transition: 0.3s;
|
|
-webkit-transition: 0.3s;
|
|
}
|
|
.cartlist .goods i:hover {
|
|
color: #FD5C00;
|
|
}
|
|
.cartlist .dele-btns {
|
|
height: 100%;
|
|
width: 32%;
|
|
background: #666;
|
|
position: absolute;
|
|
right: -32%;
|
|
top: 0;
|
|
}
|
|
.cartlist .dele-btns p {
|
|
float: left;
|
|
width: 50%;
|
|
height: 100%;
|
|
margin: 0;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
color: #FFF;
|
|
position: relative;
|
|
}
|
|
.cartlist .dele-btns p.focus {
|
|
background: #FD5C00;
|
|
}
|
|
.cartlist .dele-btns p span {
|
|
display: block;
|
|
width: 100%;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
margin: auto;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 0;
|
|
top: 0;
|
|
}
|
|
|
|
|
|
/* client-info */
|
|
.cartlist .client-info ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.cartlist .client-info li {
|
|
height: 80px;
|
|
padding-top: 25px;
|
|
padding-left: 90px;
|
|
padding-right: 50px;
|
|
border-bottom: #f5f5f5 solid 1px;
|
|
position: relative;
|
|
}
|
|
.cartlist .client-info li:last-child {
|
|
border: none;
|
|
}
|
|
.cartlist .client-info i.fa {
|
|
width: 30px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
font-size: 22px;
|
|
color: #CCC;
|
|
position: absolute;
|
|
left: 50px;
|
|
top: 25px;
|
|
}
|
|
.cartlist .client-info i.fa2{
|
|
font-size: 30px;
|
|
}
|
|
.cartlist .client-info i.fa4{
|
|
padding-left: 5px;
|
|
font-size: 21px;
|
|
}
|
|
.cartlist .client-info input{
|
|
width: 100%;
|
|
height: 25px;
|
|
border: none;
|
|
padding: 0 5px;
|
|
background: none;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.cartlist .client-info p{
|
|
margin: 0;
|
|
color: #CCC;
|
|
position: absolute;
|
|
font-size: 14px;
|
|
z-index: 1;
|
|
left: 95px;
|
|
top: 30px;
|
|
transition: 0.2s;
|
|
-o-transition: 0.2s;
|
|
-moz-transition: 0.2s;
|
|
-webkit-transition: 0.2s;
|
|
}
|
|
.cartlist .client-info p.dongh {
|
|
font-size: 12px;
|
|
top: 18px;
|
|
}
|
|
.cartlist .client-info .code {
|
|
border: none;
|
|
color: #CCC;
|
|
background: none;
|
|
position: absolute;
|
|
z-index: 3;
|
|
right: 20px;
|
|
top: 28px;
|
|
}
|
|
.cartlist .client-info .code:active{
|
|
top:29px;
|
|
right: 19px;
|
|
}
|
|
|
|
|
|
|
|
/* prompt */
|
|
.cartlist .prompt ul {
|
|
margin: 0;
|
|
list-style: none;
|
|
width: 380px;
|
|
padding: 70px 0 0 0;
|
|
margin: auto;
|
|
text-align: center;
|
|
}
|
|
.cartlist .prompt li.title {
|
|
color: #FD5C00;
|
|
font-size: 16px;
|
|
padding: 15px 10px;
|
|
}
|
|
.cartlist .prompt li.text {
|
|
color: #999;
|
|
line-height: 26px;
|
|
}
|
|
|
|
|
|
/* list-foot */
|
|
.cartlist .list-foot {
|
|
height: 60px;
|
|
overflow: hidden;
|
|
}
|
|
.cartlist .list-foot ul {
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: 0 16%;
|
|
position: relative;
|
|
}
|
|
.cartlist .list-foot li {
|
|
float: left;
|
|
list-style: none;
|
|
}
|
|
.cartlist .foot-btn {
|
|
width: 16%;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
background: #999;
|
|
color: #FFF;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
transition: 0.8s;
|
|
-o-transition: 0.8s;
|
|
-moz-transition: 0.8s;
|
|
-webkit-transition: 0.8s;
|
|
position: absolute;
|
|
}
|
|
.cartlist .prev {
|
|
left: 0;
|
|
}
|
|
.cartlist .next {
|
|
right: 0;
|
|
}
|
|
.cartlist .focus {
|
|
background: #FD5C00;
|
|
}
|
|
.cartlist .foot-btn:last-child {
|
|
border: none;
|
|
}
|
|
.cartlist .jd-3 {
|
|
width: 100%;
|
|
height: 60px;
|
|
background: #e5e5e5;
|
|
position: relative;
|
|
}
|
|
.cartlist .jd-3 span,
|
|
.cartlist .jd-3 span.focus:before {
|
|
margin: auto;
|
|
position: absolute;
|
|
bottom: 0;
|
|
top: 0;
|
|
}
|
|
.cartlist .jd-3 span.x-gray,
|
|
.cartlist .jd-3 span.x-red {
|
|
width: 100%;
|
|
height: 2px;
|
|
background: #CCC;
|
|
}
|
|
.cartlist .jd-3 span.x-red {
|
|
width: 0;
|
|
background: #FD5C00;
|
|
}
|
|
.cartlist .jd-3 span.d1,
|
|
.cartlist .jd-3 span.d2,
|
|
.cartlist .jd-3 span.d3 {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #FFF;
|
|
border-radius: 50%;
|
|
border: #CCC solid 2px;
|
|
z-index: 2;
|
|
transition: 0.3s;
|
|
-o-transition: 0.3s;
|
|
-moz-transition: 0.3s;
|
|
-webkit-transition: 0.3s;
|
|
transform: scale(1);
|
|
-o-transform: scale(1);
|
|
-moz-transform: scale(1);
|
|
-webkit-transform: scale(1);
|
|
}
|
|
.cartlist .jd-3 span.focus {
|
|
border-color: #FD5C00;
|
|
}
|
|
.cartlist .jd-3 span.focus:before {
|
|
display: block;
|
|
content: '';
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: #FD5C00;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.cartlist .jd-3 span.d1 {
|
|
left: 15%;
|
|
}
|
|
.cartlist .jd-3 span.d2 {
|
|
left: 48%;
|
|
}
|
|
.cartlist .jd-3 span.d3 {
|
|
left: 80%;
|
|
}
|
|
|
|
|
|
/* 购物车浮窗 */
|
|
.gwc-celan {
|
|
position: fixed;
|
|
bottom: 10%;
|
|
right: 10px;
|
|
z-index: 3;
|
|
}
|
|
.gwc-celan ul {
|
|
padding: 0;
|
|
}
|
|
.gwc-celan li {
|
|
width: 50px;
|
|
height: 50px;
|
|
list-style: none;
|
|
margin-bottom: 2px;
|
|
transition: 0.3s;
|
|
-o-transition: 0.3s;
|
|
-moz-transition: 0.3s;
|
|
-webkit-transition: 0.3s;
|
|
background: rgba(0,0,0,0.05);
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
.gwc-celan li:hover {
|
|
background: rgba(0,0,0,0.2);
|
|
}
|
|
.gwc-celan li i.gwc-num {
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
font-size: 10px !important;
|
|
border-radius: 50%;
|
|
border: #FFF solid 1px;
|
|
background: #FD5C00;
|
|
color: #FFF;
|
|
font-style: normal;
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
}
|
|
.gwc-celan li span {
|
|
display: block;
|
|
width: 0;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
background: rgba(0,0,0,0.2);
|
|
color: #FFF;
|
|
position: absolute;
|
|
right: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.gwc-celan img {
|
|
margin: auto;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
.gwc-celan img.a1 {
|
|
width: 25px;
|
|
}
|
|
.gwc-celan img.a2 {
|
|
width: 17px;
|
|
}
|
|
.gwc-celan img.a3 {
|
|
width: 20px;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
div.holder span.add {
|
|
display: none !important;
|
|
}
|
|
.gwc-celan {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* 解决方案 */
|
|
div.solutionwrap {
|
|
padding-top: 20px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
div.posterwrap {
|
|
width: 100%;
|
|
height: 200px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
div.posterwrap div.poster {
|
|
width:100%;
|
|
height: 100%;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
position: relative;
|
|
/*background-color: rgba(253, 92, 0, 0.5);*/
|
|
}
|
|
div.solution {
|
|
background-image: url("../image/mobposter01.jpg");
|
|
}
|
|
div.poster div.textwarp {
|
|
width: 100%;
|
|
height: 40px;
|
|
position: absolute;
|
|
left: 0px;
|
|
right: 0px;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
margin: auto;
|
|
}
|
|
div.posterwrap div.poster h2 {
|
|
font-family: 'webfont-fine';
|
|
padding-top: 5px;
|
|
margin: 0px;
|
|
font-size: 30px;
|
|
}
|
|
div.posterwrap div.poster p {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
div.holder {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
height: 290px;
|
|
margin: 10px auto;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
background: #FFF;
|
|
}
|
|
div.holder div.cover {
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
}
|
|
div.holder a {
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
div.cover .cover-back {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(253,92,0,0.3);
|
|
position: absolute;
|
|
opacity: 0;
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
div.holder div.title {
|
|
width: 100%;
|
|
height: 74px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
border-bottom-right-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
background-color: #FFF;
|
|
color: #666;
|
|
}
|
|
div.holder div.title p {
|
|
font-size: 12px;
|
|
margin: 0px;
|
|
padding-left: 15px;
|
|
}
|
|
div.holder div.title p.name {
|
|
font-size: 16px;
|
|
padding: 13px 15px 5px;
|
|
position: relative;
|
|
}
|
|
div.holder .money
|
|
{
|
|
position: absolute;
|
|
top:10px;
|
|
right: 10px;
|
|
color:#ff0000;
|
|
font-size: 20px;
|
|
font-family: arial;
|
|
}
|
|
div.holder div.title p.intro {
|
|
color: #CCC;
|
|
}
|
|
div.holder span.add {
|
|
display: inline-block;
|
|
width: 28px;
|
|
height: 28px;
|
|
margin: auto;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 20px;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
}
|
|
div.holder span.add img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
div.holder span.addbtn:hover img {
|
|
transform: rotate(180deg);
|
|
-o-transform: rotate(180deg);
|
|
-moz-transform: rotate(180deg);
|
|
-webkit-transform: rotate(180deg);
|
|
}
|
|
div.cover i.searchicon {
|
|
display: inline-block;
|
|
height: 57px;
|
|
width: 57px;
|
|
margin: auto;
|
|
line-height: 57px;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
position: absolute;
|
|
opacity: 0;
|
|
z-index: 2;
|
|
right: 0px;
|
|
left: 0px;
|
|
top: 30%;
|
|
}
|
|
|
|
div.footer {
|
|
/*padding-top: 20px;*/
|
|
/*height: 70px;*/
|
|
}
|
|
div.footer p{
|
|
text-align: center;
|
|
padding: 20px 0px;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
margin: 0px;
|
|
background-color: #62a8ea;
|
|
}
|
|
div.footernav {
|
|
width: 100%;
|
|
height: 90px;
|
|
background-color: #0D0D0D;
|
|
position: relative;
|
|
}
|
|
div.footernav img.logo {
|
|
position: absolute;
|
|
top: 36px;
|
|
left: 6%;
|
|
width: 100px;
|
|
height: auto;
|
|
}
|
|
div.footernav a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
ul.foonav {
|
|
padding: 0px;
|
|
position: absolute;
|
|
top: 36px;
|
|
right: 6%;
|
|
}
|
|
ul.foonav li > a {
|
|
font-size: 14px;
|
|
display: inline-block;
|
|
padding: 0px 13px 0px 10px;
|
|
}
|
|
ul.foonav li > a,
|
|
ul.foonav li > a:hover,
|
|
ul.foonav li > a:focus,
|
|
ul.foonav li > a:active {
|
|
color: #FD5C00;
|
|
text-decoration: none;
|
|
}
|
|
ul.foonav li {
|
|
display: inline-block;
|
|
border-right: 1px solid #343434;
|
|
}
|
|
ul.foonav li:last-child {
|
|
border: none;
|
|
}
|
|
|
|
|
|
/*手机端方案详情*/
|
|
div.mobviewbox {
|
|
display: none;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #FFFFFF;
|
|
position: fixed;
|
|
z-index: 6;
|
|
left: 0px;
|
|
top: 100%;
|
|
}
|
|
div.mobwrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
overflow: auto;
|
|
background-color: #FFFFFF;
|
|
}
|
|
section.introwrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background: #FFF;
|
|
position: relative;
|
|
z-index: 4;
|
|
}
|
|
section.introwrap img {
|
|
width: 100%;
|
|
height: auto;
|
|
float: left;
|
|
}
|
|
div.mobwrap img.closeintro{
|
|
width: 20px;
|
|
height: auto;
|
|
position: fixed;
|
|
top: 16px;
|
|
right: 16px;
|
|
z-index: 5;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
/*PC端方案详情*/
|
|
div.pcviewbox {
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
z-index: 7;
|
|
top: 100%;
|
|
}
|
|
div.pcviewbox div.pcwrap {
|
|
width: 78%;
|
|
max-width: 1100px;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: auto;
|
|
margin: auto;
|
|
left: 0px;
|
|
right: 0px;
|
|
}
|
|
div.pcviewbox img.closeintro {
|
|
height: auto;
|
|
position: fixed;
|
|
width: 30px;
|
|
top: 40px;
|
|
right: 6%;
|
|
z-index: 5;
|
|
cursor: pointer;
|
|
}
|
|
div.pcmask {
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,0.8);
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* 服务弹窗 */
|
|
.fuwu-details-box {
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
z-index: 7;
|
|
top: 100%;
|
|
left: 0;
|
|
}
|
|
.fuwu-details-box .alt-back {
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.8);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.fuwu-details-box .closeintro{
|
|
width: 30px;
|
|
cursor: pointer;
|
|
position: fixed;
|
|
z-index: 3;
|
|
right: 10px;
|
|
top: 10px;
|
|
}
|
|
.fuwu-details-box iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 1025px;
|
|
margin: auto;
|
|
border: none;
|
|
background: #FFF;
|
|
-o-overflow-scrolling: touch;
|
|
-miz-overflow-scrolling: touch;
|
|
-webkit-overflow-scrolling: touch;
|
|
overflow-y: scroll;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.fuwu-details-box i {
|
|
width: 27px;
|
|
height: 26px;
|
|
margin: auto;
|
|
text-align: center;
|
|
color: #999;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
/* 服务弹窗-详情 */
|
|
.fuwu-details table,
|
|
.fuwu-dian table {
|
|
width: 100%;
|
|
}
|
|
.padding-top {
|
|
width: auto;
|
|
height: auto;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
.return-btn {
|
|
display: none;
|
|
}
|
|
.return-btn img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.fuwu-details {
|
|
width: 100%;
|
|
background: #FFF;
|
|
box-shadow: 0 0 5px #ccc;
|
|
-o-box-shadow: 0 0 5px #ccc;
|
|
-moz-box-shadow: 0 0 5px #ccc;
|
|
-webkit-box-shadow: 0 0 5px #ccc;
|
|
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.fuwu-details .fmimg {
|
|
width: 30%;
|
|
max-width: 200px;
|
|
height: 150px;
|
|
}
|
|
.fuwu-details .fmimg .img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
.fuwu-details .fuwu-info {
|
|
padding: 5px 50px 5px 5%;
|
|
}
|
|
.fuwu-details .fuwu-info p {
|
|
margin: 0;
|
|
color: #CCC;
|
|
}
|
|
.fuwu-details .fuwu-info .name {
|
|
padding-bottom: 5px;
|
|
font-size: 16px;
|
|
color: #666;
|
|
}
|
|
.fuwu-details .fuwu-info .name i{
|
|
display: none;
|
|
}
|
|
.fuwu-details .fuwu-info .intro {
|
|
display: none;
|
|
}
|
|
.fuwu-details .fuwu-info span {
|
|
width: 30px;
|
|
height: 30px;
|
|
margin: auto;
|
|
color: #FFF;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 23%;
|
|
}
|
|
.fuwu-details .fuwu-info span.focus {
|
|
cursor: pointer;
|
|
}
|
|
.fuwu-details .fuwu-info span img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.fuwu-details .fuwu-info span i{
|
|
display: block;
|
|
width: 100px;
|
|
font-style: normal;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
color: #CCC;
|
|
position: absolute;
|
|
left: -95%;
|
|
top: 130%;
|
|
}
|
|
.fuwu-details .fuwu-info span.focus i{
|
|
color: #FD5C00;
|
|
}
|
|
.fuwu-dian {
|
|
overflow-y: hidden;
|
|
padding: 20px 0;
|
|
color: #666;
|
|
}
|
|
.fuwu-dian:nth-child(2n+1) {
|
|
background: #FFF;
|
|
}
|
|
.fuwu-dian table .fmimg {
|
|
width: 22%;
|
|
padding-right: 4%;
|
|
}
|
|
.fuwu-dian table .fmimg img {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
}
|
|
.fuwu-dian table h3{
|
|
margin: 0;
|
|
padding-bottom: 15px;
|
|
font-size: 16px;
|
|
}
|
|
.fuwu-dian table h3 img {
|
|
display: none;
|
|
}
|
|
.fuwu-dian table ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0 10px 0 0;
|
|
line-height: 20px;
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.return-btn {
|
|
display: block;
|
|
width: 35px;
|
|
height: 35px;
|
|
margin: auto;
|
|
position: absolute;
|
|
right: 30px;
|
|
bottom: 0;
|
|
top: 0;
|
|
}
|
|
.fuwu-details .fuwu-info span {
|
|
display: none !important;
|
|
}
|
|
.fuwu-details .fuwu-info .name i {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.return-btn {
|
|
width: 25px;
|
|
height: 25px;
|
|
right: 10px;
|
|
}
|
|
.padding-top {
|
|
padding-top: 70px;
|
|
}
|
|
.fuwu-details {
|
|
top: 0;
|
|
bottom: inherit;
|
|
}
|
|
.fuwu-details .fuwu-info p.zhaiy {
|
|
font-size: 12px;
|
|
}
|
|
.fuwu-details .fmimg {
|
|
width: 21%;
|
|
}
|
|
.fuwu-dian table h3 img {
|
|
display: inline-block;
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
.fuwu-dian .fuwu-info {
|
|
padding-left: 10px;
|
|
}
|
|
.fuwu-details .fuwu-info {
|
|
height: 70px;
|
|
padding-top: 14px;
|
|
}
|
|
.fuwu-details .fuwu-info .name i{
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
font-size: 14px;
|
|
color: #FD5C00;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
/*----------------------设备适配===>平板电脑-------------------*/
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
div.solution {
|
|
background-image: url("../image/poster01.jpg");
|
|
}
|
|
div.posterwrap{
|
|
height:300px;
|
|
}
|
|
div.posterwrap div.poster h2 {
|
|
font-size: 40px;
|
|
}
|
|
div.posterwrap div.poster p {
|
|
font-size: 18px;
|
|
}
|
|
div.solutionwrap {
|
|
padding-top: 20px;
|
|
}
|
|
div.holder {
|
|
margin: 20px auto;
|
|
width: 98%;
|
|
}
|
|
div.mobwrap img.closeintro {
|
|
width: 30px;
|
|
top: 20px;
|
|
right: 20px;
|
|
}
|
|
.padding-top {
|
|
padding: 150px 0 0 0;
|
|
}
|
|
.fuwu-details .fmimg {
|
|
width: 30%;
|
|
max-width: 200px;
|
|
height: 150px;
|
|
}
|
|
.fuwu-details .fuwu-info {
|
|
padding-right: 100px;
|
|
}
|
|
.fuwu-details .fuwu-info .name {
|
|
padding-bottom: 10px;
|
|
font-size: 24px;
|
|
}
|
|
.fuwu-details .fuwu-info .zhaiy {
|
|
display: none;
|
|
}
|
|
.fuwu-details .fuwu-info .intro {
|
|
display: block;
|
|
font-size: 14px;
|
|
line-height: 26px;
|
|
}
|
|
.fuwu-details .fuwu-info span {
|
|
width: 35px;
|
|
height: 35px;
|
|
right: 30px;
|
|
}
|
|
.fuwu-dian {
|
|
overflow-y: hidden;
|
|
padding: 50px 0;
|
|
color: #666;
|
|
}
|
|
.fuwu-dian:nth-child(2n+1) {
|
|
background: #FFF;
|
|
}
|
|
.fuwu-dian table .fmimg {
|
|
width: 35%;
|
|
padding-right: 6%;
|
|
}
|
|
.fuwu-dian table .fmimg img {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
}
|
|
.fuwu-dian table h3{
|
|
font-size: 20px;
|
|
}
|
|
.fuwu-dian table ul {
|
|
padding: 0 30px 0 0;
|
|
line-height: 26px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
}
|
|
|
|
/*----------------------设备适配===>平板样式（横）-------------------*/
|
|
@media (min-width: 992px) and (max-width: 1119px) {
|
|
div.cover i.searchicon,
|
|
div.cover .cover-back {
|
|
opacity: 0;
|
|
}
|
|
div.cover:hover i.searchicon,
|
|
div.cover:hover .cover-back {
|
|
opacity: 1;
|
|
}
|
|
div.solution {
|
|
background-image: url("../image/poster01.jpg");
|
|
}
|
|
div.posterwrap {
|
|
height: 300px;
|
|
}
|
|
div.posterwrap div.poster h2 {
|
|
font-size: 45px;
|
|
}
|
|
div.posterwrap div.poster p {
|
|
font-size: 16px;
|
|
}
|
|
div.solutionwrap {
|
|
padding-top: 30px;
|
|
padding-left: 5%;
|
|
padding-right: 5%;
|
|
}
|
|
div.holder {
|
|
margin: 20px auto;
|
|
width: 98%;
|
|
}
|
|
.fuwu-details .fuwu-info span.focus img:hover {
|
|
transform: rotate(180deg);
|
|
-o-transform: rotate(180deg);
|
|
-moz-transform: rotate(180deg);
|
|
-webkit-transform: rotate(180deg);
|
|
}
|
|
.fuwu-details-box .closeintro {
|
|
right: 4%;
|
|
top: 30px;
|
|
}
|
|
.padding-top {
|
|
padding: 150px 0 0 0;
|
|
}
|
|
.fuwu-details {
|
|
top: 0;
|
|
bottom: inherit;
|
|
}
|
|
.fuwu-details .fmimg {
|
|
width: 18%;
|
|
max-width: 200px;
|
|
height: 150px;
|
|
}
|
|
.fuwu-details .fuwu-info {
|
|
padding-right: 175px;
|
|
}
|
|
.fuwu-details .fuwu-info .name {
|
|
padding-bottom: 10px;
|
|
font-size: 24px;
|
|
}
|
|
.fuwu-details .fuwu-info .zhaiy {
|
|
display: none;
|
|
}
|
|
.fuwu-details .fuwu-info .intro {
|
|
display: block;
|
|
font-size: 14px;
|
|
line-height: 26px;
|
|
}
|
|
.fuwu-details .fuwu-info span {
|
|
width: 35px;
|
|
height: 35px;
|
|
right: 70px;
|
|
}
|
|
.fuwu-dian {
|
|
overflow-y: hidden;
|
|
padding: 50px 0;
|
|
color: #666;
|
|
}
|
|
.fuwu-dian:nth-child(2n+1) {
|
|
background: #FFF;
|
|
}
|
|
.fuwu-dian table .fmimg {
|
|
width: 35%;
|
|
padding-right: 6%;
|
|
}
|
|
.fuwu-dian table .fmimg img {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
}
|
|
.fuwu-dian table h3 {
|
|
font-size: 20px;
|
|
}
|
|
.fuwu-dian table ul {
|
|
padding: 0 30px 0 0;
|
|
line-height: 26px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
/*----------------------设备适配===>大屏电脑-------------------*/
|
|
@media (min-width: 1120px) {
|
|
div.cover i.searchicon,
|
|
div.cover .cover-back {
|
|
opacity: 0;
|
|
}
|
|
|
|
div.cover:hover i.searchicon,
|
|
div.cover:hover .cover-back {
|
|
opacity: 1;
|
|
}
|
|
div.solution {
|
|
background-image: url("../image/poster01.jpg");
|
|
}
|
|
div.posterwrap {
|
|
min-height: 330px;
|
|
}
|
|
div.posterwrap div.poster h2 {
|
|
font-size: 50px;
|
|
}
|
|
div.posterwrap div.poster p {
|
|
font-size: 16px;
|
|
}
|
|
div.solutionwrap {
|
|
padding-top: 30px;
|
|
padding-left: 5%;
|
|
padding-right: 5%;
|
|
padding-bottom: 30px;
|
|
}
|
|
div.holder {
|
|
margin: 20px auto;
|
|
width: 94%;
|
|
}
|
|
.fuwu-details-box .closeintro:hover,
|
|
div.pcviewbox img.closeintro:hover{
|
|
transform: rotate(180deg);
|
|
-ms-transform: rotate(180deg);
|
|
-moz-transform: rotate(180deg);
|
|
-webkit-transform: rotate(180deg);
|
|
}
|
|
.fuwu-details-box .closeintro{
|
|
right: 4%;
|
|
top: 30px;
|
|
}
|
|
.fuwu-details .fuwu-info span.focus img:hover {
|
|
transform: rotate(180deg);
|
|
-o-transform: rotate(180deg);
|
|
-moz-transform: rotate(180deg);
|
|
-webkit-transform: rotate(180deg);
|
|
}
|
|
|
|
}
|
|
/*----------------------解决方案 ===> 结束---------------------*/
|
|
|
|
/*----------------------精选案例 ===> 开始---------------------*/
|
|
div.cases {
|
|
background-image: url("../image/mobposter03.jpg");
|
|
}
|
|
div.holder span.partner_title {
|
|
display: inline-block;
|
|
position: absolute;
|
|
right: 16px;
|
|
bottom: 16px;
|
|
z-index: 2;
|
|
color: #CCC;
|
|
font-size: 14px;
|
|
}
|
|
span.the_title {
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
padding: 10px 15px;
|
|
border-radius: 50px;
|
|
color: #FFFFFF;
|
|
position: relative;
|
|
z-index: 4;
|
|
}
|
|
span.getdone {
|
|
background-color: #FCB322;
|
|
}
|
|
span.ongoing {
|
|
background-color: #a9d86e;
|
|
}
|
|
div.spot_titles {
|
|
position: relative;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
color: #888888;
|
|
padding-bottom: 6px;
|
|
}
|
|
div.spot_titles span.before_line {
|
|
width: 100%;
|
|
display: inline-block;
|
|
height: 1px;
|
|
border-top: 1px solid #e4e4e4;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 0px;
|
|
}
|
|
div.spot_titles span.after_line {
|
|
width: 160px;
|
|
height: 100%;
|
|
margin: auto;
|
|
background: #f7f7f7;
|
|
position: absolute;
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
div.cases-box div.title {
|
|
width: 100%;
|
|
height: 54px;
|
|
border-radius: 0 0 4px 4px;
|
|
background: #FFF;
|
|
color: #666;
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
}
|
|
div.cases-box div.title p {
|
|
line-height: 54px;
|
|
font-size: 16px;
|
|
margin: 0px;
|
|
padding-left: 15px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
div.cases-box i.searchicon {
|
|
top: 34%;
|
|
}
|
|
div.cases-box div.aljxz {
|
|
background: rgba(169,216,110,0.3);
|
|
}
|
|
div.cases-box div.alywc {
|
|
background: rgba(253,92,0,0.3);
|
|
}
|
|
body.casesdet .return-btn{
|
|
top: 20px;
|
|
bottom: inherit;
|
|
position: fixed;
|
|
}
|
|
body.casesdet img {
|
|
float: left;
|
|
}
|
|
|
|
/*----------------------设备适配===>平板电脑-------------------*/
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
div.cases {
|
|
background-image: url("../image/poster03.jpg");
|
|
}
|
|
}
|
|
|
|
/*----------------------设备适配===>PC端样式-------------------*/
|
|
@media (min-width: 992px) and (max-width: 1119px) {
|
|
div.cases {
|
|
background-image: url("../image/poster03.jpg");
|
|
}
|
|
}
|
|
|
|
/*----------------------设备适配===>大屏电脑-------------------*/
|
|
@media (min-width: 1120px) {
|
|
div.cases {
|
|
background-image: url("../image/poster03.jpg");
|
|
}
|
|
}
|
|
/*----------------------精选案例 ===> 结束---------------------*/
|
|
|
|
|
|
/*----------------------团队成员 ===> 开始---------------------*/
|
|
div.team {
|
|
background-image: url("../image/mobposter02.jpg");
|
|
}
|
|
div.teambg {
|
|
height: 50%;
|
|
background-size: cover;
|
|
}
|
|
div.teamphoto {
|
|
width: 120px;
|
|
height: 120px;
|
|
margin: auto;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
div.teamphoto img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
div.teamphoto .name {
|
|
font-size: 16px;
|
|
padding-top: 10px;
|
|
margin-bottom: 5px;
|
|
color: #333;
|
|
}
|
|
div.teamphoto .zhiwei {
|
|
font-size: 12px;
|
|
color: #CCC;
|
|
}
|
|
div.teamintro {
|
|
background-image: url("../image/mobposter02.jpg");
|
|
}
|
|
div.teamintro div.nametitle {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
text-align: left;
|
|
padding-bottom: 20px;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
div.teamintro div.nametitle h2{
|
|
padding-bottom: 10px;
|
|
font-size: 26px;
|
|
}
|
|
div.introwrap {
|
|
position: relative;
|
|
padding: 0px;
|
|
margin: 2px 0px;
|
|
top: 0px;
|
|
}
|
|
div.introwrap div {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
div.introwrap div.backimg {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
div.introwrap div.contbox {
|
|
width: 100%;
|
|
height: 400px;
|
|
}
|
|
div.introwrap div.textbox {
|
|
width: 75%;
|
|
height: 120px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
margin: auto;
|
|
}
|
|
div.introwrap div.textbox h3,
|
|
div.introwrap div.textbox p {
|
|
margin: 0px;
|
|
}
|
|
div.introwrap div.textbox h3 {
|
|
font-size: 20px;
|
|
color: #565656;
|
|
padding-bottom: 10px;
|
|
}
|
|
div.introwrap div.textbox p {
|
|
font-size: 14px;
|
|
color: #909090;
|
|
line-height: 24px;
|
|
}
|
|
div.introwrap div.imgmask {
|
|
width: 100%;
|
|
height: 400px;
|
|
background-color: rgba(253, 92, 0, 0.35);
|
|
}
|
|
div.textbox ul.myskills {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
position: relative;
|
|
top: 5px;
|
|
}
|
|
div.textbox ul.myskills > li {
|
|
list-style-type: none;
|
|
width: 90%;
|
|
height: 20px;
|
|
position: relative;
|
|
border-radius: 50px;
|
|
overflow: hidden;
|
|
margin-bottom: 15px;
|
|
}
|
|
div.textbox ul.myskills > li > span {
|
|
display: block;
|
|
position: absolute;
|
|
height: 20px;
|
|
top: 0px;
|
|
left: 0px;
|
|
line-height: 20px;
|
|
padding-left: 10px;
|
|
}
|
|
div.textbox ul.myskills > li > span.backbar {
|
|
background-color: #dcdcdc;
|
|
width: 100%;
|
|
|
|
}
|
|
div.textbox ul.myskills > li > span.slidebar {
|
|
background-color: #FD5C00;
|
|
font-size: 12px;
|
|
color: #FFFFFF;
|
|
}
|
|
div.introwrap .btns,
|
|
div.introwrap .btns-two {
|
|
position: absolute;
|
|
top: 20px;
|
|
z-index: 5;
|
|
right: 50px;
|
|
}
|
|
div.introwrap .btns-two {
|
|
top: inherit;
|
|
bottom: 20px;
|
|
}
|
|
div.introwrap .btns i.fa,
|
|
div.introwrap .btns-two i.fa {
|
|
width: 50px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
color: #FFF;
|
|
background: #CCC;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
div.introwrap .btns i.fa:active,
|
|
div.introwrap .btns-two i.fa:active {
|
|
box-shadow: 0 2px 3px rgba(0,0,0,0.1) inset;
|
|
-o-box-shadow: 0 2px 3px rgba(0,0,0,0.1) inset;
|
|
-moz-box-shadow: 0 2px 3px rgba(0,0,0,0.1) inset;
|
|
-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.1) inset;
|
|
}
|
|
|
|
/*----------------------设备适配===>平板电脑-------------------*/
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
div.team {
|
|
background-image: url("../image/poster02.jpg");
|
|
}
|
|
div.teamintro {
|
|
background-image: url("../image/poster02.jpg");
|
|
}
|
|
div.introwrap div.contbox {
|
|
height: 400px;
|
|
}
|
|
}
|
|
|
|
/*----------------------设备适配===>PC端样式-------------------*/
|
|
@media (min-width: 992px) and (max-width: 1119px) {
|
|
div.team {
|
|
background-image: url("../image/poster02.jpg");
|
|
}
|
|
div.teamintro {
|
|
background-image: url("../image/poster02.jpg");
|
|
}
|
|
div.teamintro div.nametitle {
|
|
padding-bottom: 30px;
|
|
}
|
|
div.introwrap div.contbox {
|
|
height: 400px;
|
|
}
|
|
}
|
|
|
|
/*----------------------设备适配===>大屏电脑-------------------*/
|
|
@media (min-width: 1120px) {
|
|
div.team {
|
|
background-image: url("../image/poster02.jpg");
|
|
}
|
|
div.teamintro {
|
|
background-image: url("../image/poster02.jpg");
|
|
}
|
|
div.teamintro div.nametitle {
|
|
padding-bottom: 30px;
|
|
}
|
|
div.introwrap div.contbox {
|
|
height: 500px;
|
|
}
|
|
div.introwrap div.imgmask {
|
|
height: 500px;
|
|
}
|
|
}
|
|
|
|
/*----------------------团队成员 ===> 结束---------------------*/
|
|
|
|
|
|
/*----------------------合作流程 ===> 开始---------------------*/
|
|
div.process {
|
|
background-image: url("../image/mobposter01.jpg");
|
|
}
|
|
div.process_wrap {
|
|
width: 100%;
|
|
position: relative;
|
|
padding: 0px 6%;
|
|
}
|
|
div.process_wrap ul {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
div.process_wrap > ul > li {
|
|
position: relative;
|
|
list-style-type: none;
|
|
display: block;
|
|
}
|
|
div.process_wrap > ul > li:first-child {
|
|
height: 60px;
|
|
}
|
|
div.process_wrap > ul > li:first-child:after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 2px;
|
|
height: 60px;
|
|
background-color: orange;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 23px;
|
|
}
|
|
div.process_wrap > ul > li > h2 {
|
|
font-size: 18px;
|
|
margin: 0px;
|
|
color: #565656;
|
|
padding-bottom: 10px;
|
|
padding-left: 70px
|
|
}
|
|
div.process_wrap > ul > li > p {
|
|
font-size: 14px;
|
|
color: #b4b4b4;
|
|
margin: 0px;
|
|
padding-left: 70px;
|
|
line-height: 22px;
|
|
}
|
|
div.process_wrap > ul > li.steps {
|
|
height: 140px;
|
|
}
|
|
div.process_wrap > ul > li.steps:before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: transparent;
|
|
border: 2px solid orange;
|
|
border-radius: 30px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
div.process_wrap > ul > li.steps:after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 2px;
|
|
height: 92px;
|
|
background-color: orange;
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 24px;
|
|
}
|
|
div.process_wrap > ul > li:last-child {
|
|
position: relative;
|
|
height: 20px;
|
|
}
|
|
div.process_wrap > ul > li:last-child:before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid orange;
|
|
border-radius: 20px;
|
|
position: absolute;
|
|
left: 14px;
|
|
top: 0px;
|
|
}
|
|
|
|
/*----------------------设备适配===>平板电脑-------------------*/
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
div.process {
|
|
background-image: url("../image/poster01.jpg");
|
|
}
|
|
div.process_wrap {
|
|
padding: 0px 13%;
|
|
}
|
|
div.process_wrap > ul > li > h2,
|
|
div.process_wrap > ul > li > p {
|
|
padding-left: 80px;
|
|
}
|
|
}
|
|
|
|
/*----------------------设备适配===>PC端样式-------------------*/
|
|
@media (min-width: 992px) and (max-width: 1119px) {
|
|
div.process {
|
|
background-image: url("../image/poster01.jpg");
|
|
}
|
|
div.process_wrap {
|
|
padding: 0px 20%;
|
|
}
|
|
div.process_wrap > ul > li.steps {
|
|
height: 160px;
|
|
}
|
|
div.process_wrap > ul > li > h2,
|
|
div.process_wrap > ul > li > p {
|
|
padding-left: 120px;
|
|
}
|
|
div.process_wrap > ul > li.steps:before {
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 40px;
|
|
}
|
|
div.process_wrap > ul > li:first-child:after {
|
|
left: 34px;
|
|
}
|
|
div.process_wrap > ul > li.steps:after {
|
|
left: 34px;
|
|
top: 70px;
|
|
height: 90px;
|
|
}
|
|
div.process_wrap > ul > li:last-child:before {
|
|
left: 25px;
|
|
}
|
|
}
|
|
|
|
|
|
/*----------------------设备适配===>大屏电脑-------------------*/
|
|
@media (min-width: 1120px) {
|
|
div.process {
|
|
background-image: url("../image/poster01.jpg");
|
|
}
|
|
div.process_wrap {
|
|
padding: 100px 10%;
|
|
background-color: none;
|
|
}
|
|
|
|
}
|
|
/*----------------------合作流程 ===> 结束---------------------*/
|
|
|
|
/*----------------------加入我们 ===> 开始---------------------*/
|
|
div.joinus {
|
|
background-image: url("../image/mobposter02.jpg");
|
|
}
|
|
div.anchormask {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
z-index: 7;
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,0.8);
|
|
}
|
|
div.jobinfo {
|
|
margin: auto;
|
|
width: 90%;
|
|
height: 600px;
|
|
display: none;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
top: 80px;
|
|
left: 0px;
|
|
right: 0px;
|
|
z-index: 8;
|
|
}
|
|
div.contentholder {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 0px;
|
|
height: 600px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.joinus-add {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
margin: auto;
|
|
font-size: 14px;
|
|
color: #CCC;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 15px;
|
|
top: 0;
|
|
}
|
|
|
|
/* 详情 */
|
|
div.info-box {
|
|
width: 100%;
|
|
position: absolute;
|
|
}
|
|
div.poster_anchor {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 260px;
|
|
height: 260px;
|
|
padding-top: 260px;
|
|
z-index: 2;
|
|
overflow: hidden;
|
|
}
|
|
div.poster_anchor img{
|
|
width: 260px;
|
|
height: 260px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
div.poster_anchor .zhiwei {
|
|
width: 260px;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
opacity: 0;
|
|
color: #FFF;
|
|
position: absolute;
|
|
z-index: 7;
|
|
top: 210px;
|
|
|
|
}
|
|
div.poster_anchor p {
|
|
color: #666;
|
|
font-size: 18px;
|
|
padding-left: 25px;
|
|
margin-top: 35px;
|
|
position: relative;
|
|
}
|
|
div.poster_anchor ul{
|
|
margin: 0;
|
|
padding-left: 43px;
|
|
padding-right: 20px;
|
|
color: #CCC;
|
|
line-height: 30px;
|
|
}
|
|
div.poster_anchor li {
|
|
position: relative;
|
|
}
|
|
div.poster-text {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 45px 15px 15px 315px;
|
|
position: relative;
|
|
z-index: 1;
|
|
overflow: auto;
|
|
}
|
|
div.poster-text p {
|
|
color: #666;
|
|
font-size: 18px;
|
|
padding-left: 25px;
|
|
margin-top: 15px;
|
|
position: relative;
|
|
}
|
|
div.poster-text ul {
|
|
padding-bottom: 20px;
|
|
color: #CCC;
|
|
line-height: 26px;
|
|
}
|
|
div.poster-text li {
|
|
position: relative;
|
|
}
|
|
|
|
/* kfz-info info-input */
|
|
div.kfz-info {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-left: 260px;
|
|
position: absolute;
|
|
}
|
|
.kfz-info .info-input {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
.kfz-info .info-input ul{
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 70px 10% 0;
|
|
margin: auto;
|
|
list-style: none;
|
|
}
|
|
.kfz-info .info-input li {
|
|
width: 100%;
|
|
height: 50px;
|
|
margin-bottom: 38px;
|
|
position: relative;
|
|
border: #efefef solid 1px;
|
|
}
|
|
.kfz-info .info-input span {
|
|
color: #CCC;
|
|
position: absolute;
|
|
bottom: 110%;
|
|
left: 0;
|
|
}
|
|
.kfz-info .info-input i {
|
|
color: #f00;
|
|
}
|
|
.kfz-info .info-input input[type=text],
|
|
.kfz-info .info-input select {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #666;
|
|
border: none;
|
|
}
|
|
.kfz-info .info-input input[type=text] {
|
|
padding: 0 15px;
|
|
}
|
|
.kfz-info .info-input .codebtn {
|
|
border: none;
|
|
background: none;
|
|
color: #999;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 13px;
|
|
}
|
|
.kfz-info .info-input .codebtn:active {
|
|
top: 14px;
|
|
right: 9px;
|
|
}
|
|
.kfz-info .info-input .cityList select {
|
|
width: 50%;
|
|
float: left;
|
|
}
|
|
.kfz-info .info-input .cityList select:last-child {
|
|
border-left: #efefef solid 1px;
|
|
}
|
|
|
|
|
|
|
|
/* kfz-info info-prompt */
|
|
.kfz-info .info-prompt{
|
|
width: 460px;
|
|
height: 110px;
|
|
margin: auto;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 315px;
|
|
top: 0;
|
|
}
|
|
.kfz-info .info-prompt .title {
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
color: #FD5C00;
|
|
}
|
|
.kfz-info .info-prompt .text {
|
|
line-height: 26px;
|
|
color: #666;
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
/* 按钮 */
|
|
.joinus-gbbtn {
|
|
width: 35px;
|
|
height: 35px;
|
|
cursor: pointer;
|
|
position: fixed;
|
|
top: 40px;
|
|
right: 6%;
|
|
z-index: 2;
|
|
}
|
|
div.jobinfo .btns,
|
|
div.jobinfo .input-btn {
|
|
width: 160px;
|
|
height: 50px;
|
|
margin: auto;
|
|
font-size: 16px;
|
|
color: #FFF;
|
|
background: #FD5C00;
|
|
border-radius: 25px;
|
|
border: none;
|
|
position: absolute;
|
|
z-index: 3;
|
|
bottom: 40px;
|
|
left: 20px;
|
|
}
|
|
div.jobinfo .input-btn {
|
|
left: inherit;
|
|
right: 10%;
|
|
z-index: 1;
|
|
}
|
|
div.jobinfo .prompt-btn {
|
|
bottom: 130px;
|
|
}
|
|
div.jobinfo .btns:active,
|
|
div.jobinfo .input-btn:active {
|
|
box-shadow: 2px 2px 5px rgba(0,0,0,0.3) inset;
|
|
-o-box-shadow: 2px 2px 5px rgba(0,0,0,0.3) inset;
|
|
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3) inset;
|
|
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3) inset;
|
|
}
|
|
|
|
/*----------------------设备适配===>平板电脑-------------------*/
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
div.joinus {
|
|
background-image: url("../image/poster02.jpg");
|
|
}
|
|
|
|
}
|
|
|
|
/*----------------------设备适配===>PC端样式-------------------*/
|
|
@media (min-width: 992px) and (max-width: 1119px) {
|
|
div.joinus {
|
|
background-image: url("../image/poster02.jpg");
|
|
}
|
|
.joinus-gbbtn:hover {
|
|
transform: rotate(180deg);
|
|
-o-transform: rotate(180deg);
|
|
-moz-transform: rotate(180deg);
|
|
-webkit-transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
|
|
/*----------------------设备适配===>大屏电脑-------------------*/
|
|
@media (min-width: 1120px) {
|
|
div.joinus {
|
|
background-image: url("../image/poster02.jpg");
|
|
}
|
|
div.jobinfo {
|
|
width: 60%;
|
|
max-width: 900px;
|
|
}
|
|
.joinus-gbbtn:hover {
|
|
transform: rotate(180deg);
|
|
-o-transform: rotate(180deg);
|
|
-moz-transform: rotate(180deg);
|
|
-webkit-transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
/*----------------------加入我们 ===> 结束---------------------*/
|
|
|
|
|
|
/*----------------------用户登录 ===> 开始---------------------*/
|
|
div#login div.colormask {
|
|
position: absolute;
|
|
width: 100%;
|
|
background-color: rgba(253, 92, 0, 0.5);
|
|
}
|
|
div#login div.loginwrap {
|
|
width: 320px;
|
|
height: 240px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
margin: auto;
|
|
}
|
|
div#login div.loginwrap .login-prompt {
|
|
display: none;
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 0;
|
|
color: #FFF;
|
|
}
|
|
div#login {
|
|
background-image: url("../image/moback01.png");
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
}
|
|
div#login div.viewbox {
|
|
width: 100%;
|
|
height: 70px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
margin: auto;
|
|
border: 2px solid #FFFFFF;
|
|
border-radius: 70px;
|
|
overflow: hidden;
|
|
background-color: transparent;
|
|
}
|
|
div#login div.username,
|
|
div#login div.password {
|
|
padding: 24px 60px 0 80px;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 70px;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
div#login div.password {
|
|
left: -400px;
|
|
}
|
|
div.username span.icon_circle,
|
|
div.password span.icon_circle {
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 40px;
|
|
border: 2px solid #FFFFFF;
|
|
background-color: transparent;
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
color: #FFFFFF;
|
|
}
|
|
div.username span.icon_circle img,
|
|
div.password span.icon_circle img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
div.viewbox span.next_btn {
|
|
display: inline-block;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 20px;
|
|
padding-right: 3px;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
line-height: 36px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: rgba(250, 250, 250, 0.6);
|
|
cursor: pointer;
|
|
z-index: 3;
|
|
}
|
|
div.viewbox span.next_btn i {
|
|
position: relative;
|
|
right: -2px;
|
|
}
|
|
div.viewbox span.next_btn:hover {
|
|
color: rgba(250, 250, 250, 0.9);
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
div.username span.text_hint,
|
|
div.password span.text_hint {
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 18px;
|
|
left: 70px;
|
|
font-size: 16px;
|
|
color: rgba(250, 250, 250, 0.6);
|
|
}
|
|
div.username input.inputbox,
|
|
div.password input.inputbox {
|
|
display: inline-block;
|
|
width: 100%;
|
|
font-size: 16px;
|
|
outline-style:none;
|
|
background: none;
|
|
color: #FFFFFF;
|
|
border: none;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
div.loginwrap div.welcome {
|
|
width: 260px;
|
|
height: 60px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
margin: auto;
|
|
}
|
|
div.loginwrap div.welcome p {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
width: 100%;
|
|
height: 70px;
|
|
line-height: 70px;
|
|
font-size: 16px;
|
|
}
|
|
div.loginwrap div.welcome p i {
|
|
position: relative;
|
|
top: 4px;
|
|
left: -5px;
|
|
}
|
|
|
|
|
|
/*----------------------设备适配===>平板电脑-------------------*/
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
div.username span.icon_circle,
|
|
div.password span.icon_circle {
|
|
width: 70px;
|
|
height: 70px;
|
|
line-height: 70px;
|
|
}
|
|
div.viewbox span.next_btn {
|
|
top: 15px;
|
|
right: 15px;
|
|
}
|
|
div.username span.text_hint,
|
|
div.password span.text_hint {
|
|
top: 24px;
|
|
left: 83px;
|
|
}
|
|
|
|
div.loginwrap div.welcome {
|
|
width: 280px;
|
|
height: 70px;
|
|
}
|
|
div.loginwrap div.welcome p {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
/*----------------------设备适配===>PC端样式-------------------*/
|
|
@media (min-width: 992px) and (max-width: 1119px) {
|
|
div.username span.icon_circle,
|
|
div.password span.icon_circle {
|
|
width: 70px;
|
|
height: 70px;
|
|
line-height: 70px;
|
|
}
|
|
div.viewbox span.next_btn {
|
|
top: 15px;
|
|
right: 15px;
|
|
}
|
|
div.username span.text_hint,
|
|
div.password span.text_hint {
|
|
top: 24px;
|
|
left: 83px;
|
|
}
|
|
|
|
div.loginwrap div.welcome {
|
|
width: 280px;
|
|
height: 70px;
|
|
}
|
|
div.loginwrap div.welcome p {
|
|
font-size: 18px;
|
|
}
|
|
div#login {
|
|
background-image: url("../image/back01.png");
|
|
}
|
|
}
|
|
|
|
|
|
/*----------------------设备适配===>大屏电脑-------------------*/
|
|
@media (min-width: 1120px) {
|
|
div.username span.icon_circle,
|
|
div.password span.icon_circle {
|
|
width: 70px;
|
|
height: 70px;
|
|
line-height: 70px;
|
|
}
|
|
div.viewbox span.next_btn {
|
|
top: 15px;
|
|
right: 15px;
|
|
}
|
|
div.username span.text_hint,
|
|
div.password span.text_hint {
|
|
top: 24px;
|
|
left: 83px;
|
|
}
|
|
div.loginwrap div.welcome {
|
|
width: 280px;
|
|
height: 70px;
|
|
}
|
|
div.loginwrap div.welcome p {
|
|
font-size: 18px;
|
|
}
|
|
div#login {
|
|
background-image: url("../image/back01.png");
|
|
}
|
|
}
|
|
|
|
/*----------------------用户登录 ===> 结束---------------------*/
|
|
|
|
|
|
/*----------------------服务品牌 ===> 开始---------------------*/
|
|
|
|
/*品牌方块-手机端*/
|
|
div.brandwrap div.brandholder{
|
|
width:100%;
|
|
height:100%;
|
|
position: relative;
|
|
}
|
|
div.brandwrap div.row{
|
|
margin:0;
|
|
}
|
|
div.brandwrap div.col-xs-12{
|
|
height:290px;
|
|
padding:0;
|
|
}
|
|
div.brandwrap div.col-xs-12:nth-child(odd){
|
|
background-color: #f2f2f2;
|
|
}
|
|
div.brandwrap div.brandholder .logo{
|
|
width:100%;
|
|
height:120px;
|
|
position: absolute;
|
|
top:40px;
|
|
}
|
|
div.brandwrap div.brandholder .logo img{
|
|
width:100px;
|
|
position: absolute;
|
|
top:0;
|
|
right:0;
|
|
bottom:0;
|
|
left:0;
|
|
margin:auto;
|
|
}
|
|
div.brandwrap div.brandholder .text{
|
|
width:100%;
|
|
height:130px;
|
|
position: absolute;
|
|
bottom:0;
|
|
text-align: center;
|
|
}
|
|
div.brandwrap div.brandholder .text p:first-child{
|
|
font-size: 16px;
|
|
color:#666;
|
|
font-weight: bold;
|
|
}
|
|
div.brandwrap div.brandholder .text p:last-child{
|
|
padding:0 60px;
|
|
color:#999;
|
|
line-height: 1.75;
|
|
max-height: 70px;
|
|
overflow: hidden;
|
|
}
|
|
div.brandwrap div.brandholder .hoverbox{
|
|
display: none;
|
|
}
|
|
|
|
/*-- 平板竖屏样式 --*/
|
|
@media(min-width: 768px) and (max-width:1024px){
|
|
div.brandwrap div.col-sm-6{
|
|
background-color: #f5f5f5;
|
|
border:1px solid #fff;
|
|
height:310px;
|
|
padding:0;
|
|
}
|
|
div.brandwrap div.brandholder .text{
|
|
height:140px;
|
|
}
|
|
div.brandwrap div.brandholder .hoverbox{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/*-- 平板横屏样式 --*/
|
|
@media(min-width:1024px) and (max-width:1200px){
|
|
div.brandwrap div.col-md-4{
|
|
background-color: #f5f5f5;
|
|
border:1px solid #fff;
|
|
height:330px;
|
|
padding:0;
|
|
}
|
|
div.brandwrap div.brandholder .text{
|
|
height:140px;
|
|
}
|
|
div.brandwrap div.brandholder .logo{
|
|
top:50px;
|
|
}
|
|
div.brandwrap div.brandholder .logo img{
|
|
width:120px;
|
|
}
|
|
div.brandwrap div.brandholder .hoverbox{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/*-- PC样式 --*/
|
|
@media(min-width:1200px){
|
|
div.brandwrap div.col-lg-3{
|
|
background-color: #fff;
|
|
border:1px solid #fff;
|
|
padding:0;
|
|
}
|
|
div.brandwrap div.brandholder{
|
|
background-color: #f4f4f4;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
div.brandwrap div.brandholder .hoverbox{
|
|
display: block;
|
|
width:100%;
|
|
height:100%;
|
|
position: absolute;
|
|
background-color: #fff;
|
|
z-index: 3;
|
|
left:0;
|
|
top:-100%;
|
|
}
|
|
div.brandwrap div.brandholder .text{
|
|
height:0px;
|
|
bottom:35px;
|
|
overflow: hidden;
|
|
z-index: 6;
|
|
}
|
|
div.brandwrap div.brandholder .logo{
|
|
top:0;
|
|
bottom: 0;
|
|
height: 150px;
|
|
margin: auto;
|
|
z-index: 6;
|
|
}
|
|
div.brandwrap div.brandholder .logo img{
|
|
height:150px;
|
|
width:150px;
|
|
}
|
|
}
|
|
|
|
|
|
/*-----服务品牌 ===> 结束------*/
|
|
|
|
|
|
/*-----背景冒泡-----*/
|
|
.bg-bubbles li {
|
|
position: absolute;
|
|
list-style: none;
|
|
display: block;
|
|
width: 40px;
|
|
height: 40px;
|
|
color: white;
|
|
font-size: 2em;
|
|
bottom: -160px;
|
|
opacity: .2;
|
|
animation: square 25s infinite;
|
|
transition-timing-function: linear;
|
|
border: 5px solid white;
|
|
}
|
|
.bg-bubbles li:nth-child(1) {
|
|
left: 10%;
|
|
}
|
|
.bg-bubbles li:nth-child(2) {
|
|
left: 20%;
|
|
width: 80px;
|
|
height: 80px;
|
|
animation-delay: 2s;
|
|
animation-duration: 17s;
|
|
}
|
|
.bg-bubbles li:nth-child(3) {
|
|
left: 25%;
|
|
animation-delay: 4s;
|
|
}
|
|
.bg-bubbles li:nth-child(4) {
|
|
left: 40%;
|
|
width: 60px;
|
|
height: 60px;
|
|
animation-duration: 22s;
|
|
background-color: fade(white, 25%);
|
|
}
|
|
.bg-bubbles li:nth-child(5) {
|
|
left: 70%;
|
|
}
|
|
.bg-bubbles li:nth-child(6) {
|
|
left: 80%;
|
|
width: 120px;
|
|
height: 120px;
|
|
animation-delay: 3s;
|
|
background-color: fade(white, 20%);
|
|
}
|
|
.bg-bubbles li:nth-child(7) {
|
|
left: 32%;
|
|
width: 160px;
|
|
height: 160px;
|
|
animation-delay: 7s;
|
|
}
|
|
.bg-bubbles li:nth-child(8) {
|
|
left: 55%;
|
|
width: 20px;
|
|
height: 20px;
|
|
animation-delay: 15s;
|
|
animation-duration: 40s;
|
|
}
|
|
.bg-bubbles li:nth-child(9) {
|
|
left: 25%;
|
|
width: 10px;
|
|
height: 10px;
|
|
animation-delay: 2s;
|
|
animation-duration: 40s;
|
|
background-color: white;
|
|
}
|
|
.bg-bubbles li:nth-child(10) {
|
|
left: 90%;
|
|
width: 160px;
|
|
height: 160px;
|
|
animation-delay: 11s;
|
|
}
|
|
|
|
/*
|
|
@keyframes square {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
transform: translateY(-700px) rotate(600deg);
|
|
}
|
|
} */
|
|
|
|
@-webkit-keyframes square {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(-700px) rotate(600deg);
|
|
transform: translateY(-700px) rotate(600deg);
|
|
}
|
|
}
|
|
@keyframes square {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(-700px) rotate(600deg);
|
|
transform: translateY(-700px) rotate(600deg);
|
|
}
|
|
}
|
|
.btm-float {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 90px;
|
|
z-index: 20;
|
|
}
|
|
.btm-float__bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #000;
|
|
opacity: .7;
|
|
fliter: alpha(opacity=70);
|
|
}
|
|
.btm-float__content {
|
|
position: relative;
|
|
width: 400px;
|
|
height: 90px;
|
|
margin: 0 auto;
|
|
z-index: 2;
|
|
}
|
|
@media screen and (max-width: 640px) {
|
|
.btm-float__content {
|
|
position: relative;
|
|
width: 350px;
|
|
height: 90px;
|
|
margin: 0 auto;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.btm-float__img {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 125px;
|
|
width: 451px;
|
|
height: 130px;
|
|
}
|
|
|
|
.btm-float__content .district input {
|
|
height: 40px !important;
|
|
width: 140px !important;
|
|
padding: 0 0 0 9px;
|
|
*height: 20px !important;
|
|
*padding-top: 10px;
|
|
font-size: 14px
|
|
}
|
|
|
|
.btm-float__content .district .district-icon {
|
|
top: 6px !important
|
|
}
|
|
.btm-line {
|
|
position: relative;
|
|
float: left;
|
|
|
|
margin-top: 25px;
|
|
margin-left: auto;
|
|
margin-left-right: auto;
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
.btm-label-number {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 8px;
|
|
}
|
|
.btm-line, .btm-number {
|
|
height: 40px;
|
|
width: 180px;
|
|
}
|
|
.district {
|
|
position: relative;
|
|
z-index: 10;
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
}
|
|
.btm-btn, .btm-city {
|
|
float: left;
|
|
height: 40px;
|
|
margin-top: 25px;
|
|
}
|
|
.btm-btn {
|
|
width: 140px;
|
|
margin-left: 10px;
|
|
color: #333;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
background-color: #ffe612;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btm-number {
|
|
*height: 30px;
|
|
*padding-top: 10px;
|
|
*padding-bottom: 0;
|
|
border: 0;
|
|
text-indent: 8px;
|
|
}
|
|
a, button, input, select, textarea {
|
|
font-family: "Source Han Sans SC","HanHei SC","PingFang SC","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
|
outline: 0;
|
|
}
|
|
.district input {
|
|
width: 170px!important;
|
|
height: 16px;
|
|
font-size: 12px;
|
|
border: 0;
|
|
padding: 10px;
|
|
}
|