.wow{animation-duration:1.5s;animation-name:fadeInUp}
#aboutFunc{padding:90px 0 0}
#aboutFunc .speBox{overflow:hidden;position:relative;min-height:670px}
#aboutFunc .youtubebox{width:calc(50% - 70px);padding:70px 70px 70px 0;background-image:url(/images/22/index_about_bg.jpg);background-repeat:no-repeat;background-position:0;background-size:cover;position:absolute;left:0;top:0}
#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 #about{float:right;width:calc(50% - 160px);padding:80px;position:relative}
#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: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:contain;background-color:#CCC}
#prolay .p-box .p-border .photo img{width:100%}
#prolay .p-box .p-border .p-info{padding:50px;position:absolute;top:15%;left:15%;z-index:3;max-width:calc(70% - 100px);color:#fbcd62;transition:all linear .4s;opacity:0}
#prolay .p-box .p-border .p-info:after{height:100%;content:'';background-image:url(/images/22/index_recommend_text_bg.jpg);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}
#prolay .p-box .p-border .p-info h3{font-size:22px;line-height:130%;font-weight:400}
#prolay .p-box .p-border .p-info .describe{margin:20px 0;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}
.controller #NewsBox{float:left;width:65%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;background-color:#000;background-image:url(/images/22/index_news_bg.jpg)}
#NewsBox .speBox{padding:80px 50px;text-align:right}
#NewsBox .speBox .titleSet{color:#fff;display:inline-block;margin-right:50px;width:150px}
#NewsBox .speBox .titleSet h2,#bookBox .speBox h2{text-align:center;font-size:35px;line-height:110%;margin-bottom:5px}
#NewsBox .speBox .titleSet h3{text-align:center}
#NewsBox .speBox .titleSet h3 a,#bookBox .speBox p a{font-weight:400;color:#eaeaea;font-size:15px;display:block;line-height:120%;transition:all linear .2s}
#news{margin-top:60px;margin-right:280px}
#news .border{margin:0 13px;position:relative}
#news .border a{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;display:block}
#news .border .photo,#book .mofd .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#000}
#news .border .photo img,#book .mofd .photo a img{width:100%}
#news .border .news-info{padding:10px 20px;background:linear-gradient(to bottom,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);margin:10px 20px;margin-top:-50px}
#news .border .news-info p{font-size:13px;text-align:center;color:#a5936a;font-family:'Oswald',sans-serif}
#news .border .news-info h3{text-align:center;color:#fff;font-weight:400;font-size:16px;line-height:160%;margin:10px 0 40px;height:50px;overflow:hidden}
#news .border .news-info span{position:relative;display:block;margin:0 auto;width:40px;height:1px;background:#635840;transition:all linear .2s}
#news .border .news-info span:before{content:'';width:10px;height:1px;background:#635840;display:block;position:absolute;right:0;transform:rotate(35deg);transform-origin:right}
.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%}
@media screen and (min-width: 1025px) {
#aboutFunc .youtubebox,.controller #NewsBox,.controller #bookBox{background-attachment:fixed}
#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:hover .p-border .p-info{left:0;opacity:1}
#news .slick-track >div:nth-child(3n-1) .border{margin-top:50px}
#news .border:hover .news-info span{width:50px}
#product .flytxt{position:absolute;bottom:calc(100% + 90px);right:60px;font-size:22px}
#product .titleSet{display:inline-block;width:248px;text-align:center;position:relative;vertical-align:middle}
#product .titleSet .speBoxTitle{position:absolute;width:280px;line-height:16px;font-size:.9375rem;color:#8c8c8c;margin:0;text-transform:uppercase;top:50%;left:50%;letter-spacing:12px;margin-top:-8px;margin-left:-115px;padding-left:15px;text-align:center;transform:rotate(-90deg);-moz-transform:rotate(-90deg);-webkit-transform:rotate(-90deg)}
#product .titleSet .subBoxTitle{writing-mode:tb-rl;font-size:30px;line-height:110%;letter-spacing:.6em;vertical-align:top;text-align:center;text-align-last:justify;display:inline-block}
#prolay{display:inline-block;width:calc(100% - 248px);margin-left:-4px}
#aboutFunc #about .more a:hover,#NewsBox .speBox .titleSet h3 a:hover,#bookBox .speBox p a:hover{letter-spacing:.2em}
}
@media screen and (max-width: 1440px) {
#news{margin-right:160px}
}
@media screen and (max-width: 1280px) {
#news{margin-right:140px}
#news .border{margin:0 8px}
#NewsBox .speBox{padding:80px 50px 80px 10px}
#book{padding:80px 0 80px 80px}
}
@media screen and (max-width: 1199px) {
.controller #NewsBox{width:100%;float:none}
.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}
#news{margin:0}
#news .slick-track >div:nth-child(3n-1) .border{margin-top:0}
#NewsBox .speBox .titleSet{width:auto;display:block;margin:0 auto 50px}
#NewsBox .speBox{padding:80px 10px}
#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}
#freebox #freeboxlist >div{width:100%;margin-right:0}
}
@media screen and (max-width: 768px) {
#prolay .p-box .p-border .p-info h3{font-size:18px}
#prolay .p-box .p-border .p-info{max-width:calc(75% - 60px);padding:30px}
#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}
}
@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{max-width:calc(75% - 40px);padding:20px}
#book .mofd h3{padding:30px 0 50px}
#prolay .p-box .p-border .p-info{position:initial;max-width:calc(100% - 40px);width:calc(100% - 40px)}
#prolay .p-box .p-border:after{display:none}
#prolay .p-box{margin:10px}
}
@media screen and (max-width: 480px) {
#news .border .news-info{margin:10px 0;margin-top:-50px;padding:10px}
#news .border .news-info h3{margin:10px 0 20px}
#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:17px}
#prolay .p-box .p-border .p-info .describe{margin:10px 0}
#freebox #freeboxlist .free{padding:50px 30px}
#freebox #freeboxlist .free h3{font-size:24px}
}