manHourHousekeeper/fhKeeper/formulahousekeeper/inva_4_tivo/css/customer.css

@charset "utf-8";

html {font-size: 10px; -webkit-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
@media screen and (min-width:320px){html{font-size:    10px;}}
@media screen and (min-width:360px){html{font-size: 11.25px;}}
@media screen and (min-width:375px){html{font-size: 11.7px;}}
@media screen and (min-width:480px){html{font-size:    15px;}}
@media screen and (min-width:414px){html{font-size:  13px;}}
@media screen and (min-width:560px){html{font-size:  17.5px;}}
@media screen and (min-width:640px){html{font-size:    20px;}}

.contentes {
    width: 81.25rem;
    margin: auto;
    position: relative;
}
.contentes img {
    width: 100%;
    height: 100%;
}
/* 质询图标 */
.consulting {
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    background: #fff;
    position: fixed;
    bottom: 3.75rem;
    right: 6.25rem;
    z-index: 4;
    box-shadow: 0 0 1.25rem 0px #cbcbcb;
    cursor:pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.consulting:hover {
    background: #3396FB;
}
.conImgConImg {
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
    margin-top: 1.5625rem;
    margin-left: 1.125rem;
}
.conImgConImg img{
    width: 100%;
}
/* 咨询 */
.zhixun {
    display: block;
    position: fixed;
    bottom: 7.5rem;
    right: 2.5rem;
    padding: 1rem;
    background: #fff;
    box-shadow: .1875rem .1875rem .625rem #ccc;
    z-index: 99999999;
    text-align: center;
}
.zhixun p {
    margin: 8px 0;
}
.zhixun img {
    width: 8rem;
}

.tabOn {
    background: #fff;
    color: #20a0ff !important;
}
.white{
    background: #fff !important;
}
/* 产品介绍 */
.product {
    width: 100%;
    position: fixed;
    z-index: 10;
    top: 6.25rem;
    left: 0;
    background: #fff;
    height: 20.75rem;
    border-top: .0625rem solid rgb(163, 163, 163);
    box-shadow: 1px 3px 5px 0px #ddd;
}
.connont {
    width: 81.25rem;
    margin: auto;
}

.tils::before {
    content:"";
    height: .125rem;
    width: 100%;
    bottom: 0rem;
    left: 0;
    background: #37B8FF;
    position: absolute;
}
/* 导航下拉 */
.management {
    margin-top: 1.25rem;
    width: 33.75rem;
    font-size: 1rem;
}
.management h3 {
    width: 100%;
    font-size: 1rem;
    font-weight: normal;
    color: #333333;
    line-height: 2.5rem;
    border-bottom: .0625rem solid rgb(180, 180, 180);
    margin-left: 1.25rem;
}
.management ul {
    margin-top: .625rem;
    width: 11.25rem;
}
.management li{
    margin-top: .625rem;
    line-height: 2.5rem;
    cursor:pointer;
    padding-left: 1.25rem;
}
.management a {
    color: #333;
}
.management li:hover {
    background: #F0F4FF;
    border-radius: .625rem;
    color: #3370FF;
}

/* js锁添加的样式 */
.tils::before {
    content:"";
    height: .125rem;
    width: 100%;
    bottom: 0rem;
    left: 0;
    background: #37B8FF;
    position: absolute;
}
.hanAll {
    background: #fff !important;
    box-shadow: .0625rem .1875rem .3125rem 0px #ddd;
}
.abc .til {
    color: #fff !important;
}
.abc .til a{
    color: #fff !important;
}
.navigationBarBack {
    /* background: #f6fef9; */
    background-color:transparent !important;
}
.navigationBar {
    box-shadow:none;
}
.navigationTitle a {
    color: #333 !important;
}
.navigationTitle {
    color: #333 !important;
}

/* bannar */
.bannar {
    width: 100%;
    height: 100vh;
    margin: auto;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.bannar img {
    /* width: 100%; */
    height: 100%;
}
.bannarCon {
    position: absolute;
    z-index: 1;
    top: 15.625rem;
    left:  50%;
    width: 81.25rem;
    margin-left: -40.625rem;
}
.bannarConTil {
    font-size: 7.625rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: .9375rem;
}
.bannarConTilP  {
    font-size: 1.5rem;
    color: #fefeff;
    letter-spacing: .375rem;
    margin-top: 2.5rem;
    margin-bottom: 10.3125rem;
    font-style: italic;
}
.bannBtn {
    width: 12.5rem;
    height: 3.875rem;
    border-radius: 3.875rem;
    border: .125rem solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.375rem;
}
.bannarCon a {
    color: #fff;
    letter-spacing: .1875rem;
}

/* 客户管家 */
.collaborationTeam {
    width: 100%;
    background: #ffffff;
    height: 250vh;
}
.collTeam {
    height: 100vh;
    box-sizing: border-box;
    position: sticky;
    top: 6.375rem;
    background: url(../image/customer/beijing.jpg) no-repeat center;
    /* background-size: 100% 114%; */
}
.collCent {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding-top: 12.5rem;
}
.collCentDiv {

}
.collCentImg {
    width: 8.125rem;
    height: 8.125rem;
    position: relative;
    z-index: 2;
}
.collCentFonts {
    font-size: 2.25rem;
    color: #333;
    overflow: hidden;
    width: 100%;
    /* padding-left: 2.5rem; */
    text-align: center;
    padding-top: 1.5625rem;
}
.collCentFonts span {
    color: #5e95f8;
}

/* 核心功能 */
.coreFunctionTiyle {
    margin: auto;
}
.coreFunctionTiyle h2 {
    font-size: 50px;
    color: #5e5e5e;
    text-align: center;
    margin: auto;
    /* font-weight: normal; */
    padding: 5.3125rem 0 1rem 0;
}
.coreFunctionTiyle span {
    color: #5e95f8;
}
.coreFunctionTiyle p {
    font-size: 1.25rem;
    color: #cdc1aa;
    text-align: center;
    margin: auto;
    padding-bottom: 2.625rem;
}
.coreFunctionCon {
    display: flex;
    width: 95rem;
    justify-content: center;
}
.coreFunctionConLeft {
    display: inline-block;
    width: 21.875rem;
    background: #f5f6f8;
    border-radius: .625rem;
    box-sizing: border-box;
    padding: 0 2.1875rem;
}
.coreFunctionConLeft h3 { 
    font-weight: normal;
    color: #a9acfa;
    font-size: 2.625rem;
    padding: 2.8125rem 0 4.0625rem 0;
}
.coreFunctionConLeft span {
    display: block;
    margin: auto;
    width: 10.9375rem;
    height: 10.9375rem;
}
.coreFunctionConLeft span img {
    width: 100%;
    height: 100%;
}
.coreFunctionConLeft p {
    font-size: 1.375rem;
    color: #a0a0a2;
    text-align: center;
    line-height: 1.75rem;
    padding: 2.25rem 0 2.375rem 0;
}
.coreFunctionConRiht {
    display: inline-block;
    margin-left: 3.75rem;
}
.coreFunctionConRihtCon {
    width: 21.25rem;
    font-family: '宋体';
    margin-bottom: 2.1875rem;
    display: flex;
}
.coreFunctionConRihtCon:last-child {
    margin-bottom: 0;
}
.coreImg {
    width: 6.5625rem;
    display: inline-block;
    height: 6.5625rem;
    margin-right: 1.375rem;
}
.coreImg img{
    width: 100%;
    height: 100%;
    display: inline-block;
}
.coreFunctionConRihtCon h4 {
    font-weight: normal;
    font-size: 1.5625rem;
    color: #a9acfa;
    padding-bottom: 1.125rem;
}
.coreFunctionConRihtCon p {
    font-size: 1.25rem;
    color: #595959;
    line-height: 1.375rem;
}
.coreFunctionConRihtCon span {
    display: inline-block;
    font-size: 1.0625rem;
    color: #3830a6;
    margin-top: 1.5rem;
}

.coreLeft {
    box-shadow: 0 0 8px 4px #dfdfdf;
}

/* 各类需求 */
.kindsNeeds {
    margin-top: 9.6875rem;
    display: flex;
    width: 95rem;
    justify-content: center;
}
.kindsNeedsLeft {
    position: relative;
    width: 66.875rem;
    height: 38.125rem;
}
.kindsNeedsLeft img {
    width: 100%;
    height: 100%;
}
.kindsNeedsRight {
    width: 8rem;
    padding-left: 1rem;
    font-family: '黑体';
    font-weight: 600;
}
.kindsNeedsRight p {
    font-size: 2.625rem;
    width: 3.125rem;
    color: #5e5e5e;
    line-height: 2.875rem;
}
.kindsNeedsRight span {
    display: block;
    width: 3.125rem;
    color: #5e95f8;
    font-size: 3.125rem;
    line-height: 3.625rem;
}

.kindsNeedsPointTil {
    font-size: 1.375rem;
    color: #3e4045;
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    letter-spacing: .125rem;
}
.kindsNeedsPointTil span {
    width: .75rem;
    height: 2.25rem;
    border-radius: .75rem;
    display: inline-block;
    margin-right: .625rem;
}
.kindsNeedsPointCon {
    font-size: 1.0625rem;
    color: #b4a281;
    display: flex;
    align-items: center;
    margin-bottom: 1.125rem;
    letter-spacing: .125rem;
}
.kindsNeedsPointCon span {
    width: .75rem;
    height: .75rem;
    border-radius: .75rem;
    display: inline-block;
    margin-right: .625rem;
}
.green {
    position: absolute;
    top: 8.625rem;
    left: 7.9375rem;
}
.green span {
    background: #6ecd7c;
}
.yellow {
    position: absolute;
    top: 8.625rem;
    left: 25.3125rem; 
}
.yellow span {
    background: #fccd4b;
}
.red {
    position: absolute;
    top: 21.125rem;
    left: 7.9375rem;
}
.red span {
    background: #ed6a70;
}
.blue {
    position: absolute;
    top: 21.125rem;
    left: 25.3125rem; 
}
.blue span {
    background: #5e95f8;
}
.purple {
    position: absolute;
    top: 15rem;
    right: 6rem; 
}
.purple span {
    background: #a7ade8;
}

/* 渐变色 */
.gradient {
    background: linear-gradient(#fff, #ece7ea);
    padding: 4.875rem 0 2.5rem 0      ;
}

/* 特色展示 */
.specialShow {
    width: 75rem;
    margin: auto;
}
.specialShowTil {
    position: relative;
    height: 7rem;
    margin-left: 6.5rem;
}
.specialShowTil h2 {
    font-size: 3.125rem;
    font-weight: normal;
    font-family: '黑体';
    color: #5e5e5e;
    letter-spacing: 8px;
}
.specialShowTil h2 span {
    color: #5e95f8;
}
.specialShowProgressbar {
    position: absolute;
    left: 7.5rem;
    top: 5.3125rem;
}
.specialShowProgressbar div {
    width: 15.9375rem;
    height: .1875rem;
    background: #d6d6d6;
    position: relative;
}
.specialShowProgressbar span {
    display: inline-block;
    /* width: 13.75rem; */
    height: .1875rem;
    background: #20a0ff;
    position: absolute;
    top: 0;
    left: 0;
}
.specialShowProgressbar p {
    font-size: 1rem;
    position: absolute;
    top: .625rem;
    left: 11.25rem;
}
.specialShowCon {
    display: flex;
    justify-content: space-between;
}
.specialShowConLeft {
    width: 14rem;
    text-align: center;
    margin-left: 1.5rem;
}
.specialShowConLeft li{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 2rem;
    font-size: 1.25rem;
    color: #a0a0a2;
    margin-bottom: 1.4375rem;
    cursor: pointer;
}
.specialShowConLeft div {
    position: relative;
    width: 100%;
    height: .25rem;
    background: #efefef;
}
.specialShowConLeft span {
    display: inline-block;
    width: 12.625rem;
    height: .25rem;
    position: absolute;
    top: 0;
    left: 0;
    background: #eae5db;
}
.specialShowConLeft .on {
    color: #5e95f8;
}
.specialShowConLeft .on span {
    background: #c4d8fc;
    width: 12.625rem;
    height: .25rem;
}
.specialShowConright {
    position: relative;
    width: 57.1875rem;
    box-sizing: border-box;
    padding-top: 1.25rem;
}
.specialShowConrightImg {
    width: 46.25rem;
    height: 28.125rem;
}
.specialShowConrightImg img, .dynamicImg img, .indusIonImg img {
    width: 100%;
    height: 100%;
}
.dynamicImg {
    width: 49.375rem;
    height: 27.8125rem;
    position: absolute;
    top: 5.625rem;
    right: 0;
}

/* 行业解决方案 */
.industry {
    margin-top: 3.4375rem;
}
.industry h2 {
    font-size: 3.125rem;
    color: #5e5e5e;
    text-align: center;
    margin-bottom: 1.875rem;
    font-weight: normal;
    letter-spacing: .875rem;
}
.industry h2 span {
    color: #5e95f8;
}
.industryCon {
    display: flex;
    justify-content: space-between;
    width: 75rem;
    margin: auto;
}
.industryConLeft {
    width: 28.4375rem;
    height: 34.0625rem;
    background: #fff;
    border-radius: .625rem;
    box-sizing: border-box;
    display: flex;
    padding: 1.125rem 4.375rem 2.25rem 4.375rem;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}
.industryConRight {
    display: flex;
    flex-wrap: wrap;
    width: 43.4375rem;;
    align-content: space-between;
}
.industryConRight .industryConRightCon {
    width: 43.4375rem;
    height: 15.3125rem;
    background: #fff;
    border-radius: .625rem;
    box-sizing: border-box;
    padding: 4.25rem 6.875rem 3.75rem 7.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.indusIon {
    display: flex;
    width: 6.875rem;
    flex-wrap: wrap;
    justify-content: center;
}
.indusIon .indusIonImg {
    width: 6.25rem;
    height: 4.875rem;
}
.indusIon p{
    font-size: 22px;
    color: #595959;
    margin-top: .875rem;
    letter-spacing: .25rem;
}
.industRightConIon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 4.8125rem;
    height: 7rem;
}
.indusConIonImg {
    width: 4.8125rem;
    height: 4.8125rem;
}
.indusConIonImg img {
    width: 100%;
    height: 100%;
}
.industRightConIon p {
    font-size: 1.375rem;
    color: #595959;
    letter-spacing: .25rem;
}
.industryConLeft, .industryConRightCon {
    box-shadow: 0px .1875rem .625rem .25rem #cfcfcf;
}

/* 客户评价 */
.evaluation {
    width: 79.375rem;
    background: #fff;
    margin: auto;
    position: relative;
    padding-bottom: 6.875rem;
}
.evaluationLogo {
    width: 75.8125rem;
    height: 5.375rem;
    margin: auto;
    margin-top: .625rem;
    margin-bottom: 3.125rem;
}
.evaluationLogo img {
    width: 100%;
    height: 100%;
}
.evaluationC {
    position: relative;
    width: 79.375rem;
    margin: auto;
}
.evaluationCon {
    width: 68.75rem;
    overflow: hidden;
    margin: auto;
}
.evaluationConIkun {
    width: 275rem;
    display: flex;
    position: relative;
}
.evaluationConLi {
    width: 68.75rem;
    /* display: inline-block; */
    display: flex;
    justify-content: space-between;
}
.evaluationConLiLeft .evaluationConLiRight {
    display: inline-block;
}
.evaluationConLi .evaluationConLiLeft {
    width: 38rem;
    height: 24.9375rem;
}
.evaluationConLiLeft img {
    width: 100%;
    height: 100%;
}
.evaluationConLiRight {
    width: 22.75rem;
}
.evaluationConLiRight h3 {
    font-weight: normal;
    font-size: 3.125rem;
    color: #474747;
    letter-spacing: .25rem;
    padding: 1.75rem 0 3.4375rem 0;
    position: relative;
}
.evaluationConLiRight p {
    line-height: 1.875rem;
    font-size: 1rem;
    color: #3e4045;
}
.evaluationConLiRightBtn {
    display: flex;
    align-items: center;
    width: 13rem;
    background: #b4a281;
    margin-top: 2rem;
    height: 3.4375rem;
    color: #fff;
    cursor: pointer;
}
.evaluationConLiRightBtn span {
    text-align: center;
    width: 10.25rem;
    border-right: 2px solid #fff;
    line-height: 3.4375rem;
    font-size: 1.375rem;
    letter-spacing: .25rem;
}
.evaluationConLiRightBtn img {
    display: inline-block;
    width: .8125rem;
    height: .9375rem;
    margin-left: .875rem;
}
.zuo {
    position: absolute;
    top: 6.875rem;
    left: 0;
}
.you {
    position: absolute;
    top: 6.875rem;
    right: 0;
}
.zuo, .you {
    width: 1.875rem;
    height: 2.625rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #3e4045;
    cursor: pointer;
}
.zuo img, .you img {
    width: .5rem;
    height: 1.0625rem;
}
.zuo:hover, .you:hover{
    background: #b3a280;
}
.zhis {
    cursor: not-allowed;
}

/* 底部 */
.footer-frame {
	width: 100%;
	height: 24px;
}

.footer {
	padding-top: 48px;
	padding-bottom: 8px;
	background-color: #20a0ff;
    margin-top: -0.125rem;
}

.footer .footer-col {
	margin-bottom: 36px;
}

.footer h4 {
	margin-bottom: 10px;
	color: #fff;
}

.footer .list-unstyled,
.footer p {
	color: #f3f7fd;
}

.footer .footer-col.middle .list-unstyled .fas {
	color: #fff;
	font-size: 8px;
	line-height: 24px;
}

.footer .footer-col.middle .list-unstyled .media-body {
	margin-left: 8px;
}

.footer .footer-col.last .list-unstyled .fas {
	color: #fff;
	font-size: 14px;
	line-height: 24px;
}

.footer .footer-col.last .list-unstyled .media-body {
	margin-left: 10px;
}

.footer .footer-col.last .list-unstyled .fas.fa-globe {
	margin-left: 16px;
	margin-right: 10px;
}

.navbar {
    padding: 0 !important;
}

.ulss {
    display: inline-block;
}
.alss {
    display: flex;
    justify-content: space-around;
    width: 87.5rem;
    margin: auto;
}
.footsst {
    background: #fff;
}

.copyright {
    width: 100%;
    text-align: center;
    line-height: 2.5rem;
    color: #fff;
    font-size: 1rem;
    background: #20a0ff;
    border-top: 1px solid #565656;
}