.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:75px 0 100px;position:relative;background-color:#e2e6e9;background-repeat:no-repeat;background-position:50% 100%;background-size:100%;
background-image: url(/images/14/img-ab-bg.jpg);}
#aboutFunc:after{content:'';width:100%;left:0;top:0;height:100%;display:block;background:linear-gradient(to bottom,rgba(0, 0, 0, 0.15) 61%,rgba(0, 0, 0, 0.78) 100%);z-index:1;position:absolute}
#aboutFunc .workframe{position:relative;z-index:2}
#aboutFunc .aboutart{color:#fff}
#aboutFunc .aboutart h3{
	display: block;
    text-align: right;}
#aboutFunc .aboutart h3 b{    font-weight: 400;
    font-size: 18px;
    position: relative;
    margin-bottom: 20px;
    font-size: 70px;
    font-style: italic;
    line-height: 1.2;
    font-family: 'Times New Roman', 'Noto Sans TC', '微軟正黑體', serif;}
#aboutFunc .aboutart h2{    font-size: 40px;
    letter-spacing: 4px;
    text-align: right;
    line-height: 110%;
    font-weight: 400;
    display: block;
    margin-bottom: 40px;}
#aboutFunc .aboutart .arts{    font-size: 18px;
    line-height: 180%;
    display: block;
    float: right;
    width: 45%;
    text-align: right;}
#aboutFunc .aboutart .more{    text-align: right;
    margin-top: 39px;
    display: block;
    float: right;
    width: 57%;}
.NewsMore{    text-align: center;
    margin-top: 39px;
    display: block;}
#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 120px;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;margin: 0px auto;
    display: block;
    float: right;
    width: 40%;}
#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:'';position:absolute;width:100%;height:120px;left:0;bottom:0;z-index:1}
#product .index-title,#BookTitle .index-title,#NewsTitle .index-title{margin:60px 0 30px;color:#fff}
#product .index-title{margin:80px 0 30px}
#product .index-title h2,#BookTitle .index-title h2,#NewsTitle .index-title h2{color: #434343;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:#6d6d6d;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(227, 40, 27);
    width: 20px;
    height: 20px;
    color: #ffffff;
	border-radius:50%;
	font-size:12px;
	line-height:18px;
	text-align:center;
	vertical-align:inherit}
#prolay .p-box{position:relative;margin:10px;overflow:hidden;transition:all linear .3s;border: 6px solid #EBEBEB;}
#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: contain;
    transition: all linear .3s;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}
#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:100% 100%;background-size:auto;background-image: url(/images/14/img-news-bg.png);}
#NewsBox{padding-bottom:80px}
#news ul{width:960px;margin:0 auto}
#news li{float:left;width:50%;height:160px}
#news li .border{margin:10px;padding:15px;overflow:hidden;background: rgba(255, 255, 255, 0.85);}
#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: 14px;color: #0093ff;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:45px;color:#888787;line-height:150%}
.NewsMore p a{
	border: 2px solid #545454;
    color: #000000;
    font-weight: 600;}
.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: 27px;
    line-height: 120%;
    margin-bottom: 22px;
    color: #0088cc;
    border-bottom: 2px solid #dadada;
	padding: 12px;}
#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: 187px;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-boxOver .bgimg img{opacity:1}
.bookStyle:hover .photo{width:110%;height:110%;left:-5%;top:-5%}
#news li .border h3 a:hover{color:#0093ff}
#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:0px auto 0;font-size:16px;line-height:160%;width:75%}
#aboutFunc .aboutart h3 b{font-size:47px}
#aboutFunc .aboutart h2{font-size:24px}
#book{height:301px}
#news ul{width:100%}
#aboutFunc .aboutart .more p a, .NewsMore p a {
    padding: 6px 80px;
}
}
@media screen and (max-width: 1024px) {
#book{height:auto}
#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:20px 0}
#freebox{padding:20px 0}
#product .index-title, #BookTitle .index-title, #NewsTitle .index-title {
    margin: 28px 0 10px;
    color: #fff;
}
}
@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:100%;height:auto}
#news li .border .photo{width:100px}
#news li .border .news-info{width:calc(100% - 120px)}
#news li .border p{height:28px}
#news li .border{margin:5px}
#NewsBox,#bookBox,#product{background-repeat:no-repeat;background-position:50% 100%;background-size:auto;background-image: url(/images/14/img-news-bg.png);}
}
@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 .more p a, .NewsMore p a {
    padding: 6px 40px;
	background-color: rgba(255, 255, 255, 0.88);
	}
#aboutFunc:after{background:linear-gradient(to bottom,rgba(0, 0, 0, 0) 61%,rgba(255, 255, 255, 0) 100%);}
#aboutFunc .aboutart{color:#101010}
#aboutFunc {
    overflow: hidden;
    padding: 7px 0 100px;
}
#aboutFunc .aboutart .more p a, .NewsMore p a {
    color: #000;
}
}