.wrap {position: relative;/* margin-top: -6vw; */z-index: 10;}
.wrap h4.stitle {margin-bottom: 10px;text-transform: uppercase;font-weight: bolder;font-size: 55px;color: #0033a0;font-family: 'Cantarell', sans-serif;line-height: 110%;}
.wrap h4.stitle:first-letter {
    margin-right: 2px;
    color: #facd00;
}
.wrap h2.title {font-size: 26px;color: #222;}
.wrap p.more a {padding: 14px 40px;background: #0033a0;display: inline-block;color: #fff;}
.wrap p.more a span {margin-right: 30px;font-family: 'Cantarell', sans-serif;}

/* productBox */
#productBox  { padding-bottom: 4vw; }
#productBox .bgTxt { position: absolute; width: 100%; font-weight: 700; text-align: center; font-family: 'Rubik', sans-serif; font-size: 10vw; color: #f1f1f1; z-index: 1; bottom: -8vw; left: 0; }
#productBox .list { position: relative; z-index: 2; }
#productBox .list .item { position: relative; margin: 0 30px 10px; background: #fff no-repeat 50% / cover; box-shadow: 0 0 10px rgba(0, 0, 0, .5); }
#productBox .list .item img { position: relative; width: 100%; z-index: 1; }
#productBox .list .item a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 3; }
#productBox .list .item .info { position: absolute; width: 100%; height: 100%; top: 150%; z-index: 2; }
#productBox .list .item .info h3 { margin: calc((100% - 117px) / 2) 0; padding: 0 15%; height: 61px; font-weight: normal; font-size: 20px; color: #fff; -webkit-line-clamp: 2; }
#productBox .list .item .info p { padding: 13px 20px; background: #fff; }

/* aboutBox */
#aboutBox {margin: 50px auto;font-size: 0;}
#aboutBox:after {
    position: absolute;
    content: '';
    width: 20%;
    height: 84%;
    right: 0;
    bottom: 200px;
    background-image: url(/images/33/about-Bg1.png);
    background-repeat: no-repeat;
    background-position: 50% 0;
    z-index: -3;
    animation-name: newsbg;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    zoom: 55%;
}
@keyframes newsbg{
	0%{
		background-position: 200% 5%;
	}
	100%{
		background-position: 100% 0;
	}
}

#aboutBox .aboutImg,#aboutBox .info, #customBox .row {margin: 0 5% 0 0;width: 40%;display: inline-block;}
#aboutBox .aboutImg a.photo{    border-radius: 28% 72% 49% 51% / 30% 52% 48% 70%;
}
#aboutBox .info , #customBox .youtubeBox { margin: 0 0 0 5%; }
#aboutBox .info p.arts {margin-bottom: 50px;color: #585858;font-size: 18px;margin-top: 5px;}
#aboutBox .info p.more , #aboutBox .info #SeoStarRating { margin-bottom: 15px; text-align: right; }

/* customBox */
#customBox { position: relative; padding: 110px 0 0; font-size: 0; z-index: 2; }
#customBox:before { position: absolute; width: 100%; height: calc(100% - 110px); background: #16172e; display: block; top: 0; left: 0; z-index: 1; content: ""; }
#customBox .workframe { z-index: 2; font-size: 0; }
#customBox .row { vertical-align: top; }
#customBox .listBox ul li h3 { margin: 20px 0 10px; font-size: 40px; color: #fff; }
#customBox .listBox ul li article { font-size: 18px; color: #909090; }
#customBox .listBox .btn { text-align: right; }
#customBox .listBox .btn a { position: relative; color: #eee; text-align: center; }
#customBox .listBox .btn a#nextBtn:before { color: #6b6b78; content: "|"; }
#customBox .listBox .btn a span { position: absolute; width: 80px; height: 27px; display: block; text-align: center; line-height: 27px; top: 0; left: 0; -webkit-transform: translate(0) scale(0); transform: translate(0) scale(0); -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; }
#customBox .listBox .btn a i { text-align: center; width: 80px; height: 27px; font-size: 27px; -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; }








#customBox .youtubeBox { position: relative; }
#customBox .youtubeBox:before { position: absolute; width: 40%; height: 100%; background: url(/images/33/dote.png) 0 0; top: -2vw; left: 90%; z-index: -1; opacity: 0.4; content: ""; }
#customBox .youtubeBox iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#customBox .youtubeBox .playBtn { position: absolute; width: 100px; height: 100px; background: #ff5860; border-radius: 50%; display: block; text-align: center; line-height: 100px; top: calc((100% - 100px) / 2); left: -50px; -webkit-animation: playbtn 1s infinite alternate ease-in-out; animation: playbtn 1s infinite alternate ease-in-out; }
#customBox .youtubeBox .playBtn i { font-size: 36px; color: #fff; }
#customBox .contact { position: absolute; padding-left: calc((100% - 1300px) / 2); width: 650px; height: 110px; background: #21bcd8; line-height: 110px; bottom: 0; left: 0; z-index: 3; }
#customBox .contact a { display: inline-block; }
#customBox .contact font { text-transform: uppercase; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 40px; color: #fff; }
#customBox .contact i { margin: 10px 0 10px 30px; font-size: 30px; color: #fff; -webkit-animation: arrowright 1s infinite alternate ease-in-out; animation: arrowright 1s infinite alternate ease-in-out; }

/* NewsBox */
#NewsBox { position: relative; padding: 80px 0; }
#NewsBox .bg, #bookBox .bg {position: absolute;width: 100%;height: 100%;background: no-repeat 50% / cover;top: 0;left: 0;opacity: .25;-webkit-filter: grayscale(1);}
#NewsBox h4.stitle, #NewsBox h2.title { text-align: center; }
#NewsBox #newList li{
    margin: 0 0.3%;
}
#NewsBox #newList li .img {margin-bottom: 20px;}
#NewsBox #newList li .img a.photo img{
    display: block;
}
#NewsBox #newList li .img a{
    background-size: cover;
}
#NewsBox #newList li .info p{
    display: flex;
    flex-wrap: wrap;
}

#NewsBox #newList li .img a.photo img , #bookBox ul li a.photo img ,#bookBox2 ul li a.photo img { width: 100%; }
#NewsBox #newList li .info p a { margin-right: 15px; padding: 2px 15px; background: #ffd9db; display: inline-block; color: #ff5860; }
#NewsBox #newList li .info p font { font-family: 'Rubik', sans-serif; color: #656565; }
#NewsBox #newList li .info h3 a {margin-top: 10px;height: 70px;font-weight: 500;font-size: 20px;color: #434343;-webkit-line-clamp: 2;}
#NewsBox p.more , #bookBox p.more ,#bookBox2 p.more { margin-top: 60px; text-align: center; }

/* bookBox */
#bookBox {position: relative;padding: 80px 0;background: #fff;}
#bookBox h4.stitle, #bookBox h2.title {text-align: center;}
#bookBox .slick-slider{
    margin-top: 30px;
}
#bookBox .slick-slider .slick-track{
	margin:0 auto;
}
#bookBox ul li a.photo , #bookBox ul li h3 { margin: 0 20px; background-color: #fff; }
#bookBox ul li h3 a { padding: 15px 25px; height: 32px; font-size: 19px; color: #222; -webkit-line-clamp: 1; }

/* bookBox2 */
#bookBox2 {position: relative;padding: 80px 0;background: #fff;}
#bookBox2 .bg{
	position:absolute;
	width:100%;
	height:100%;
	background-color: #f9f9f9;
	top: 0;
}
#bookBox2 h4.stitle, #bookBox2 h2.title {text-align: center;}
#bookBox2 .slick-slider{
    margin-top: 30px;
}
#bookBox2 .slick-slider .slick-track{
	margin:0 auto;
}
#bookBox2 ul li a.photo , #bookBox2 ul li h3 { margin: 0 20px; background-color: #fff; }
#bookBox2 ul li h3 a { padding: 15px 25px; height: 32px; font-size: 19px; color: #222; -webkit-line-clamp: 1; }

@keyframes playbtn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@-webkit-keyframes playbtn { 0%, 100% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } }
@keyframes arrowright { 0%, 100% { margin: 10px 0 10px 30px; } 50% { margin: 10px 10px 10px 20px; } }
@-webkit-keyframes arrowright { 0%, 100% { margin: 10px 0 10px 30px; } 50% { margin: 10px 10px 10px 20px; } }

/* course */
#course{
    padding: 50px 0;
}
#course h4.stitle, #course h2.title {
    text-align: center;
}
.wow {
	animation: fadeIn 1.5s both;
	-webkit-animation: fadeIn 1.5s both;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;	
}
.delay1 {
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
}
.delay2 {
	animation-delay: 1.0s;
	-webkit-animation-delay: 1.0s;
}
#course .tit {
	position: relative;
	text-align: center;
	z-index: 2;
}
#course .tit h3 {
	text-align: center;
	font-size: 33px;
}
#course .tit font {
	padding: 0 20px;
	background: #fff;
	display: inline-block;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#course:hover .tit h3 ,
#course:hover .tit font{
	letter-spacing: 5px;
}
#course ul {
	overflow: hidden;
	position: relative;
	margin-top: 20px;
}
#course ul li {
	display: inline-block;
	width: calc((100%/4) - 50px);
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;
	margin: 60px 20px 20px;
}
#course ul li .item {
	padding: 80px 30px 30px;
	position: relative;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	border-bottom: 4px solid #0033a0;
}
#course ul li:hover .item {border-bottom: 4px solid #facd00;}
#course ul li .item .circle {
	position: absolute;
	width: 114px;
	height: 114px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	box-sizing: border-box;
	text-align: center;
	line-height: 114px;
	top: -50px;
	left: calc(50% - 55px);
	background-color: white;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
#course ul li .item .circle img{
    width: 65px;
}
#course ul li .item:hover .circle {
	animation: flipInX 1.5s both;
	-webkit-animation: flipInX 1.5s both;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;	
}
@keyframes flipInX{
	0%{ transform: perspective(400px) rotateX(90deg); animation-timing-function: ease-in; opacity:0; }
	40%{ transform: perspective(400px) rotateX(-20deg); animation-timing-function: ease-in; }
	60%{ transform: perspective(400px) rotateX(10deg); opacity: 1; }
	80%{ transform: perspective(400px) rotateX(-5deg); }
	to{ transform:perspective(400px); }
}
@-webkit-keyframes flipInX{
	0%{ -webkit-transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; opacity:0; }
	40%{ -webkit-transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; }
	60%{ -webkit-transform: perspective(400px) rotateX(10deg); opacity: 1; }
	80%{ -webkit-transform: perspective(400px) rotateX(-5deg); }
	to{ -webkit-transform:perspective(400px); }
}
#course ul li .item p {
	text-align: center;
	font-size: 22px;
	margin: 15px 0;
	font-weight: bold;
}

#course ul li .item article{
    font-size: 16px;
    height: 105px;
    overflow: hidden;
}
#course ul li .item p a{
    background-color: white;
    color: #292929;
    border: 1px solid #d2d2d2;
    padding: 3px 15px;
}
#course ul li .item p a:hover{ 
    background-color: #313131;
    color: #ffffff;
    border: 1px solid #313131;}
#course ul li .item p a span{
    margin-right: 0;
    font-size: 14px;
}
#course .imgBox {
	overflow: hidden;
}
#course .imgBox p {
	margin: 0 1% 0 0;
	overflow: hidden;
	float: left;
	width: 49%;
	animation-name: fadeInLeft;
	-webkit-animation-name: fadeInUp;
}
#course .imgBox p:nth-child(2) {
	margin: 0 0 0 1%;
	animation-name: fadeInRight;
	-webkit-animation-name: fadeInRight;
}
#course .imgBox p:hover img {
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	transform: rotate(3deg);
}

@media screen and (max-width:1500px) {
	#customBox .contact { padding-left: calc((100% - 1280px) / 2); width: 640px; }
	#aboutBox:after {    zoom: 40%;}
}
@media screen and (max-width:1366px) {
	.wrap h4.stitle {    font-size: 45px;}
}
@media screen and (max-width:1360px) {
	#customBox .contact { padding-left: calc((100% - 1160px) / 2); width: 580px; }
}
@media screen and (min-width:1281px) {
	#productBox .list .item:hover img { background: rgba(27, 28, 56, .4); }
	#productBox .list .item:hover .info { top: 0; }
	#customBox .listBox .btn a:hover span { -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); }
	#customBox .listBox .btn a:hover i { -webkit-transform: rotate(0) scale(0); transform: rotate(0) scale(0); }
	#customBox .youtubeBox .playBtn:hover { background: #2c2a2a; }
	#NewsBox #newList li .info p a:hover { background: #ff5860; color: #fff; }
	#bookBox ul li:hover a.photo img ,bookBox2 ul li:hover a.photo img { background: rgba(44, 44, 44, .6); }
}
@media screen and (max-width:1280px) {
	#productBox .list .item img { background: rgba(27, 28, 56, .4); }
	#productBox .list .item .info { top: 0; }
	#aboutBox:after {    bottom: 280px;}
}
@media screen and (max-width: 1024px) {
	#customBox { padding: 7vw 0; }
	#customBox:before { height: 100%; }
	#customBox .row { margin: 0 0 30px; width: 80%; }
	#customBox .youtubeBox { margin: 10px 0 0; width: auto; }
	#customBox .contact { padding-left: 5%; width: 85%; bottom: -20px; }
	.wrap h4.stitle {    font-size: 35px;}
	.wrap h2.title {    font-size: 22px;}
	#aboutBox:after {    bottom: 510px;    width: 30%;}
	#course ul li {    width: calc((100%/2) - 50px);}
}
@media screen and (max-width:980px) {
	#productBox .bgTxt { font-size: 15vw; bottom: -12vw; }
	#aboutBox {position: relative;}
	#aboutBox:after{    bottom: -900px;    width: 40%;}
	#aboutBox .info p.arts {    margin-bottom: 0;}
	#aboutBox .aboutImg {width: 75%;display: block;margin: 0 auto;}
	#aboutBox .aboutImg a.photo { height: 100%; }
	#aboutBox .info { position: relative; margin: 0; width: 100%; display: block; z-index: 2; }
	#NewsBox #newList { margin: 0 auto; width: 80%; }
	#course ul li{    width: calc((100%/1) - 50px);}
}
@media screen and (max-width:640px) {
	#productBox .list .item { margin: 0 10px 10px; }
}
@media screen and (max-width:600px) {
	#productBox .list .item { margin: 0 10vw 10px; }
}
@media screen and (max-width:500px) {
	#customBox .contact { height: 14vw; line-height: 14vw; }
	#customBox .contact font { font-size: 9vw; }
	#customBox .contact i { font-size: 8vw; }
	#NewsBox #newList { width: 100%; }
	#aboutBox:after {    bottom: -1120px;    width: 50%;    zoom: 25%;}
}