#prolay .pro-list h4,#prolay .pro-list .p-border:hover .p-info h3,#bookBox .topic b{background-color:#f93;background:-webkit-gradient(linear,left top,right top,color-stop(20%,#f93),color-stop(80%,#ff7166));background:-webkit-linear-gradient(left,#f93 20%,#ff7166 80%);background:linear-gradient(90deg,#f93 20%,#ff7166 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#content{background:#f5f5f5}
.topic{text-align:center;position:relative;padding:70px 0}
.topic .topic-title{display:inline-block;position:relative;z-index:3;color:#333}
.topic .topic-title h2{font-family:'Rubik',sans-serif;text-align:center;font-size:32px;line-height:110%}
.topic .topic-title p{text-align:center;font-size:14px;line-height:110%;margin-top:7px}
.topic b{font-family:'Marck Script',cursive;position:absolute;z-index:2;left:0;width:100%;height:100%;display:block;top:0;font-size:170px;color:#eaeaea;line-height:197px;text-align:center;font-style:italic;transform:rotate(-5deg);font-weight:400}
#freebox{padding:50px 0 100px;position:relative;overflow:hidden}
#freeboxlist{position:relative;z-index:2}
#freeboxlist >div{display:inline-block;width:calc(100% / 3);margin-right:-4px;vertical-align:top}
#freeboxlist .free{background:#fff;padding:50px;transition:all linear .1s;border:1px solid #f5f5f5}
#freeboxlist .free h4{text-align:center;font-size:22px;line-height:110%;overflow:hidden;margin-bottom:20px;height:50px}
#freeboxlist .free p{text-align:center;font-size:15px;overflow:hidden;height:89px}
.circleStyle{position:absolute;display:block;z-index:1;border-radius:50%}
.circleStyle.bobA{width:700px;height:700px;left:-320px;top:-300px}
.circleStyle.bobB{width:400px;height:400px;right:-150px;bottom:-200px}
#book .border .photo img{width:100%}
#product{overflow:hidden;position:relative}
#product .webframe{position:relative;z-index:3}
#product:after{width:100%;height:70%;content:'';display:block;position:absolute;top:0;left:0;z-index:1}
#product .topic .topic-title{color:#fff}
#product .topic b{color:rgba(245,245,245,0.12)}
#prolay{position:relative;z-index:3}
#prolay .slick-list{padding:15px}
#prolay .pro-list .p-border{position:relative;padding:30px;background:#fff;border:1px solid #f5f5f5;transition:all linear .2s}
#prolay .pro-list h4{color:#ff9637;font-weight:400;font-size:11pt}
#prolay .pro-list .photo{margin:20px 0;background-color:#f9f9f9;background-position:50% 50%;background-repeat:no-repeat;background-size:contain}
#prolay .pro-list .photo img{width:100%}
#prolay .pro-list a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5}
#prolay .pro-list .p-info h3{line-height:130%;font-size:13pt;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#prolay .pro-list .p-info >span{background:#ff7166;display:block;width:20px;height:1px;margin:20px 0}
#prolay .pro-list .p-info .describe{line-height:140%;font-size:11pt;overflow:hidden;height:30pt}
#prolay .pro-list .p-info .price{overflow:hidden;margin:10px 0 0;height:22px}
#prolay .pro-list .p-info .price span{float:right;font-size:10pt;color:#565656}
#prolay .pro-list .p-info .price span.old{float:left;text-decoration:line-through}
#prolay .pro-list .p-info h5{margin:0;margin-top:20px}
#prolay .pro-list .p-info h5 b{font-size:11pt;display:inline-block;background:#e8e8e8;padding:6px 35px;border-radius:25px;color:#252525}
#prolay .slick-prev{width:40px;height:40px;left:-50px}
#prolay .slick-next{width:40px;height:40px;right:-50px}
#prolay .slick-prev:before,#prolay .slick-next:before{font-size:40px;color:#3a3f4a}
.same-btn{text-align:center;margin-top:40px}
.same-btn a{
    display: inline-block;
    color: #737373;
    font-size: 11pt;
    margin-right: 40px;
    transition: all linear .2s;
    /* border-left: 1px solid #737373; */
    /* margin: 0px 0; */
    line-height: 2.2;
    letter-spacing: 3px;
    transition-delay: .3s;
    padding: 10px 0px;
    background-color: white;
    }
.same-btn a:hover{opacity:.8}
#prolay .same-btn{margin-top:40px}

.longbar {
    display: inline-block;
    width: 80px;
    height: 1px;
    background: #3d3d3d;
    margin-right: 15px;
}
#bookBox{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:'';width:65%;left:0;top:0;height:100%;display:block}
#BookTitle{/* width:250px; */float:left;position:relative;z-index:3;margin: 0 auto;}
#BookTitle .workframe{overflow:visible;}
#BookTitle .index-title{/* transform:rotate(-90deg); *//* transform-origin:6% 490%; */text-align: center;}
#BookTitle h2{color:#747474;display:inline-block;font-size: 40px;}
#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 p{
	text-align: center;
    font-size: 18px;
    line-height: 110%;
	margin-bottom: 20px;
    color: #696969;}
#book .bookStyle .info h3{text-align:center;font-size:50px;line-height:110%}
#book .bookStyle .info h3 a{color: #717171;}
#book .bookStyle .info h4{
    color: #797979;
    font-size: 18px;
    line-height: 170%;
    margin: 20px 53px;
    font-weight: 400;
    letter-spacing: 2px;
    }
#book .bookStyle .info h5{text-align:center}
#book .bookStyle .info h5 a{display:inline-block;background:#fff;font-size:14px;color: #717171;padding: 5px 50px;font-weight:700;}
#book .bookStyle .photo{margin-left: 50%;width: 40%;}
#book .bookStyle .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size: 100%;background-color: #ffffff;}
#book .bookStyle .photo a img{width:100%;}
#aboutFunc{position:relative;background-repeat:no-repeat;background-position:100% 60%;background-size:cover}
#aboutFunc .webframe{position:relative;z-index:2;overflow:hidden;/* padding:0px 0 330px */}
#aboutFunc:after{content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;opacity:.9}
#aboutFunc #about{float:right;width:calc(100% - 450px);color:#fff;position:relative;color: #555;writing-mode: tb-rl;padding: 112px 0 0;position: relative;}
#aboutFunc #about::before {
    top: -115px;
    left: 0;
    width: 1px;
    height: 0;
    background-color: #e7e7e7;
}
#aboutFunc #about .subBoxTitle{
	position:absolute;
	z-index:-1;
	font-family: 'Cormorant Unicase', serif;
    color: #555;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;}
#aboutFunc #about .speBoxTitle:before{
	position:absolute;
	width: 1px;
	height: 300px;
	background: #adadad;
	display: block;
	content: "";
	top: 0px;
	right: 100px;
}

#aboutFunc #about .speBoxTitle{
	letter-spacing: 5px;
    font-size: 42px;
    font-weight: 400;
    color: #555;
    white-space: nowrap;
    writing-mode: tb-rl;
    margin: 0 auto 140px;
	padding: 0 34px 0 0px;
    line-height: 166%;}

#aboutFunc #about .arts{
	font-size:12pt;
	margin: 40px 40px 40% 0;
	line-height: 2.2;
	letter-spacing: 6px;
	transition-delay: .3s;
	/* font-family: 'Lora', 'cwTeXFangSong', serif; */
	}
#aboutFunc #about .same-btn{text-align:left}
#aboutFunc #youtube{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;float:left;width:400px}
#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%}

#NewsBox{
    position: relative;
	padding-bottom: 100px;









}
#NewsBox .speBox{
	overflow:visible;
    width: 1351px;
    margin: 0 auto;
}
#NewsBox:after{
    position: absolute;
    content:'';
    background:#e7e4e0;
    width:100%;
    height:1px;
    bottom: 275px;
    left:0;
    z-index: -1;
}
#NewsBox .newsTitle-style{
    text-align: center;
    display: block;
    width: 620px;
    margin: 0 auto;
    background-repeat:no-repeat;
    background-position:0 50%,100% 50%;
    padding: 20px 0;
    /* margin-bottom: 70px; */
}
#NewsBox .newsTitle-style span{}
#NewsBox .newsTitle-style span img{}
#NewsBox .newsTitle-style .speBoxTitle{
    text-align: center;
    color: #505050;
    font-size: 56px;
    /* font-family: 'Cormorant Unicase', serif; */
    font-weight: 600;
    line-height: 100%;
    margin: 30px 0;
}
#NewsBox .newsTitle-style .subBoxTitle{
    text-align: center;
}
#NewsBox .newsTitle-style .subBoxTitle a{
    color: #74889a;
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0.2em;
}
#news{}
#news .newsList{}
#news .border{
    margin: 10px 13px;
}
#news .photo{
}
#news .photo a{
    display: block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}
#news .photo a img{
    width: 100%;
}
#news .news-info{
    padding: 30px;
    background: #ffffff;
}
#news .news-info .news-bottom{
    overflow: hidden;
}
#news .news-info .news-bottom .dd{
    float: left;
    font-size: 40px;
    line-height: 100%;
    color: #6a6a6a;
    font-weight: 800;
    width: 60px;
    display: inline-block;
    padding: 0 4px;
}
#news .news-info .news-bottom .ddout{
    font-size: 17px;
    float: left;
    color: #616161;
    line-height: 120%;
    width: calc(90% - 60px);
    /* margin-top: 7px; */
    margin-left: 8px;
    text-transform: uppercase;
    font-weight: 800;
}
#news .news-info h4{
    margin: 10px 0 10px;
}
#news .news-info h4 a{
    font-size: 20px;
    line-height: 140%;
    display: block;
    color: #4c4b4b;
    word-break: break-all;
    overflow: hidden;
    height: 56px;
}

#news .news-info .describe{font-size: 15px;color: #717171;line-height: 150%;overflow: hidden;max-height: 46px;height: 44px;display: none;}
#news .news-info .more{
    margin-top: 20px;
}
#news .news-info .more a{
    display: inline-block;
    padding: 12px 0;
    font-size: 13px;
    transition:all linear .2s;
    width: 40%;
    background-color: #b8b8b8;
    border-color: #f5f5f5;
    color: #ffffff;
    text-align: center;
}
#news .news-info .more a:hover {
  background-color: #656565;
  border-color: #656565;
  color: #fff;
}
#news .slick-next,
#news .slick-prev{
    top: calc(50% - 15px);
	height: 31px;
}
#news .slick-prev:before{
	background-image:url(/images/18/index-news-sccrow-pre.png);
	width:19px;
	height:29px;
	content:'';
	display:block;
}
#news .slick-next:before{
	background-image:url(/images/18/index-news-sccrow-next.png);
	width:19px;
	height:29px;
	content:'';
	display:block;
}
@media screen and (max-width: 1440px) {
#NewsBox .speBox{
	overflow:visible;
    width: 980px;
    margin: 0 auto;
	}
#book .bookStyle .info h3{font-size: 40px;}
}
@media screen and (max-width: 1280px) {
#freeboxlist >div{width:100%;margin:0}
#freeboxlist .free p,#freeboxlist .free h4{height:auto}
.circleStyle.bobA{width:500px;height:500px;left:-250px}
.circleStyle.bobB{width:300px;height:300px}
#prolay .slick-list{padding:0}
#prolay{width:calc(100% - 90px);margin:0 auto}
	#NewsBox .newsTitle-style{	overflow:visible;
    width: 90%;
    margin: 0 auto;
}
	#NewsBox .newsTitle-style .speBoxTitle{
    font-size: 35px;
    margin: 12px 0;
}
	#NewsBox .newsTitle-style .subBoxTitle a{}
	#news{margin: 0 25px;}
#BookTitle{/* width: 100%; */}
#book{width:100%}
#BookTitle .index-title{/* transform-origin:10% 300%; */}
#book .bookStyle .info{left:0;width:300px}
#book .bookStyle .photo{/* margin-left:350px; *//* width:calc(100% - 350px) */margin-top: 30px;margin-bottom: 30px;}
#book .bookStyle .info h3{font-size: 26px;}
#book .bookStyle .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;background-color:#f5f5f5}
#book .bookStyle .info h4 {
    font-size: 14px;
}
}
@media screen and (min-width: 1025px) {
#freeboxlist .free:hover,#prolay .pro-list .p-border:hover{transform:translate(-15px,-15px)}
#NewsBox .newsTitle-style{
    width: 500px;
    background-size: auto 100%;
}
#NewsBox .newsTitle-style span img{
    width: 60px;
}
#book .bookStyle .info h5 a,#NewsBox .NewsMore p a span{position:relative;transition:transform 1s cubic-bezier(0.23,1,0.32,1)}
#book .bookStyle .info h5 a:hover{color:#fff}
#book .bookStyle .info h5 a span{position:relative;z-index:2}
#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}
#book .bookStyle .info h5 a:hover:after{transform:scale(1,1);transform-origin:left center 0}	
	
}
@media screen and (min-width: 1024px) {
.speBox{
    width: 95%;
}
#book .bookStyle .info{
	margin-top: -115px;
    margin-left: 5%;
    width: 410px;
}
#bookBox:after{width:100%}
#bookBox{padding:0 0 80px;}
#bookBox{/* padding:0 */}
#BookTitle{/* width:95%; */float:none;padding:70px 0;/* margin-left:5%; */}
#BookTitle .workframe{/* width: 50%; */}
#book{width:100%}	
#BookTitle{/* width:0px */}
}

@media screen and (min-width: 640px) {
#NewsBox .newsTitle-style .subBoxTitle{
    line-height: 100%;
}
#NewsBox .newsTitle-style{
    width: 90%;
    /* margin-bottom: 90px; */
    /* margin-top: 40px; */
 }
#news .border{margin: 0px 2px;}
#news .news-info .news-bottom .dd{
    font-size: 40px;
    width: 50px;
}
#news .news-info h4 a{
    font-size: 18px;
    height: 45px;
}
	#NewsBox {
    position: relative;
    padding-bottom: 40px;
    background-attachment: fixed;
    background-position: 50% 50%;
}
}
@media screen and (max-width: 1024px) {
	#aboutFunc{    background-position: 40% 60%;}
}
@media screen and (max-width: 980px) {
#NewsBox .speBox{
	overflow:visible;
    width: 90%;
    margin: 0 auto;
	}

	.topic b{font-size:120px}
#aboutFunc #about{width:90%;margin-bottom:50px;padding:0 5%}
#aboutFunc #about .subBoxTitle{left:-5%;display: none;}
#aboutFunc #youtube{width:100%}
#aboutFunc .webframe{padding-bottom:50px;padding-top: 50px;}
#book .bookStyle .info {
	position: relative;
    color: #fff;
    width: 350px;
    left: 0;
    top: 0;
    margin: 40px auto;
	}
#book .bookStyle .photo {
    margin-left: 0;
    width: 100%;
}
	#bookBox {
    padding: 0px 0;
}
#aboutFunc {
    position: relative;
    background-repeat: no-repeat;
    background-position: 35% 75%;
    background-size: cover;
    /* background-position-y: 116px; */
}
}
@media screen and (max-width: 768px) {
.topic b{font-size:100px}
#BookTitle{    float: none;    margin: 20px auto;}
#aboutFunc #about .speBoxTitle:before {    right: 130px;}
#aboutFunc #about .speBoxTitle {    padding: 15px 34px 0px 0px;}
}
@media screen and (max-width: 640px) {
#news .news-info .news-bottom .dd {
    float: left;
    font-size: 20px;
    line-height: 100%;
    color: #8b9baa;
    font-weight: 800;
    width: 30px;
    display: inline-block;
    padding: 11px 4px;
    background-color: #ececec;
}

#news .news-info .more {
    display: none;
}
#NewsBox {
    position: relative;
    padding-bottom: 50px;
}
#aboutFunc #about .arts {
    font-size: 11pt;
    margin: 0px 4px 0px 0;
    line-height: 1.8;
    letter-spacing: 6px;
    transition-delay: .3s;
    font-family: 'Lora', 'cwTeXFangSong', serif;
}
#aboutFunc #about .speBoxTitle {
    padding: 0 0px 0 0px;
    line-height: 166%;
}
	#aboutFunc #about .speBoxTitle:before {
    right: 90px;
}
}
@media screen and (max-width: 480px) {
#freeboxlist .free{padding:30px}
.topic b{font-size:70px}
#prolay .pro-list .p-border{padding:20px}
#aboutFunc #about .speBoxTitle img{
    width: 23px;
}
#aboutFunc #about .arts{margin:20px 0 40px}
.same-btn a{padding:10px 45px;font-size:10pt}
#NewsBox .newsTitle-style{
    padding: 20px 5%;
    width: 80%;
}
#NewsBox .newsTitle-style .subBoxTitle a{
    font-size: 12px;
    letter-spacing: 0;
}
#news .news-info .more a{font-size: 16px;    padding: 12px 0 0; }
#news .news-info{padding: 20px;}
#NewsBox .newsTitle-style .speBoxTitle{    font-size: 40px;}
#NewsBox .speBox{
	overflow:visible;
    width: 95%;
    margin: 0 auto;}
#book .bookStyle .info h5 a{width:calc(100% - 100px);text-align:center}
#BookTitle h2,#BookTitle p a,#BookTitle p{font-size: 26pt;line-height:8pt;}
#BookTitle p{display:block;margin:0}
#BookTitle{padding: 40px 0 0 0;}
#book .bookStyle .info h4{margin:50px 0;    text-align: center;}
#book .bookStyle .info{width:100%;}
	}

@media screen and (max-width: 410px){
#aboutFunc #about {
    width: 90%;
    margin-bottom: 50px;
    padding: 0 0%;
}
	#aboutFunc #about .speBoxTitle:before {
    right: 41px;
}
	#aboutFunc #about .arts {
    margin: 20px 0 40px;
    font-size: 11pt;
    line-height: 1.5;
    letter-spacing: 4px;
}
	.same-btn a {
    padding: 6px 4px;
    font-size: 8pt;
}
	}