.wow{animation-duration:3s; animation-name:fadeInUp;}
#news li .border .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:contain}
#aboutFunc{overflow:hidden;padding:0 0 100px;position:relative;background-color:#319ad4;background-repeat:no-repeat;background-position:50% 100%;background-size:100%}
#aboutFunc:after{content:'';width:100%;left:0;top:0;height:100%;display:block;background:linear-gradient(to bottom,#319ad4 20%,rgba(48,155,213,0.56) 100%);z-index:1;position:absolute}
#aboutFunc .workframe{position:relative;z-index:2}
#aboutFunc .aboutart{color:#fff}
#aboutFunc .aboutart h3{text-align:center}
#aboutFunc .aboutart h3 b{font-family:'Arvo',serif;font-weight:400;font-size:18px}
#aboutFunc .aboutart h2{text-align:center;font-size:30px;line-height:110%;font-weight:400}
#aboutFunc .aboutart .arts{text-align:center;margin:60px auto 0;font-size:18px;line-height:180%;width:55%}
#aboutFunc .aboutart .more,.NewsMore{text-align:center;margin-top:70px}
#aboutFunc .aboutart .more p,.NewsMore p{display:inline-block;overflow:hidden;position:relative}
#aboutFunc .aboutart .more p:after,.NewsMore p:after{content:'';display:block;width:100%;height:100%;background:rgba(255,255,255,0.38);position:absolute;bottom:0;left:0;transform:scale(0,1);transform-origin:right center 0;transition:transform 1s cubic-bezier(0.23,1,0.32,1)}
#aboutFunc .aboutart .more p:hover:after,.NewsMore p:hover:after{transform:scale(1,1);transform-origin:left center 0}
#aboutFunc .aboutart .more p a,.NewsMore p a{border:2px solid #fff;display:block;color:#fff;font-size:15px;padding:6px 200px;position:relative;z-index:2}
#aboutFunc .aboutart .more p b,.NewsMore p b{position:absolute;right:15px}
#aboutFunc #youtube{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;width:400px;margin:40px auto}
#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 .3s}
#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%}
#product{position:relative;background-color:#287ebc;overflow:hidden}
#product .workframe{position:relative;z-index:2}
#product:after{content:'';background:#fff;position:absolute;width:100%;height:120px;left:0;bottom:0;z-index:1}
#product .index-title,#BookTitle .index-title,#NewsTitle .index-title{margin:50px 0 30px;color:#fff}
#product .index-title{margin:80px 0 30px}
#product .index-title h2,#BookTitle .index-title h2,#NewsTitle .index-title h2{font-family:'Arvo',serif;font-weight:400;text-align:center;font-size:40px;line-height:110%}
#product .index-title p,#BookTitle .index-title p,#NewsTitle .index-title p{font-weight:400;text-align:center;margin-top:5px}
#product .index-title p a,#BookTitle .index-title p a,#NewsTitle .index-title p a{color:#fff;display:inline-block}
#product .index-title p a b,#BookTitle .index-title p a b,#NewsTitle .index-title p a b{margin-left:10px;display:inline-block;background:rgba(255,255,255,0.73);width:20px;height:20px;color:#287ebc;border-radius:50%;font-size:12px;line-height:18px;text-align:center;vertical-align:inherit}
#prolay .p-box{position:relative;background:rgba(0,0,0,0.18);margin:20px;overflow:hidden;transition:all linear .3s}
#prolay .p-box .p-info{position:absolute;z-index:1;width:100%;color:#fff;bottom:0;left:0;background:rgba(0,0,0,0.68)}
#prolay .p-box .p-info h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;margin:20px;font-weight:400;font-size:18px}
#prolay .p-box .p-info h3 a{color:#fff}
#prolay .p-box .p-info h3 a b{position:absolute;right:0}
#prolay .p-box .p-info .describe{margin:20px 20px 10px;overflow:hidden;height:75px}
#prolay .p-box .p-info .price{margin:10px 20px;overflow:hidden;position:relative}
#prolay .p-box .p-info .price span{float:left;font-size:14px}
#prolay .p-box .p-info .price span.old{float:right;font-size:12px;color:#b5b5b5}
#prolay .p-box .p-info .price span b{font-size:16px;margin:0 3px}
#prolay .p-box .p-info .price span.old b{font-size:12px}
#prolay .p-box .bgimg{position:absolute;left:0;top:0;width:100%;height:100%;transition:all linear .3s;background:#121212}
#prolay .p-box .bgimg img{width:100%;height:100%;object-fit:cover;transition:all linear .3s}
#product #w-particles{overflow:hidden;position:absolute;bottom:0;left:0;right:0;top:0}
#product #w-particles canvas{width:100%;height:100%}
#product #w-particles #particles{height:100%;background:linear-gradient(to left,rgba(0,0,0,0.52) 20%,hsla(0,0%,0%,0) 100%)}
#BookTitle .index-title h2,#BookTitle .index-title p a,#NewsTitle .index-title h2,#NewsTitle .index-title p a{color:#434343}
#BookTitle .index-title p a b,#NewsTitle .index-title p a b{background:#0583c9;color:#fff}
#book{margin:30px 0 0;height:660px}
#bookBox{padding-bottom:50px}
.bookStyle{position:relative;overflow:visible;width:50%;margin:10% auto 0}
.bookStyle .info{position:absolute;top:0;z-index:1;width:40px;left:-40px}
.bookStyle .info.twins{left:calc(100% + 20px)}
.bookStyle .info h3{writing-mode:tb-rl;font-size:20px;margin-bottom:20px;font-weight:400}
.bookStyle .info h4{writing-mode:tb-rl;font-size:15px;font-weight:400;color:#888}
.bookStyle .photo{position:absolute;left:0;top:0;width:100%;height:100%}
.bookStyle .photo a img{width:100%;height:100%;object-fit:cover}
.slick-center .bookStyle{width:75%;margin:0 auto}
.slick-center .bookStyle .info{z-index:1;left:-15%;width:50%;text-align:right;top:30%}
.slick-center .bookStyle .info.twins{display:none}
.slick-center .bookStyle .info h3{font-size:48px;text-align:right;writing-mode:initial;margin:0}
.slick-center .bookStyle .info h3 a{color:#fff;background:#000;display:inline-block;width:auto;height:auto;padding:4px 10px;font-weight:400;line-height:120%}
.slick-center .bookStyle .info h4{font-size:28px;line-height:120%;text-align:right;background:#000;color:#fff;display:inline-block;padding:6px 12px;font-weight:400;margin-top:5px;writing-mode:initial}
#NewsBox,#bookBox,#product{background-repeat:no-repeat;background-position:50% 100%;background-size:cover}
#NewsBox{padding-bottom:80px}
#news ul{width:960px;margin:0 auto}
#news li{float:left;width:50%;height:200px}
#news li .border{background:#f7f7f7;margin:10px;padding:15px;overflow:hidden}
#news li .border .photo{float:left;width:151px}
#news li .border .news-info{float:right;width:calc(100% - 170px)}
#news li .border .news-bottom{font-size:12px;color:#404040;font-family:'Arvo',serif}
#news li .border .news-bottom b{margin-right:7px}
#news li .border h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:30px;font-size:18px;line-height:30px}
#news li .border p{overflow:hidden;height:90px;color:#888787;line-height:150%}
.NewsMore p a{border:2px solid #565656;color:#3c3c3c}
.NewsMore p:after{background:#efefef}
#freebox{padding:50px 0}
#freebox #freeboxlist{text-align:center}
#freebox #freeboxlist >div{display:inline-block;width:calc(20% - 4px);margin:0 5%;vertical-align:top}
#freebox .free h3{text-align:center;font-size:22px;line-height:120%;margin-bottom:20px}
#freebox .free p{text-align:center}
#prolay .p-box >img,.bookStyle >img,#news li .border .photo img,#ssbanner a img{width:100%}
#prolay .p-box .bgimg a,.bookStyle,.bookStyle .info,#product .index-title p a b,#BookTitle .index-title p a b,#NewsTitle .index-title p a b{transition:all linear .3s}
.bookStyle .photo,.bookStyle .info h3 a,.bookStyle .info h4,.bookStyle .info h3{transition:all linear .1s}
@media screen and (min-width: 1025px) {
#prolay .p-box .p-info{transition:all linear .3s;height:186px;bottom:-121px}
#prolay .p-boxOver:hover .p-info{bottom:0}
#prolay .p-box:hover .bgimg{left:-3%;top:-3%;width:106%;height:106%}
#prolay .sthOver .p-box .bgimg img{opacity:.2}
#prolay .sthOver .p-boxOver .bgimg img{opacity:1}
.bookStyle:hover .photo{width:110%;height:110%;left:-5%;top:-5%}
#news li .border h3 a:hover{color:#0583c9}
#product .index-title p a:hover b,#BookTitle .index-title p a:hover b,#NewsTitle .index-title p a:hover b{padding-left:15px;border-radius:15px}
}
@media screen and (max-width: 1680px) {
#book{height:500px}
}
@media screen and (max-width: 1440px) {
#book{height:470px}
}
@media screen and (max-width: 1366px) {
#book{height:400px}
.slick-center .bookStyle .info h3{font-size:40px}
.slick-center .bookStyle .info h4{font-size:20px}
}
@media screen and (max-width: 1280px) {
#aboutFunc .aboutart .arts{margin:40px auto 0;font-size:16px;line-height:160%;width:75%}
#aboutFunc .aboutart h3 b{font-size:15px}
#aboutFunc .aboutart h2{font-size:24px}
#book{height:301px}
#news ul{width:100%}
}
@media screen and (max-width: 1024px) {
#book{height:auto}
#aboutFunc .aboutart{margin-top:20px}
#aboutFunc:after{background:linear-gradient(to bottom,#319ad4 50%,rgba(48,155,213,0.56) 100%)}
#product .index-title h2,#BookTitle .index-title h2,#NewsTitle .index-title h2{font-size:30px}
.bookStyle{margin:0 auto}
.bookStyle .info.twins{display:none}
.bookStyle .info{width:200px;right:90%;top:30px;text-align:right;left:initial}
.bookStyle .info h3{writing-mode:initial;margin-bottom:10px;text-align:right}
.bookStyle .info h3 a{color:#fff;background:#000;display:inline-block;padding:5px 8px 5px 20px;font-size:40px;line-height:120%}
.bookStyle .info h4{writing-mode:initial;display:inline-block;background:#000;color:#fff;padding:2px 10px;position:relative}
#freebox #freeboxlist >div{width:95%;margin:40px 0}
#freebox{padding:20px 0}
}
@media screen and (max-width: 768px) {
#aboutFunc .aboutart .arts{width:90%}
#aboutFunc #youtube{width:90%}
#aboutFunc .aboutart .more p a,.NewsMore p a{padding:6px 100px}
#aboutFunc:after{background:linear-gradient(to bottom,#319ad4 70%,rgba(48,155,213,0.56) 100%)}
#news li{width:100%;height:auto}
#news li .border .photo{width:100px}
#news li .border .news-info{width:calc(100% - 120px)}
#news li .border p{height:47px}
#news li .border{margin:5px}
}
@media screen and (max-width: 480px) {
#aboutFunc .aboutart .more,.NewsMore{margin-top:40px}
.bookStyle{width:80%}
.bookStyle .info{right:initial;left:-8%;text-align:left}
.bookStyle .info h3{text-align:left}
#prolay .p-box .p-info .describe{height:45px;margin:10px 20px}
}