/* a.more */
a.more { margin-top: 15px; padding: 5px 30px; background: #0d3275; border-radius: 20px; display: inline-block; color: #fff; }
a.more i { margin-left: 6px; vertical-align: baseline; }

/* aboutBox */
#aboutBox .workframe { margin-top: -20px; z-index: 100; }

#aboutBox .firstBox { overflow: hidden; width: 100%; background: url(/images/13/material-op60.png) #2951b0 center; border-radius: 20px 20px 0 0; box-shadow: 0 0 10px 5px rgba(0,0,0,.05); }
#aboutBox .firstBox:before { position: absolute; width: 396px; height: 408px; background: url(/images/13/img-about.png) no-repeat; background-size: 100% auto; display: block; left: -40px; bottom: 210px; z-index: 10; content: ""; }
#aboutBox .firstBox .iconBox p { position: absolute; width: 55px; animation: triangle 2s infinite cubic-bezier(.455,.03,.515,.955); }
#aboutBox .firstBox .iconBox p:nth-child(1) { top: 80px; right: calc(25% + 55px); animation-delay: .35s; }
#aboutBox .firstBox .iconBox p:nth-child(2) { top: 110px; right: -20px; animation-delay: .7s; }
#aboutBox .firstBox .iconBox p:nth-child(3) { width: 35px; top: 290px; right: -50px; animation-delay: 1.4s; }
#aboutBox .firstBox .iconBox p:nth-child(4) { width: 40px; top: 130px; right: 25%; animation-delay: 1.05s; }

#aboutBox .item { position: relative; float: left; }
#aboutBox .item article { padding: 	60px; }
#aboutBox .item h3 { margin-bottom: 20px; font-size: 18px; }
#aboutBox .item font { display: block; }

#aboutBox .item.c1 { width: 33%; background: url(/images/13/material-op60.png) #2951b0 center; color: #fff; }
#aboutBox .item.c1 article { animation-name: fadeInLeft; -webkit-animation-name: fadeInLeft; }
#aboutBox .item.c1 h3 , #aboutBox .item.c1 font { text-align: center; }

#aboutBox .item.c2 { width: calc(67% + 0.01px); background: url(/images/13/img-customBg.jpg) #2c95e6 center; }
#aboutBox .item.c2 .box { padding-bottom: 15px; float: left; width: calc(50% + 0.01px); background: #fff; }
#aboutBox .item.c2 .box:first-child { padding-bottom: 0; width: 100%; background-position: right bottom; background-repeat: no-repeat; background-size: 50% auto; background-color: #fff; }
#aboutBox .item.c2 .box:first-child article { width: calc(50% - 120px); animation-name: fadeInRight; -webkit-animation-name: fadeInRight; }
#aboutBox .item.c2 .box:first-child h3 { color: #e0a31a; }
#aboutBox .item.c2 .box:nth-child(2) { width: 50%; background: url(/images/13/img-customBg.jpg) #2c95e6 center; color: #fff; }
#aboutBox .item.c2 .box:nth-child(2) article { animation-name: fadeInDown; -webkit-animation-name: fadeInDown; }
#aboutBox .item.c2 .box:nth-child(3) article { animation-name: fadeInUp; -webkit-animation-name: fadeInUp; }

#aboutBox .item.c3 { overflow: hidden; padding: 60px 0; float: none; background: #1c243a; }
#aboutBox .item.c3 p { position: relative; text-align: center; font-size: 16px; color: #909090; z-index: 2; }
#aboutBox .item.c3 p a { margin-bottom: 15px; padding: 10px 50px; background: #fff; border-radius: 40px; display: inline-block; font-weight: bold; font-size: 18px; color: #2456b7; }
#aboutBox .item.c3 .bgBox { position: absolute; top: -110%; left: -150px; animation: bgWhirligig 80s infinite linear; z-index: 1; }
#aboutBox .item.c3:after { position: absolute; width: 100%; height: 25px; background: url(/images/13/img-wave-shadow-inset.png) left top repeat-x; bottom: 0; left: 0; content: ""; z-index: 3; }

/* NPBox */
#NPBox { overflow: hidden; position: relative; margin-top: 30px; background: url(/images/13/material-op60.png) #254899 center; }
#NPBox h2 , #bookBox h2 { margin-bottom: 15px; font-size: 25px; color: #e4aa2a; }

#NPBox .product { position: relative; }
#NPBox .product:before { position: absolute; width: 100%; height: 100%; background: url(/images/13/productBg.svg) no-repeat 0 bottom; background-size: 2000px auto; top: -20px; left: 0; content: ""; z-index: 10; }
#NPBox .product #productBox { position: relative; margin-top: 20px; padding: 30px; background-repeat: no-repeat; background-color: #fff; background-size: cover; border-radius: 0 0 20px 20px; box-shadow: 0 0 10px 5px rgba(0,0,0,.05); z-index: 11; }
#NPBox .product #productBox:before { position: absolute; width: 100%; height: 17px; background: url(/images/13/img-wave-shadow-outset.png) repeat-x left bottom; top: -17px; left: 0; z-index: 50; content: ""; }
#NPBox .product #productBox .pro-list p , #NPBox .product #productBox .pro-list h3 { margin: 10px; }
#NPBox .product #productBox .pro-list a.photo img ,
#NPBox #leftPhoto .box a.photo img ,
#bookBox .item .bookList ul li a.photo img { width: 100%; }
#NPBox .product #productBox .pro-list h3 , #NPBox #newBox h3 { height: 27px; -webkit-line-clamp: 1; }
#NPBox .product #productBox .pro-list h3 a { font-size: 18px; color: #333; }
#NPBox .product #productBox .pro-list .slick-list p.price { display: block; color: #3f3f3f; font-size: 18px; }
#NPBox .product #productBox .pro-list .slick-list p.price span.old { margin-right: 10px; font-size: 15px; text-decoration: line-through; color: #858585; }
#NPBox .product #productBox .pro-list .slick-list p.price b { font-size: 20px; margin: 0 2px 0 10px; color: #e42d2d; }
#NPBox .product #productBox .pro-list .slick-list p.price span.old b { font-size: 15px; font-weight: normal; margin: 0; color: #858585; }
#NPBox .product #productBox .readM { text-align: center; }

#NPBox .bgBox { position: absolute; top: 3%; right: 5%; animation: bgWhirligig-2 80s infinite linear; z-index: 1; }

#NPBox #newBox { position: relative; margin: 55px 0; width: 60%; z-index: 2; }
#NPBox #newBox p , #NPBox #newBox h3 , #NPBox #newBox a { margin-bottom: 10px; color: #fff; }
#NPBox #newBox h3 a { font-size: 18px; }
#NPBox #newBox p.describe { height: 50px; -webkit-line-clamp: 2; }
#NPBox #newBox .readM a { background: #f2b103; color: #694e14; }

#NPBox #leftPhoto { overflow: hidden; position: relative; z-index: 2; }
#NPBox #leftPhoto:before , #NPBox #leftPhoto:after { position: absolute; width: 100%; height: 9px; background: url(/images/13/header-white-wave.svg) left top repeat-x; bottom: 150px; left: 0; z-index: 1; content: ""; }
#NPBox #leftPhoto .workframe { z-index: 2; }
#NPBox #leftPhoto .box { margin: 15px 10px; float: left; width: calc((100% / 4) - 20px); }
#NPBox #leftPhoto:after { height: 150px; background: #fff; bottom: 0; }

/* bookBox */
#bookBox { margin-top: 50px; }
#bookBox h2 { text-align: center; color: #2b3f70; }
#bookBox .readM { text-align: center; }
#bookBox .item { overflow: hidden; margin-top: 20px; background: url(/images/13/material-op50.png) #f7f7f7 center; }
#bookBox .item > div , #bookBox .item .bookList ul li { float: left; width: 50%; }
#bookBox .item .bookList ul { overflow: hidden; }
#bookBox .item .bookList ul li { width:  calc(100% / 3); }
#bookBox .item .bookList ul li:nth-child(2n) { background:  #fff; }
#bookBox .item .bookList ul li a.photo { position: relative; background-size: cover; }
#bookBox .item .bookList ul li a font { position: absolute; padding: 0 10px; width: calc(90% - 20px); height: 36px; background: rgba(26, 37, 62, 0.7); display: block; text-align: center; line-height: 200%; font-size: 18px; color: #fff; left: 5%; bottom: 20px; -webkit-line-clamp: 1; }

/* transform */
@keyframes triangle { 0% , 100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes triangle-sm { 0% , 100%{ transform: translateY(0); } 50% { transform:translateY(-4px); } }
@keyframes bgWhirligig { 0% { transform: rotate(360deg); } 100% { transform: rotate(0); } }
@keyframes bgWhirligig-2 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

@media screen and (max-width: 1024px) {
	#aboutBox { overflow: hidden; }
	#bookBox .item > div { width: 100%; }
}
@media screen and (max-width: 960px) {
	#aboutBox .item.c1 , #aboutBox .item.c2 , #NPBox #newBox { width: 100%; }
	#aboutBox .item.c1 h3 , #aboutBox .item.c1 font { text-align: left; }
	#aboutBox .firstBox:before { width: 206px; top: 40px; bottom: auto; }
	#aboutBox .item.c2 .box:first-child { background-size: cover; }
	#aboutBox .item.c2 .box:first-child article { padding-top: 60px; width: calc(100% - 120px); background-color: rgba(255, 255, 255, 0.37); }
	#NPBox .bgBox { top: 0; }
	#NPBox #leftPhoto:before { bottom: 100px; }
	#NPBox #leftPhoto:after { height: 100px; }
}
@media screen and (max-width: 480px) {
	#aboutBox .firstBox:before , #aboutBox .firstBox .iconBox { display: none; }
	#aboutBox .item.c2 .box , #aboutBox .item.c2 .box:nth-child(2) { width: 100%; }
	#NPBox #leftPhoto .box { width: calc((100% / 2) - 20px); }
	#bookBox .item .bookList ul li { width: calc(100% / 2); }
}
@media screen and (max-width: 450px) {
}