#about{background-image:url(/images/02/index-about-bg.jpg);background-repeat:no-repeat;background-position:0 0%;background-size:100%;padding:270px 0 150px;position:relative;}
#about .webframe{position:relative;z-index:5;}
#about .about-article{float:left;width:50%;}
#about .about-baby{float:left;width:50%;position:relative;}
#about .about-article h2,
#about .about-article .more{text-align:center;}
#about .about-article p{font-size:16px;color:#4a4a4a;width:55%;margin:30px auto;line-height:180%;}
#about .about-article .more a{display:inline-block;position:relative;color:#4c4b4b;}
#about .about-article .more a b{position:relative;z-index:2;}
#about .about-article .more a:after{content:'';background:#f4bd39;position:absolute;display:block;width:calc(100% + 20px);height:100%;top:50%;left:-10px;z-index:1;transition:all linear 0.2s;}
#about .about-article .more a:hover:after{background:#7adeec;left:calc(100% + 5px);width:10px;height:15px;border-radius:50px 50px 100px 0px;top:-10px;transform:rotate(10deg);}
#about .about-baby .babyimg{text-align:center;margin-top:100px;position:relative;}
#about .about-baby .babyimg img{position:relative;z-index:2;animation-name:swim;animation-iteration-count:infinite;animation-direction:alternate;animation-duration:1s;transition:all linear 0.3s;}
#about .about-baby .babyimg:after{content:url(/images/02/index-about-baby-bob.png);position:absolute;display:block;z-index:1;left:15%;top:0;transform:scale(0.6,0.6);animation-name:bob;animation-iteration-count:infinite;animation-direction:alternate;animation-duration:1s;animation-delay:1s;}
#about .about-baby .babyimg:before{content:url(/images/02/index-about-baby-bob.png);position:absolute;display:block;z-index:1;left:8%;top:27%;animation-name:bob;animation-iteration-count:infinite;animation-direction:alternate;animation-duration:0.6s;}
#about .about-baby .star{position:absolute;right:0;top:50px;}
#about .aboutfox{position:absolute;right:10%;z-index:3;bottom:-50px;animation-name:flow;animation-iteration-count:infinite;animation-direction:alternate;animation-duration:1s;}
#about .aboutrabb{position:absolute;left:5%;bottom:25%;animation-name:flow;animation-iteration-count:infinite;animation-direction:alternate;animation-duration:3s;}
#product{background-image:url(/images/02/index-p-bg.jpg);background-repeat:no-repeat;background-position:50% 0%;padding:150px 0 50px;position:relative;overflow:hidden;background-attachment: fixed;background-size: cover;}
#product:after{position:absolute;content:'';width:100%;z-index:1;height:200px;background-image:url(/images/02/index-p-bottom.png);background-repeat:repeat-x;background-position:0 0;bottom:0;}
#product .webframe,
#news .webframe{position:relative;z-index:2;}
#product h2{text-align:center;}
#product .p-box{margin:100px 0 0;}
#product .p-box .circle{position:relative;margin:0 25px;overflow:hidden;}
#product .p-box .slick-slide:nth-child(odd) .circle{margin-top:50px;}
#product .p-box h3{margin:30px 25px 0;text-align:center;}
#product .p-box .photo a,
#news .newslide .news-slider .photo a,
#book .bookList .bookshow .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;border-radius:50%;}
#product .p-box .photo a img,
#news .newslide .news-slider .photo a img,
#book .bookList .bookshow .photo a img{width:100%;}
#product .p-box .hoverstyle{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:-webkit-linear-gradient(top, rgba(229,179,208,0.7) 0%,rgba(103,174,229,0.1) 100%);overflow:hidden;transition:all linear 0.3s;opacity:0;transform:scaleX(-0.5);}
#product .p-box .hoverstyle a{display:block;width:70%;height:20%;padding:50% 15% 20%;color:#fff;overflow:hidden;}
#product .p-box .hoverstyle a p{text-align:center;height:46px;overflow:hidden;font-size:15px;line-height:150%;}
#product .p-box .slick-slide:hover .hoverstyle{opacity:1;transform:scaleX(1);}
#product .p-box h3 a{display:inline-block;color:#fff;background:#65c6e1;padding:5px 35px;font-weight:normal;line-height:110%;border-radius:15px;transition:all linear 0.3s;}
#product .p-box .slick-slide:hover h3 a{background:#f19eb4;}
#news{background-image:url(/images/02/index-news-bg.png);background-repeat:no-repeat;background-position:50% 100%;padding:70px 0;position:relative;}
#news .newslide{float:left;width:576px;}
#news #fbset{float:right;width:calc(90% - 576px);}
#news .newslide .news-slider{margin:20px 30px;}
#news .newslide .news-slider li{overflow:hidden;padding:10px 0;}
#news .newslide .news-slider .photo{float:left;}
#news .newslide .news-slider .info{float:left;width:calc(100% - 230px);margin-left:30px;}
#news .newslide .news-slider .photo a,
#book .bookList .bookshow .photo a{border-radius:0;}
#news .newslide .news-slider .info h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:10px 0 5px;}
#news .newslide .news-slider .info h3 a{color:#2f2f2f;font-size:18x;font-weight:normal;line-height:100%;}
#news .newslide .news-slider .info h4{color:#65c6e1;font-weight:normal;font-size:12px;}
#news .newslide .news-slider .info p{font-size:13px;color:#787878;margin-top:10px;height: 39px;line-height: 150%;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
#news .newsbird{position:absolute;bottom:0;left:5%;}
#news .newstar01{position:absolute;left:27%;top:5%;animation-name:bob;animation-iteration-count:infinite;animation-direction:alternate;animation-duration:0.8s;transition:all linear 0.3s;}
#news .newstar02{position:absolute;top:40%;left:10%;animation-name:bob;animation-iteration-count:infinite;animation-direction:alternate;animation-duration:1.2s;transition:all linear 0.3s;}
#book .bookList{overflow:hidden;}
#book .bookList >div{float:left;width:25%;position:relative;}
#book .bookList .bookshow{position:relative;}
#book .bookList .bookshow .bookdetail{position:absolute;bottom:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);opacity:0;transition:all linear 0.3s;}
#book .bookList .bookshow:hover .bookdetail{opacity:1;}
#book .bookList .bookshow .bookdetail a{color:#fff;display:block;width:100%;height:100%;position:relative;}
#book .bookList .bookshow .bookdetail h3{position:absolute;bottom:15%;left:10%;width:80%;border-bottom:1px solid #fff;padding-bottom:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:normal;font-size:17px;display:block;}
.animation-box img{position:absolute;animation-name:flow;animation-iteration-count:infinite;animation-direction:alternate;animation-duration:1s;z-index:1;}
.animation-box .bannericon01{top:5%;left:20%;animation-duration:2s;}
.animation-box .bannericon02{top:23%;left:5%;}
.animation-box .bannericon03{top:32%;left:1%;animation-duration:1.5s;}
.animation-box .bannericon04{bottom:36%;left:13%;animation-duration:0.5s;}
.animation-box .bannericon05{bottom:16%;left:15%;}
.animation-box .bannericon06{top:10%;right:12%;}
.animation-box .bannericon07{bottom:15%;right:10%;animation-duration:1.5s;}
.animation-box .bannericon08{top:-10px;right:20%;animation-duration:2.5s;}
.animation-box .bannericon09{top:45%;right:-10px;animation-duration:2.5s;}
.animation-box .bannericon010{top:42%;right:5%;}
@media screen and (max-width:1680px){.animation-box .bannericon04{left:10%;}
.animation-box .bannericon07{right:5%;}
#about .aboutrabb{left:1%;}
#about .aboutfox{right:5%;}
}
@media screen and (max-width:1440px){.animation-box img{zoom:0.7;}
.animation-box .bannericon02{top:3%;}
.animation-box .bannericon07{right:0;bottom:50%;}
#about .aboutrabb,
#about .aboutfox{zoom:0.6;}
}
@media screen and (max-width:1280px){#about .about-article{width:60%;}
#about .about-baby{width:40%;}
#about{padding:200px 0 100px;}
#product .p-box .slick-slide:nth-child(odd) .circle{margin-top:0;}
#news .newslide{width:50%;}
#news #fbset{width:45%;}
#news .newslide .news-slider .photo{width:100px;}
#news .newslide .news-slider .info{width:calc(100% - 130px);}
#news .newslide .news-slider .info h3{margin:0px 0 5px;}
#book .bookList >div{width:50%;}
#book .bookList .bookshow .bookdetail{opacity:1;}
#product{background-attachment: inherit;background-size: auto;}
}
@media screen and (max-width:980px){#about .about-article{width:100%;}
#about .about-baby{width:100%;}
#news .newslide{width:100%;}
#news #fbset{width:105%;margin-top:50px;text-align:center;}
#news .newslide h2{text-align:center;}
}
@media screen and (max-width:640px){.animation-box img{zoom:0.5;}
#about .about-article p{width:90%;}
#about .aboutrabb{bottom:40%;opacity:0.4;}
#about{padding:100px 0;}
#product{padding:100px 0 50px;}
#product h2 img{width:75%;}
#product .p-box{margin:50px 0 0;}
}
@media screen and (max-width:480px){.animation-box img{zoom:0.3;}
#product .p-box .circle{margin:0 5px;}
#product .p-box h3{margin:30px 5px 0;}
#product .p-box h3 a{padding:5px 20px;font-size:14px;}
#news .newslide .news-slider .photo{width:100%;}
#news .newslide .news-slider .info{width:100%;margin:10px 0 0;}
#news .newslide .news-slider{margin:0;}
#news .newslide .news-slider li{margin-bottom:20px;}
#book .bookList .bookshow .bookdetail h3{font-size:14px;padding-bottom:0;border:0;}
}