.wow{animation-duration:0.7s;animation-name:fadeInLeft}
#freebox{background:#050505;position:relative;overflow:hidden;padding:250px 0 350px}
#freebox .freebox-title{float:left;width:15%;color:#fff;margin-left:10%;position:relative;z-index:2}
#freebox .freebox-title h2{line-height:100%;transform:rotate(-90deg) translateX(-50%);text-align:right;font-size:16px;font-weight:400;color:#8f8f8f}
#freebox #freeboxlist{color:#fff;float:left;width:50%;position:relative;z-index:2}
#freebox .freeList .free h3{line-height:110%;font-size:56px}
#freebox .freeList .free p{margin-top:30px;font-size:24px;line-height:130%}
#freebox .hidetext{position:absolute;right:0;width:50%;color:#151515;font-size:300px;line-height:90%;top:0;height:100%;z-index:1;font-family:'Archivo Black',sans-serif;font-weight:400;word-wrap:break-word}
#aboutFunc{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;overflow:hidden;background-color:#040404;color:#fff;padding:150px 0}
#aboutFunc:after{content:'';display:block;position:absolute;right:0;top:0;height:100%;width:70%;background-color:#640000;z-index:2}
#aboutFunc:before{content:'';display:block;position:absolute;left:0;bottom:0;height:50%;width:100%;background-color:#262626;z-index:1}
#aboutFunc .abBox{position:relative;z-index:3}
#aboutFunc .abBox #youtube{width:62%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#aboutFunc .abBox .aboutart{width:28%;position:absolute;right:5%;top:150px;animation-duration:2s;animation-name: fadeInRight;}
#aboutFunc .abBox .aboutart h3{font-size:15px;line-height:110%;margin-bottom:50px;color:#c88787}
#aboutFunc .abBox .aboutart h2{font-size:42px;line-height:110%}
#aboutFunc .abBox .aboutart .arts{font-size:15px;line-height:160%;color:#c88787;margin-top:20px;margin-bottom:60px;max-height:96px;overflow:hidden}
#aboutFunc .abBox .aboutart .more a{display:inline-block;background:#fff;color:#741111;font-size:13px;font-weight:700;line-height:110%;padding:20px 50px}
#aboutBox #youtube{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;margin-top:20px}
#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%}
#product{background-color:#262626;padding-bottom:150px}
#product .index-title{margin-left:15%;padding:50px 0}
#product .index-title h2{color:#b0b0b0;font-size:15px}
#product .index-title h2 span{background:#828282}
#product .index-title p a{color:#cacaca;font-size:12px}
#prolay .pro-list .p-box{overflow:hidden;position:relative}
#prolay .pro-list .p-box a{position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:5}
#prolay .pro-list .p-info{position:absolute;z-index:3;bottom:60px;width:100%;left:0;color:#fff}
#prolay .pro-list .p-info h3{margin:30px 30px 20px;color:#fff;font-size:30px;line-height:110%}
#prolay .pro-list .p-info h3 b{display:block;font-size:14px;font-weight:400;color:#acacac;line-height:110%;margin-bottom:15px}
#prolay .pro-list .p-info .describe{margin:0 30px 30px;color:#acacac}
#prolay .pro-list .p-info .price{margin:30px;overflow:hidden;color:#edd5d5}
#prolay .pro-list .p-info .price span{float:left}
#prolay .pro-list .p-info .price span.old{float:right}
#prolay .pro-list .bgimg{position:absolute;width:100%;height:100%;z-index:1}
#prolay .pro-list .bgimg img{width:100%;height:100%;object-fit:cover; -moz-object-fit:cover; -ms-object-fit:cover; -o-object-fit:cover; -webkit-object-fit:cover;}
#prolay .p-box >img{width:100%;height:80vh}
#bookBox{background-color:#262626;position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;overflow:hidden;padding:130px 0}
#bookBox:after{position:absolute;z-index:2;content:'';background:#000;width:65%;left:0;top:0;height:100%;display:block}
#BookTitle{width:250px;float:left;position:relative;z-index:3}
#BookTitle .workframe{overflow:visible}
#BookTitle .index-title{transform:rotate(-90deg);transform-origin:13% 300%}
#BookTitle h2{color:#747474;display:inline-block;font-size:15px}
#BookTitle h2 span{background:#3d3d3d}
#BookTitle p{display:inline-block;margin-left:15px}
#BookTitle p a{color:#9f9f9f;font-size:14px}
#book{float:left;width:calc(100% - 250px);position:relative;z-index:3}
#book .bookStyle{overflow:hidden;position:relative}
#book .bookStyle .info{position:absolute;color:#fff;width:350px;left:5%;top:30%}
#book .bookStyle .info h3{text-align:center;font-size:80px;line-height:110%}
#book .bookStyle .info h3 a{color:#fff}
#book .bookStyle .info h4{text-align:center;color:#acacac;font-size:18px;line-height:120%;margin:80px 0 50px;font-weight:400}
#book .bookStyle .info h5{text-align:center}
#book .bookStyle .info h5 a{display:inline-block;background:#fff;font-size:14px;color:#c82424;padding:15px 50px;font-weight:700}
#book .bookStyle .photo{margin-left:43%;width:57%}
#book .bookStyle .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#741111}
#book .bookStyle .photo a img{width:100%}
#NewsBox{background-color:#262626;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#NewsTitle{padding:120px 0}
#NewsTitle .index-title{margin-left:20px}
#NewsTitle .index-title h2{color:#b0b0b0;font-size:15px}
#NewsTitle .index-title h2 span{background:#b0b0b0}
#NewsTitle .workframe,#news ul,.NewsMore p{width:80%;margin:0 auto}
#news li .border{margin:0 20px 40px}
#news li .border .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:relative}
#news li .border .photo a img{width:100%;transition:all linear .3s}
#news li .border .photo a p{position:absolute;top:0;left:0;background:#930c0c;color:#fff;font-size:14px;line-height:120%;overflow:hidden;padding:25px;max-width:30px}
#news li .border .news-info{background:#fff;padding:30px}
#news li .border .news-info .news-bottom{color:#c71919;font-size:7pt;line-height:110%;font-family:'Archivo Black',sans-serif}
#news li .border .news-info h3 a{font-size:16px;line-height:100%}
#news li .border .news-info h3:first-letter{font-size:28px;display:inline-block;line-height:100%}
#news li .border .news-info .describe{color:#858585;font-size:15px;line-height:150%;margin:22px 0;max-height:132px;overflow:hidden}
#NewsBox .NewsMore{padding:50px 0 70px}
#NewsBox .NewsMore p{text-align:right}
#NewsBox .NewsMore p a{display:inline-block;margin-right:20px;color:#fff;font-size:14px}
#NewsBox .NewsMore p a span{display:inline-block;width:40px;height:40px;text-align:center;line-height:40px;border:1px solid #666;border-radius:50%;color:#fff;margin-left:15px}
#ssbanner{animation-name:fadeInUp}
#ssbanner .bxslider div{position:relative;overflow:hidden}
#ssbanner .bxslider a{height:100%;display:block;position:absolute;left:0;top:0;width:100%;z-index:2}
#ssbanner .bxslider img{width:100%}
#ssbanner .bxslider .infot{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;overflow:hidden}
#ssbanner .bxslider .infot h4{position:absolute;color:#fff;font-size:30px;line-height:110%;bottom:50px;left:50px;width:calc(100% - 100px);z-index:5}
.longbar{display:inline-block;width:80px;height:1px;background:#a35353;margin-right:15px}
#prolay .pro-list .p-box:after,#ssbanner .bxslider a:after,#prolay .pro-list .p-box:before,#ssbanner .bxslider a:before{background:rgba(0,0,0,0.65);content:'';width:100%;height:100%;display:block;position:absolute;z-index:2;top:0;left:0}
.imgSkirt{position:relative}
.imgSkirt::after{top:0;z-index:2;width:100%;height:100%;content:" ";position:absolute;background-color:#1b1b1b;transition:.5s ease-in-out;-o-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-webkit-transition:.5s ease-in-out;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.open.imgSkirt::after{width:0}
@media screen and (min-width: 1025px) {
#prolay .pro-list .p-box:hover:after,#ssbanner .bxslider .slick-slide:hover a:after{animation-name:rush;animation-iteration-count:1;animation-delay:.2s;animation-duration:.8s;animation-timing-function:cubic-bezier(.215,.61,.355,1)}
#prolay .pro-list .p-box:hover:before,#ssbanner .bxslider .slick-slide:hover a:before{animation-delay:0;animation-direction:normal;animation-duration:.3s;animation-fill-mode:both;animation-iteration-count:1;animation-name:rush2;animation-timing-function:cubic-bezier(.215,.61,.355,1)}
#news li{display:inline-block;vertical-align:top;width:calc(25% - 4px);margin-right:-4px;animation-name:fadeInUp}
#news li:first-child{width:50%}
#news li:nth-child(odd){animation-duration:2s}
#news li .border .photo a:after{content:'VIEW';position:absolute;top:calc(50% - 12px);left:calc(50% - 17px);font-family:'Archivo Black',sans-serif;color:#fff;font-size:12px;font-weight:400;transition:all linear .3s;transform:rotateY(270deg);opacity:0}
#news li .border .photo:hover a img{background:rgba(0,0,0,0.46)}
#news li .border .photo:hover a:after{opacity:1;transform:rotateY(360deg)}
#aboutFunc .abBox .aboutart .more a,#book .bookStyle .info h5 a,#NewsBox .NewsMore p a span{position:relative;transition:transform 1s cubic-bezier(0.23,1,0.32,1)}
#aboutFunc .abBox .aboutart .more a:hover,#book .bookStyle .info h5 a:hover{color:#fff}
#aboutFunc .abBox .aboutart .more a span,#book .bookStyle .info h5 a span{position:relative;z-index:2}
#aboutFunc .abBox .aboutart .more a:after,#book .bookStyle .info h5 a:after{top:0;position:absolute;transform:scale(0,1);transform-origin:right center 0;transition:transform 1s cubic-bezier(0.23,1,0.32,1);content:'';display:block;width:100%;height:100%;left:0;background:#292929;z-index:1}
#aboutFunc .abBox .aboutart .more a:hover:after,#book .bookStyle .info h5 a:hover:after{transform:scale(1,1);transform-origin:left center 0}
#NewsBox .NewsMore p a:hover span{transform:scaleX(-1)}
}
@media screen and (max-width: 1440px) {
#freebox .hidetext{font-size:250px}
#aboutFunc .abBox .aboutart{top:80px}
#book .bookStyle .info h3{font-size:70px}
#ssbanner .bxslider .infot h4{font-size:27px}
#NewsTitle .workframe,#news ul,.NewsMore p{width:90%}
}
@media screen and (max-width: 1280px) {
#freebox .hidetext{font-size:205px}
#freebox{padding:180px 0 280px}
#freebox .freeList .free h3{font-size:48px}
#freebox .freeList .free p{font-size:20px}
#aboutFunc .abBox .aboutart{top:50px}
#aboutFunc .abBox .aboutart h2{font-size:32px}
#aboutFunc .abBox .aboutart h3{margin-bottom:30px}
#BookTitle{width:150px}
#book{width:calc(100% - 150px)}
#BookTitle .index-title{transform-origin:10% 300%}
#book .bookStyle .info{left:0;width:300px}
#book .bookStyle .photo{margin-left:350px;width:calc(100% - 350px)}
#book .bookStyle .info h3{font-size:60px}
}
@media screen and (max-width: 1024px) {
#freebox .hidetext{font-size:100px;width:380px;height:300px;bottom:0;top:initial;text-align:right;right:20px}
#freebox{padding:100px 0 120px}
#freebox .freebox-title{float:none;width:80%;margin-bottom:10px}
#freebox #freeboxlist{width:80%;margin-left:10%}
#freebox .freebox-title h2{transform:none;text-align:left}
#freebox .freeList .free h3{font-size:40px}
#aboutFunc{padding:100px 0}
#aboutFunc .abBox .aboutart{position:inherit;position:initial;width:80%;margin-left:10%}
#aboutFunc .abBox #youtube{width:90%;margin-bottom:70px}
#aboutFunc:before{top:0;bottom:inherit;bottom:initial}
#aboutFunc:after{width:100%;top:inherit;top:initial;bottom:0;height:70%}
#product{padding-bottom:0}
#prolay .p-box >img{height:auto}
#prolay .pro-list .p-box:before,#ssbanner .bxslider a:before{background:rgba(0,0,0,0)}
#book .bookStyle .info{width:90%;position:initial;margin-top:100px;margin-left:5%}
#book .bookStyle .photo{margin:0 0 0 5%;width:95%}
#bookBox:after{width:100%}
#bookBox{padding:0 0 80px}
#BookTitle{width:95%;float:none;padding:70px 0;margin-left:5%}
#BookTitle .workframe{width:100%}
#book{width:100%}
#BookTitle .index-title{transform:none;transform-origin:unset}
#news li{display:inline-block;width:50%;margin-left:-4px;vertical-align:top}
#news li .border{margin:0 10px 20px}
#NewsTitle{padding:70px 0}
#NewsBox .NewsMore{padding:30px 0 50px}
#ssbanner .bxslider .infot h4{font-size:22px;bottom:20px;left:20px}
}
@media screen and (max-width: 640px) {
#freebox .hidetext{font-size:70px;width:230px;height:200px}
#freebox{padding:100px 0}
#freebox .freeList .free h3{font-size:32px}
#freebox .freeList .free p{font-size:17px}
#aboutFunc{padding:70px 0 100px}
#aboutFunc:after{height:75%}
#news ul{width:calc(100% - 14px);margin:5px 5px 5px 9px}
#news li .border .news-info{padding:20px}
#news li .border .news-info .describe{margin:15px 0 22px;max-height:45px}
#news li .border .photo a p{padding:10px}
}
@media screen and (max-width: 480px) {
#aboutFunc{padding:50px 0 100px}
#aboutFunc .abBox .aboutart .more a,#book .bookStyle .info h5 a{width:calc(100% - 100px);text-align:center}
#product .index-title{padding:40px 0;margin-left:5%}
#prolay .pro-list .p-info{bottom:0}
#news li .border .news-info .news-bottom{font-size:5pt}
#news li .border .news-info h3{overflow:hidden;height:55px}
#news li .border .news-info .describe{margin:10px 0 18px}
#news li .border{margin:0 8px 20px}
#BookTitle h2,#BookTitle p a,#BookTitle p,#aboutFunc .abBox .aboutart h3,#product .index-title h2,#product .index-title p,#product .index-title p a,#NewsTitle .index-title h2{font-size:7pt;line-height:8pt}
#product .index-title p,#BookTitle p{display:block;margin:0}
#NewsTitle .index-title{margin:0}
#NewsTitle,#BookTitle{padding:40px 0}
#book .bookStyle .info h4{margin:50px 0}
}