.wow{animation-duration:2s;animation-name:fadeInUp}
.controller{margin-top:-100px}
.grid:after{content:'';display:block;clear:both}
.grid-sizer,.grid-item{width:47%;margin:0 1.5%}
.grid-item{float:left;margin-top:200px}
.speBox{position:relative}
.speBox .speBoxTitle{font-size:30px;font-weight:400;line-height:100%;color:#383535;padding-bottom:10px}
.speBox .subBoxTitle{writing-mode:tb-rl;position:absolute;right:5px;top:54px;width:20px;letter-spacing:.3em;line-height:150%;color:#5f5a5a;font-weight:400;font-size:15px}
.speBox .subBoxTitle a{color:#5f5a5a}
.grid-item:nth-child(odd) .speBox .subBoxTitle{right:inherit;left:0}
.speBox >div{width:calc(100% - 50px);margin:15px 0}
.grid-item:nth-child(odd) .speBox >div{margin-left:50px}
#aboutFunc{margin-top:0}
#aboutFunc #youtube{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;width:100%;margin:0 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%}
#about .arts{color:#5f5a5a;margin:20px 0}
#about .more{border-top:1px solid #d9d9d9}
#about .more a{display:inline-block;background:#7b7fb2;color:#fff;font-size:17px;padding:5px 15px;font-family:'Patrick Hand',cursive;font-weight:400}
#prolay .pro-list{overflow:hidden}
#prolay .pro-list >div{float:left;width:calc((100% - 60px) / 3)}
#prolay .pro-list .p-border{margin-bottom:40px}
#prolay .pro-list .p-border .photo a,#news li .photo a,#comprehensive .bxslider a,#book .webframe ul li .photo{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:rgba(222,216,224,0.41)}
#prolay .pro-list .p-border .photo a img,#news li .photo a img,#comprehensive .bxslider a img,#book .webframe ul li .photo a img{width:100%}
#prolay .pro-list .p-border .p-info h3{margin:14px 0 3px}
#prolay .pro-list .p-border .p-info h3 a{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;color:#2e2f35;font-size:16px;line-height:120%}
#prolay .pro-list .p-border .p-info .describe{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;color:#6a717d;height:21px}
#prolay .pro-list .p-border .p-info .price{overflow:hidden;height:21px}
#prolay .pro-list .p-border .p-info .price span{float:left;font-size:12px;color:#8d7693}
#prolay .pro-list .p-border .p-info .price span.old{float:right;text-decoration:line-through;color:#a2a2a2}
#news li{float:left;width:calc(50% - 10px)}
#news li:nth-child(odd){margin-right:20px}
#news li .border{position:relative;margin-bottom:20px;overflow:hidden}
#news li .photo a{background-size:cover;position:relative}
#news li .news-info{background:#a78ac6;color:#fff;padding:10px;font-size:14px}
#news li .news-info h3{margin-top:7px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;font-size:15px}
#news li .news-info h3 a{color:#fff}
#news li .news-info .news-bottom p{font-family:'Patrick Hand',cursive;line-height:110%;font-size:15px}
#news li .news-info .news-bottom p a{color:#fff;font-family:"微軟正黑體","蘋果儷中黑","Lucida Grande","Arial","Arial Narrow";font-size:6pt}
#freebox{margin-top:50px}
#freebox .free{border-top:1px solid #d9d9d9}
#freebox .free h4{display:inline-block;background:#7b7fb2;color:#fff;font-size:15px;padding:5px 15px;font-weight:400;margin-bottom:15px}
#freebox .free p{color:#6b646c;line-height:150%}
.float{position:absolute;z-index:-1}
.float.flowerA{right:0;top:0;background-image:url(/images/15/bg-flower-A.png);background-repeat:no-repeat;background-position:100% 50%;background-size:cover;width:40%;height:100%}
.float.flowerB{left:0;bottom:10%}
.float.flowerC{background-image:url(/images/15/bg-flower-C.png)}
#bookBox{margin-bottom:60px;margin-top:30px;background: none !important;}
#bookBox #NewsTitle{background-position:50% 50%;background-repeat:no-repeat;background-size:cover;padding:150px 100px 200px;background-color:#ddd0e0;position:relative}
#bookBox #NewsTitle:after{z-index:1;content:'';width:100%;height:100%;position:absolute;left:0;top:0;background:rgba(83,85,104,0.34)}
#NewsTitle .index-title{color:#fff;position:relative;z-index:2}
#NewsTitle .index-title h2{font-size:40px;line-height:110%;margin-bottom:10px}
#NewsTitle .index-title p a{color:#fff;font-size:18px;line-height:110%}
#bookBox #book{margin-top:-175px;z-index:3;position:relative}
#book .blabla{width:760px;margin:0 auto;background:#fff;padding:50px 100px}
#book .blabla h2{text-align:center;font-size:40px;line-height:100%;font-weight:400;color:#383434}
#book .blabla h3{margin:20px 0;color:#ada6d3;text-align:center;font-size:18px}
#book .blabla p{color:#7a7a7a;text-align:center;font-size:14px;line-height:150%;overflow:hidden;height:23px}
#book .webframe{width:1522px;margin:0 auto}
#book .webframe ul li{width:calc(100% / 4);margin-right:-4px;vertical-align:top;display:none}
#book .webframe ul li:nth-child(1),#book .webframe ul li:nth-child(2),#book .webframe ul li:nth-child(3),#book .webframe ul li:nth-child(4){display:inline-block}
#book .webframe ul li .mofd{margin:0 10px 20px;position:relative}
#book .webframe ul li .photo{background-size:auto 100%}
#book .webframe ul li h3{position:absolute;bottom:0;left:0;width:calc(100% - 20px);padding:10px}
#book .webframe ul li h3 a{color:#fff;font-weight:400;font-size:15px;text-shadow:0 0 1px #513159,0 0 1px #513159,0 0 1px #513159}
#book .webframe ul li h3 a i{margin-right:5px}
#news li .news-info,#news li .photo a:before,#about .more a,#prolay .pro-list .p-box,.speBox .subBoxTitle a{transition:all linear .3s;-moz-transition:all linear .3s;-ms-transition:all linear .3s;-o-transition:all linear .3s;-webkit-transition:all linear .3s}
#book .webframe ul li{transition:all cubic-bezier(0.42,0,0,0.97) .3s;-moz-transition:all cubic-bezier(0.42,0,0,0.97) .3s;-ms-transition:all cubic-bezier(0.42,0,0,0.97) .3s;-o-transition:all cubic-bezier(0.42,0,0,0.97) .3s;-webkit-transition:all cubic-bezier(0.42,0,0,0.97) .3s}
@media screen and (min-width: 1025px) {
#news li .photo a:before{content:'';position:absolute;width:100%;height:100%;top:0;left:0;display:block;background:rgba(0,0,0,0.45)}
#news li:hover .photo a:before{opacity:0}
#news li .news-info{position:absolute;bottom:0;left:0;width:calc(100% - 20px);background:rgba(167,138,198,0)}
#news li:hover .news-info{background:#a78ac6}
#bookBox #NewsTitle{background-attachment:fixed}
#about .more a:hover{background:#a77bb2}
#prolay .pro-list >div:hover .p-box{transform:translateY(10px)}
.speBox .subBoxTitle a:hover{color:#a77bb2}
#book .webframe ul.sOver li{width:calc(100% / 5)}
#book .webframe ul.sOver li.divOver{width:calc((100% / 5) * 2)}
#book .webframe ul li .photo a img{height:293px}
#prolay .pro-list >div:nth-child(2n) .p-box{ animation-duration:1s;}
#prolay .pro-list >div:nth-child(3n) .p-box{ animation-duration:.6s;}
}
@media screen and (min-width: 1281px) {
#book .webframe ul li .photo a img{height:373px}
#prolay .pro-list >div:nth-child(3n-1){margin:0 30px}
}
@media screen and (min-width: 1681px) {
#book .webframe ul li .photo a img{height:480px}
}
@media screen and (max-width: 1680px) {
#book .webframe{width:1200px}
}
@media screen and (max-width: 1366px) {
#book .blabla h2{font-size:32px}
#book .blabla{padding:40px 100px}
}
@media screen and (max-width: 1280px) {
#book .webframe{width:960px}
#prolay .pro-list >div{width:calc((100% - 30px) / 2)}
#prolay .pro-list >div:nth-child(odd){margin-right:30px}
.float.flowerA{width:50%;background-size:contain;top:50%}
.float.flowerC{top:0}
}
@media screen and (max-width: 1024px) {
#book .webframe{width:90%}
.grid-sizer,.grid-item{width:90%;margin:100px 5% 0}
.controller{margin-top:-180px}
#prolay .pro-list >div:nth-last-of-type(1) .p-border,#prolay .pro-list >div:nth-last-of-type(2) .p-border{margin-bottom:0}
#book .blabla{width:calc(90% - 200px)}
}
@media screen and (max-width: 768px) {
#book .webframe ul li{width:calc(100% / 2)}
.speBox .speBoxTitle{font-size:24px}
.controller{margin-top:-160px}
.speBox >div{width:calc(100% - 30px)}
.speBox .subBoxTitle{right:0}
.grid-item:nth-child(odd) .speBox >div{margin-left:30px}
#bookBox #NewsTitle{padding:100px 100px 200px}
#bookBox{margin-bottom:30px}
}
@media screen and (max-width: 640px) {
.controller{margin-top:0}
.grid-sizer,.grid-item{margin:70px 5% 0}
#news li{width:calc(50% - 5px)}
#news li:nth-child(odd){margin-right:10px}
#news li .border{margin-bottom:10px}
#bookBox #NewsTitle{padding:100px 70px 200px}
}
@media screen and (max-width: 480px) {
.grid-sizer,.grid-item{margin:70px 2.5% 0;width:95%}
#prolay .pro-list >div{width:calc((100% - 15px) / 2)}
#prolay .pro-list >div:nth-child(odd){margin-right:15px}
#NewsTitle .index-title h2{font-size:30px}
#NewsTitle .index-title p a{font-size:16px}
#bookBox #NewsTitle{padding:70px 50px 150px}
#book .blabla{width: calc(90% - 60px);padding: 30px 30px;}
#book .blabla h2{font-size:24px}
#book .blabla h3{margin:15px 0}
#bookBox #book{margin-top:-125px}
#book .webframe{width:100%}
#news li .border{margin:0}
#news li .news-info .news-bottom{overflow:hidden}
#news li .news-info .news-bottom p{float:left;margin-right:10px;max-width:80px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#news li .news-info .news-bottom p a{line-height:100%}
#news li .news-info h3{font-size:16px;margin-top:8px;line-height:110%}
#news li .news-info .news-bottom p a{line-height:100%;color:#848484}
#news li{width:calc(100% - 5px);margin-bottom:5px;border-bottom:1px solid #ddc7e3;padding-bottom:5px}
#news li:nth-child(odd){margin:0 5px 5px 0}
#news li .news-info{float:left;width:calc(100% - 120px);color:#a77bb2;background:none}
#news li .photo{float:left;width:100px}
#news li .news-info .news-bottom p{font-size:16px;line-height:100%}
#news li .news-info h3 a{color:#5a5b67}
}