manHourHousekeeper/fhKeeper/formulahousekeeper/inva_4_tivo/css/revision.css

.pricing {
    background: #f3f7fd;
    padding: 7.876rem 0 2.25rem 0; 
}
.scheme {
    display: flex;
    justify-content: center;
    margin-bottom: 2.55rem;
}
.subject {
    display: flex;
    justify-content: space-around;
}

.common {
    width: 32%;
    box-sizing: border-box;
    border: 1px solid #dddddd;
    /* display: flex; */
    /* flex-direction: column-reverse; */
    background: #ffffff;
    transition:all 1s ease-out;
}
.subject a {
    color: #fff;
    text-decoration:none
}
.common .upper {
    text-align: center;
    padding-top: 2.2rem;
    border-bottom: 1px solid #dddddd;
    position: relative;
}
.common .upper span {
    display: inline-block;
    width: 6rem;
    height: 2rem;
    background: #03a9f5;
    line-height: 2rem;
    color: #ffffff;
    margin-top: .4rem;
    margin-bottom: 1.6rem;
    transition:all 0.5s ease-out;
}

.sale::after {
    content: "*热销*";
    position: absolute;
    top: .4rem;
    left: 43%;
    font-size: 14px;
    color: #15c381;
}

.common .upper p {
    margin-bottom: 0.75rem;
}

.middle {
    padding: 1.6rem 1.2rem 0 1.2rem;
    height: 16rem;
    border-bottom: 1px solid #dddddd;
}
.middle i, .whole i {
    display: inline-block;
    margin-right: .4rem;
}

.whole {
    height: 32rem;
    padding: 1.6rem 1.2rem 0 1.2rem;
}

.total {
    color: #f26522;
}

.customization {
    text-align: center;
    margin: 6.6rem 0 3.2rem 0;
}

.simple:hover, .basics:hover, .specialty:hover{
    cursor:pointer;
    background: #eafdf3;
    border: 1px dashed #5abf87;
    transform:scale(1.05);
}
.simple:hover .upper span, .basics:hover .upper span, .specialty:hover .upper span {
    background: #f0483e;
}

/* 弹出层样式 */
.popups {
    position: absolute;
    /* background: ; */
}

/* 使用说明样式 */
.instructions {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    position: fixed;
    top: 0;
    z-index: 9999;
}
.popup {
    width: 40rem;
    height: 20rem;
    margin: auto;
    box-sizing: border-box;
    background: #fff;
    margin-top: 8.333333rem;
    position: relative;
    z-index: 999999999999999999999;
}
.use {
    padding: 1rem;
    height: 3.5rem;
}
.use h5 {
    float: left;
}
.use span {
    float: right;
    cursor:pointer;
}
.use span:hover {
    color: red;
}
.docums {
    padding: 3rem 1rem 0 1rem;
}

/* 新写的 */
.indx {
	font-size: 1.375rem;
	color: #fff;
	width: 34.375rem;
	margin-top: 23rem;
	text-align: left;
	margin-left: 38.625rem;
    line-height: 35px;
    margin-bottom: 1.5rem;
}
.ald {
    display: flex;
    /* justify-content: flex-end; */
}
.all {
    width: 15rem;
    height: 5rem;
    background: #fff;
    color: #4bd0ff;
    font-size: 1.625rem;
}
.allsal {
    width: 15rem;
    line-height: 5rem;
    background: #fff;
    text-align: center;
    border-radius: 5rem;
    text-decoration: none;
    margin: 0 4.375rem 1.875rem 0;
    font-size: 1.625rem;
    font-weight: bold;
    color: #2fc9ff !important;
}
.allsal:hover {
    text-decoration: none;
    cursor:pointer;
}
.navbar-custom .navbar-brand.logo-image img {
    /* width: 4.4375rem;
	height: 1.75rem; */
	width: 8.875rem;
	height: 3.0625rem;
}
.tabls {
    position: relative;
    display: flex;
    /* width: 41.875rem; */
    justify-content: flex-end;
    margin-top: -12px;
}
.tabls div {
    margin-left: 3.4375rem;
}
.tabls div a {
    text-decoration: none;
    font-size: 1.125rem;
    color: #5e5e5e;
}
.tabls div a:hover {
    text-decoration: none;
}
.navbar-custom.top-nav-collapse {
    background-color: #fff !important;
}
.product {
    width: 100%;
    background: #fff;
    text-align: center;
}
.pro_tops {
    padding-top: 8.625rem;
    padding-bottom: 3.75rem;
}
.pro_tops h2 {
    font-size: 2.5rem;
    color: #666666;
}
.pro_tops p {
    font-size: 1.125rem;
    margin-top: 1rem;
    margin-bottom: 1.8125rem;
}
.pro_tops div {
    font-size: 1.125rem; 
    line-height: 2.5rem;
    width: 55.625rem;
    margin: auto;
}
.pro_con {
    display: flex;
    justify-content: center;
}
.pro_con img {
    width: 82.3125rem;
    height: 26.25rem;
}
.process { 
    background: #fff;
    text-align: center;
    width: 80rem;
    margin:auto;
    position: relative;
}
.process_til {
    padding: 5.9375rem 0 6.25rem 0;
}
.process_til h2 {
    font-size: 2.5rem;
    color: #666666;
}
.process_til p {
    font-size: 1.125rem;
    color: #666666;
    margin-top: 1rem;
}
.process_con {
    display: flex;
    justify-content: space-between;
    position: relative;
}
.process_ctn {
    width: 14.875rem;
    height: 19.25rem;
    border: .0625rem solid #aeaeae;
    border-radius: .9375rem;
    position: relative;
    cursor:pointer;
}
.process_ctn:hover {
    border: .0625rem solid #1296db;
}
.process_ctn:hover h4{
    color:#1296db;
}
.process_ctn:hover span{
    background:#1296db;
}
.xm1:hover .pro_im1{
    background-image: url(../images/img/xmcj.png);
}
.xm2:hover .pro_im2{
    background-image: url(../images/img/ygtbs.png);
}
.xm3:hover .pro_im3{
    background-image: url(../images/img/xmjls.png);
}
.xm4:hover .pro_im4{
    background-image: url(../images/img/hzsjs.png);
}
.xm5:hover .pro_im5{
    background-image: url(../images/img/tjbs.png);
}
.pro_im1 {
    width: 7.5rem;
    height: 5rem;
    background-image: url(../images/img/xmcjs.png);
    background-size: 100%;
    position: absolute;
    top: -2.5rem;
    left: 3.75rem;
}
.pro_im2 {
    width: 7.5rem;
    height: 5rem;
    background-image: url(../images/img/ygtb.png);
    background-size: 100%;
    position: absolute;
    top: -2.5rem;
    left: 3.75rem;
}
.pro_im3 {
    width: 7.5rem;
    height: 5rem;
    background-image: url(../images/img/xmjl.png);
    background-size: 100%;
    position: absolute;
    top: -2.5rem;
    left: 3.75rem;
}
.pro_im4 {
    width: 7.5rem;
    height: 5rem;
    background-image: url(../images/img/hzsj.png);
    background-size: 100%;
    position: absolute;
    top: -2.5rem;
    left: 3.75rem;
}
.pro_im5 {
    width: 7.5rem;
    height: 5rem;
    background-image: url(../images/img/tjb.png);
    background-size: 100%;
    position: absolute;
    top: -2.5rem;
    left: 3.75rem;
}
.process_ctn h4 {
    padding-top: 3.4375rem;
    font-size: 1.625rem;
    color: #434343;
    padding-bottom: 0.5rem;
}
.process_ctn span {
    /* margin-top: 1.25rem; */
    height: .3125rem;
    display: block;
    background: #aeaeae;
    margin: auto;
    width: 3.75rem;
}
.alp {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.alp p {
    font-size: 1.375rem;
    color: #7a7a7a;
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
}
.features {
    text-align: center;
    margin-top: 1.875rem;
}
.chul {
    display: flex;
    justify-content: space-between;
    width: 75rem;
    margin: auto;
    flex-wrap: wrap;
}

.chul div {
    width: 13.75rem;
    height: 5.3125rem;
    background: #fff;
    box-shadow: 0px 1px 5px #888888;
    font-size: 1.5rem;
    color: #666666;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.125rem;
    cursor: pointer;
}
.chul div img {
    width: 2.25rem;
    height: 2.375rem;
    margin-right: 1.5rem;
}
.chul .on {
    box-shadow: 0px 0px 0px #fff;
    border: .125rem solid #107bff;
}
.feat_bottom {
    margin-top: 1.75rem;
    text-align: center;
}
.feat_bottom h5 {
    font-size: 1.5rem;
    color: #666666;
    padding-bottom: 1.875rem;
}
.lis {
    width: 62.5rem;
    height: 30.75rem;
    margin: auto;
}
.feat {
    width: 100%;
    height: 30.75rem;
    overflow: hidden;
    margin: auto;
    background-image: url(../images/img/bj.png);
    background-size:100% 100%
}
.lis img {
    width: 100%;
    height: 100%;
}
.show {
    display: block;
}
.hide {
    display: none;
}
.rectangular {
    text-align: center;
}
.rect_con {
    width: 80.9375rem;
    height: 17.5rem;
    margin: auto;
}
.rect_con img {
    width: 100%;
    height: 100%;
}
.advantage {
    text-align: center;
}
.advant_con {
    width: 75.1875rem;
    height: 43.625rem;
    margin: auto;
}
.advant_con img {
    width: 100%;
    height: 100%;
    margin-left: 6.25rem;
}
.customer {
    text-align: center;
}
.aldd {
    padding-top: 0;
    padding-bottom: 0;
}

/* 测试 */
.containerss{
    width:1000px;
    height:450px;
    overflow:hidden;
    position:relative;
    margin:0 auto;
}
.listss{
    width:3000px;
    height:450px;
    position:absolute;
    
}
.listss img{
    width:1000px;
    height:450px;
    float:left;
}
.buttss{
    width:300px;
    height:20px;
    position:absolute;
    left: 456px;
    bottom:-30px;
    cursor:pointer;
}
.buttss span{
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    position: relative;
    border: 1px solid #000;
    display: inline-block;
    margin-right: 1.25rem;
}
.arrows{
    width: 2.5rem;
    height: 60px;
    position: absolute;
    top: 42%;
    cursor: pointer
}
.lefts{
    left: 0;
}
.rights{
    right: 0;
}
.ons i::after {
    content: '';
    width: .5rem;
    height: .5rem;
    background: #000;
    border-radius: 50%;
    position: absolute;
    top: 1px;
    left: 1px;
}
.cust {
    text-align: center;
    margin-top: 3.125rem;
}
.cust h6 {
    font-size: 1.875rem;
    color: #393939;
    margin-bottom: 1.625rem;
}
.cust p {
    width: 48.75rem;
    margin: auto;
    font-size: 1.5rem;
    color: #7f7f7f;
    line-height: 2.625rem;
}
.pricings {
    text-align: center;
}
.pri {
    display: flex;
    justify-content: space-between;
    width: 94rem;
    margin: auto;
}
.li {
    text-align: center;
    background: #fff;
    padding: .625rem;
    box-shadow: 0px 1px 20px 0px #c8c8c8;
    cursor: pointer;
    transition: all  .25s  ease-in;
}
.li_con {
    width: 21.875rem;
    height: 17.5rem;
    background: #f3f3f3;
    box-sizing: border-box;
    padding-top: 4.875rem;
    /* display: flex;
    align-items: center;
    flex-wrap: wrap; */
}
.li_con div {
    width: 100%;
    text-align: center;
    font-size: 2.375rem;
    color: #565656;
    margin-bottom: 2.375rem;
}
.li_con div span{
    font-size: 3.75rem;
}
.li li {
    width: 100%;
    height: 3rem;
    font-size: 1.125rem;
    line-height: 3rem;
    text-align: center;
    list-style-type:none;
    color: #b5b0b0;
}
.li li:nth-child(2n) {
    background: #f3f3f3;
}
.btn {
    width: 11.875rem;
    height: 3rem;
    margin: auto;
    background-image: url(../images/img/xg.png);
    background-size: 100%;
    margin-bottom: .625rem;
    border:0;
    background-repeat:no-repeat;
}
.li:hover {
    /* position: relative;
    top: -1.25rem; */
    transform:translateY(-20px);
}
.li:hover .btn{
    background: url(../images/img/xgs.png);
    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: .1875rem;
    background: #407be7;
    position: absolute;
    bottom: -1.25rem;
    left: 0;
}
.pro_con_pl {
    width: 79.6875rem;
    height: 13.375rem;
    margin: auto;
}
.pro_con_pl img {
    width: 116%;
    height: 100%;
    margin-left: -8%;
}
.service2s {
	display: block;
	position: fixed;
	top: 10.8rem;
	/* bottom: 10rem; */
	right: 0;
	padding: 1rem;
	background: #fff;
	box-shadow: 3px 3px 10px #ccc;
	z-index: 99999999;
	text-align: center;
}
.service2s img {
	width: 8rem;
}

.service2s p {
	margin-bottom: 0;
	margin: 0.5rem 0;
}

.service2s p:last-child {
	color: #20a0ff;
}
.aplll {
	margin-left: 20%;
}