#product{
	background-position:50% 50%;
	background-size: cover;
	padding: 40px 0 90px;
	position:relative;
	z-index: 2;
	background-attachment: fixed;
}
#prolay .pro-list h4,#prolay .pro-list .p-border:hover .p-info h3,#bookBox .topic b,#NewsBox .topic .topic-title h2,#news li .readmore a{background-color: #031f5e;/* 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;}
.topic{text-align:center;position:relative;padding: 45px 0;}
.topic .topic-title{display:inline-block;position:relative;z-index:3;color:#333}
.topic .topic-title h2{text-align:center;font-size: 50px;line-height:110%;color: #0e0e0e;}
.topic .topic-title p{text-align:center;font-size: 18px;line-height:110%;margin-top:7px;color: #040404;}
.topic b{font-family: fantasy;position:absolute;z-index:2;left:0;width:100%;height:100%;display:block;top:0;font-size:170px;color:#eaeaea;line-height: 165px;text-align:center;font-weight: 350;}
#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: hsla(0, 0%, 90%, 0.28);}
#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;display: none;}
#prolay .pro-list .photo{margin:20px 0;background-color:#f9f9f9;background-position:50% 50%;background-repeat:no-repeat;background-size: cover;}
#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: #1946bc;display:block;width:20px;height:1px;margin:20px 0;}
#prolay .pro-list .p-info .describe{line-height:140%;font-size:11pt;overflow:hidden;height: 50pt;}
#prolay .pro-list .p-info .price{overflow:hidden;margin:10px 0 0;height:22px;display: none;}
#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;display: none;}
#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;background:#384250;color:#fff;font-size:11pt;font-weight:700;padding:15px 45px;border-radius:25px;transition:all linear .2s}
.same-btn a:hover{opacity:.8}
#prolay .same-btn{margin-top:40px}
#freebox{
position: relative;
z-index: 2;
background: #fff;
padding: 80px 0;
DISPLAY: NONE;
}
#freebox h2{
text-align: center;
margin-bottom: 20px;
font-family: 'Righteous', cursive;
font-weight: normal;
font-size: 40px;
}
#freebox #freeboxlist{}
#freebox #freeboxlist li{
display: inline-block;
width: calc((100% / 3) - 4px);
vertical-align: top;
}
#freebox #freeboxlist .free{
margin: 20px;
}
#freebox #freeboxlist .free h3{
font-size: 20px;
line-height: 110%;
margin-bottom: 10px;
color: #317d6e;
}
#freebox #freeboxlist .free p{
color: #6e6e6e;
font-size: 16px;
}
#about{
background-repeat: no-repeat;
background-position: 50% 50%;
background-attachment: fixed;
position:relative;

background-size: cover;
z-index: 2;
}
#about .topic b{color: #f7f7f7;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome, #about {
		background-attachment:initial;
}
}
#about:before{
	display:none;
	content:url(/images/08/logo.png);
	position:absolute;
	right:50px;
	top: -250px;
	animation-name:aboutlogo;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	animation-duration:3s;
	-moz-animation-name:aboutlogo;
	-ms-animation-name:aboutlogo;
	-o-animation-name:aboutlogo;
	-webkit-animation-name:aboutlogo;
	-moz-animation-timing-function:linear;
	-ms-animation-timing-function:linear;
	-o-animation-timing-function:linear;
	-webkit-animation-timing-function:linear;
	-moz-animation-iteration-count:infinite;
	-ms-animation-iteration-count:infinite;
	-o-animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-duration:2s;
	-ms-animation-duration:2s;
	-o-animation-duration:2s;
	-webkit-animation-duration:2s;
	z-index: 9;
}
@keyframes aboutlogo{
	0%{
		transform:translateY(0);
	}
	50%{
		transform: translateY(-20px);
	}
	100%{
		transform: translateY(0);
	}
}
@-moz-keyframes aboutlogo{
	0%{
		transform:translateY(0);
	}
	50%{
		transform: translateY(-20px);
	}
	100%{
		transform: translateY(0);
	}

}
@-ms-keyframes aboutlogo{
	0%{
		transform:translateY(0);
	}
	50%{
		transform: translateY(-20px);
	}
	100%{
		transform: translateY(0);
	}

}
@-o-keyframes aboutlogo{
	0%{
		transform:translateY(0);
	}
	50%{
		transform: translateY(-20px);
	}
	100%{
		transform: translateY(0);
	}

}
@-webkit-keyframes aboutlogo{
	0%{
		transform:translateY(0);
	}
	50%{
		transform: translateY(-20px);
	}
	100%{
		transform: translateY(0);
	}

}
.abbg{
	overflow: hidden;
	float: right;
	width: 30%;
	margin-right: 10%;
	padding: 50px 0;
}
#about .about-box{overflow:hidden;position:relative;background-color: white;}
#about #indexyoutube{
display: block;
width: 52%;
float: left;
background-repeat: no-repeat;
background-position:  50%;
background-size: cover;
left: 0;
top: 0;
z-index: 54;
}
/**for u2**/
.UTwo{position:relative;padding-bottom: 66.25%;padding-top: 0;height:0;overflow:hidden;background-image: url(/userfiles/images/20191213092211951.jpg);background-size: 100%;}
.UTwo a{
	display: block;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border-radius: 50%;
	background: rgba(255, 5, 5, 0.6);
position: absolute;
z-index: 5;
color: #dcdcdc;
font-size: 30px;
left: calc(50% - 50px);
top: calc(50% - 50px);
	transition:all linear 0.3s;
}
.UTwo a:hover{
width: 110px;
height: 110px;
line-height: 110px;
left: calc(50% - 55px);
top: calc(50% - 55px);
	font-size: 34px;
}
.UTwo iframe ,
.UTwo object ,
.UTwo embed{position:absolute;top:0;left:0;width:100%;height:100%;}
#about-wrap{
}
#about-wrap article{
	color:#2a2a2a;
	font-size: 17px;
	margin: 50px 0 30px;
	line-height: 200%;
	font-weight: 400;
	overflow: hidden;
	height: 165px;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
}
#about-wrap p .more{
	/* background-image: url(/images/08/index-about-more.png); */
	background-repeat: repeat-x;
	background-position: 50% 50%;
	color: #fff;
	display: inline-block;
	height: 44px;
	line-height: 44px;
	text-align: center;
	font-size: 18px;
	padding: 0 40px;
	background-color: #031f5e;
}
#news{
	background:#fff;
	padding:65px 0;
	position: relative;
	z-index: 2;
	display: none;
}
#news h2{font-family: 'Righteous', cursive;font-weight: normal;font-size: 40px;}
#news h2,
#news span,
#book >span,
#product section >span{
	text-align:center;
	display:block;
	color: #7d807b;
	font-size:16px;
	margin-bottom: 50px;
}
#product section >span a,
#book >span a{
	color: #7d807b;
}
#news h2,
#about-wrap h2 b,
#book >h2{font-family: 'Righteous', cursive;font-weight: normal;font-size: 16px;margin-bottom: 0;line-height: 100%;text-transform: uppercase;letter-spacing: 20px;color: #969696;}
#about-wrap h2{color: #2f3130;font-size: 40px;}
#about-wrap h2 b{font-weight: normal;display: block;}

#news div{
	outline:none;
}
#news .newslist >div{
	overflow:hidden;
}
#news .newslist .photo{
	float:left;
	margin-right: 5%;
max-width: 27%;
}
#news .newslist .photo a{
	display: block;
width: 100%;
height: 100%;
background-position: center;
background-size: 200%;
background-repeat: no-repeat;
margin-left: 5px;
	outline:none;
}
#news .newslist .news-info{
	float:right;
	width: 63%;
margin-right: 5%;
}
#news .newslist .news-info h3{
	font-size:20px;
	margin: 10px 0;
	line-height: 130%;
	height: 52px;
	overflow: hidden;
}
#news .newslist .news-info h3 a{
	color: #0c7e83;
}
#news .newslist .news-info p{
	font-size: 13px;
	color: #06635e;
}
#news .newslist .news-info p b{
color: #fff;
padding: 2px 20px;
margin-right: 10px;
background: #4f663d;
border-radius: 5px;
display: inline-block;
}
#news .newslist .news-info article{
	color:#212020;
	height: 66px;
	overflow: hidden;
}
.newslist{
	margin:50px 0;
	padding-bottom:50px;
	border-bottom:1px solid #bfbfbf;
}
#bookBox{position: relative;z-index: 5;background-color: #fafafa;background-size: cover;background-position: 50% 50%;padding-top: 80px;}
#book >h2{
text-align: center;
}
#book >span{}
#bookBox .bookSli{}

#bookBox .bookSli .box{
position: relative;
}
#bookBox .bookSli .box .photo{}
#bookBox .bookSli .box .photo a{
display: block;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
#bookBox .bookSli .box .photo a img{


width: 100%;
}
#bookBox .bookSli .box .info{
width: calc(100% - 100px);
position: absolute;
left: 30px;
bottom: 30px;
background: rgba(255, 255, 255, 0.46);
padding: 20px;
}
#bookBox .bookSli .box .info h3{}
#bookBox .bookSli .box .info h3 a{
font-size: 20px;
line-height: 110%;
}
#bookBox .bookSli .box .info p{
}
@media screen and (min-width: 1025px) {
#freeboxlist .free:hover,#prolay .pro-list .p-border:hover,#book .border:hover{transform:translate(-15px,-15px)}
}
@media screen and (max-width: 1440px) {
	#about:before{
		zoom: 0.7;	
		top: -200px;	
	}
	.abbg{padding: 23px 0;}
	#about-wrap article{margin: 30px 0;}
}
@media screen and (max-width: 1366px) {
	.topic b{line-height: 155px;font-size: 120px;}
	#about-wrap article {margin: 0 0 30px;}
}
@media screen and (max-width: 1280px) {
	#about{
		background-attachment:inherit;
	}
	#prolay .slick-list{padding:0}
	#prolay{width:calc(100% - 90px);margin:0 auto}
	.topic {padding: 30px 0;}
}
@media screen and (max-width: 1024px) {
	#prolay .pro-list .p-info .describe {
		height: 65pt;
	}
	#about-wrap article {
		font-size: 15px;
		height: 115px;
		-webkit-line-clamp: 4;
	}
	#about-wrap p .more{font-size: 14px;}
	.topic b {line-height: 114px;font-size: 95px;}
	.abbg {width: 40%;margin-right: 4%;}
	.topic {padding: 30px 0 15px;}
}
@media screen and (max-width: 980px) {
	#about{
	background-position: 70% 50%;
	}
	.topic b{font-size:120px}
	#about-wrap article,
	#about-wrap p .more{
		font-size:16px;
	}
	#freebox #freeboxlist .free{margin: 20px 10px;}
}
@media screen and (max-width: 768px) {
	#about #indexyoutube{width: 100%;}
	.abbg{width: 90%;padding: 50px 0 70px;}
	.topic b{font-size:100px}
	#about-wrap article{    height: 125px;}
	#about-wrap p{text-align: center;}
}
@media screen and (max-width: 640px) {
	#news h2 img,
	#freebox h2 img,
	#book >h2 img{
	width: 40px;	
	}
	#news .newslist .news-info p b{
		padding: 2px 10px;
	}
	#freebox #freeboxlist li{width: 100%;}
	#bookBox .bookSli .box .info h3 a{font-size: 17px;}
	#bookBox .bookSli .box .info p{font-size: 12px;font-size: 12px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;}
	#bookBox .bookSli .box .info{
		width: calc(100% - 40px);
		left: 10px;
		bottom: 10px;
		padding: 10px;	
	}
	#news .newslist .news-info article{overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; height:auto;}
	.newslist{padding-bottom: 30px;}
}
@media screen and (max-width: 480px) {
	#about:before{
	zoom: 0.5;
		top: -100px;
		right: -150px;	
	}
	#news h2, #news span, #book >span, #product section >span{
		font-size:14px;
	}
	#news h2,
	#freebox h2,
	#book >h2{
		font-size: 30px;		
	}
	.topic b{font-size:70px}
	#prolay .pro-list .p-border{padding:20px}
	#prolay .slick-prev:before, #prolay .slick-next:before {
		font-size: 25px;
	}
}
@media screen and (max-width: 370px) {
}