/* by Adon , CSS Document */

.life{ float:left; width:100%}
.life .p1{ font-size:40px;}
.life .p2{ font-size:35px; margin:5px 0;}
.life .p3{ font-size:16px;}
.life ul { margin-top:10%; float:left; width:100%;}
.life ul li{ float:left; width:24%; position:relative; margin-right:1%; margin-bottom:1%;}
.life ul li.clear{ margin-right:0px;}
.life ul li .bg{ display:none;background:url(../img/life.png) repeat; width:100%; height:100%; position:absolute; top:0; left:0;}
.life ul li .bg i{ display:block; margin:0 auto; width:42px; height:42px; background:url(../img/life-i.png) no-repeat; position:relative; top:40%;}
.life ul li img{ display:block;}
.life ul li .item{ position:absolute; bottom:50px; left:0; right:0; margin:0 auto; text-align:center; color:#fff; z-index:9;}
.life ul li .item span{ display:block; font-size:25px;}
.life ul li .item font{ display:block; font-size:18px; margin:0 0 15px 0;}
.life ul li .item em{ display:block; height:1px; background:#fff; width:100%; max-width:55px; opacity:0.3; -webkit-opacity:0.3; -moz-opacity:0.3; -ms-opacity:0.3; -o-opacity:0.3; margin:0 auto;}
.life ul li:hover .bg{ display:block;}
.life-view { float:left; width:100%; color:#5c5c5c;}
.life-view p{ text-align:center; max-width:765px; margin:0 auto; width:100%;}
.life-view .p1{ font-size:60px;}
.life-view .p2{ font-size:40px;}
.life-view .p2 font{ height:1px; background:#e4e4e4; width:110px;margin:50px auto 60px auto; display:block;}
.life-view .p3{ font-size:15px; color:#7f7f7f}
.life-view .p4{ font-size:13px; color:#c0c0c0; max-width:650px; margin-top:15px;}
.life-view .life-a { margin-top:10%; float:left; width:100%;}
.life-view .life-a a{ float:left; width:19%; margin:1% 0.5% 0 0.5%;}
.life-view .life-a a img{ display:block}
.life-view .p5{text-align:center;border:1px solid #d2d2d2;clear:both;line-height:60px;width:100%;max-width:300px;margin:130px auto 65px auto;font-size:16px}
.life-view .p5:hover{ background:#d2965c}
.life-view .p5:hover a{ color:#fff}


@media (max-width:1024px){
.life ul li .bg i{ width:31px;height:31px; background-size:contain;}
.life ul li .item{ bottom:12%;}	
}
@media (max-width:768px){
.life .p1{font-size:36px}
.life .p2{font-size:30px}
.life .p3{font-size:16px}
.life-view .p1{ font-size:52px;}
.life-view .p2{ font-size:34px;}
.life-view .life-a a{width:32.33%;}
.life ul li{ width:32.3%; margin-left:0.5% !important; margin-right:0.5% !important;}
}
@media (max-width:640px){
.life .p1{font-size:26px}
.life .p2{font-size:20px;}
.life .p3{font-size:13px}
.life-view .p1{ font-size:44px;}
.life-view .p2{ font-size:30px;}
.life-view .p3{ font-size:14px;}
.life ul li .item span{ font-size:20px;}
.life ul li .item font{ font-size:15px;}
.life-view .p5{ font-size:13px;max-width: 250px;line-height: 50px; margin-top:100px;}
}
@media (max-width:480px){
.life-view .p1{ font-size:36px;}
.life-view .p2{ font-size:26px;}
.life-view .p2 font{ margin:12% auto;}
.life-view .p3{ font-size:13px;}
.life-view .p4{ font-size:12px;}
.life ul li{ width:49%;}
.life-view .life-a a{ width:49%;}
.life ul{ margin-top:15%;}
.life ul li .item span{ font-size:16px;}
.life ul li .item font{ font-size:13px;}
.life-view .p5{ font-size:12px; margin-top:50px;}
}
@media (max-width:320px){
.life-view .p1{ font-size:30px;}
.life-view .p2{ font-size:24px;}
.life-view .life-a a{ width:50%;}
.life ul li .item span{ font-size:14px;}
.life ul li .item font{ font-size:12px;}
.life ul li .bg i{ width:21px;height:21px;}
}