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

#news li .border .photo a { display: block; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; }

#aboutFunc { overflow: hidden; padding: 0 0 100px; position: relative; background-color: #319ad4; background-repeat: no-repeat; background-position: 50% 100%; background-size: 100%; }
#aboutFunc:after { content: ''; width: 100%; left: 0; top: 0; height: 100%; display: block; background: linear-gradient(to bottom, #319ad4 20%, rgba(48, 155, 213, 0.56) 100%); z-index: 1; position: absolute; }
#aboutFunc .workframe { position: relative; z-index: 2; }
#aboutFunc .aboutart { color: #fff; }
#aboutFunc .aboutart h3 { text-align: center; }
#aboutFunc .aboutart h3 b { font-family: 'Arvo', serif; font-weight: 400; font-size: 18px; }
#aboutFunc .aboutart h2 { text-align: center; font-size: 30px; line-height: 110%; font-weight: 400; }
#aboutFunc .aboutart .arts { text-align: center; margin: 60px auto 0; font-size: 18px; line-height: 180%; width: 55%; }
#aboutFunc .aboutart .more, .NewsMore { text-align: center; margin-top: 70px; }
#aboutFunc .aboutart .more p, .NewsMore p { display: inline-block; overflow: hidden; position: relative; }
#aboutFunc .aboutart .more p:after, .NewsMore p:after { content: ''; display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.38); position: absolute; bottom: 0; left: 0; transform: scale(0, 1); transform-origin: right center 0; transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); }
#aboutFunc .aboutart .more p:hover:after, .NewsMore p:hover:after { transform: scale(1, 1); transform-origin: left center 0; }
#aboutFunc .aboutart .more p a, .NewsMore p a { border: 2px solid #fff; display: block; color: #fff; font-size: 15px; padding: 6px 200px; position: relative; z-index: 2; }
#aboutFunc .aboutart .more p b, .NewsMore p b { position: absolute; right: 15px; }
#aboutFunc #youtube { position: relative; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; width: 400px; margin: 40px auto; }

#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%; }

#product { position: relative; background-color: #287ebc; overflow: hidden; }
#product .workframe { position: relative; z-index: 2; }
#product:after { content: ''; background: #fff; position: absolute; width: 100%; height: 120px; left: 0; bottom: 0; z-index: 1; }
#product .index-title, #BookTitle .index-title, #NewsTitle .index-title { margin: 50px 0 30px; color: #fff; }
#product .index-title { margin: 80px 0 30px; }
#product .index-title h2, #BookTitle .index-title h2, #NewsTitle .index-title h2 { font-family: 'Arvo', serif; font-weight: 400; text-align: center; font-size: 40px; line-height: 110%; }
#product .index-title p, #BookTitle .index-title p, #NewsTitle .index-title p { font-weight: 400; text-align: center; margin-top: 5px; }
#product .index-title p a, #BookTitle .index-title p a, #NewsTitle .index-title p a { color: #fff; display: inline-block; }
#product .index-title p a b, #BookTitle .index-title p a b, #NewsTitle .index-title p a b { margin-left: 10px; display: inline-block; background: rgba(255, 255, 255, 0.73); width: 20px; height: 20px; color: #287ebc; border-radius: 50%; font-size: 12px; line-height: 18px; text-align: center; vertical-align: inherit; }

#prolay .p-box { position: relative; background: rgba(0, 0, 0, 0.18); margin: 20px; overflow: hidden; transition: all linear .3s; }
#prolay .p-box .p-info { position: absolute; z-index: 1; width: 100%; color: #fff; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.68); }
#prolay .p-box .p-info h3 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; margin: 20px; font-weight: 400; font-size: 18px; }
#prolay .p-box .p-info h3 a { color: #fff; }
#prolay .p-box .p-info h3 a b { position: absolute; right: 0; }
#prolay .p-box .p-info .describe { margin: 20px 20px 10px; overflow: hidden; height: 75px; }
#prolay .p-box .p-info .price { margin: 10px 20px; overflow: hidden; position: relative; }
#prolay .p-box .p-info .price span { float: left; font-size: 14px; }
#prolay .p-box .p-info .price span.old { float: right; font-size: 12px; color: #b5b5b5; }
#prolay .p-box .p-info .price span b { font-size: 16px; margin: 0 3px; }
#prolay .p-box .p-info .price span.old b { font-size: 12px; }
#prolay .p-box .bgimg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all linear .3s; background: #121212; }
#prolay .p-box .bgimg img { width: 100%; height: 100%; object-fit: cover; transition: all linear .3s; }

#product #w-particles { overflow: hidden; position: absolute; bottom: 0; left: 0; right: 0; top: 0; }
#product #w-particles canvas { width: 100%; height: 100%; }
#product #w-particles #particles { height: 100%; background: linear-gradient(to left, rgba(0, 0, 0, 0.52) 20%, hsla(0, 0%, 0%, 0) 100%); }

#BookTitle .index-title h2, #BookTitle .index-title p a, #NewsTitle .index-title h2, #NewsTitle .index-title p a { color: #434343; }
#BookTitle .index-title p a b, #NewsTitle .index-title p a b { background: #0583c9; color: #fff; }
#book { margin: 30px 0 0; height: 660px; }
#bookBox { padding-bottom: 50px; }

.bookStyle { position: relative; overflow: visible; width: 50%; margin: 10% auto 0; }
.bookStyle .info { position: absolute; top: 0; z-index: 1; width: 40px; left: -40px; }
.bookStyle .info.twins { left: calc(100% + 20px); }
.bookStyle .info h3 { writing-mode: tb-rl; font-size: 20px; margin-bottom: 20px; font-weight: 400; }
.bookStyle .info h4 { writing-mode: tb-rl; font-size: 15px; font-weight: 400; color: #888; }
.bookStyle .photo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.bookStyle .photo a img { width: 100%; height: 100%; object-fit: cover; }
.slick-center .bookStyle { width: 75%; margin: 0 auto; }
.slick-center .bookStyle .info { z-index: 1; left: -15%; width: 50%; text-align: right; top: 30%; }
.slick-center .bookStyle .info.twins { display: none; }
.slick-center .bookStyle .info h3 { font-size: 48px; text-align: right; writing-mode: initial; margin: 0; }
.slick-center .bookStyle .info h3 a { color: #fff; background: #000; display: inline-block; width: auto; height: auto; padding: 4px 10px; font-weight: 400; line-height: 120%; }
.slick-center .bookStyle .info h4 { font-size: 28px; line-height: 120%; text-align: right; background: #000; color: #fff; display: inline-block; padding: 6px 12px; font-weight: 400; margin-top: 5px; writing-mode: initial; }

#NewsBox, #bookBox, #product { background-repeat: no-repeat; background-position: 50% 100%; background-size: cover; }
#NewsBox { padding-bottom: 80px; }
#news ul { width: 960px; margin: 0 auto; }
#news li { float: left; width: 50%; height: 200px; }
#news li .border { background: #f7f7f7; margin: 10px; padding: 15px; overflow: hidden; }
#news li .border .photo { float: left; width: 151px; }
#news li .border .news-info { float: right; width: calc(100% - 170px); }
#news li .border .news-bottom { font-size: 12px; color: #404040; font-family: 'Arvo', serif; }
#news li .border .news-bottom b { margin-right: 7px; }
#news li .border h3 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 30px; font-size: 18px; line-height: 30px; }
#news li .border p { overflow: hidden; height: 90px; color: #888787; line-height: 150%; }
.NewsMore p a { border: 2px solid #565656; color: #3c3c3c; }
.NewsMore p:after { background: #efefef; }

#freebox { padding: 50px 0; }
#freebox #freeboxlist { text-align: center; }
#freebox #freeboxlist>div { display: inline-block; width: calc(20% - 4px); margin: 0 5%; vertical-align: top; }
#freebox .free h3 { text-align: center; font-size: 22px; line-height: 120%; margin-bottom: 20px; }
#freebox .free p { text-align: center; }

#prolay .p-box>img, .bookStyle>img, #news li .border .photo img, #ssbanner a img { width: 100%; }
#prolay .p-box .bgimg a, .bookStyle, .bookStyle .info, #product .index-title p a b, #BookTitle .index-title p a b, #NewsTitle .index-title p a b { transition: all linear .3s; }

.bookStyle .photo, .bookStyle .info h3 a, .bookStyle .info h4, .bookStyle .info h3 { transition: all linear .1s; }

@media screen and (min-width: 1025px) {
	#prolay .p-box .p-info { transition: all linear .3s; height: 186px; bottom: -121px; }
	#prolay .p-boxOver:hover .p-info { bottom: 0; }
	#prolay .p-box:hover .bgimg { left: -3%; top: -3%; width: 106%; height: 106%; }
	#prolay .sthOver .p-box .bgimg img { opacity: .2; }
	#prolay .sthOver .p-boxOver .bgimg img { opacity: 1; }
	.bookStyle:hover .photo { width: 110%; height: 110%; left: -5%; top: -5%; }
	#news li .border h3 a:hover { color: #0583c9; }
	#product .index-title p a:hover b, #BookTitle .index-title p a:hover b, #NewsTitle .index-title p a:hover b { padding-left: 15px; border-radius: 15px; }
}
@media screen and (max-width: 1680px) {
	#book { height: 500px; }
}
@media screen and (max-width: 1440px) {
	#book { height: 470px; }
}
@media screen and (max-width: 1366px) {
	#book { height: 400px; }
	.slick-center .bookStyle .info h3 { font-size: 40px; }
	.slick-center .bookStyle .info h4 { font-size: 20px; }
}
@media screen and (max-width: 1280px) {
	#aboutFunc .aboutart .arts { margin: 40px auto 0; font-size: 16px; line-height: 160%; width: 75%; }
	#aboutFunc .aboutart h3 b { font-size: 15px; }
	#aboutFunc .aboutart h2 { font-size: 24px; }
	#book { height: 301px; }
	#news ul { width: 100%; }
}
@media screen and (max-width: 1024px) {
	#book { height: auto; }
	#aboutFunc .aboutart { margin-top: 20px; }
	#aboutFunc:after { background: linear-gradient(to bottom, #319ad4 50%, rgba(48, 155, 213, 0.56) 100%); }
	#product .index-title h2, #BookTitle .index-title h2, #NewsTitle .index-title h2 { font-size: 30px; }
	.bookStyle { margin: 0 auto; }
	.bookStyle .info.twins { display: none; }
	.bookStyle .info { width: 200px; right: 90%; top: 30px; text-align: right; left: initial; }
	.bookStyle .info h3 { writing-mode: initial; margin-bottom: 10px; text-align: right; }
	.bookStyle .info h3 a { color: #fff; background: #000; display: inline-block; padding: 5px 8px 5px 20px; font-size: 40px; line-height: 120%; }
	.bookStyle .info h4 { writing-mode: initial; display: inline-block; background: #000; color: #fff; padding: 2px 10px; position: relative; }
	#freebox #freeboxlist>div { width: 95%; margin: 40px 0; }
	#freebox { padding: 20px 0; }
}
@media screen and (max-width: 768px) {
	#aboutFunc .aboutart .arts { width: 90%; }
	#aboutFunc #youtube { width: 90%; }
	#aboutFunc .aboutart .more p a, .NewsMore p a { padding: 6px 100px; }
	#aboutFunc:after { background: linear-gradient(to bottom, #319ad4 70%, rgba(48, 155, 213, 0.56) 100%); }
	#news li { width: 100%; height: auto; }
	#news li .border .photo { width: 100px; }
	#news li .border .news-info { width: calc(100% - 120px); }
	#news li .border p { height: 47px; }
	#news li .border { margin: 5px; }
}
@media screen and (max-width: 480px) {
	#aboutFunc .aboutart .more, .NewsMore { margin-top: 40px; }
	.bookStyle { width: 80%; }
	.bookStyle .info { right: initial; left: -8%; text-align: left; }
	.bookStyle .info h3 { text-align: left; }
	#prolay .p-box .p-info .describe { height: 45px; margin: 10px 20px; }
}