.wow { animation-duration: 1.5s; animation-name: fadeInUp; }

/* aboutFunc */
#aboutFunc{
    padding: 100px 0;
    background: #fff;
    position:relative;
    overflow: hidden;
}
#aboutFunc:after{
	position: absolute;
	content: '';
	width: 540px;
	height: 540px;
	right: 1000px;
	top: 120px;
	background-image: url(/images/22/aboutImg-01.gif);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 100% 0;
	z-index: 0;
	zoom: 30%;
}
@keyframes newsbg{
	0%{
		background-position: 105% 5%;
	}
	100%{
		background-position: 100% 0;
	}
}

#aboutFunc .speBox{
    width: 1160px;
    margin: 0 auto;
}
#aboutFunc .textBox{position:relative;padding-bottom: 50px;}
#aboutFunc .textBox:after {
    content: "";
    position: absolute;
    width: 70%;
    height: 410px;
    background: #fbfbfb;
    z-index: -1;
    right: 0;
    bottom: -20px;
}
#aboutFunc .youtubebox{width:50%;float: left;}
#aboutFunc .Introduction{
    float: right;
    width: 45%;
}

#youtube{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;height:100%}
#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%}
#about-slide .slick-prev{opacity:0;z-index: -999;}
#about-slide .slick-next{right: -70px;height: 46px;width: 46px;z-index: 2;}
#about-slide .slick-next:before{background-image: url(/images/22/index-about-sccrow.png);width: 46px;height:46px;content:'';display:block;}
#about-slide .slick-dots{top:10px;text-align:right;height:30px;width:auto;right:0}
#about-slide .slick-dots li button:before{font-size:10px;color:#fff}
#about-slide .about,#about-slide .free{}
#about-slide .about .speBoxTitle,#about-slide .free h3{font-size: 30px;line-height:120%;}
#about-slide .about .subBoxTitle{font-family:'Merriweather',serif;font-weight:400;font-size:15px;color:#a7a7a7;line-height:110%;margin-top:5px;width:70%}
#about-slide .about .arts{font-size: 15px;line-height:180%;margin:40px 0;width: 75%;color: #a2a2a2;text-align: justify;overflow: hidden;height: 185px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 7;-webkit-box-orient: vertical;}
#about-slide .free p{font-size: 15px;line-height:180%;margin:40px 0;width: 75%;color: #565656;text-align: justify;overflow: hidden;height: 185px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 7;-webkit-box-orient: vertical;}
#about-slide .about .more{
    position: absolute;
    bottom: 70px;
    left: calc(50% - 50px);
}
#about-slide .about .more a{font-weight:400;color: #ffffff;font-size: 13px;transition:all linear .2s;font-family: 'Roboto', sans-serif;background: #232323;padding: 15px 40px;display: inline-block;letter-spacing: 3px;text-transform: uppercase;}
#about-slide .about .more:hover a{
    letter-spacing: 5px;
}
/* product */
#product {position: relative;padding: 130px 0 80px;background: no-repeat 50% / cover;}
#product .speBox {position: relative;width: 1366px;margin: 0 auto;}
#product .speBox h4.more{
    text-align: center;
    margin-top: 50px;
}
#product .speBox h4.more a{
    font-weight: 400;
    color: #000000;
    font-size: 13px;
    transition: all linear .2s;
    font-family: 'Roboto', sans-serif;
    background: #ffffff;
    padding: 15px 40px;
    display: inline-block;
    letter-spacing: 3px;
    text-transform: uppercase;
    border: 1px #ddd solid;
}
#product .speBox h4.more:hover a{letter-spacing: 5px;}
#prolay .pro-list{
    text-align: center;
    margin-top: 30px;
}
#prolay .pro-list >div{
    display: inline-block;
    width: calc((100%/3) - 25px);
    margin: 0 10px;
}
#prolay .p-box {position: relative;margin: 5px;}
#prolay .p-box a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 4; }
#prolay .p-box .p-border { overflow: hidden; position: relative; }
#prolay .p-box .p-border:after { position: absolute; width: 80%; height: 100%; background: rgba(255, 255, 255, .3); display: block; left: 50%; top: 0; opacity: 0; z-index: 2; transition: all cubic-bezier(.49, .01, 0, 1) .7s; }
#prolay .p-box .p-border .photo {position: relative;z-index: 2;background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;}
#prolay .p-box .p-border .photo:after{opacity:0;}
#prolay .p-box:hover .p-border .p-info {opacity: 1;bottom: 35px;}

#prolay .p-box:hover .p-border .photo:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: -1;
    right: 0;
    bottom: 0;
    opacity: .2;
}
#prolay .p-box .p-border .photo img { width: 100%; }
#prolay .p-box .p-border .p-info {position: absolute;color: #fbcd62;bottom: 0;width: 100%;left: 0;z-index: 3;opacity: 0;transition: all linear .4s;}
#prolay .p-box .p-border .p-info:after { position: absolute; width: 100%; height: 100%; background: url(/images/22/index_recommend_text_bg.jpg) 50% / auto; display: block; opacity: .9; left: -100%; top: 0; z-index: -1; transition: all linear .4s; }
#prolay .p-box .p-border .p-info h3 {font-size: 22px;line-height: 130%;font-weight: bold;color: #fff;text-align: center;}
#prolay .p-box .p-border .p-info .describe {font-size: 14px;line-height: 150%;color: #fff;text-align: center;letter-spacing: 2px;}
#prolay .p-box .p-border .p-info .price { color: #d4a66b; }
#prolay .p-box .p-border .p-info .price span { margin-right: 15px; font-size: 13px; }
#prolay .p-box .p-border .p-info .price span.now { font-size: 17px; color: #fff; }
#product .titleSet {}
#product .titleSet .speBoxTitle {text-align: center;font-family: 'Roboto', sans-serif;font-size: 45px;line-height: 100%;color: #fff;display: none;}
#product .titleSet .subBoxTitle {text-align: center;font-size: 15px;letter-spacing: 5px;font-weight: normal;color: #fff;display: none;}
	
/* controller */
.controller { position: relative; overflow: hidden; }
.controller #NewsBox { background: url(/images/22/index_news_bg.jpg) #000 no-repeat 50% / cover; float: left; width: 65%; }

/* NewsBox */
#NewsBox .speBox { padding: 80px 50px; text-align: right; }
#NewsBox .speBox .titleSet { margin-right: 50px; width: 150px; display: inline-block; color: #fff; }
#NewsBox .speBox .titleSet h2 , #bookBox .speBox h2 { margin-bottom: 5px; text-align: center; font-size: 35px; line-height: 110%; }
#NewsBox .speBox .titleSet h3 { text-align: center; }
#NewsBox .speBox .titleSet h3 a , #bookBox .speBox p a { display: block; font-weight: 400; color: #eaeaea; font-size: 15px; line-height: 120%; transition: all linear .2s; }
#news { margin: 60px 280px 0 0; }
#news .border { position: relative; margin: 0 13px; }
#news .border a { position: absolute; width: 100%; height: 100%; display: block; left: 0; top: 0; z-index: 3; }
#news .border .photo , #book .mofd .photo { background: #000 no-repeat 50% / contain; }
#news .border .photo img , #book .mofd .photo a img { width: 100%; }
#news .border .news-info { margin: -50px 20px 10px; padding: 10px 20px; background: linear-gradient(to bottom, rgba(0, 0, 0, .65) 0%,rgba(0, 0, 0, 0) 100%); }
#news .border .news-info p { font-family: 'Oswald',sans-serif; font-size: 13px; text-align: center; color: #a5936a; }
#news .border .news-info h3 { overflow: hidden; margin: 10px 0 40px; height: 50px; text-align: center; color: #fff; font-weight: 400; font-size: 16px; line-height: 160%; }
#news .border .news-info span { position: relative; margin: 0 auto; width: 40px; height: 1px; background: #635840; display: block; transition: all linear .2s; }
#news .border .news-info span:before { position: absolute; width: 10px; height: 1px; background: #635840; display: block; right: 0; transform: rotate(35deg); transform-origin: right; content: ""; }

/* bookBox */
.controller #bookBox , #bookBoxbg { position: absolute; width: 50%; height: calc(100% - 203px); background: #000 no-repeat 50% / cover; right: 0; top: 203px; }
#bookBoxbg { background-image: url(/images/22/bookBoxbg.jpg); }
#bookBox .speBox { position: absolute; top: -120px; left: calc(280px + 10%); z-index: 3; }
#bookBox .speBox p a { color: #9a9a9a; }
#book { padding: 80px; }
#book .bList { position: relative; }
#book .bList >div { z-index: 3; }
#book .bList:before { position: absolute; width: 360px; max-width: 50%; height: 290px; display: block; background: url(/images/22/index_more_leave.png) no-repeat 100% / contain; right: 0; bottom: 100%; z-index: 2; }
#book .bList:after { position: absolute; width: 240px; height: 200px; background: url(/images/22/index_more_icon.png) no-repeat 50%; display: block; left: 0; bottom: 0; z-index: 2; }
#book .mofd .photo { background-size: cover; }
#book .mofd h3 { padding: 50px 0; text-align: right; }
#book .mofd h3 a { padding: 10px 170px 10px 10px; border-bottom: 1px solid rgba(255, 255, 255, .27); display: inline-block; color: #fff; font-weight: 400; font-size: 18px; line-height: 110%; }
#freebox #freeboxlist { overflow: hidden; }
#freebox #freeboxlist >div { margin-right: -4px; width: calc(100% / 3); display: inline-block; }
#freebox #freeboxlist .free { padding: 70px; }
#freebox #freeboxlist .free h3 { margin-bottom: 20px; text-align: center; font-size: 30px; line-height: 120%; color: #2b2929; }
#freebox #freeboxlist .free p { text-align: center; font-size: 16px; line-height: 160%; color: #545454; }

@media screen and (min-width:1025px) {
	#youtube .UTwo a:hover { width: 110px; height: 110px; line-height: 110px; font-size:34px; left: calc(50% - 55px); top: calc(50% - 55px); }
	#prolay .p-box:hover .p-border:after { width: 45%; left: 0; opacity: 1; }
	#prolay .p-box:hover .p-border .p-info:after { left: 0; }
	#news .slick-track >div:nth-child(3n-1) .border { margin-top: 50px; }
	#news .border:hover .news-info span { width: 50px; }
	#aboutFunc #about .more a:hover , #NewsBox .speBox .titleSet h3 a:hover , #bookBox .speBox p a:hover { letter-spacing: .2em; }
    #product{
    background-attachment: fixed;
}
}
@media screen and (max-width:1680px) {
#aboutFunc:after{
    right: 520px;
}
}
@media screen and (max-width:1440px) {
	#news { margin-right: 160px; }
	#aboutFunc:after{right: 200px;}
}
@media screen and (max-width:1366px) {
#product .speBox{
    width: 90%;
}
}
@media screen and (max-width:1280px) {
	#news { margin-right: 140px; }
	#news .border { margin: 0 8px; }
	#NewsBox .speBox { padding: 80px 50px 80px 10px; }
	#book { padding: 80px 0 80px 80px; }
	#aboutFunc .speBox{
    width: 80%;
}
#youtube{
    padding: 40px 0;
}
#about-slide .about .arts, #about-slide .free p{
    height: 215px;
    -webkit-line-clamp: 8;
}
#aboutFunc .textBox:after{
    height: 430px;
}
}
@media screen and (max-width:1199px) {
	.controller #NewsBox { float: none; width: 100%; }
	.controller #bookBox { position: initial; width: 100%; height: auto; }
	#bookBoxbg { display: none; }
	#book .bList:before { width: 200px; height: 160px; }
	#bookBox .speBox { position: initial; padding-top: 60px; display: block; }
	#bookBox .speBox h2 { color: #fff; }
	#bookBox .speBox p { text-align: center; }
	#news { margin: 0; }
	#news .slick-track >div:nth-child(3n-1) .border { margin-top: 0; }
	#NewsBox .speBox .titleSet { margin: 0 auto 50px; width: auto; display: block; }
	#NewsBox .speBox { padding: 80px 10px; }
	#book { padding: 40px 20px; }
	#book .bList:after { width: 150px; background-position: 50% 100%; background-size: contain; }
}
@media screen and (max-width:1024px) {
	#product .flytxt { text-align: center; font-size: 17px; line-height: 120%; color: #2d2c2c; }
	#prolay { margin-top: 10px; }
	#product .titleSet .speBoxTitle { text-align: center; }
	#product .titleSet .subBoxTitle { margin-top: 10px; text-align: center; }
	#product .titleSet .subBoxTitle a { margin-bottom: 20px; display: block; font-weight: 400; color: #696969; }
	#prolay .p-box .p-border:after { width: 45%; left: 0; opacity: 1; }
	#prolay .p-box .p-border .p-info:after { left: 0; }

	#freebox #freeboxlist >div { margin-right: 0; width: 100%; }
	#aboutFunc .textBox:after{
    bottom: -80px;
}
#about-slide .about .more{
    bottom: 30px;
}
#aboutFunc:after{
    right: 80px;
    zoom: 25%;
}
}
@media screen and (max-width:768px) {
	#prolay .p-box .p-border .p-info h3 {}
	#prolay .p-box .p-border .p-info {
    bottom: 90px;
}
	#prolay .p-box .p-border:after { width: 55%; }
	#prolay .p-box .p-border .p-info .describe {}
	#prolay .p-box .p-border .p-info .price span { display: block; }
	#freebox #freeboxlist .free { padding: 70px 50px; }
	#aboutFunc .youtubebox{
    float: none;
    width: 100%;
}
#about-slide .slick-next{
    right: -60px;
}
#aboutFunc .textBox:after{
    bottom: 0;
    right: 0;
}
#aboutFunc .Introduction{
    float: none;
    width: 100%;
    margin-top: 20px;
}
#about-slide .about .arts, #about-slide .free p{
    margin: 20px 0;
    height: 165px;
    -webkit-line-clamp: 6;
}
#aboutFunc{
    padding: 70px 0;
}
#about-slide .about .more{
    left: inherit;
    right: 0;
    bottom: 0;
}
#prolay .pro-list >div{
    width: calc(100% - 25px);
    margin: 10px;
}
}
@media screen and (max-width:640px) {
	#aboutFunc .youtubebox {}
	#aboutFunc #about .more { width: 50%; }
	#aboutFunc #about .more a { font-size: 17px; }
	#prolay .p-box .p-border .p-info {padding: 10px;max-width: calc(75% - 40px);}
	#book .mofd h3 { padding: 30px 0 50px; }
	#prolay .p-box .p-border .p-info {position: initial;width: calc(100% - 20px);max-width: calc(100% - 20px);}
	#prolay .p-box .p-border:after { display: none; }
	#prolay .p-box {margin: 0;}
	#aboutFunc:after{display:none;}
	#aboutFunc{
    padding: 45px 0;
}
#aboutFunc .textBox:after{display:none;}
#about-slide .slick-next{
    right: 0;
    top: calc(60% - 30px);
    height: 44px;
    width: 44px;
}
#about-slide .about .arts, #about-slide .free p{
    width: 100%;
}
#product{
    padding: 50px 0;
}
#product .titleSet .speBoxTitle{
    font-size: 35px;
}
#product .titleSet .subBoxTitle{
    margin: 0;
}
#prolay{
    margin: 0;
}
#about-slide .slick-next:before{
    width: 36px;
    height: 36px;
    background-size: contain;
}
		#prolay .p-box .p-border .p-info {left: 0;opacity: 1;bottom: 10px;}
		#prolay .p-box .p-border .p-info .describe, #prolay .p-box .p-border .p-info h3{
    color: #232323;
}
}
@media screen and (max-width:480px) {
	#news .border .news-info { margin: -50px 0 10px; }
	#news .border .news-info h3 { margin:10px 0 20px; }
	#book .bList:after { width: 80px; background-size: 100%; background-position: 100%; }
	#book .mofd h3 a { padding-right: 100px; }
	#book .mofd h3 { padding: 20px 0 30px; }
	#prolay .p-box {}
	#prolay .p-box .p-border .p-info h3 {color: #000;}
	#prolay .p-box .p-border .p-info .describe {
    color: #000;
}
	#freebox #freeboxlist .free { padding: 50px 30px; }
	#freebox #freeboxlist .free h3 { font-size: 24px; }
}
@media screen and (max-width:375px) {
#about-slide .slick-next{
    top: calc(60% - 40px);
}
}