@charset "utf-8";

/* 内容 */
.content{ margin-top: 50px;}

/* row01 */
.slide{ width: 53.03%; float: left; position: relative;}
.slide .gp-img-responsive{ padding-bottom: 70%;}
.slide li{ position: relative;}
.slide .title{ width: 100%; padding: 20px 30px; position: absolute; left: 0px; bottom: 0px; line-height: 20px; background-color: rgba(0, 0, 0, 0.4); color: #fff; z-index: 1;}
.slide .slick-prev{ border: none; outline: none; font-size: 0; width: 40px; height: 70px; position: absolute; top: 50%; left: 0px; transform: translateY(-50%); z-index: 1; background: rgba(0, 0, 0, 0.4) url("https://www.life360ahbelo.com/images/slide_prev.png") center no-repeat;}
.slide .slick-next{ border: none; outline: none; font-size: 0; width: 40px; height: 70px; position: absolute; top: 50%; right: 0px; transform: translateY(-50%) rotate(180deg); z-index: 1; background: rgba(0, 0, 0, 0.4) url("https://www.life360ahbelo.com/images/slide_prev.png") center no-repeat;}
.news{ float: right; width: 43.9393%;}
.channel{ padding-bottom: 10px; border-bottom: 1px solid #1441B3; position: relative;}
.channel::after{ content: ''; display: block; width: 124px; height: 4px; background-color: #1441B3; position: absolute; bottom: 0px; left: 0px;}
.channel .more{ text-transform: uppercase; color: #999;}
.channerlTitle{ padding-left: 34px; line-height: 20px; position: relative; display: inline-block;}
.channerlTitle::before{ content: ''; display: block; width: 24px; height: 24px; background: url("https://www.life360ahbelo.com/images/news_icon.png") no-repeat center/cover; position: absolute; left: 0px; top: 0px;}

.news li{ padding: 20px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.news li a{ display: block; overflow: hidden; font-size: 0; max-height: 51px;}
.dateRow2{ display: inline-block; width: 50px; color: #1441B3; position: relative;}
.dateRow2 .day{ display: block; font-family: 'DIN'; line-height: 24px; position: relative; font-weight: 600;}
.dateRow2 .line{ display: block; height: 1px; width: 51px; background-color: #1441B3; transform: rotate(-11.31deg); position: absolute; top: 50%; left: 0px;}
.dateRow2 .month{ display: block; font-family: 'DIN'; line-height: 17px; margin-top: 10px;}
.title{ line-height: 20px; display: inline-block; width: calc(100% - 68px); margin-left: 18px; overflow: hidden; padding: 16px 0 14px;}
.title span{ display: block; transition: all .3s ease;}
li:hover .title span{ text-indent: 0.4em;}
/* row02 */
.quick{ margin: 50px auto; margin-left: -20px; margin-right: -20px;}
.quick li:nth-of-type(1) .img{ background: url("https://www.life360ahbelo.com/images/mode02_icon01.png") no-repeat center;}
.quick li:nth-of-type(1):hover .img{ background: url("https://www.life360ahbelo.com/images/mode02_icon01_white.png") no-repeat center;}
.quick li:nth-of-type(2) .img{ background: url("https://www.life360ahbelo.com/images/mode02_icon02.png") no-repeat center;}
.quick li:nth-of-type(2):hover .img{ background: url("https://www.life360ahbelo.com/images/mode02_icon02_white.png") no-repeat center;}
.quick li:nth-of-type(3) .img{ background: url("https://www.life360ahbelo.com/images/mode02_icon03.png") no-repeat center;}
.quick li:nth-of-type(3):hover .img{ background: url("https://www.life360ahbelo.com/images/mode02_icon03_white.png") no-repeat center;}
.quick li:nth-of-type(4) .img{ background: url("https://www.life360ahbelo.com/images/mode02_icon04.png") no-repeat center;}
.quick li:nth-of-type(4):hover .img{ background: url("https://www.life360ahbelo.com/images/mode02_icon04_white.png") no-repeat center;}
.quick li:nth-of-type(5) .img{ background: url("https://www.life360ahbelo.com/images/mode02_icon05.png") no-repeat center;}
.quick li:nth-of-type(5):hover .img{ background: url("https://www.life360ahbelo.com/images/mode02_icon05_white.png") no-repeat center;}
.quick a{display: block;margin: 0 16px;padding: 35px 36px;overflow: hidden;background-color: #F8F8F8;}
.quick li:hover a{ background-color: #1441B3; color: #fff;}
.quick .img{ width: 60px; padding-bottom: 60px; float: left; background-color: initial;}
.quick .name{ float: right; margin-top: 18px;}
.quick img:hover{ transform: scale(1);}

/* row03 */
.row03{ background-color: #F0F5FF; padding: 50px 0 20px;}
.mode03 .gp-avg-2{ padding-top: 30px;}
.mode03 li{ width: 48.48%; margin-bottom: 30px;}
.mode03 li:nth-of-type(odd){ float: left;}
.mode03 li:nth-of-type(even){ float: right;}
.mode03 .channerlTitle::before{ background: url("https://www.life360ahbelo.com/images/notice_icon.png") no-repeat center;}
.noticeTit{ padding-left: 26px; position: relative; line-height: 20px; transition: all .3s ease;}
li:hover .noticeTit{ text-indent: 0.4em;}
.noticeTit::before{ content: ''; display: block; width: 16px; height: 16px; background: url("https://www.life360ahbelo.com/images/listBefore_icon.png") no-repeat center; position: absolute; left: 0px; top: 0px;}
.date{ padding-left: 5px;}

/* row04 */
.row04{ padding-top: 50px;}
.row04 ul{ margin: 30px 0 50px;}
.mode04 .channerlTitle::before,.mode06 .channerlTitle::before{ background: url("https://www.life360ahbelo.com/images/depart_icon.png") no-repeat center;}
.gp-avg-10{ margin-left: -20px; margin-right: -20px;}
.gp-avg-10 li{ float: left; width: 10%;}
.gp-avg-10 li:hover img{ animation: rotateInDownRight .3s linear;}
.mode04 .gp-img-responsive{ overflow: hidden;}
.gp-avg-10 li a{ display: block; margin: 0 20px;}
.mode04 .gp-img-responsive{ padding-bottom: 100%; background-color: #F0F5FF;}
.mode04 .gp-img-responsive img:hover{ transform: scale(1);}
.mode04 .department{ line-height: 20px; text-align: center; margin-top: 10px;}
@-webkit-keyframes rotateInDownRight{
    0%{transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}
    0%,to{-webkit-transform-origin:right bottom}
    to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}
}
@keyframes rotateInDownRight{
    0%{transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}
    0%,to{-webkit-transform-origin:right bottom}
    to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}
}

/* row05 */
.row05{ background: url("https://www.life360ahbelo.com/images/mode5_bg.png") left center no-repeat; padding: 40px 0; overflow: hidden;}
.mode05{ width: 81.06%; float: right;}
.mode05 .health{ float: left; width: 58.878%;margin-top: 10px; padding: 30px 50px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); position: relative;}
.mode05 .health::before{ content: ''; display: block; width: 100%; height: 0px; padding-bottom: 55.555%; position: absolute; left: 0px; top: 0px; background: rgba(255, 255, 255, 0.5); filter: blur(5px);}
.healthList{ margin-top: 30px;}
.healthList li{ padding-left: 16px; position: relative; margin-bottom: 21px;}
.healthList li:last-child{ margin-bottom: 0px;}
.healthList li::before{ content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #1441B3; position: absolute; left: 0px; top: 50%; transform: translateY(-50%);}
.healthList .gp-ellipsis{ line-height: 20px; transition: all 0.3s ease;}
.healthList li:hover .gp-ellipsis{ text-indent: 0.4em;}

.special{ float: right; width: 37.383%;}
.special li{ margin-bottom: 30px; padding-left: 60px; padding-right: 80px; background: url("https://www.life360ahbelo.com/images/mode05_img01.png") no-repeat; background-position: left; position: relative; text-align: right;}
.special li:nth-of-type(2){ background: url("https://www.life360ahbelo.com/images/mode05_img02.png") no-repeat; background-position: right; text-align: left;}
.special li:nth-of-type(3){ background: url("https://www.life360ahbelo.com/images/mode05_img03.png") no-repeat; background-position: left;}
.special li:nth-of-type(4){ background: url("https://www.life360ahbelo.com/images/mode05_img04.png") no-repeat; background-position: right; text-align: left;}
.special li::before{ content: ''; display: block; width: 100%; height: 0px; padding-bottom: 17.5%; background-color: #F0F5FF; position: absolute; left: 0px; top: 0px; z-index: -1;}
.special .name{ line-height: 25px; padding: 23px 0 22px;}

/* row06 */
.row06{ margin: 50px 0;}
.mode06{ overflow: hidden;}
.slide02{ margin-top: 30px; margin-left: -20px; width: 1360px !important;}
.slide02::before{ content: ''; display: block; width: 40px; height: 131px; position: absolute; top: 0px; left: 20px;background: linear-gradient( to right,rgba(255,255,255,1),rgba(255,255,255,0)); z-index: 1;}
.slide02::after{ content: ''; display: block; width: 40px; height: 131px; position: absolute; top: 0px; right: 20px;background: linear-gradient( to left,rgba(255,255,255,1),rgba(255,255,255,0)); z-index: 1;}
.slide02 li{ }
.slide02 li a{ display: block; margin: 0 20px;}
.slide02 li .gp-img-responsive{ padding-bottom: 56.25%;}
.slide02 .slick-prev,.slide02 .slick-next{ position: absolute; left: 20px; top: 50%; transform: translateY(-50%); z-index: 2; background: url("https://www.life360ahbelo.com/images/mode06_prev.png") no-repeat center; border: none; outline: none; width: 40px; height: 30px; font-size: 0;}
.slide02 .slick-next{ left: auto; right: 20px; transform: translateY(-50%) rotate(180deg);}



/* 响应式样式 */
@media screen and (max-width:1600px){
    
}

@media screen and (max-width:1480px) {
    
}

@media screen and (max-width:1400px) {
    .special li:nth-of-type(4){ margin-bottom: 0px;}
    .quick a{ padding: 35px 25px; margin: 0 15px;}
    .slide02{ width: 1320px !important;}
}

@media screen and (max-width:1280px) {
    .news li{ padding: 15px 0;}
    .special li::before{ padding-bottom: 20%;}
    .row03,.row04,.row05{ padding-top: 30px;}
    .row06{ margin: 30px 0; padding: 0 40px;}
    .mode06{ padding: 0; overflow: hidden;}
    .slide02{ width: auto !important; margin-right: -20px;}
    /* .slide02::before{ left: 0px;}
    .slide02::after{ right: 0px;}
    .slide02 .slick-prev{ left: 0px; width: 20px;}
    .slide02 .slick-next{ right: 0px; width: 20px;} */
}

@media screen and (max-width:1200px) {
    .quick{ margin: 30px 0;}
    .quick a{ padding: 35px 20px; margin: 0 10px;}
    .gp-avg-10 li a{ margin: 0 10px;}
    .slide02 li a{ margin: 0 10px;}
}

@media screen and (max-width:1100px) {
    .quick a{ padding: 35px 10px;}
    .row04 ul{ margin: 20px 30px;}
    .news li{ padding: 10px 0;}
}
@media screen and (max-width:1080px) {
    .slide,.news{ width: 100%; float: none;}
    .news{ margin-top: 20px;}
    .mode02{ margin: 0px;}
    .row04 ul{ margin: 20px 5px;}
    .gp-avg-10 li a{ margin: 0 5px;}
    .mode05{ width: 100%;}
    .slide02 li a{ margin: 0 10px;}
    .content{ margin-top: 30px;}
    .slide02::before{ left: 10px;}
}

@media screen and (max-width:1024px) {
    
}

@media screen and (max-width:997px) {
    .quick{ text-align: center;}
    .quick li{ display: inline-block; float: none; width: 32%; margin-bottom: 20px;}
    .quick a{ padding: 35px 30px;}
    .mode03 .gp-avg-2{ max-height: 320px; overflow: hidden;}
    .mode03 li{ width: 100%;}
    .gp-avg-10 li{ width: 20%; margin-bottom: 10px;}
    .mode05 .health{ float: none; width: 100%;}
    .special{ float: none; margin: 0 auto; margin-top: 50px; width: 50%;}
    .row05{ background-position: top left;}
    .special li::before{ padding-bottom: 16.6%;}
    .slide02{ margin: 20px 0; width: 100% !important;}
    .slide02::after{ right: -1px; width: 60px; height: 140px;}
    .slide02::before{ left: -1px; width: 60px; height: 140px;}
    .slide02 .slick-prev, .slide02 .slick-next{ left: 10px;}
    .slide02 .slick-next{ left: auto; right: 10px;}
}

@media screen and (max-width:900px) {
    .special{ width: 400px;}
    .row05{ position: relative; z-index: -2; padding-bottom: 0;}
    .special li::before{ padding-bottom: 17.5%;}
}

@media screen and (max-width:840px) {
}

@media screen and (max-width:768px) {
    .quick a{ padding: 35px 20px;}
    .gp-container{ padding-left: 0; padding-right: 0px;}
}

@media screen and (max-width:680px) {
    .row06{ margin: 0;}
    .special{ margin-bottom: 30px;}
    .quick a{ padding: 35px 10px;}
}

@media screen and (max-width:540px) {
    .quick li{ width: 48%; margin-bottom: 10px;}
    .quick a{ margin: 0 10px; padding: 15px 20px;}
    .special{ width: 300px;}
    .special li::before{ padding-bottom: 23.8%;}
    .special li{ padding-left: 40px; padding-right: 40px;}
    .mode05 .health{ padding: 30px 20px;}
    .dateRow2{ width: 43px;}
    .gp-avg-10 li{ width: 25%;}
    
}

@media screen and (max-width: 414px) {
    .quick{ margin: 20px 0;}
    .quick a{ padding: 15px 3px;}
}

@media screen and (max-width:380px) {
    .quick a{ padding: 15px 0px;}
    
}

@media screen and (max-width:320px) {
    
}