.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: 100px 0 50px;position:relative;background-repeat:no-repeat;background-position: 50% 50%;background-size: cover;background-image: url(/images/14/index-topBox-bg.jpg);}
#aboutFunc:after{content:'';width:100%;left:0;top:0;height:100%;display:block;background: linear-gradient(to bottom,#191b1c 20%,rgb(25 27 28 / 50%) 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: 40px 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: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:#fff;font-size:15px;padding: 6px 100px;margin: 0 10px;position:relative;z-index:2;background: #b8a37f;}
#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;overflow:hidden;padding-bottom: 50px;}
#product .workframe{position:relative;z-index:2}
#product:before{content:'';background: #000;position:absolute;width:100%;height: 100%;left:0;top: 0;z-index:1;opacity: .75;}
#product:after{content:'';background:#fff;position:absolute;width:100%;height: 160px;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;margin:20px;transition:all linear .3s;border-radius: 15px;overflow: hidden;}
#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;}
#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: rgb(0 0 0 / 85%);}
#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: 30px;}
#news ul{margin:0 auto;}
#news li{float:left;width: calc(100%/3);}
#news li .border{background:#f7f7f7;margin:10px;padding: 30px;overflow:hidden;}
#news li .border .photo{}
#news li .border .news-info{
    margin-top: 10px;
}
#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;margin-bottom: 15px;}
#news li .border p{overflow:hidden;height: 47px;color:#888787;line-height: 170%;font-size: 13px;letter-spacing: 1.5px;text-align: justify;}
.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}
/* pandr-title */
#pandr-title{color:#fff;background: #b8a37f;padding: 9px 0;}
#pandr-title .webframe{overflow:hidden;width: 1680px;margin: 0 auto;overflow: hidden;}
#pandr-title .title-set{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}
#pandr-title .title-set >div{
    width: calc((100%/4) - 20px);
    position: relative;
    padding: 10px;
    clear: both;
}
#pandr-title .title-set >div .free{
    overflow: hidden;
}
#pandr-title .title-set >div .free .num{
    width: 32px;
    height: 32px;
    background: #efefef;
    border: 1px solid #dedede;
    border-radius: 50%;
    text-align: center;
    color: #454545;
    font-size: 13px;
    line-height: 30px;
    letter-spacing: 0;
    position: absolute;
    bottom: 10px;
    left: 90px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
#pandr-title .title-set >div:hover .free .num{
    background: #7cbac1;
    color: #fff;
    }
#pandr-title .title-set >div .free .right{
    float: right;
    width: calc(100% - 60px);
}
#pandr-title .title-set >div .free .icon{
    width: 45px;
    height: 45px;
    float: left;
    margin-right: 15px;
    position: relative;
    overflow: hidden;
}
#pandr-title .title-set >div .free .icon img{
    width: 100%;
    position: absolute;
    top: -1px;
    left: 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: inline-block;
}
#pandr-title .title-set >div:hover .free .icon img{
    top: -52px;
}
#pandr-title .title-set h2{font-weight:400;color: #fff;font-size: 15px;-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;}
#pandr-title .title-set h2 b{
    font-size: 12px;
    letter-spacing: 0.25px;
    margin-left: 2px;
}
#pandr-title .title-set h3{color: #fff;font-size: 14px;line-height: 20px;overflow: hidden;text-align: left;margin: 0;}
#pandr-title .small-talk{float:right}
#pandr-title .small-talk p{text-align:right;font-size:16px;color:#e19dc5;line-height:180%;width:280px}

@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}
#aboutFunc{
    background-attachment: fixed;
}
#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}
	#pandr-title .webframe{
    width: 90%;
}
}
@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}
#pandr-title .title-set h2 b {
    display: block;
}
#aboutFunc .aboutart{margin-top:20px}
#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: 980px) {
	#pandr-title .title-set >div {
    width: calc((100%/2) - 20px);
}
}
@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}
#news li{width: 50%;}
#news li .border .photo{}
#news li:last-child{
    display: none;
}
#news li .border p{height:47px}
#news li .border{margin:5px}
}
@media screen and (max-width: 480px) {
	#pandr-title .title-set >div {
    width: 100%;
    display: block;
}
#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}
#news li{
    width: 100%;
}
	#aboutFunc {
    padding: 40px 0 50px;
}
	#aboutFunc .aboutart .more p {
    margin-bottom: 5px;
}
	#prolay .p-box {
    margin: 5px;
}
}