#aboutFunc{overflow:hidden;/* margin:100px 0; */position:relative;background-color: #f9f9f9;}
#aboutFunc #youtube{float:left;width:50%;position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position: absolute;overflow: hidden;height: 100%;}
#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%}
#aboutFunc #about{float:right;width:50%}
#aboutFunc #about .aboutart{width: 75%;margin: 40px auto;}
#aboutFunc #about .aboutart h2{color: #04498b;font-size: 20px;line-height:110%;}
#aboutFunc #about .aboutart h5{font-weight: bold;color: #191919;font-size: 30px;line-height: 130%;margin: 10px 0;text-transform: uppercase;}
#aboutFunc #about .aboutart .arts{margin:20px 0;color:#747474;font-size: 16px;line-height:180%;overflow:hidden;text-align: justify;}
#aboutFunc #about .aboutart .more{margin-top: 10px;}
#aboutFunc #about .aboutart .more a{display:inline-block;background: #04498b;color: #fff;padding:13px 70px;font-weight:700;font-size:16px;}
#aboutFunc #about .aboutart .more a:hover{background: #ac0103;}
#fakeNumber{/* padding:130px 0; *//* background-image:url(/images/01/parallax-3.jpg); */background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
#aboutFunc #about .aboutart #fakeNumber h2{
    font-size: 25px;
    font-weight: inherit;
}
#fakeNumber ul{text-align:center;width: 50%;background-color: #f3f3f3;margin: 15px 0;}
#fakeNumber ul li{display:inline-block;width: calc(33% - 4px);color:#fff;text-align:center;position:relative;}
#fakeNumber ul li:first-child:after{display:none}
#fakeNumber ul li .eva{/* background:rgba(255,255,255,0.3); */padding: 20px 0;margin:0 auto;display:inline-block;}
#fakeNumber ul li .eva p{font-size:14px;line-height:100%;text-align: center;}
#fakeNumber ul li .eva p b{font-size:55px;/* margin-left:5px; */color: #212020;line-height:100%;font-family: 'Raleway',sans-serif,"微軟正黑體";}
#aboutFunc #about .aboutart #fakeNumber ul li .eva h2{text-align: center;font-size: 16px;margin-top:10px;line-height:120%;color: #7d7d7d;}
.index-title{overflow:hidden}
.index-title h2{float:left;font-size:50px;line-height:110%;}
.index-title p{float:right;font-size:16px}
.index-title p a b{color:#ffe502;margin-left:10px}
#product{position:relative;background-color: #ffffff;overflow:hidden;padding: 50px 0;}
#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{text-align:center;float: none;font-weight: bold;color: #191919;font-size: 30px;line-height: 110%;text-transform: uppercase;}
#product .index-title p,#BookTitle .index-title p,#NewsTitle .index-title p{font-weight:400;text-align:center;margin-top:5px;float: none;}
#product .index-title p a{color: #505050;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(172, 1, 3);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;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: #0c0c0c;bottom:0;left:0;background: rgba(0, 0, 0, 0.01);}
#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: #151515;}
#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;display: none;}
#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: #ffffff;}
#prolay .p-box .bgimg img{width:100%;height:100%;object-fit: contain;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%) */}
#ssbanner{overflow:hidden;background-image:url(/images/01/bg-image-2.jpg);background-repeat:no-repeat;background-position:100% 0;background-size:cover;position:relative}
#ssbanner .bxslider,#ssbanner #freebox{float:right;width:50%;overflow:hidden}
#ssbanner .bxslider{position:absolute;width:50%;left:0;top:0;height:100%;overflow:hidden}
#ssbanner .bxslider.noneCI{position:relative;float:none}
.bxslider >div{width:50%;height:50%;float:left}
.bxslider >div a{background-repeat:no-repeat;background-position:50% 50%;background-size:40%;background-color:#f8f8f8;display:block;transition:all ease-in-out .3s;width:100%;height:100%}
.bxslider >div:nth-child(2) a,.bxslider >div:nth-child(3) a{background-color:#f0f0f0}
.bxslider >div a:hover{background-size:35%}
#freeboxlist{width:80%;margin:0 auto}
#freeboxlist .free{width:80%;margin:20% auto;color:#fff}
#freeboxlist .free h3{text-align:center;line-height:110%;font-size:30px;margin-bottom:30px;text-shadow:0 5px 5px #030303}
#freeboxlist .free p{font-size:16px;line-height:200%;text-align:center}
#freeboxlist .slick-prev{left:-5%;z-index:4}
#freeboxlist .slick-next{right:-5%}
#freeboxlist .slick-prev:before,#freeboxlist .slick-next:before{font-size:30px}
#NewsBox,#bookBox{padding:50px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#ssbannerTitle,#NewsTitle,#BookTitle{border-bottom:1px solid #e1e1e1;margin-bottom:20px;padding-bottom:35px}
#ssbannerTitle{margin-top:50px}
#news li{display:inline-block;width:calc(25% - 4px);vertical-align:top}
#news ul li:first-child{width:calc(50% - 4px)}
#news li .border{border:1px solid #e9e9e9;margin:5px}
#news li .photo{position:relative;overflow:hidden}
#news li .photo .hide{position:absolute;top:0;right:-100px;color:#fff;z-index:2;padding-top:10px;padding-right:10px;font-size:18px;opacity:0;transition:all linear .3s}
#news li .photo:hover .hide{opacity:1;right:0}
#news li .photo .hide:after{content:'';background:#ffcb01;display:block;position:absolute;width:140px;height:140px;right:0;top:0;z-index:-1;transform:rotate(45deg) translateY(-100px) translateX(0px) scale(0.7)}
#news li .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#news li .photo a img{width:100%;height:190px}
#news li .news-info{margin:25px 35px 30px}
#news li .news-info h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:17px;padding:5px}
#news li .news-info h3 a{display:inline-block;position:relative}
#news li .news-info h3 a:after{content:'';width:100%;position:absolute;background:#ffcb01;height:4px;display:block;top:100%;left:0;opacity:0;transition:all linear .3s}
#news li .news-info h3 a:hover:after{opacity:1}
#news li .news-info .describe{font-size:15px;color:#9d9d9d;display:block;overflow:hidden;height:46px;margin:10px 0}
#news li .news-info .news-bottom p{display:inline-block;max-width:30%;margin-right:3%;color:#606060;font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#news li .news-info .news-bottom p a{color:#606060}
#news li .news-info .news-bottom p b{color:#ffcb01;margin-right:5px}
#news li .news-info .news-bottom p a:hover{color:#000}
#book ul{overflow:hidden}
#book ul li{float:left;width:calc((100% / 6) - 20px);margin:0 10px 30px}
#book ul li .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:100%;transition:all ease-in-out .3s}
#book ul li .photo a{display:block;transition:all ease-in-out .3s;width:100%;height:100%;background-repeat:no-repeat;background-position:50% 50%}
#book ul li .photo a img{width:100%}
#book ul li h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:15px 0}
#book ul li h3 a{color:#6e6e6e}
#book ul li h3 a i{margin-right:5px}
#book ul li .photo a:hover{background-color:rgba(0,0,0,0.39)}
@media screen and (min-width: 1440px) {
}
@media screen and (min-width: 1025px) {
#prolay .p-box .p-info{transition:all linear .3s;bottom: 0;}
#prolay .p-boxOver:hover .p-info{bottom:10px}
#prolay .sthOver .p-boxOver .bgimg img{opacity:1}
#product .index-title p a:hover b{padding-left:15px;border-radius:15px;transition: all linear .3s;}
}
@media screen and (max-width: 1440px) {
#news li{width:calc(33% - 4px)}
#news ul li:first-child{width:calc(66% - 4px)}
#news ul li:nth-child(6),#news ul li:nth-child(7){display:none}
#fakeNumber ul {width: 70%;}
}
@media screen and (max-width: 1280px) {
#aboutFunc #about .aboutart h2{font-size: 16px;}
#aboutFunc #about .aboutart{margin:70px auto}
#fakeNumber ul li .eva p b{font-size: 45px;}
#fakeNumber ul li .eva h2{font-size:14px}
#news li,#news ul li:first-child{width:calc(50% - 4px)}
#news li .news-info{margin:15px 20px 20px}
#news li .photo a img{height:auto}
#news li .news-info h3{white-space:initial;text-overflow:inherit;height:66px}
#news ul li:nth-child(6){display:inline-block}
#book ul li{width:calc((100% / 3) - 20px)}
}
@media screen and (max-width: 980px) {
#aboutFunc #youtube,#aboutFunc #about{width:100%;position: relative;}
#aboutFunc #about .aboutart{width: 85%;margin: 50px auto;}
#fakeNumber ul li .eva{padding: 20px;width:calc(100% - 44px);}
#ssbanner .bxslider{width:100%;position:inherit}
#ssbanner #freebox{width:100%}
.index-title h2{font-size:30px}
}
@media screen and (max-width: 768px) {
#fakeNumber ul li:nth-child(3),#fakeNumber ul li:nth-child(4){margin-bottom:0}
#fakeNumber ul li:nth-child(3):after{display:none}
#news li .news-info .news-bottom p{display:block;max-width:97%}
#news .webframe{width:90%}
#fakeNumber ul {    width: 100%;}
}
@media screen and (max-width: 480px) {
#aboutFunc #about .aboutart .arts{
    text-align: left;
    font-size: 14px;
}
#aboutFunc #about .aboutart{width:80%}
#aboutFunc #about .aboutart h2{font-size: 18px;line-height: 140%;}
#aboutFunc #about .aboutart .more a{padding:10px 50px;font-size:14px}
#aboutFunc{/* margin:50px 0; */}
#fakeNumber ul li .eva p b{font-size:24px;display:block}
#news li .news-info{margin:5px 10px 10px}
#prolay .p-box .p-info .describe{height:45px;margin:10px 20px}
#book ul li{width:calc((100% / 2) - 20px)}
#aboutFunc #about .aboutart h5, #product .index-title h2{font-size: 25px;}
}