@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: 50px;animation-name:fadeInDown;-webkit-animation-name:fadeInDown;}
.tit h3 ,
.tit p{position: relative;color: #4e5551;font-size: 37px;font-weight: 800;font-weight:normal;text-align:center;line-height:150%;padding-top: 0;font-weight: 500;}
.tit p{font-size:17px;padding:0;}
.tit h3:before{
    content:"";
    position: absolute;
    width: 50px;
    height: 3px;
    background: #ee3b3e;
    bottom: -5px;
    left: calc(50% - 25px);
}
.tit p a{color: #4e5551;font-weight: normal;}
#newsWrap{overflow:hidden;padding-bottom:30px;background-color: #fcfcfc;background-repeat: no-repeat;background-position: 50%;padding: 50px 0 30px;}
#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 5px;display: flex;flex-direction: column;box-shadow: 0px 1px 11px #78787824;padding: 30px;}
#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: #ae9e98;}
#newsWrap ul li .date:before{content:"";width:30px;height:2px;background: #ddc1b7;display:block;margin-top:-10px;}
#newsWrap ul li .newPhoto{margin:0 auto;width: 100%;border-radius:50%;}
#newsWrap ul li h3 ,
#productWrap ul li h3 a{overflow:hidden;margin:10px auto;height: 43px;text-align:center;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;line-height: 44px;width: 100%;text-align: left;}
#newsWrap ul li h3 a{color:#645e55;font-size: 21px;}
#productWrap{overflow:hidden;padding:50px 0;background-color: #f9f9f9;}
#productWrap .tit h3 ,
#productWrap .tit p a{color: #3c3c3c;}
#serviceWrap .tit h3 ,
#serviceWrap .tit p{color:#565656;}
#serviceWrap .tit p.ssubb{
    letter-spacing: 0.3em;
}
#productWrap ul{overflow:hidden;}
#productWrap ul .imfoman p{
    overflow: hidden;
    margin: 20px 0 10px;
    height: 72px;
    text-align: left;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    padding: 0 12px;
}
#productWrap ul li{float:left;margin:10px 1%;width:23%;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;/* background:rgba(255, 252, 248, 0.24); */box-shadow: 0px 1px 11px #78787824;border-radius: 20px;}
#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;border-radius: 20px 20px 0 0;background-size: cover;}
#productWrap ul li:hover .productPhoto a{/* -webkit-filter: brightness(50%); */ /* Safari *//* filter: brightness(50%); */}
#productWrap ul li:hover .productPhoto a:after{}
#productWrap ul li .productPhoto a:after{position:absolute;width:100%;height: 98.8%;top: 0;background: url(/images/11/index/logo.png)  no-repeat 50%;display:block;content:"";transition:all 0.4s ease;/* opacity: 0; */-moz-transform: scale(0.0);-webkit-transform: scale(0.0);-o-transform: scale(0.0);-ms-transform: scale(0.0);transform: scale(0.0);z-index: 99;}
#productWrap ul li:hover .productPhoto a:after{top:0;-moz-transform: scale(1.0);-webkit-transform: scale(1.0);-o-transform: scale(1.0);-ms-transform: scale(1.0);transform: scale(1.0);background-color: #0000009c;}
#productWrap ul li h3 a{margin:0;color: #ffffff;display:block;padding: 15px 10px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:calc(100% - 20px);font-size: 24px;line-height: 31px;background: #ea6262;margin-top: -6px;position: relative;z-index: 3;}
#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: 90px 0 90px;background-size:cover;background: whitesmoke;}
#serviceWrap ul{
    display: flex;
    justify-content: space-between;
}
#serviceWrap ul li{position:relative;margin: 40px 0;float:left;width: 32%;color:#565656;text-align:center;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;}
#serviceWrap ul li img{
    width: 120px;
    -webkit-filter: saturate(85%); /* Safari */
    filter: saturate(85%);
}
#serviceWrap ul li:nth-child(2){-webkit-animation-delay:0.5s;border-left: #d6d6d678 1px solid;border-right: #d6d6d678 1px solid;padding: 0 15px;}
#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;-webkit-filter: saturate(100%);filter: saturate(100%);}
@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);}
}
.mooore{
    display: flex;
    justify-content: center;
}
.mooore a{
    background: #ea6262;
    padding: 12px 25px;
    margin: 30px auto 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-size: 17px;
    border-radius: 8px;
}
#serviceWrap ul li h3 ,
#serviceWrap ul li p{margin:5px auto;width: 95%;text-align:center;font-size:16px;}
#serviceWrap ul li h3{padding-bottom: 40px;border-bottom:2px #d1b084 dotted;font-size: 25px;text-align:center;font-weight: 500;width: 370px;max-width: 100%;}
#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: #ff6d6d;font-size: 18px;line-height: 180%;}
#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, #53535357 0%,#3837376b 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: 0px 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: 100%;/* background: rgba(0, 0, 0, 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{
    display: flex;
    flex-direction: column;
}
#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;}
}
