figure{
	color: #434343;
    margin: 0;
    padding: 0;
	text-align: center;
}
figure figcaption{
	font-size:36px;
	line-height: 120%;
	display: inline-block;
	position:relative;
    margin: 15px 0 0;
}
figure figcaption:after{
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    background: #29abe2;
    left: calc(50% - 4em);
    top: -15px;
}
figure span{
	font-size: 16px;
    display: block;
    text-align: center;
    margin-left: 140px;
	line-height: 100%;
}
.sliiderR,
.sliiderL{
	position:absolute;
	z-index:-1;
	animation-name:slideInRight;
	animation-duration:1s;
}
.sliiderL{
	animation-name:slideInLeft;
}
#work{
    padding: 60px 0;
    position:relative;
}
#work .w1{
	top: -50px;
    right: -50px;
}
#work .w2{
	left: -30%;
    top: 20%;
}
#work .w3{
	right: -35%;
    bottom: -20%;
}
.workshow section{
    position: relative;
    margin: 50px 0 150px;
}
.workshow h2{
	background: #e68c00;
    display: inline-block;
    position: absolute;
    right: 0;
    padding: 11px 45px;
    font-weight: normal;
	top: 10%;
	transition: all cubic-bezier(0.39, -0.08, 0, 1.21) 1s;
}
.workshow h2 a{
	color:#fff;
}
.workshow .art{
    position: absolute;
    background: #fff;
    box-shadow: 0 0 30px rgba(136, 136, 136, 0.29);
    width: 30%;
    bottom: -15%;
    left: 7%;
    padding: 20px;
    line-height: 180%;
	transition: all cubic-bezier(0.39, -0.08, 0, 1.21) 1s;
}
#work .workshow .art:after{
    content: '';
    width: 2px;
    height: 80%;
    background: #29abe2;
    position: absolute;
    bottom: -20%;
    right: 5%;
    transform: rotate(45deg);
	transition: all cubic-bezier(0.39, -0.08, 0, 1.21) 1s;
}
.workshow .art h3{
	color: #404040;
    font-size: 14px;
    height: 48px;
    overflow: hidden;
	font-weight: normal;
}
.workshow .art p{
	text-align: right;
    margin: 10px 0 0;
	line-height: 110%;
}
.workshow .art p a{
	color:#29abe2;
	font-size:14px;
	margin-right: 20%;
}
.workshow .art p.price{text-align: left;}
.workshow .art p.price span{font-size: 16px;color: #6c6c6c;}
.workshow .art p.price span b{color: #d31111;font-size: 18px;margin: 0 0 0 5px;}
.workshow .art p.price span.old{font-size: 13px;text-decoration: line-through;color: #919191;margin-right: 10px;}
.workshow .art p.price span.old b{font-weight: normal;color: #919191;font-size: 13px;margin: 0;}
.workshow .photo{
	width: 89%;
	transition: all cubic-bezier(0.39, -0.08, 0, 1.21) 1s;
}
.workshow .photo a{
	display:block;
	background-repeat:no-repeat;
	background-position:50% 50%;
    background-size: contain;
}
.workshow .photo a img{
	width:100%;
}
.workshow section:nth-child(even) h2{
    right: inherit;
    left: 0;	
}
.workshow section:nth-child(even) .art{
    left: inherit;
    right: 7%;	
}
.workshow section:nth-child(even) .photo{
    margin-left: 11%;	
}
.moreshow p{
	text-align:center;
	margin: 10px 0;
}
#news{
    padding-top: 100px;
}
#news .newsList{
	margin-top: 60px;
}
#news .newsList section,
#news .newsList section div{
	outline:none;
}
#news .newsList .runset{
    margin: 80px 100px 0;
	outline:none;
	position:relative;
	transition: all cubic-bezier(0.39, -0.08, 0, 1.21) 1.5s;
}
#news .newsList .slick-center .runset{
    margin: 40px 100px;
}
#news .newsList .runset .photo img.action{
	position: absolute;
    top: -40px;
    left: -100px;
    z-index: 2;
	opacity:0;
	transition: all cubic-bezier(0.39, -0.08, 0, 1.21) 2s;
}
#news .newsList .slick-center .runset .photo img.action{
    left: -40px;
	opacity:1;
}

#news .newsList .runset .photo a{
	display:inline-block;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:cover;
	width: 100%;
}
#news .newsList .runset .photo a img{
	width:100%;
}
#news .newsList .runset h2{
    font-size: 18px;
    font-weight: normal;
	margin: 30px 30px 0;
}
#news .newsList .runset h2 a{
	color: #434343;
}
#news .newsList .runset span{
	margin: 5px 30px 0;
	font-size:12px;
	color: #62b7db;
}
#news .newsList .runset p{
	color: #898989;
    font-size: 14px;
    margin: 10px 30px 0;
	line-height: 170%;
    height: 46px;
    overflow: hidden;
}
#news .newsList .runset p.more{
	text-align:center;
	margin: 50px auto 0;
	transition: all cubic-bezier(0.67, -0.4, 0, 1.11) 3s;
	opacity:0;
}
#news .newsList .slick-center .runset p.more{
	opacity:1;
}
#news .newsList .runset p.more a,
#about article p a,
.moreshow p a{
    display: inline-block;
    color: #313131;
    border: 1px solid #313131;
    padding: 8px 40px 8px 45px;
	position:relative;
}
#news .newsList .runset p.more a:after,
#about article p a:after,
.moreshow p a:after{
	content: '';
    width: 100%;
    height: 100%;
	border:1px dashed #c73a3a;
    position: absolute;
    left: 2px;
    top: 2px;
    z-index: -1;
	transition: all cubic-bezier(0.67, -0.4, 0, 1.11) 0.6s;
	opacity:0;
}
#news .newsList .runset p.more a img,
#about article p a img,
.moreshow p a img{
	display:inline-block;
    vertical-align: middle;
    margin-left: 15px;	
}
.moreshow p a img{
    vertical-align: bottom;	
}
#news .slick-prev{
    left: calc(33% - 90px);
    top: 20%;
	background-image:url(/images/04/index-news-arrow.png);
	background-repeat:no-repeat;
	background-position:50% 50%;
	width:60px;
	height:58px;
	z-index:8;
	-webkit-filter: drop-shadow(0px 0px 0px black);
	transition:all linear 0.3s;
}
#news .slick-next{
    right: calc(33% - 90px);
    top: 20%;	
	background-image:url(/images/04/index-news-arrow2.png);
	background-repeat:no-repeat;
	background-position:50% 50%;
	width:60px;
	height:58px;
	z-index:8;
	-webkit-filter: drop-shadow(0px 0px 0px black);
	transition:all linear 0.3s;
}
#news .slick-prev:before,
#news .slick-next:before{
	display:none;
}

#bookBox{
    padding: 100px 0;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}
#bookBox .workshow section{
    margin: 50px 20px;
}
#bookBox .workshow h2{
    background: #e64a00;
    right: initial;
    top: 0;
    left: 0;
}
#bookBox .workshow section:hover h2{
    background: transparent;
}
#bookBox .workshow .art{
    position: initial;
    width: calc(100% - 40px);
}
#bookBox .workshow .art p a{margin-right: 0;display: inline-block;background: #29abe2;color: #fff;font-size: 12px;line-height: 110%;padding: 5px 10px;box-shadow: 0 0 3px #10485f inset;}
#bookBox .workshow .art p a:hover{background: #1179a5;}
#bookBox .workshow .photo a{
	background-size:cover;
}
.workshow .photo{
    width: 100%;
}
#about{
	position:relative;
	padding-top: 80px;
}
#about .p5{
	right: -20%;
    top: -30%;
}
#about .p6{
	left: -20%;
    bottom: -150%;
}

#about article{
	float: right;
	z-index: 5;
    width: 48%;
	position:relative;
}
#about article .title{
	position: absolute;
    left: -20%;
    top: 30px;
}
#about article .title h2{
    color: #fff;
    font-size: 36px;
    background: #e68c00;
    display: inline-block;
    font-weight: normal;
    padding: 15px 40px;
    line-height: 110%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#about article .title h2 span{
	font-size:18px;
	margin-left: 15px;
}

#about article .art{
	text-align: left;
    margin: 130px 0 50px 70px;
    line-height: 190%;
	font-size: 16px;
}
#about article p{
	text-align:right;
	margin-right: 10px;
}
#about .bg{
	float: left;
	width:52%;
	background-repeat:no-repeat;
	background-position:50% 50%;
    margin: 10px 0;	
	box-shadow: 0 0 0px #757575;
	transition:linear all 0.3s;
	background-size: cover;
	position:relative;
}
#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 0.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%;	
}
#about .bg img{
	width:100%;
}
@media screen and (max-width: 1440px) {
	figure figcaption,
	#about article .title h2{
	    font-size: 30px;	
	}
	figure span,
	.workshow .art p a{
		font-size:12px;
	}
	.workshow h2,
	#about article .title h2 span{
		font-size:16px;
	}
	#news .newsList .runset{
		margin: 80px 70px 0;	
	}
	#news .newsList .slick-center .runset{
		margin: 40px 70px;
	}
	#news .slick-next{
		right: calc(25% - 30px);
		top: 40%;	
	}
	#news .slick-prev{
		left: calc(25% - 30px);	
		top: 40%;
	}
	#about article .art{
		margin: 120px 0 50px 40px;	
	}
}
@media screen and (min-width: 1024px) {
	#about .framework:hover .bg{
		box-shadow: 0 0 10px #757575;
	}
	#news .slick-prev:hover,
	#news .slick-next:hover{
		-webkit-filter: drop-shadow(2px 2px 1px #e65c00);
	}
	#news .newsList .runset p.more a:hover:after,
	#about article p a:hover:after,
	.moreshow p a:hover:after{
		opacity:1;
	}
	.workshow section:hover h2{
		right: 5%;
	}
	.workshow section:hover .art{
		bottom: -19%;	
	}
	#work .workshow section:hover .photo{
		margin-left: 5%;	
	}
	#work .workshow section:nth-child(even):hover .photo{
		margin-left: 6%;	
	}
	#work .workshow section:nth-child(even):hover h2{
		left: 5%;
		right: initial;
	}
	#work .workshow .art:hover:after{
		transform: rotate(90deg);
		bottom: -30%;
		right: 35%;
		background: #e60000;
	}
}
@media screen and (max-width: 980px) {
	#news .newsList{
		width:90%;
		margin: 0 auto;
	}
	#news .slick-next{
		right: -3%;	
	}
	#news .slick-prev{
		left: -3%;	
	}
	#news .newsList .runset .photo img.action,
	#news .newsList .runset p.more{
		opacity:1;
	}
	#news .newsList .runset .photo img.action{
		width:20%;
		left:-5%;
	}
	#news .newsList .runset{
		margin:80px 100px 0;
	}
	#about .bg{
		width:45%;
	}
	#about article{
		width:55%;
	}
	.sliiderR, .sliiderL{
	    max-width: 50%;	
	}
}
@media screen and (max-width: 768px) {
	.workshow .art,
	.workshow section:hover .art{
		bottom: -50%;
		width: 40%;
	}
	.workshow .photo{
		width:92%;
	}
	#bookBox .workshow .photo{
		width:100%;
	}
	#bookBox .workshow .art{width: calc(100% - 30px);padding: 15px;}
	#about article .title h2{font-size: 24px;padding: 15px 30px;}
	#bookBox{padding: 100px 0 0;}
}
@media screen and (max-width: 640px) {
	.workshow h2,
	.workshow section:hover h2{
	    top: -10%;	
		right:0;
		padding: 8px 35px;
	}
	.workshow section:nth-child(even):hover h2{
	    left: 0;
		right:inherit;
	}
	.workshow .art,
	.workshow section:hover .art,
	.workshow section:nth-child(even) .art{
		bottom: -70%;
		width: calc(95% - 42px);
		padding: 10px 20px;
		box-shadow: none;
		border: 1px solid #e9e9e9;
		position: inherit;
		position: initial;
	}
	.workshow .art h3{
		height:46px;
	}
	.workshow .photo{
		width: 95%;
	}
	.workshow section:nth-child(even) .photo{
		margin-left: 5%;
	}
	.workshow section:nth-child(even) .art{
	    margin-left: 5%;
	}
	.workshow section{
		margin: 80px 0;	
	}
	.workshow .art:after{
	    height: 40%;
		right: 20%;	
		bottom: -10%;		
	}
	.workshow section:nth-child(even) .art:after{
		right: 10%;	
	}
	#news .newsList .runset h2,
	#news .newsList .runset p,
	#news .newsList .runset span{
		margin-left:0;
		margin-right:0;
		margin-top: 10px;
	}
	#news .slick-next,
	#news .slick-prev{
	    background-size: contain;
		width: 40px;
		height: 40px;	
	}
	#news .newsList .runset{
		margin:80px 70px 0;
	}
	#about article .title{
    left: 0;
}
	#about article .title h2{
	    font-size: 20px;
	    padding: 10px 30px;
	}
	#about .bg{
	    width: 50%;
		position:absolute;
	}
	#about .framework{
		position:relative;
	}
	#about article{
		width: 70%;
	}
	#about article .art{
		text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
		margin: 90px 0 50px 40px;
	}
	.workshow h2{
	    font-size: 14px;	
	}
	#youtube .UTwo a{
		width: 60px;
		height: 60px;
		line-height: 60px;
		left: calc(20% - 30px);
		top: calc(100% - 90px);
	}
}
@media screen and (max-width: 480px) {
	figure figcaption{
	    font-size: 24px;	
	}
	.workshow h2, .workshow section:hover h2{
		top: -10%;
	}
	#news .newsList .runset p.more a, #about article p a, .moreshow p a{
		padding: 8px 20px 8px 25px;
		font-size: 12px;
	}
	#news .newsList .runset p.more a img, #about article p a img, .moreshow p a img{
		height:14px;
		vertical-align: middle;
	}
	#news .newsList .runset{
		margin:80px 20px 0;
	}
	#about .bg{width: 100%;position: initial;}
	#about article{
		width:100%;
	}
	#about article .title{
		left: 0%;	
	}
	#about article .art{
		margin: 100px 0 30px 0;
		line-height: 150%;
	}
	#about article .title h2 span{
		font-size:12px;
	}
	#about article .title h2{
	    padding: 7px 30px;	
	}
	#news .newsList .runset h2 a{
		font-size:12pt;
	}
	#news{
		background-size: 300%;
		padding-top: 50px;
	}
	#news .newsList .runset p.more{
		margin: 20px auto 0;	
	}
	#youtube .UTwo a{
		left: calc(50% - 30px);
		top: calc(50% - 30px);
	}
}