.wow{animation-duration:1.5s;animation-name:fadeInUp}
.wow {
    animation-name: fadeInLeft;
    -webkit-animation-name: fadeInLeft;
    animation-duration: 4.5s;
    -webkit-animation-duration: 4.5s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    animation-duration: 4s;
    -webkit-animation-duration: 4s;
}
.wow:nth-child(1) {
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
}
.wow:nth-child(2) {
	animation-delay: 1.0s;
	-webkit-animation-delay: 1.0s;
}
.wow:nth-child(3) {
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
}
.wow:nth-child(4) {
	animation-delay: 2.0s;
	-webkit-animation-delay: 2.0s;
}
.wow:nth-child(5) {
	animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
#aboutFunc{padding: 40px 120px;background-image: url(/images/22/index_about_bg.jpg);background-repeat: no-repeat;background-position: 0;background-size: cover;background-attachment: fixed;}
#aboutFunc .speBox{overflow:hidden;position:relative;}
#aboutFunc .youtubebox{width: calc(40% - 90px);padding: 40px 120px 0px 0;left: 0px;top:0;float: right;}
#aboutFunc #youtube{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;animation-name:fadeInLeft}
#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 #NewsBox{float: left;width: 55%;}
#aboutFunc #about .speBoxTitle{text-align:center;line-height:120%;font-size:40px}
#aboutFunc #about .subBoxTitle{text-align:center;color:#5d5d5d;font-weight:400;font-size:20px;line-height:120%;margin:10px 0 50px}
#aboutFunc #about .arts{text-align:center;color:#444;font-size:16px;line-height:180%;padding-bottom:40px}
#aboutFunc #about .more{position:absolute;bottom:0;border-bottom:1px solid #7b7b7b;right:0;width:35%;padding-bottom:10px}
#aboutFunc #about .more a{font-family:'Oswald',sans-serif;font-weight:400;color:#585858;font-size:20px;line-height:110%;display:inline-block;transition:all linear .2s}
#product{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:relative;padding-bottom:80px;padding-top:90px}
#product .speBox{position:relative}
#prolay .p-box{margin:20px;position:relative}
#prolay .p-box a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:4}
#prolay .p-box .p-border{position:relative;overflow:hidden}
#prolay .p-box .p-border p{margin: 0px 0;}
#prolay .p-box .p-border:after{content:'';display:block;width:80%;height:100%;position:absolute;left:50%;top:0;opacity:0;background:rgba(255,255,255,0.3);z-index:2;transition:all cubic-bezier(0.49,0.01,0,1) .7s}
#prolay .p-box .p-border .photo{position:relative;z-index:2;background-repeat:no-repeat;background-position:50% 50%;background-size: cover;background-color: #fff;}
#prolay .p-box .p-border .photo img{width:100%}
#prolay .p-box .p-border .p-info{position:absolute;top: 90%;left:15%;z-index:3;color: #ffffff;transition:all linear .4s;opacity:0;width: 100%;}
#prolay .p-box .p-border .p-info:after{height:100%;content:'';background-position:50%;background-size:auto;opacity:.9;position:absolute;left:-100%;top:0;width:100%;display:block;z-index:-1;transition:all linear .4s;background-color: rgba(0, 0, 0, 0.7);}
#prolay .p-box .p-border .p-info h3{font-size: 16px;line-height:130%;font-weight:400;background-color: rgba(0, 0, 0, 0.7);padding: 10px;text-align: center;}
#prolay .p-box .p-border .p-info .describe{font-size:15px;line-height:150%;color:#d4a66b;}
#prolay .p-box .p-border .p-info .price{color:#d4a66b}
#prolay .p-box .p-border .p-info .price span{font-size:13px;margin-right:15px}
#prolay .p-box .p-border .p-info .price span.now{font-size:17px;color:#fff}
.controller{position:relative;overflow:hidden}
#prolay .p-box h2{
    margin: 15px 0;
    font-size: 17px;
    letter-spacing: 1px;
    color: #6f6f6f;
    line-height: 1.5em;
}
#prolay .p-box p{
    margin: 15px 0;
    font-size: 13px;
    letter-spacing: 1px;
    color: #6f6f6f;
    line-height: 1.5em;
}
#NewsBox .speBox .index-title{animation-name:fadeInLeft}
#NewsBox{color:#fff;padding: 60px 0px;background-repeat:no-repeat;background-position:50% 100%;background-size:cover;}
#NewsBox .speBox{width: 85%;margin: 0 auto;overflow: hidden;}
#NewsBox .speBox .index-title{margin-bottom: 19px;line-height: 200%;}
#NewsBox .index-title h4{color:#9cc4d7;}
#NewsBox .speBox .index-title p{color:#fff;float: left;}
#NewsBox .speBox .index-title h2{color: #444444;float: left;margin: 0 15px;text-transform: uppercase;font-family: Arial, Helvetica, 'Noto Sans TC', "微軟正黑體", Heiti TC, "メイリオ", sans-serif;font-size: 30px;}
#NewsBox .speBox .index-title h3 a{color: #868686;/* font-family: 'cwTeXKai', serif; */font-size: 20px;}
#NewsBox #news{float:left;width: 100%;transition: all linear .4s;}
#NewsBox #news .border{overflow:hidden;position:relative;padding:20px 0 20px 20px;border-bottom: 1px solid rgba(156, 156, 156, 0.1);}
#NewsBox #news a{display:block;position:absolute;width:100%;height:100%;left:0;top:0;z-index:2;transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out}
#NewsBox #news .news-info{overflow:hidden;font-size:11pt}
#NewsBox #news .news-info:after{content:'>';display:block;position:absolute;right:20px;bottom:calc(50% - 15px);width:30px;height:30px;text-align:center;border-radius:50%;background: rgba(66, 66, 66, 0.37);line-height:30px;font-size:8pt;transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out;color: #ffffff;}
#NewsBox #news .news-info .news-bottom{float:left;overflow:hidden;width: 200px;}
#NewsBox #news .news-info h3{float:left;font-weight:400;font-size:1rem;width: calc(100% - 280px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color: #232323;letter-spacing: 1px;}
#NewsBox #news .news-info p{float:left;color: #696969;}
#NewsBox #news .news-info .catalog{line-height:150%;float:left;background: rgba(35, 35, 35, 0.48);padding:0 8px;border-radius: 35px;width: 40px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0 20px;color: #ffffff;}

.controller #bookBox,#bookBoxbg{width:50%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:absolute;right:0;top:203px;background-color:#000;height:calc(100% - 203px)}
#bookBoxbg{background-image:url(/images/22/bookBoxbg.jpg)}
#bookBox .speBox{position:absolute;top:-120px;left:calc(280px + 10%);z-index:3}
#bookBox .speBox p a{color:#9a9a9a}
#book{padding:80px}
#book .bList{position:relative}
#book .bList >div{z-index:3}
#book .bList:before{content:'';display:block;background-image:url(/images/22/index_more_leave.png);background-repeat:no-repeat;background-position:100% 100%;width:360px;height:290px;position:absolute;right:0;bottom:100%;z-index:2;max-width:50%;background-size:contain}
#book .bList:after{content:'';display:block;background-image:url(/images/22/index_more_icon.png);background-repeat:no-repeat;background-position:50%;width:240px;height:200px;position:absolute;left:0;bottom:0;z-index:2}
#book .mofd .photo{background-size:cover}
#book .mofd h3{padding:50px 0;text-align:right}
#book .mofd h3 a{display:inline-block;color:#fff;font-weight:400;font-size:18px;line-height:110%;border-bottom:1px solid rgba(255,255,255,0.27);padding:10px;padding-right:170px}
#freebox #freeboxlist{overflow:hidden}
#freebox #freeboxlist >div{display:inline-block;width:calc(100% / 3);margin-right:-4px}
#freebox #freeboxlist .free{padding:70px}
#freebox #freeboxlist .free h3{text-align:center;font-size:30px;line-height:120%;color:#2b2929;margin-bottom:20px}
#freebox #freeboxlist .free p{text-align:center;color:#545454;font-size:16px;line-height:160%}
#product .speBox{width: 80%;margin: 0 auto;overflow: hidden;}
#product .speBox .index-title{margin-bottom: 19px;line-height: 200%;/* background: #faf6f3; */}
#product .index-title h4{color:#9cc4d7;}
#product .speBox .index-title p{color:#fff;float: left;background: #faf6f3;}
#product .speBox .index-title h2{color: #444444;float: left;padding: 0 15px;text-transform: uppercase;font-family: Arial, Helvetica, 'Noto Sans TC', "微軟正黑體", Heiti TC, "メイリオ", sans-serif;font-size: 30px;background: #faf6f3;}
#product .speBox .index-title h3 a{color: #868686;/* font-family: 'cwTeXKai', serif; */font-size: 20px;background: #faf6f3;padding: 0 15px 0 5px;}
#product .speBox .index-title::after {
    content: '';
    width: 100%;
    height: 10px;
    /* border-bottom: 1px dashed #e5e5e5; */
    position: absolute;
    top: 10px;
    left: 0;
    z-index: -1;
    background: url(/images/22/separate_line.png) top repeat-x;
}
#product .flytxt{}
#product .titleSet{}
#product .titleSet .speBoxTitle{letter-spacing:12px;margin-top:-8px;text-align:center;-moz-transform:rotate(-90deg);}
#product .titleSet .subBoxTitle{font-size:30px;line-height:110%;letter-spacing:.6em;vertical-align:top;text-align:center;}
#prolay{/* width:calc(100% - 248px); */margin: auto;}
#aboutFunc #about .more a:hover,#bookBox .speBox p a:hover{letter-spacing:.2em}
#NewsBox #news .border:hover .news-info:after{right:10px}
#NewsBox #news .border:after{content:'';display:block;width:100%;height:100%;position:absolute;left:0;top:0;background: rgba(181, 181, 181, 0.15);transform:scale(0,1);transform-origin:right center 0;transition:transform 1s cubic-bezier(0.23,1,0.32,1);}
#NewsBox #news .border:hover:after{transform:scale(1,1);transform-origin:left center 0}
#NewsBox .speBox .index-title h3 a:hover{border:1px solid rgba(242,183,68,0)}
@media screen and (min-width: 1025px) {
#aboutFunc .youtubebox{
    width: 45%;
    padding: 52px 0px 0px 0;
}
#prolay .p-box:hover .p-border:after{width:45%;left:0;opacity:1}
#prolay .p-box:hover .p-border .p-info:after{left:0}
#prolay .p-box .p-border .p-info{left:0;opacity:1;width: 100%;/* top: 86%; */}

}
@media screen and (max-width: 1440px) {
#prolay .p-box .p-border .p-info {
    top: 86%;
}
}
@media screen and (max-width: 1280px) {
#book{padding:80px 0 80px 80px}
#NewsBox .speBox{width:80%}
#NewsBox .speBox .index-title{float:none;margin:0 0 50px;width:300px}
#NewsBox #news{float:none;width:100%;margin:0}
#prolay .p-box .p-border .p-info{left:0;opacity:1;width: 100%;top: 85%;}
}
@media screen and (max-width: 1199px) {
.controller #bookBox{width:100%;position:initial;height:auto}
#bookBoxbg{display:none}
#book .bList:before{width:200px;height:160px}
#bookBox .speBox{position:initial;display:block;padding-top:60px}
#bookBox .speBox h2{color:#fff}
#bookBox .speBox p{text-align:center}
#book{padding:40px 20px}
#book .bList:after{background-size:contain;width:150px;background-position:50% 100%}
}
@media screen and (max-width: 1024px) {
#aboutFunc{padding:10px 0}
#aboutFunc .speBox{min-height:initial}
#aboutFunc .youtubebox{width:calc(100% - 160px);padding:50px;margin:30px;position:initial}
#aboutFunc #about{width:calc(100% - 60px);padding:50px 30px}
#aboutFunc #about .speBoxTitle,#product .titleSet .speBoxTitle{font-size:32px}
#aboutFunc #about .subBoxTitle,#product .titleSet .subBoxTitle a{font-size:16px;margin:0 0 30px}
#product .flytxt{text-align:center;font-size:17px;line-height:120%;color:#2d2c2c}
#prolay{margin-top:10px}
#product .titleSet .speBoxTitle{text-align:center}
#product .titleSet .subBoxTitle{text-align:center;margin-top:10px}
#product .titleSet .subBoxTitle a{color:#696969;font-weight:400;display:block;margin-bottom:20px}
#prolay .p-box .p-border:after{width:45%;left:0;opacity:1}
#prolay .p-box .p-border .p-info:after{left:0}
#prolay .p-box .p-border .p-info{left:0;opacity:1;top: 86%;}
#freebox #freeboxlist >div{width:100%;margin-right:0}
#aboutFunc #NewsBox {
    float: left;
    width: 100%;
}
}
@media screen and (max-width: 768px) {
#prolay .p-box .p-border .p-info h3{font-size: 15px;}
#prolay .p-box .p-border .p-info{}
#prolay .p-box .p-border:after{width:55%}
#prolay .p-box .p-border .p-info .describe{height:46px;overflow:hidden}
#prolay .p-box .p-border .p-info .price span{display:block}
#freebox #freeboxlist .free{padding:70px 50px}
#NewsBox .speBox{width:90%}
#NewsBox #news .news-info .news-bottom{width:100%}
#NewsBox #news .news-info h3{width:calc(100% - 60px);margin-top:5px}
#NewsBox{padding: 40px 0 10px;}
#NewsBox #news .border{padding:15px 0 15px 20px}
}
@media screen and (max-width: 640px) {
#aboutFunc .youtubebox{width:calc(100% - 70px);padding:20px;margin:10px 15px}
#aboutFunc #about .more{width:50%}
#aboutFunc #about .more a{font-size:17px}
#prolay .p-box .p-border .p-info{}
#book .mofd h3{padding:30px 0 50px}
#prolay .p-box .p-border .p-info{width: 100%;top: 88%;}
#prolay .p-box .p-border:after{display:none}
#prolay .p-box{margin:10px}
#product {
    padding-bottom: 0px;
    padding-top: 50px;
}
}
@media screen and (max-width: 480px) {
#book .bList:after{background-size:100%;width:80px;background-position:100% 100%}
#book .mofd h3 a{padding-right:100px}
#book .mofd h3{padding:20px 0 30px}
#prolay .p-box{margin:15px}
#prolay .p-box .p-border .p-info h3{font-size: 14px;}
#prolay .p-box .p-border .p-info .describe{margin:10px 0}
#freebox #freeboxlist .free{padding:50px 30px}
#freebox #freeboxlist .free h3{font-size:24px}
#prolay .p-box .p-border .p-info {
    width: 100%;
    top: 91%;
}
}