manHourHousekeeper/fhKeeper/formulahousekeeper/webttkuaiban/src/main/resources/static/css/projectt.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%;
}

.bor {
    box-shadow: 0 0 .5rem .75rem #e6e9ef;
}
.bannar {
    position: relative;
}
.bannarText {
    position: absolute;
    left: 10.75rem;
    top: 11rem;
}
.bannarText h4 {
    font-size: 3.4375rem;
    font-family: '黑体';
    letter-spacing: 5px;
}
.bannarText p {
    font-size: 18px;
    font-style: oblique;
    color: #afafaf;
    letter-spacing: 5px;
    margin-top: 1.875rem;
}
.bannarText a {
    color: #fff;
}
.bannarText div {
    width: 145px;
    line-height: 48px;
    background: #FB674B;
    letter-spacing: 3px;
    text-align: center;
    margin-top: 42px;
    font-size: 21px;
    border-radius: 10px;
}


/* 团队协作 */
.collaborationTeam {
    width: 100%;
    background: #ffffff;
    height: 250vh;
}
.collTeam {
    height: 100vh;
    box-sizing: border-box;
    position: sticky;
    top: 6.375rem;
}
.collCent {
    height: 40rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.collCentImg {
    width: 7.5rem;
    height: 8.75rem;
    margin-right: 3.125rem;
    position: relative;
    z-index: 2;
}
.collCentFonts {
    font-size: 2.25rem;
    color: #333;
    overflow: hidden;
    width: 32.5rem;
    padding-left: 2.5rem;
}
.collCentFonts span {
    color: #5e95f8;
}

/* 项目模板 */
.templateProject {
    width: 100%;
    background: #fafbfd;
    height: 300vh;
}
.templat{
    height: 100vh;
    box-sizing: border-box;
    position: sticky;
    top: 6.375rem;
    overflow: hidden;
}
.templat h2 {
    font-size: 2.25rem;
    color: #333;
    padding: 2.5rem 0 2.4rem 0;
    text-align: center;
    font-weight: normal;
    letter-spacing: .3125rem
}
.templat span {
    font-size: 3rem;
    color: #01bea8;
}
.templat i {
    font-style: normal;
    font-size: 3rem;
    color: #3dc9ff;
}
.templatCon {
    position: relative;
}
.templatOne, .templatTwo, .templatThree, .templatFour {
    border-radius: .625rem;
}
.templatOne {
    width: 17.625rem;
    height: 32.25rem;
    position: absolute;
    z-index: 2;
    right: 2.1875rem;
    top: 3.125rem;
}
.templatTwo {
    width: 58.3125rem;
    height: 28.3125rem;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 11.4375rem;
}
.templatThree {
    width: 19.4375rem;
    height: 21.4375rem;
    position: absolute;
    z-index: 3;
    top: 16.25rem;
    right: 17.5rem;
}
.templatFour {
    width: 27.125rem;
    height: 16.5rem;
    position: absolute;
    z-index: 2;
    left: 2.8125rem;
    top: 17.5rem;
}

/* 跨部门 */
.acrossDepartments {
    background: #ffffff;
    position: relative;
    z-index: 3;
}
.acrossDepartments h2{
    font-size: 2.25rem;
    font-weight: normal;
    color: #333;
    letter-spacing: .3125rem;
    padding: 2.1875rem 0 150px 0;
}
.acrossDepartments span {
    color: #01bea8;
}
.acrossCon {
    display: flex;
    justify-content: space-around;
    padding-bottom: 8.75rem;
}
.acrossConOne, .acrossConTwo {
    width: 20.25rem;
    height: 20.1875rem;
    position: relative;
}
.acrossConOne {
    background: url(../image/projectImg/acrossLeft.jpg) no-repeat center;
    background-size: 100% 100%;
}
.acrossConTwo {
    background: url(../image/projectImg/acrossRight.jpg) no-repeat center;
    background-size: 100% 100%;
}
.acrossIonsOne {
    width: 7.5rem;
    height: 7.5rem;
    border: .0625rem solid #e0efee;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    transition: all 0.5s;
    cursor:pointer;
}
.acrossIonsOne:hover {
    transform: scale(1.2);
}
.acsTop {
    background: linear-gradient(to top,#1de7e5,#4ab8f9);
}
.acsBon {
    background: linear-gradient(to top,#4ab8f9,#1de7e5);
}
.acsLeft {
    background: linear-gradient(to right,#4ab8f9,#1de7e5);
}
.acsRight {
    background: linear-gradient(to right,#1de7e5,#4ab8f9);
}

.acsTops {
    background: linear-gradient(to top,#82a6d7,#55749f);
}
.acsBons {
    background: linear-gradient(to top,#55749f,#82a6d7);
}
.acsLefts {
    background: linear-gradient(to right,#55749f,#82a6d7);
}
.acsRights {
    background: linear-gradient(to right,#82a6d7,#55749f);
}
.acrossIonsTwo {
    width: 6.875rem;
    height: 6.875rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.acrossIonsThree {
    width: 5.4375rem;
    height: 5.4375rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: #ffffff;
}
.acrossIonsThree p {
    font-size: 1rem;
    width: 100%;
    text-align: center;
    color: #333;
    margin-top: 22px;
    margin-bottom: 20px;
}
.acrossIonsThree div {
    width: 1.875rem;
    height: 1.875rem;
    margin-top: -1.5625rem;
}

/* 新版跨部门 */
.multipleRoles {
    background: #ffffff;
    position: relative;
    z-index: 3;
    padding: 4.6875rem 0 6.25rem 0;
}
.multCons {
    display: flex;
    justify-content: space-between;
}
.multipleRolesLeft, .multipleRolesRight {
    width: 50%;
    box-sizing: border-box;
    position: relative;
}
.muDiv {
    display: inline-block;
    font-size: 2.375rem;
    color: #333333;
    font-family: '黑体';
}
.muDiv span {
    color: #f3ac47;
    font-size: 2.625rem;
    text-align: center;
}
.muRoLezc {
    float: left;
    margin-left: 10.9375rem;
}
.muRoLetd {
    padding-top: 4.375rem;
    padding-left: 2.8125rem;
}
.outerRing {
    width: 31.25rem;
    height: 31.25rem;
    padding-top: 1.25rem;
    position: relative;
}
.outerRingNei {
    position: absolute;
    width: 16.25rem;
    height: 16.25rem;
    top: 50%;
    left: 50%;
    margin-left: -8.125rem;
    margin-top: -8.125rem;
}
.multipWaiCont {
    width: 4.6875rem;
    height: 4.6875rem;
    background: #3c86df;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .9375rem;
}
.multipWaiCont div {
    width: 2.1875rem;
    height: 2.1875rem;
}
.multipWai {
    width: 4.6875rem;
    position: absolute;
}
.multipWai p {
    width: 100%;
    text-align: center;
    font-size: 1.125rem;
    color: #333;
}

/* 支持多种行业和场景使用 */
.industryScenario {
    background: #ffffff;
}
.industryScenario h2 {
    text-align: center;
    font-size: 2.25rem;
    color: #333;
    margin-top: 1.875rem;
    font-weight: normal;
}
.industryScenario h2 p {
    font-size: 1.125rem;
    color: #666666;
    margin-top: 1.25rem;
}
.industryCon {
    width: 100%;
    margin-top: 1.5625rem;
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.industryConOverlap {
    width: 24.375rem;
    height: 16.75rem;
    background: #f5f5f5;
    border-radius: .3125rem;
    box-sizing: border-box;
    padding: 2.8125rem 2.625rem 0 2.625rem;
    margin-bottom: 3.125rem;
    box-shadow: 9px 8px 11px #e9e9e9;
}
.industryConOverlapTil {
    font-size: 1.5rem;
    color: #333;
    line-height: 2.5rem;
    display: flex;
    justify-content: center;
}
.industryConOverlapTil div {
    width: 11.25rem;
    height: 2.5rem;
    display: inline-block;
    margin-right: .625rem;
    border-radius: 2.5rem;
    text-align: center;
    margin-left: -0.625rem;
    color: #ffffff;
}
.industryConOverlapTil p {
    display: inline-block;
}
.industryConOverlapTex {
    font-size: 1.5rem;
    color: #666666;
    font-family: 宋体;
    margin-top: .9375rem;
    line-height: 1.875rem;
}
.industryConOverlapBtn {
    font-size: 1.125rem;
    margin-top: 1.875rem;
    margin-left: -0.75rem;
}

/* 用户评价 */
.userEvaluation {
    background: #4a65ac;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.userEvaluationzuobian {
    width: 33rem;
    height: 100%;
    background: #4a65ac;
    position: absolute;
    z-index: 2;
    top: 0%;
    left: 0%;
}
.inBlock {
    display: inline-block;
}
.userEvaluationLeft {
    margin-right: 10.625rem;
    float: left;
    position: relative;
    z-index: 3;
}
.userEvaluationLeft h2 {
    font-size: 3.125rem;
    color: #ffffff;
    font-weight: normal;
    margin-top: 8.75rem;
    margin-bottom: 2.1875rem;
}
.userEvaluationLeft p {
    font-size: 1rem;
    color: #ffffff;
}
.userEvaluationLeft div {
    width: 10rem;
    height: 3.125rem;
    border-radius: 3.125rem;
    border: .125rem solid #ffffff;
    text-align: center;
    line-height: 50px;
    font-size: 1.125rem;
    color: #ffffff;
    margin-top: 6.25rem;
    margin-bottom: 10.25rem;
    background: #3f5697;
}
.userEvaluationRight {
    width: 4100px;
    display: flex;
    /* justify-content: space-between; */
    position: relative;
    margin-top: 9.1875rem;
    margin-bottom: 7.5rem;
}
.userEvaluationRightCon {
    width: 23.125rem;
    height: 18.4375rem;
    background: #fff;
    border-radius: .625rem;
    padding: 2.1875rem;
    box-sizing: border-box;
    position: relative;
    margin-right: 1.875rem;
}
.userEvaluationRightConIMg {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    position: absolute;
    top: -3.75rem;
    left: 2.1875rem;
    /* background: red; */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: 1px solid #bdbdbd;
}
.userEvaluationRightConTex {

}
.userEvaluationRightConTex p{
    font-size: 1.75rem;
    color: #333;
    margin-top: 3.75rem;
    margin-bottom: 1.125rem;
}
.userEvaluationRightConTex span {
    font-size: .875rem;
    color: #666666;
    line-height: 1.5625rem;
}
.userKongz {
    width: 46.25rem;
}

.kehusab {
    width: 10rem;
    padding: -2.5rem 0 0 0;
    display: flex;
    justify-content: space-between;
    margin-top: -60px;
    margin-bottom: 40px;
}
.kehuLefts, .kehuRights {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background: #fff;
    text-align: center;
    line-height: 4.375rem;
    display: inline-block;
    position: relative;
    cursor:pointer;
}
.kehusab img {
    width: 1.25rem;
    height: 1.25rem;
}
.kehusab .zhis {
    cursor: not-allowed !important;
}

/* 新产品定价 */
.pricingsCon {
   width: 62.5rem;
    margin: auto;
}
.pricingsConTop {
    display: flex;
    flex-wrap: wrap;
    box-shadow: 0 0 20px 1px #b1b1b1;
    border-radius: .625rem;
    /* border-bottom: 1px solid #333; */
    /* border-right: 1px solid #333;  */
}
.pricingsConTop div {
    color: #333333;
    width: 50%;
    line-height: 3.75rem;
    text-align: center;
    font-size: 1.25rem;
    box-sizing: border-box;
    border-top: 1px solid #939393;
    /* border-left: 1px solid #333; */
}

/* 产品定价 */
.pricings {
    width: 100%;
    max-width: 120rem;
    height: 58.8125rem;
    margin: auto;
    /* background: url(../image/dingj.jpg) no-repeat center; */
    /* background-size: 120rem 58.8125rem; */
}
.pri {
    display: flex;
    justify-content: space-between;
    width: 78rem;
    margin: auto;
}
.tooltipTis {
    width: 75rem;
    margin: auto;
    text-align: center;
    font-size: 1.75rem;
    position: relative;
    top: -3.125rem;
    /* transform: translate(100rem,0); */
}
.tooltipTisFillCons {
    animation: moves 2s;
    animation-fill-mode: both; 
}

@keyframes moves {
    0%{
        transform: translate(100rem,0);
    }
    100%{
        transform: translate(0,0);
    }
} 
.li {
    text-align: center;
    background: #fff;
    padding: 10px;
    box-shadow: 0rem .0625rem 1.25rem 0rem #c8c8c8;
    cursor: pointer;
    transition: all  .25s  ease-in;
}
.li_con {
    width: 240px;
    height: 168px;
    background: #f3f3f3;
    box-sizing: border-box;
    padding-top: 46px;
}
.li_con div {
    width: 100%;
    text-align: center;
    font-size: 24px;
    color: #565656;
    margin-bottom: 22px;
}
.li_con div span{
    font-size: 28px;
}
.li li {
    width: 100%;
    height: 32px;
    font-size: 14.4px;
    line-height: 32px;
    text-align: center;
    list-style-type:none;
    color: #b5b0b0;
}
.li li:nth-child(2n) {
    background: #f3f3f3;
}
.btn {
    width: 140px;
    height: 40px;
    margin: auto;
    background-image: url(../image/xg.png);
    background-size: 100% 100%;
    margin-bottom: 19.2px;
    border: 0;
    background-repeat: no-repeat;
}
.li:hover {
    transform:translateY(-1.25rem);
}
.li:hover .btn{
    background: url(../image/xgs.png);
    background-size: 100% 100%;
    background-repeat:no-repeat;
}
.li:hover .li_con{
    background: linear-gradient(to left,#4daefe,#01f1fe);
}
.li:hover .li_con div{
    color: #fff;
}
.btn a {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.al a{
    color: #407be7 !important;
}
.al {
    position: relative;
}
.al::after {
    content: '';
    width: 100%;
    height: 3px;
    background: #407be7;
    position: absolute;
    bottom: -20px;
    left: 0;
}
.pricings h2 {
    font-size: 2.625rem;
    color: #333;
    padding: 6.25rem 5rem 4rem 5rem;
}

/* 底部 */
.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;
}

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

/* 质询图标 */
.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;
}

/* 产品介绍 */
.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: 0;
    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: #3c86df !important;
}
.abc .til a{
    color: #3c86df !important;
}
.navigationBarBack {
    background: #f6fef9;
}
.navigationTitle a {
    color: #333 !important;
}
.navigationTitle {
    color: #333 !important;
}