#aboutFunc{overflow:hidden;margin:100px 0;position:relative}
#aboutFunc #youtube{float:left;width:50%;position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#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:60%;margin:100px auto}
#aboutFunc #about .aboutart h2{color:#151515;font-size:36px;line-height:110%}
#aboutFunc #about .aboutart h2 b{font-weight:400;color:#bebebe;font-size:16px;margin-left:10px}
#aboutFunc #about .aboutart .arts{margin:20px 0;color:#747474;font-size:17px;line-height:180%;overflow:hidden}
#aboutFunc #about .aboutart .more{margin-top:100px}
#aboutFunc #about .aboutart .more a{display:inline-block;background:#ffe500;color:#000;padding:13px 70px;font-weight:700;font-size:16px}
#aboutFunc #about .aboutart .more a:hover{background:#000;color:#ffe500}
#fakeNumber{padding:130px 0;background-image:url(/images/01/parallax-3.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#fakeNumber ul{text-align:center}
#fakeNumber ul li{display:inline-block;width:calc(25% - 4px);color:#fff;text-align:center;position:relative}
#fakeNumber ul li:after{content:'';width:4px;height:50px;display:block;background:#ffe30d;position:absolute;z-index:5;top:calc(50% - 25px);left:0;transform:skew(-35deg)}
#fakeNumber ul li:first-child:after{display:none}
#fakeNumber ul li .eva{background:rgba(255,255,255,0.3);padding:50px 35px;margin:0 auto;display:inline-block}
#fakeNumber ul li .eva p{font-size:14px;color:#f4dc20;line-height:100%}
#fakeNumber ul li .eva p b{font-size:55px;margin-left:5px;color:#fff;line-height:100%}
#fakeNumber ul li .eva h2{text-align:right;font-size:18px;margin-top:10px;line-height:120%}
.index-title{overflow:hidden}
.index-title h2{float:left;font-family:'Raleway',sans-serif;font-size:50px;line-height:110%}
.index-title p{float:right;font-size:16px}
.index-title p a b{color:#ffe502;margin-left:10px}
.index-title p:hover{background:#ffe502;color:#000}
.index-title p:hover a b,.index-title p:hover a,#product .index-title p:hover a{color:#000}
#product .index-title h2,#product .index-title p a{color:#fff}
#product{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;padding:100px 0;margin:100px 0 0}
#prolay{margin-top:50px}
#prolay .pro-list .p-box{background:#fff;overflow:hidden;margin:15px}
#prolay .pro-list .p-border{border:2px solid #f6f6f6;padding:15px;margin:15px}
#prolay .p-box:hover .p-border{border:2px solid #ffe500}
#prolay .pro-list .photo{text-align:center;margin:30px 0 15px}
#prolay .pro-list .photo a{display:inline-block;width:150px;background-size:contain;background-color:#f2f2f2}
#prolay .pro-list .photo a img,.bxslider >div a img{width:100%}
#prolay .pro-list .bar{overflow:hidden;text-align:center;height:30px}
#prolay .pro-list .bar span{display:inline-block;margin-left:auto;margin-right:auto;background:#ffe500;width:3px;height:30px;transition:all cubic-bezier(1,0.02,0,1) .3s;-webkit-transform:rotate(45deg) translateX(-50%);-ms-transform:rotate(45deg) translateX(-50%);transform:rotate(45deg) translateX(-50%)}
#prolay .p-box:hover .bar span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);height:3px;width:50px}
#prolay .pro-list .p-info{width:90%;margin:0 auto;overflow:hidden;transition:all ease-in-out .3s}
#prolay .p-box:hover .p-info{transform:translateY(-15px)}
#prolay .pro-list .p-info h3{text-align:center;font-size:17px;line-height:110%;margin:15px 0 10px}
#prolay .pro-list .p-info h3 a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#prolay .pro-list .p-info .describe{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;color:#939292;display:block;height:23px;text-align:center}
#prolay .pro-list .p-info .price{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#e04040;display:block;height:23px;text-align:center}
#prolay .pro-list .p-info .price span.old{color:#acacac;text-decoration:line-through;font-size:12px;vertical-align:text-top;margin-right:5px}
#prolay .pro-list .p-info h4{text-align:center;margin-top:10px}
#prolay .pro-list .p-info h4 a{color:#ffbf00;font-size:16px;display:inline-block;transform:translateY(15px);opacity:0;transition:all ease-in-out .3s}
#prolay .p-box:hover .p-info h4 a{opacity:1;transform:translateY(0)}
#prolay .p-box .p-info h4 a:hover{text-decoration:underline}
#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) {
#prolay .pro-list .slick-slide:nth-child(4n) .p-box{margin-right:0}
#prolay .pro-list .slick-slide:nth-child(1) .p-box,#prolay .pro-list .slick-slide:nth-child(5) .p-box{margin-left:0}
}
@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}
}
@media screen and (max-width: 1280px) {
#aboutFunc #about .aboutart h2{font-size:30px}
#aboutFunc #about .aboutart{margin:70px auto}
#fakeNumber ul li .eva p b{font-size:30px}
#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%}
#aboutFunc #about .aboutart{width:70%}
#fakeNumber ul li .eva{padding:40px 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{width:calc(50% - 4px);margin-bottom:50px}
#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%}
}
@media screen and (max-width: 480px) {
#aboutFunc #about .aboutart{width:80%}
#aboutFunc #about .aboutart h2{font-size:24px}
#aboutFunc #about .aboutart .more a{padding:10px 50px;font-size:14px}
#aboutFunc #about .aboutart .more{margin-top:60px}
#aboutFunc{margin:50px 0}
#fakeNumber ul li .eva p b{font-size:24px;display:block}
#news li .news-info{margin:5px 10px 10px}
#prolay .pro-list .p-info h3 a{height:36px;white-space:inherit}
#prolay .pro-list .p-info .describe{white-space:inherit;height:40px;line-height:140%}
#prolay .pro-list .p-info{width:100%;transform:translateY(-15px)}
#prolay .pro-list .p-border{padding:10px}
#prolay .pro-list .p-info h4 a{opacity:1;transform:translateY(0)}
#prolay .p-box .bar span{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);height:3px;width:50px}
#book ul li{width:calc((100% / 2) - 20px)}
}