@import url('https://fonts.googleapis.com/css?family=Krub');
.wow{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:2s;animation-duration:2s;}
.tit{margin-bottom:30px;animation-name:fadeInDown;-webkit-animation-name:fadeInDown;}
.tit h3 ,
.tit p{color:#717171;font-size:40px;font-weight:normal;text-align:center;line-height:150%;padding-top:10px;}
.tit p{font-size:17px;padding:0;}
.tit p a{color:#55534f;font-weight:bold;}
#newsWrap{overflow:hidden;padding-bottom:30px;background-color: #fcfcfc;background-repeat: no-repeat;background-position: 50%;}
#newsWrap .tit{height:178px;background:url(/images/11/index/img-newTit.png) no-repeat 50% 0;}
#newsWrap ul li{position:relative;float:left;width:33%;margin:20px 0;}
#newsWrap ul li .date ,
#newsWrap ul li .date:before{position:absolute;top:0;left:0;z-index:10;margin-top:10px;font-family:'Krub', sans-serif;font-weight:bold;color:#91764e;}
#newsWrap ul li .date:before{content:"";width:30px;height:2px;background:#d1b084;display:block;margin-top:-10px;}
#newsWrap ul li .newPhoto{margin:0 auto;width:200px;height:200px;border-radius:50%;}
#newsWrap ul li h3 ,
#productWrap ul li h3 a{overflow:hidden;margin:10px auto;height:22px;text-align:center;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;line-height:22px;width:200px;}
#newsWrap ul li h3 a{color:#645e55;font-size:16px;}
#productWrap{overflow:hidden;padding:50px 0;background:url(/images/11/index/img-productBg.jpg) no-repeat fixed center top/cover;}
#productWrap .tit h3 ,
#productWrap .tit p a{color:#ffffff;text-shadow:0 0 2px #5a5a5a;}
#serviceWrap .tit h3 ,
#serviceWrap .tit p{color:#565656;}
#productWrap ul{overflow:hidden;}
#productWrap ul li{float:left;margin:10px 1%;width:23%;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;background:rgba(255, 252, 248, 0.24);}
#productWrap ul li:nth-child(2){-webkit-animation-delay:0.5s;}
#productWrap ul li:nth-child(3){-webkit-animation-delay:1s;}
#productWrap ul li:nth-child(4){-webkit-animation-delay:1.5s;}
#productWrap ul li:nth-child(5){-webkit-animation-delay:2s;}
#productWrap ul li:nth-child(6){-webkit-animation-delay:2.5s;}
#productWrap ul li:nth-child(7){-webkit-animation-delay:3s;}
#productWrap ul li:nth-child(8){-webkit-animation-delay:3.5s;}
#productWrap ul li .productPhoto a{overflow:hidden;position:relative;}
#productWrap ul li .productPhoto a:after{position:absolute;width:100%;height:100%;top:-100%;background:url(/images/11/index/logo.png) rgba(0,0,0,0.5) no-repeat 50%;display:block;content:"";transition:all 0.4s ease;}
#productWrap ul li:hover .productPhoto a:after{top:0;}
#productWrap ul li h3 a{margin:0;color:#5b5957;display:block;padding:15px 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:calc(100% - 20px);font-size:18px;line-height:22px;}
#productWrap ul li p.price{padding:0 10px;overflow:hidden;height:22px;}
#productWrap ul li p.price span{float:right;color:#000;font-size:12px;}
#productWrap ul li p.price span b{font-size:18px;margin:0 3px;color:#c50202;}
#productWrap ul li p.price span.old{float:left;color:#545454;}
#productWrap ul li p.price span.old b{font-size:12px;margin:0;color:#545454;}
#productWrap ul li a.more{color:#575757;display:block;text-align:center;font-weight:bold;background:#ddcebd;font-size:14px;line-height:130%;padding:5px 0;width:100px;margin:0 auto;border-radius:5px;margin:10px auto;border:1px solid #747474;}
#productWrap ul li a.more:hover{background:#747474;color:#f8f8f8;}
#serviceWrap{overflow:hidden;padding:50px 0;background-size:cover;}
#serviceWrap ul li{position:relative;margin:10px 0;float:left;width:33%;color:#565656;text-align:center;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;}
#serviceWrap ul li:nth-child(2){-webkit-animation-delay:0.5s;}
#serviceWrap ul li:nth-child(3){-webkit-animation-delay:1s;}
#serviceWrap ul li:after{position:absolute;width:8px;height:99px;background:url(/images/11/index/img-serviceLine.png) no-repeat 0 0;top:20%;right:0;display:block;content:"";}
#serviceWrap ul li:last-child:after{background:none;}
#serviceWrap ul li:hover img{animation:animatedIcon 1s;-webkit-animation:animatedIcon 1s;-moz-animation:animatedIcon 1s;-ms-animation:animatedIcon 1s;-o-animation:animatedIcon 1s;}
@keyframes animatedIcon{0%{transform:scale(1);}
25%{transform:scale(1.2);}
50%{transform:scale(1);}
75%{transform:scale(1.2);}
100%{transform:scale(1);}
}
@-o-keyframes animatedIcon{0%{transform:scale(1);}
25%{transform:scale(1.2);}
50%{transform:scale(1);}
75%{transform:scale(1.2);}
100%{transform:scale(1);}
}
@-webkit-keyframes animatedIcon{0%{transform:scale(1);}
25%{transform:scale(1.2);}
50%{transform:scale(1);}
75%{transform:scale(1.2);}
100%{transform:scale(1);}
}
@-moz-keyframes animatedIcon{0%{transform:scale(1);}
25%{transform:scale(1.2);}
50%{transform:scale(1);}
75%{transform:scale(1.2);}
100%{transform:scale(1);}
}
@-ms-keyframes animatedIcon{0%{transform:scale(1);}
25%{transform:scale(1.2);}
50%{transform:scale(1);}
75%{transform:scale(1.2);}
100%{transform:scale(1);}
}
#serviceWrap ul li h3 ,
#serviceWrap ul li p{margin:5px auto;width:75%;text-align:center;font-size:16px;}
#serviceWrap ul li h3{padding-bottom:5px;border-bottom:2px #d1b084 dotted;font-size:22px;text-align:center;}
#aboutWrap{overflow:hidden;padding:80px 0 30px;position:relative;}
#aboutWrap section{position:relative;}
#aboutWrap .bgstyle{position:absolute;width:100%;height:100%;top:0;left:0;z-index:-1;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;-webkit-filter:blur(10px);transform:scale(1.1);}
#aboutWrap .tit h3{text-align:left;padding:0;}
#aboutWrap .tit h4{color:#0e0e0e;font-size:20px;line-height:120%;}
#aboutWrap .aboutBox ,
#aboutWrap .fbBox ,
#aboutWrap .adList ul li{float:left;width:60%;}
#aboutWrap .aboutBox .tit{overflow:hidden;}
#aboutWrap .aboutBox .tit .left-t{float:left;}
#aboutWrap .aboutBox .tit .right-t{float:right;}
#aboutWrap .aboutBox article{margin:20px 0;color:#575757;font-size:16px;line-height:170%;}
#aboutWrap .aboutBox a{padding:5px 15px;display:inline-block;background:#535353;background:-moz-linear-gradient(left, #535353 0%, #383737 100%);background:-webkit-gradient(linear, left top, right bottom, color-stop(0%,#535353), color-stop(100%,#383737));background:-webkit-linear-gradient(left, #535353 0%,#383737 100%);background:-o-linear-gradient(left, #535353 0%,#383737 100%);background:-ms-linear-gradient(left, #535353 0%,#383737 100%);background:linear-gradient(to right, #535353 0%,#383737 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#535353', endColorstr='#383737',GradientType=0);color:#fff;border-radius:5px;}
#aboutWrap .fbBox{margin-left:5%;width:35%;}
#aboutWrap .adList ul{overflow:hidden;margin:30px 0;}
#aboutWrap .adList ul li{margin:10px 1%;width:23%;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;}
#aboutWrap ul li:nth-child(2){-webkit-animation-delay:0.5s;}
#aboutWrap ul li:nth-child(3){-webkit-animation-delay:1s;}
#aboutWrap ul li:nth-child(4){-webkit-animation-delay:1.5s;}
#aboutWrap .adList ul li a.photo ,
#bookWrap ul li a.photo ,
#bookWrap ul li .hoverBox{transition:all 0.4s ease;}
#aboutWrap .adList ul li:hover a.photo{background-size:auto 120%;}
#youtube{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
#youtube .UTwo{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
#youtube .UTwo a{display:block;width:100px;height:100px;text-align:center;line-height:100px;border-radius:50%;background:rgba(0, 0, 0, 0.6);position:absolute;z-index:5;color:#dcdcdc;font-size:30px;left:calc(50% - 50px);top:calc(50% - 50px);transition:all linear 0.3s;padding:0;}
#youtube .UTwo a:hover{width:110px;height:110px;line-height:110px;left:calc(50% - 55px);top:calc(50% - 55px);font-size:34px;}
#youtube .UTwo iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
#bookWrap{overflow:hidden;padding:50px 0 0;background-color:#f1f1f1;background-size:cover;background-repeat:no-repeat;background-position:50% 50%;}
#bookWrap ul,
#newsWrap ul{overflow:hidden;margin:0;}
#bookWrap ul li{position:relative;float:left;width:25%;overflow:hidden;}
#bookWrap ul li a.photo{background-size:100% auto;}
#bookWrap ul li:hover a.photo{background-size:120% auto;}
#bookWrap ul li .hoverBox{position:absolute;width:100%;height:100%;bottom:-100%;background:rgba(0,0,0,0.4);}
#bookWrap ul li:hover .hoverBox{bottom:0;}
#bookWrap ul li .hoverBox a{margin:20% auto 0;padding:40px 10px;width:60%;background:rgba(209,176,132,0.6);text-align:center;color:#fff;font-size:22px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
@media screen and (max-width:1024px){#serviceWrap ul li h3 ,
#serviceWrap ul li p{width:80%;}
#serviceWrap ul li p ,
#bookWrap ul li .hoverBox a{font-size:16px;}
#bookWrap ul li .hoverBox a{padding:20px 10px;}
}
@media screen and (max-width:768px){#newsWrap .tit{height:auto;background:none;}
#newsWrap ul li .newPhoto{width:100px;height:100px;}
#bookWrap ul li{width:50%;}
}
@media screen and (max-width:640px){#newsWrap ul li{width:50%;}
#productWrap ul li{width:48%;}
#serviceWrap ul li{width:100%;}
#aboutWrap .aboutBox ,
#aboutWrap .fbBox{width:95%;margin-left:2.5%;}
#serviceWrap ul li:after{background:none;}
#aboutWrap .aboutBox{margin-bottom:20px;}
#aboutWrap .adList ul li{margin-top:10px;width:48%;}
#aboutWrap .fbBox{text-align:center;}
}
@media screen and (max-width:480px){#newsWrap ul li ,
#bookWrap ul li{width:100%;}
#newsWrap ul li .newPhoto{width:240px;height:240px;}
#newsWrap ul li .date{left:30px;}
#bookWrap ul li .hoverBox a{font-size:18px;margin:25% auto 0;}
#productWrap ul li p.price span.old{font-size:7pt;margin-top:4px;}
#productWrap ul li p.price span.old b{font-size:7pt;}
#aboutWrap .tit h3{line-height:100%;}
}
@media screen and (max-width:320px){#newsWrap ul li .newPhoto{width:80px;height:80px;}
#newsWrap ul li .date{left:10px;}
#productWrap ul li ,
#aboutWrap ul li:nth-child(2) ,
#aboutWrap ul li:nth-child(3){width:100%;}
#aboutWrap ul li:nth-child(2) ,
#aboutWrap ul li:nth-child(3){margin-left:0;margin-right:0;}
}