.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: 90px 0;position:relative;background-repeat:no-repeat;background-position: 50% 15%;background-size: cover;}
#aboutFunc:after{content:'';width:100%;left:0;top:0;height:100%;display:block;background: linear-gradient(to bottom,rgb(255 255 255) 20%,rgb(255 255 255 / 0.8) 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: 40px;line-height:110%;font-weight:400;font-family: 'DM Serif Display', serif;font-style: italic;color: #1898d5;}
#aboutFunc .aboutart h2 b, #product .index-title h2 b, #freebox .index-title h2 b, #service .index-title h2 b {    color: #07458b;    margin-right: 10px;}
#aboutFunc .aboutart .arts{text-align: justify;margin:60px auto 0;font-size: 17px;line-height: 200%;width: 80%;color: #000;}
#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:hover:after,.NewsMore p:hover:after{transform:scale(1,1);transform-origin:left center 0}
#aboutFunc .aboutart .more p a,.NewsMore p a{display:block;color: #ffffff;font-size:15px;padding:6px 200px;position:relative;z-index:2;text-transform: uppercase;background-color: #07458b;}
#aboutFunc .aboutart .more p:hover a{    background-color: #1898d5;}
#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: #ffffff;overflow:hidden;padding: 100px 0;}
#product .workframe{position:relative;z-index:2}
#product .index-title, #BookTitle .index-title, #NewsTitle .index-title,#freebox .index-title{margin:50px 0 30px;color:#fff}
#product .index-title{margin: 0 0 30px;}
#product .index-title h2, #BookTitle .index-title h2, #NewsTitle .index-title h2, #freeboxlist .index-title h2, #service .index-title h2{font-family: 'DM Serif Display', serif;font-weight:400;text-align:center;font-size:40px;line-height:110%;color: #1898d5;font-style: italic;}
#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: #252525;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: rgb(7 69 139);width:20px;height:20px;color: #ffffff;border-radius:50%;font-size:12px;line-height:18px;text-align:center;vertical-align:inherit;}
#product #prolay .pro-list{
    overflow: hidden;
}
#product #prolay .pro-list >div{
    float: left;
    width: calc(100%/4);
}
#prolay .p-box{position:relative;background:rgba(0,0,0,0.18);margin: 10px;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: 16px;}
#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%;}
#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: 70px 0;background-color: #f3f3f3;}
#freebox #freeboxlist{text-align:center}
#freebox .index-title{
    margin: 0 0 40px;
}
#freeboxlist p{
    text-align: center;
    color: #000;
    margin-top: 20px;
    font-size: 25px;
}
#freebox #freeboxlist .freevideo{display:inline-block;width: calc((100%/3) - 25px);margin: 10px;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}

#service{
    padding: 80px 0;
    background-position: 50% 50%;
    background-image: url(/images/14/index-serviceBg.jpg);
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
}
#service .workframe{
    position: relative;
    z-index: 3;
}
#service:after {
    content: '';
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    display: block;
    background: linear-gradient(to top,rgb(255 255 255) 20%,rgb(255 255 255 / 0.65) 50%);
    z-index: 1;
    position: absolute;
}
#service .bottom{
    text-align: center;
    margin-top: 40px;
}
#service .bottom p{
    text-align: center;
    font-size: 25px;
}
#service .bottom .immg{
    width: 40%;
    margin: 40px auto 0;
}
#service .bottom .immg img{
    border-radius: 490px;
}
#service .bottom article{
    margin-top: 60px;
}
#service .bottom article a{
    border: 1px solid #000;
    padding: 10px 40px;
    display: inline-block;
    text-transform: uppercase;
    font-size: 14px;
}
#service .bottom article a:hover{background-color:#000;color:#fff;}

@media screen and (min-width: 1025px) {
#prolay .p-box .p-info{transition:all linear .3s;}
#service{
    background-attachment: fixed;
}
#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{font-size:16px;}
#aboutFunc .aboutart h3 b{font-size:15px}
#aboutFunc .aboutart h2{}
#book{height:301px}
#news ul{width:100%}
}
@media screen and (min-width: 1025px) {
#aboutFunc{
}
}
@media screen and (max-width: 1024px) {
#book{height:auto}
#product #prolay .pro-list >div{
    width: calc(100%/2);
}
#aboutFunc:after{}
#product .index-title h2,#BookTitle .index-title h2,#NewsTitle .index-title h2{}
.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{margin:40px 0;}
#freebox{padding:20px 0}
}
@media screen and (max-width: 768px) {
#aboutFunc .aboutart .arts{width:90%;margin: 30px auto 0;text-align: left;font-size: 14px;}
#aboutFunc #youtube{width:90%}
#aboutFunc .aboutart .more p a,.NewsMore p a{padding:6px 100px;font-size: 13px;}
#aboutFunc{
    padding: 50px 0;
}
#freebox #freeboxlist .freevideo{
    width: calc((100%/2) - 15px);
    margin: 5px;
}
#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}
#aboutFunc .aboutart h2, #product .index-title h2, #freeboxlist .index-title h2, #service .index-title h2{
    font-size: 30px;
}
#product #prolay .pro-list >div{
    width: 100%;
}
#service .bottom p{
    font-size: 22px;
    padding: 0 20px;
    line-height: 150%;
}
#service .bottom .immg{
    width: 80%;
}
}