@import url('https://fonts.googleapis.com/css?family=Krub');
.wrapper {background: url(/images/11/index/index-bg.jpg) no-repeat center top/cover;background-attachment:fixed;}
.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;}
/*News*/
#newsWrap{position: relative;margin-top: 105px;}
#newsWrap section { width: 100%}
#newBox{box-sizing: border-box;background: #ffffff;box-shadow: inset 0 0 20px -9px rgb(0 0 0 / 0.2);}
#newsWrap .news-content-title{display: inline-block;margin-right: 30px;width: 124px;padding: 20px 20px;background: #ffba00;font-weight: bold;text-align: center;color: #fff;font-size: 16px;}
#newsWrap .new-slider{width: calc(100% - 200px);display: inline-block;margin-bottom: 0px;}
#newsWrap .news-item{position: relative;display: flex;}
#newsWrap .news-item .date{vertical-align: text-bottom;position: relative;margin-right: 30px;font-size: 16px;}
#newsWrap .news-item h3{width: 100%;}
#newsWrap .news-item .title{display: inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align: text-bottom;font-size: 16px;color: #000;-webkit-line-clamp: 1;}
#newsWrap .news-item .date::after{content: "";position: absolute;right: -23px;width: 13px;height: 2px;background: #ffba00;top: 50%;transform: translateY(-50%);}
#newsWrap .news-item .more{position: absolute;bottom: 4px;right: 0px;font-size: 18px;padding-right: 40px;color: #000000;}
#newsWrap .news-item .more::after{content: "";position: absolute;left: -15px;height: 24px;width: 1px;background: #87aeb4;display: inline-block;}
#newsWrap .news-item .more i{padding:0 5px;color: #ffba00;font-size: 16px;}
/*aboutBox*/
#aboutBox,#productWrap{overflow:hidden;padding:50px 0;}
#aboutBox .tit h3 , #aboutBox .tit h4 , #aboutBox .tit p a , #aboutBox article , #productWrap .tit h3 , #productWrap .tit p a{color:#ffffff;text-shadow:0 0 2px #5a5a5a;}
#aboutBox .tit h4 {text-align:center;}
#aboutBox article {font-size:17px;line-height:1.7;letter-spacing:.2em;}
/*Product*/
#productWrap ul{overflow:hidden;font-size: 0;}
#productWrap ul li{display: inline-block;margin: 10px 5px;width: calc((100% - 40px) / 4);animation-name:fadeInUp;-webkit-animation-name:fadeInUp;}
#productWrap ul li .productPhoto a{overflow:hidden;position:relative;background-size: cover;height: 29vw;}
#productWrap ul li h3 a{margin:0;color: #ffffff;display:block;padding:15px 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:calc(100% - 20px);font-size: 22px;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: #ffffff;display:block;text-align:center;font-weight:bold;background: #ffba00;font-size:14px;line-height:130%;padding: 9px 0;width: 120px;border-radius:5px;margin:10px auto;border:1px solid #747474;}
#productWrap ul li a.more:hover{background:#747474;color:#f8f8f8;}

@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 (min-width:1280px){
    #productWrap ul li .productPhoto a:after {position:absolute;width:100%;height:100%;top:0;background: url(/images/11/index/img-productPhoto.png) rgb(0 0 0 / 0.2) no-repeat 50%;display:block;content:"";transition:all 0.4s ease; opacity: 0}
    #productWrap ul li:hover .productPhoto a:after{ opacity: 1}
}
@media screen and (max-width:1024px){
    #newsWrap .news-item .title{}
    #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:980px){
    #newsWrap{margin-top: 70px;}
}
@media screen and (max-width:768px){
    #newsWrap .tit{height:auto;background:none;}
    #newsWrap ul li .newPhoto{width:100px;height:100px;}
    #newsWrap .news-content-title{width: 100%;margin-right: 0;padding: 10px 0;}
    #newsWrap .news-item .more { display: none}
    #newsWrap .new-slider {width: 100%;padding: 15px 25px 10px;}
    #bookWrap ul li{width:50%;}
}
@media screen and (max-width:640px){
    #newsWrap ul li{width:50%;}
    #productWrap ul li{width: calc((100% - 20px) / 2);}
    #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;}
    #productWrap ul li .productPhoto a{height: 64vw;}
}
@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;}
}