.wow{animation-duration:3s; animation-name:fadeInUp;}
#aboutFunc{overflow:hidden;/* padding: 100px 0; */position:relative;background-attachment: fixed;/* background-color:#319ad4; */background-repeat:no-repeat;background-position:50% 100%;background-size:100%;}
/*#aboutFunc:after{content:'';width:100%;left:0;top:0;height:100%;display:block;background:linear-gradient(to bottom,#319ad4 20%,rgba(48,155,213,0.56) 100%);z-index:1;position:absolute}*/
#aboutFunc .workframe{position:relative;z-index:2}
#aboutFunc .aboutart{color: #000;background-color: rgba(255, 255, 255, 0.8);padding: 100px 0;}
#aboutFunc .aboutart h3{text-align:center}
#aboutFunc .aboutart h3 b{/* font-family:'Arvo',serif; */font-weight:400;font-size:18px;}
#aboutFunc .aboutart h2{text-align:center;font-size:30px;line-height:110%;font-weight:400}
#aboutFunc .aboutart .arts{text-align:center;margin:60px auto 0;font-size:18px;line-height:180%;width:55%}
#aboutFunc .aboutart .more,.NewsMore{text-align:center;margin-top:70px}
#aboutFunc .aboutart .more p,.NewsMore p{display:inline-block;overflow:hidden;position:relative}
#aboutFunc .aboutart .more p:after,.NewsMore p:after{content:'';display:block;width:100%;height:100%;background: rgb(0, 0, 0);position:absolute;bottom:0;left:0;transform:scale(0,1);transform-origin:right center 0;transition:transform 1s cubic-bezier(0.23,1,0.32,1);}
#aboutFunc .aboutart .more p:hover:after,.NewsMore p:hover:after{transform:scale(1,1);transform-origin:left center 0}
#aboutFunc .aboutart .more p a,.NewsMore p a{border: 2px solid #000;display:block;color: #000;font-size:15px;padding:6px 200px;position:relative;z-index:2;}
#aboutFunc .aboutart .more p a:hover{
    color: white;
}
#aboutFunc .aboutart .more p b,.NewsMore p b{position:absolute;right:15px}
#aboutFunc #youtube{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;width:400px;margin:40px auto}
#youtube .UTwo{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;display: none;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{position:relative;/* background-color:#287ebc; */overflow:hidden;padding-bottom: 60px;background-attachment: fixed;}
#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,#BookTitle .index-title h2,#NewsTitle .index-title h2{/* font-family:'Arvo',serif; */font-weight: bold;text-align:center;font-size:40px;line-height:110%;color: black;}
#product .index-title p,#BookTitle .index-title p,#NewsTitle .index-title p{font-weight:400;text-align:center;margin-top:5px}
#product .index-title p a,#BookTitle .index-title p a,#NewsTitle .index-title p a{color: #020202;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(196, 12, 36);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:20px;overflow:hidden;transition:all linear .3s}
#prolay .p-box .p-info{position:absolute;z-index:1;width:100%;color:#fff;bottom:0;left:0;background: rgb(196, 12, 36);}
#prolay .p-box .p-info:hover{
    background-color: #af0a1f;
}
#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:#fff}
#prolay .p-box .p-info h3 a b{position:absolute;right:0}
#prolay .p-box .p-info .describe{display: none;margin:20px 20px 10px;overflow:hidden;height:75px;}
#prolay .p-box .p-info .price{margin:10px 20px;overflow:hidden;display: none;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:#121212}
#prolay .p-box .bgimg img{width:100%;height:100%;object-fit:cover;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(218, 217, 217, 0.52) 20%,hsla(0,0%,0%,0) 100%);}
#BookTitle .index-title h2,#BookTitle .index-title p a,#NewsTitle .index-title h2,#NewsTitle .index-title p a{color:#434343}
#BookTitle .index-title p a b,#NewsTitle .index-title p a b{background:#0583c9;color:#fff}
#book{margin:30px 0 0;height:660px}
#bookBox{padding-bottom:50px}
.bookStyle{position:relative;overflow:visible;width:50%;margin:10% auto 0}
.bookStyle .info{position:absolute;top:0;z-index:1;width:40px;left:-40px}
.bookStyle .info.twins{left:calc(100% + 20px)}
.bookStyle .info h3{writing-mode:tb-rl;font-size:20px;margin-bottom:20px;font-weight:400}
.bookStyle .info h4{writing-mode:tb-rl;font-size:15px;font-weight:400;color:#888}
.bookStyle .photo{position:absolute;left:0;top:0;width:100%;height:100%}
.bookStyle .photo a img{width:100%;height:100%;object-fit:cover}
.slick-center .bookStyle{width:75%;margin:0 auto}
.slick-center .bookStyle .info{z-index:1;left:-15%;width:50%;text-align:right;top:30%}
.slick-center .bookStyle .info.twins{display:none}
.slick-center .bookStyle .info h3{font-size:48px;text-align:right;writing-mode:initial;margin:0}
.slick-center .bookStyle .info h3 a{color:#fff;background:#000;display:inline-block;width:auto;height:auto;padding:4px 10px;font-weight:400;line-height:120%}
.slick-center .bookStyle .info h4{font-size:28px;line-height:120%;text-align:right;background:#000;color:#fff;display:inline-block;padding:6px 12px;font-weight:400;margin-top:5px;writing-mode:initial}
/* boxTitle  */
h2.boxTitle { position: relative; min-width: 250px; font-weight: normal; }
h2.boxTitle font { display: block; font-size: 51px; line-height: 100%; text-transform: uppercase; }
h2.boxTitle font:first-letter {margin-right: 5px;font-size: 95px;line-height: 100%;color: #c40c24;}
h2.boxTitle span {position: absolute;padding: 0 5px 5px;width: 100%;border-bottom: 1px #383838 solid;font-weight: bold;font-size: 16px;color: #797a7a;top: 10px;left: 85px;}

.indexset-box { overflow:hidden; margin: 0; width:1214px; }
.indexvisul{ position:relative; z-index: 1; }

/* news */
#news {/* background-image:url(/images/07/index-news-bg.png); */background-repeat:repeat-x;background-position: 0 -30px;padding: 100px 0 80px;position:relative;z-index:2;}
#news .newstitle { position: relative; float:right; }
#news .newsList { float:left; width:40%; margin: 0; }
#news .newsList .newsbox ,
#news .newsList .newsbox .info h3 { overflow:hidden; }
#news .newsList .newsbox .time { float:left; width:67px; margin-top: 20px; }
#news .newsList .newsbox .time p {font-family: 'Titillium Web', sans-serif;color: #c40c24;font-size:25px;}
#news .newsList .newsbox .time p.Pubyear { color:#9f9999; font-size:14px; text-align: right; }
#news .newsList .newsbox .info { float:left; width:calc(90% - 87px); margin-left:20px; }
#news .newsList .newsbox .info h3 a { color:#3b3b3b; font-size:16px; }
#news .newsList .newsbox .info span {width:45px;height:1px;display:block;background: #848484;margin:10px 0;}
#news .newsList .newsbox .info article { color:#595757; font-size:12px; height: 46px; }
#freebox{padding:50px 0}
#freebox #freeboxlist{text-align:center}
#freebox #freeboxlist >div{display:inline-block;width:calc(20% - 4px);margin:0 5%;vertical-align:top}
#freebox .free h3{text-align:center;font-size:22px;line-height:120%;margin-bottom:20px}
#freebox .free p{text-align:center}
#prolay .p-box >img,.bookStyle >img,#news li .border .photo img,#ssbanner a img{width:100%}
#prolay .p-box .bgimg a,.bookStyle,.bookStyle .info,#product .index-title p a b,#BookTitle .index-title p a b,#NewsTitle .index-title p a b{transition:all linear .3s}
.bookStyle .photo,.bookStyle .info h3 a,.bookStyle .info h4,.bookStyle .info h3{transition:all linear .1s}
#sloganBox{overflow:hidden;position:relative;padding:60px 0;background: #dedede;color: #151515;-webkit-box-shadow: inset 0 2px 24px rgba(20%,20%,40%,0.5);box-shadow: inset 0 2px 24px rgba(20%,20%,40%,0.5);}
#sloganBox section{
    overflow: hidden;
    margin: 0 auto;
    width: 1600px;
}
#sloganBox:before{position:absolute;width:100%;height:22px;display:block;-webkit-border-radius:60%;-moz-border-radius:60%;border-radius:60%;-webkit-box-shadow:0px 0 22px rgba(0, 0, 0, 0.5);-moz-box-shadow:0px 0 22px rgba(0, 0, 0, 0.5);box-shadow:0px 0 22px rgba(0, 0, 0, 0.5);bottom:-22px;content:"";}
#sloganBox ul{text-align:center;}
#sloganBox ul li{margin:0 1%;width:30%;display:inline-block;-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-ms-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp;vertical-align:top;}
#sloganBox ul li:nth-child(2){-webkit-animation-delay:0.5s;-moz-animation-delay:0.5s;-ms-animation-delay:0.5s;-o-animation-delay:0.5s;animation-delay:0.5s;}
#sloganBox ul li:nth-child(3){-webkit-animation-delay:1s;-moz-animation-delay:1s;-ms-animation-delay:1s;-o-animation-delay:1s;animation-delay:1s;}
#sloganBox ul li:nth-child(3) p i{
    font-family: 'Nunito', sans-serif;
    font-weight: bold;
    font-size: 29px;
    font-style: normal;
}
#sloganBox ul li p i{margin:0 auto 20px;width:100px;height:100px;display:block;border: 1px #000 solid;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;text-align:center;line-height:100px;font-size: 40px;}
#sloganBox ul li:hover p i{background: #000;color: #ffffff;}
#sloganBox ul li h4{margin-bottom:10px;font-size:18px;text-align:center;}
#sloganBox ul li article{margin:auto;width:80%;height:85px;text-align:center;font-size:16px;color: #000;overflow:hidden;}

/* indexBox */
#indexBox{width:100%;height:100%;background:rgba(0,0,0,0.48);position:fixed;z-index:999999;top:0}
#indexBox #ask-wrap{margin:0 auto;padding:5px;width:755px;position:relative}
#indexBox #ask-wrap a#click-close{display:block;color:#f2f2f2}
#indexBox #ask-wrap a img{width:100%}
#indexBox #ask-wrap article {overflow-y: scroll;background-color: #ffffffeb;margin: 114px;margin-top: 28px;height: calc(100vh - 100px);}
#indexBox #ask-wrap #close-wrap{width:26px;height:26px;background:#7b0f12;border-radius:50%;position:absolute;top: 20px;right: 104px;text-align:center;color:#f2f2f2;};
#indexBox #ask-wrap #close-wrap a#click-close{line-height:24px;font-size:20px;color:#f2f2f2}
#indexBox #ask-wrap article::-webkit-scrollbar { width: 7px; }
#indexBox #ask-wrap article::-webkit-scrollbar-track { background: rgb(220 223 227); }
#indexBox #ask-wrap article::-webkit-scrollbar-thumb { background: rgb(0 160 254); border-radius: 50px; }
@media screen and (min-width: 1025px) {
#prolay .p-box .p-info{transition:all linear .3s;/* height: 90px; *//* bottom: 0; */}
#prolay .p-boxOver:hover .p-info{bottom:0}
#prolay .p-box:hover .bgimg{left:-3%;top:-3%;width:106%;height:106%}
#prolay .sthOver .p-box .bgimg img{opacity:.2}
#prolay .sthOver .p-boxOver .bgimg img{opacity:1}
.bookStyle:hover .photo{width:110%;height:110%;left:-5%;top:-5%}
#product .index-title p a:hover b,#BookTitle .index-title p a:hover b,#NewsTitle .index-title p a:hover b{padding-left:15px;border-radius:15px}
}
@media screen and (max-width: 1680px) {
#book{height:500px}
#sloganBox section {
    width: 90%;
}
}
@media screen and (max-width: 1440px) {
#book{height:470px}

#indexBox #ask-wrap article{
    margin:100px;
    margin-top:10px;
}
#indexBox #ask-wrap #close-wrap{
    top: 6px;
    right: 91px;
}
}
@media screen and (max-width: 1366px) {
#book{height:400px}
.slick-center .bookStyle .info h3{font-size:40px}
.slick-center .bookStyle .info h4{font-size:20px}
#news .newstitle { width:45%; }
#news .newsList { width:50%; }
}
@media screen and (max-width: 1280px) {
#aboutFunc .aboutart .arts{margin:40px auto 0;font-size:16px;line-height:160%;width:75%}
#aboutFunc .aboutart h3 b{font-size:15px}
#aboutFunc .aboutart h2{font-size:24px}
#book{height:301px}
}
@media screen and (max-width: 1024px) {
    #indexBox #ask-wrap article{
        
margin-top: 15px;
        
padding: 20px;
    }
    #indexBox #ask-wrap #close-wrap{
        top: 9px;
        right: 92px;
    }
#book{height:auto}
/*#aboutFunc .aboutart{margin-top:20px}*/
#aboutFunc:after{background:linear-gradient(to bottom,#319ad4 50%,rgba(48,155,213,0.56) 100%)}
#product .index-title h2,#BookTitle .index-title h2{font-size:30px}
.bookStyle{margin:0 auto}
.bookStyle .info.twins{display:none}
.bookStyle .info{width:200px;right:90%;top:30px;text-align:right;left:initial}
.bookStyle .info h3{writing-mode:initial;margin-bottom:10px;text-align:right}
.bookStyle .info h3 a{color:#fff;background:#000;display:inline-block;padding:5px 8px 5px 20px;font-size:40px;line-height:120%}
.bookStyle .info h4{writing-mode:initial;display:inline-block;background:#000;color:#fff;padding:2px 10px;position:relative}
#freebox #freeboxlist >div{width:95%;margin:40px 0}
#freebox{padding:20px 0}
#sloganBox ul li article {
    height: 105px;
}
#aboutFunc {
    background-size: cover;
}
}
@media screen and (max-width: 768px) {


    #indexBox #ask-wrap article{
        
margin-top: 20px;
        
padding: 20px;
    }
    #indexBox #ask-wrap #close-wrap{
        top: 11px;
        right: 89px;
    }
#aboutFunc .aboutart .arts{width:90%}
#aboutFunc #youtube{width:90%}
#aboutFunc .aboutart .more p a,.NewsMore p a{padding:6px 100px}
#aboutFunc:after{background:linear-gradient(to bottom,#319ad4 70%,rgba(48,155,213,0.56) 100%)}
#sloganBox ul li{width:100%;}
#sloganBox ul li{margin:15px 0;}
#news .newstitle { float:none; width:100%; margin-bottom:80px; }
#news .newsList { width:100%; }
#news .newstitle img { height:60px; }
#news .newsList .newsbox .time {
    width: 100%;
}
}
@media screen and (max-width: 640px) {
#news .newstitle img{ height:50px; }
}
@media only screen and (max-width:600px){
#indexBox #ask-wrap{width:100%}
}
@media screen and (max-width: 480px) {
    #indexBox #ask-wrap article{
    margin: 17px;
    margin-top: 5px;
    padding: 15px;
    margin-right: 26px;
    height: 500px;
    overflow-y: scroll;
}
#indexBox #ask-wrap #close-wrap{
    top: 2px;
    right: 16px;
}
#aboutFunc .aboutart .more,{margin-top:40px}
.bookStyle{width:80%}
.bookStyle .info{right:initial;left:-8%;text-align:left}
.bookStyle .info h3{text-align:left}
#prolay .p-box .p-info .describe{height:45px;margin:10px 20px}
section.indexset ,
#news .newstitle img { height:45px; }
#news .newsList .newsbox .time { float:none; margin:0; }
#news .newsList .newsbox .info { float:none; width:100%; margin:15px 0 0; }
#news .newsList .newsbox .time p.Pubyear { text-align:left; }
#news .newstitle { margin-bottom: 50px; }
#aboutFunc {
    padding: 30px 0;
}
#aboutFunc .aboutart {
    padding: 20px 0;
}
}