.component-lifestage{position:relative;overflow:hidden;padding-top:45px;padding-bottom:20px;background:#fff}
.component-lifestage a{text-decoration:none}
.component-lifestage .lazy:not(.loaded){visibility:hidden}
.component-lifestage-inner{max-width:100%;margin:0 auto}
.component-lifestage-inner li,.component-lifestage-inner ul{padding:0;margin:0;list-style:none}
.component-lifestage-header{position:relative;margin-bottom:20px;padding:0 20px;text-align:center}
.component-lifestage-header br{display:none}
.component-lifestage-row:not(.swiper-wrapper){display:flex;flex-wrap:wrap;justify-content:center}
.component-lifestage-col:not(.swiper-slide){flex:0 0 100%;max-width:100%;padding-left:0;padding-right:0;margin-bottom:30px}
.component-lifestage-title{padding:0;margin:0 0 15px;font-size:28px;font-weight:700;line-height:1;letter-spacing:.5px;color:#333}
.component-lifestage-descr{max-width:none;margin:0;padding:0;font-size:18px;font-weight:400;line-height:1.5;letter-spacing:.5px;color:#666}
.swiper-container .component-lifestage-pagination{display:flex;justify-content:center;margin:20px 0 10px 0}
.swiper-container .component-lifestage-pagination .swiper-pagination-bullet{width:6px;height:6px;background-color:#888;opacity:1;transition:.2s}
.swiper-container .component-lifestage-pagination .swiper-pagination-bullet-active{width:26px;background-color:#67b77e;border-radius:8px}
@media(min-width:375px){.component-lifestage-col:not(.swiper-slide){flex:0 0 360px;max-width:360px;padding-left:15px;padding-right:15px}
}
@media(min-width:768px){.component-lifestage-header{padding-left:35px;padding-right:35px}
.component-lifestage-title{font-size:32px}
.component-lifestage-descr{max-width:500px;margin:0 auto}
}
@media(min-width:992px){.component-lifestage{padding-top:50px}
.component-lifestage-bg{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden}
.component-lifestage-bg:after{content:"";display:block;position:absolute;left:-20%;bottom:0;width:140%;height:260px;border-radius:100% 100% 0 0;background:#f7fcf9}
.component-lifestage-inner{max-width:960px}
.component-lifestage-header{text-align:left}
.component-lifestage-header br{display:block}
.component-lifestage-descr{max-width:370px;margin:0}
}
@media(min-width:1200px){.component-lifestage-inner{max-width:1270px}
}
@media(min-width:992px){.swiper-container.component-lifestage-list{overflow:visible;z-index:auto;padding:40px 0 160px;height:500px;margin-left:-50px;margin-right:-50px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.swiper-container .component-lifestage-row{z-index:auto}
.swiper-container .component-lifestage-col.swiper-slide.swiper-slide-visible{opacity:1;transition:opacity .2s ease-out}
.swiper-container .component-lifestage-col.swiper-slide{opacity:0;transition:opacity .2s ease-out}
.swiper-container .component-lifestage-col:not(.swiper-slide-visible){opacity:0;transition:opacity .2s ease-out;pointer-events:none}
.swiper-container .component-lifestage-pagination{display:none}
.swiper-container .component-lifestage-next,.swiper-container .component-lifestage-prev{position:absolute;left:50%;bottom:125px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:2px solid transparent;background:#e3f3e9;border-radius:50%;transition:.2s ease-out;cursor:pointer}
.swiper-container .component-lifestage-next:after,.swiper-container .component-lifestage-prev:after{content:"";display:block;width:12px;height:12px;border-top:3px solid #67b77e;border-left:3px solid #67b77e}
.swiper-container .component-lifestage-next:hover,.swiper-container .component-lifestage-prev:hover{background:#fff;transform:scale(1.1)}
.swiper-container .component-lifestage-prev{margin-left:-240px}
.swiper-container .component-lifestage-prev:after{transform:rotate(-45deg);margin-left:4px}
.swiper-container .component-lifestage-next{margin-left:200px}
.swiper-container .component-lifestage-next:after{transform:rotate(135deg);margin-right:4px}
}
@media(min-width:1200px){.swiper-container .component-lifestage-next,.swiper-container .component-lifestage-prev{bottom:155px}
}
@media(min-width:1920px){.swiper-container.component-lifestage-list{margin-left:-75px;margin-right:-75px}
}
.component-liferole{position:relative;margin:auto}
.component-liferole a,.component-liferole a:active,.component-liferole a:hover{color:inherit}
.component-liferole-bg{position:absolute;left:50%;top:80px;width:240px;height:240px;margin-left:-120px}
.component-liferole-bg img{display:block;width:100%;height:100%}
.component-liferole-pic{position:relative;left:50%;width:340px;height:184px;overflow:hidden;margin-left:-170px !important}
.component-liferole-pic img{display:block;width:100%;height:auto}
.component-liferole-pic img:not([src]){visibility:hidden}
.component-liferole-cont{position:relative;display:flex;flex-direction:column;align-items:center;padding:24px 10px;border-radius:20px;background:#fff;border:2px solid #f3f3f3;box-shadow:8px 8px 32px rgba(131,207,169,.2),0 16px 32px rgba(51,51,51,.04);text-align:center;transition:.2s ease-out;transition-property:transform,border-color;width:50vw;min-width:280px;margin:auto}
.component-liferole-title{max-width:100%;margin:0;padding:0;font-size:20px;font-weight:500;color:#333;line-height:1}
.component-liferole-descr{max-width:100%;font-weight:400;font-size:16px;color:#999}
.component-liferole-descr,.component-liferole-learnmore{margin:0;padding:0;margin-top:10px !important;margin-bottom:0 !important}
.component-liferole-learnmore{display:inline-block;color:#5faf76;font-weight:700;border-bottom:1px solid #5faf76;text-decoration:none;line-height:21px}
.component-liferole-cont:active,.component-liferole-cont:hover{transform:scale(1.04)}
@media(min-width:992px){.swiper-container .component-liferole{width:130px;left:0;top:15px;margin-top:50px;transition:.2s ease-out;transition-property:top,left}
.swiper-container .swiper-slide-prev .component-liferole{top:-20px;left:-15%}
.swiper-container .swiper-slide-next .component-liferole{top:-20px;left:15%}
.swiper-container .swiper-slide-active .component-liferole{top:-100px}
.swiper-container .component-liferole-bg{display:none;top:30px;width:308px;height:308px;margin-left:-154px}
.swiper-container .component-liferole-pic{width:225px;height:auto;overflow:visible;margin-left:-112.5px !important;transition:.2s ease-out;transition-property:width,margin-left}
.swiper-container .swiper-slide-next .component-liferole-pic,.swiper-container .swiper-slide-prev .component-liferole-pic{width:250px;margin-left:-125px !important}
.swiper-container .swiper-slide-active .component-liferole-pic{width:375px;margin-left:-187.5px !important}
.swiper-container .component-liferole-cont{position:absolute;left:50%;margin-left:-175px;bottom:-70px;width:350px;display:none}
.swiper-container .swiper-slide-active .component-liferole-cont{display:flex;-webkit-animation:liferole-cont-in .2s ease-out .24s backwards;animation:liferole-cont-in .2s ease-out .24s backwards}
.swiper-container .swiper-slide-active .component-liferole-bg{display:block;-webkit-animation:liferole-bg-in 1.5s ease .4s backwards;animation:liferole-bg-in 1.5s ease .4s backwards}
.swiper-container .swiper-slide-active .component-liferole-bg img{-webkit-animation:liferole-bg-pulse 6s ease-in-out .4s infinite alternate both;animation:liferole-bg-pulse 6s ease-in-out .4s infinite alternate both}
.swiper-container .swiper-slide:nth-of-type(2n) img{-webkit-animation-name:liferole-bg-pulse-r;animation-name:liferole-bg-pulse-r}
}
@media(min-width:1200px){.swiper-container .component-liferole{margin-top:0}
.swiper-container .swiper-slide-next .component-liferole,.swiper-container .swiper-slide-prev .component-liferole{top:-20px}
.swiper-container .swiper-slide-active .component-liferole{top:-130px}
.swiper-container .component-liferole-bg{top:30px;width:380px;height:380px;margin-left:-190px}
.swiper-container .component-liferole-pic{width:275px;margin-left:-137.5px !important}
.swiper-container .swiper-slide-next .component-liferole-pic,.swiper-container .swiper-slide-prev .component-liferole-pic{width:300px;margin-left:-150px !important}
.swiper-container .swiper-slide-active .component-liferole-pic{width:450px;margin-left:-225px !important}
.swiper-container .component-liferole-cont{bottom:-40px}
}
@-webkit-keyframes liferole-cont-in{0{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes liferole-cont-in{0{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
@-webkit-keyframes liferole-bg-in{0{transform:scale(.4);opacity:0}
20%{transform:scale(1.1);opacity:1}
40%{transform:scale(.96)}
60%{transform:scale(1.02)}
to{transform:scale(1)}
}
@keyframes liferole-bg-in{0{transform:scale(.4);opacity:0}
20%{transform:scale(1.1);opacity:1}
40%{transform:scale(.96)}
60%{transform:scale(1.02)}
to{transform:scale(1)}
}
@-webkit-keyframes liferole-bg-pulse{0{transform:rotate(5deg) skewY(0)}
to{transform:rotate(-15deg) skewY(-5deg)}
}
@keyframes liferole-bg-pulse{0{transform:rotate(5deg) skewY(0)}
to{transform:rotate(-15deg) skewY(-5deg)}
}
@-webkit-keyframes liferole-bg-pulse-r{0{transform:rotate(-5deg) skewY(0)}
to{transform:rotate(15deg) skewY(5deg)}
}
@keyframes liferole-bg-pulse-r{0{transform:rotate(-5deg) skewY(0)}
to{transform:rotate(15deg) skewY(5deg)}
}