@import url('https://fonts.googleapis.com/css?family=Damion&display=swap');

.sectionTitle h2 { font-family: 'Damion', "微軟正黑體"; font-size: 70px; color: #000; font-weight: normal; }

.flex { display: flex; }
.btn a { width: 400px; border-radius: 6px; box-shadow: inset 0 0 0 2px #1f79a9; font-size: 16px; position: relative; display: block; color: #1f79a9; line-height: 1; text-align: center; text-decoration: none; transition: ease .3s; }
.btn a span { position: relative; display: block; z-index: 4; height: 100%; width: 100%; padding: 28px 40px; text-align: center; }
.btn a span i { position: absolute; right: 25px; top: 50%; transform: translateY(-50%); }
.btn a::after { position: absolute; left: 0; top: 0; content: ''; display: block; z-index: 2; height: 100%; width: 0; background-color: #1f79a9; border-radius: 6px; transition: width 0.3s ease; }
.btn a:hover::after { width: 100%; }
.btn a:hover { color: #fff; }

#products .flex, #bookbox .flex { align-items: center; }
#products .btn, #bookbox .btn { padding-left: 40px; }
#products .btn a, #bookbox .btn a { width: 250px; }
#products .btn a span, #bookbox .btn a span { padding: 18px 40px; }

#products { padding-top: 95px; }
#products .product-item .photobox { display: inline-block; padding: 20px; background: #fff; }
#products .product-item .photobox>div { overflow: hidden; }
#products .product-item a.photo { transition: ease .3s; }
#products .product-item a.photo:hover { transform: scale(1.15); }
#products .product-item .info { display: block; padding: 40px 37px 36px 40px; background: #fff; }
#products .product-item .info .proCate { padding: 3px 8px; font-size: 11px; display: inline-block; background: #894eb7; color: #fff; margin: 0 0 11px; }
#products .product-item .info .desc { font-size: 16px; margin-bottom: 11px; -webkit-line-clamp: 2; }
#products .product-item .info-content { display: none; transform: translateX(20px); box-shadow: 0 10px 17.5px 0.5px rgba(0, 0, 0, 0.2); position: absolute; right: -70px; top: 280px; width: 500px; opacity: 0; z-index: 2; }
#products .product-item .info .title { font-size: 24px; margin: 0 0 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#products .product-item .info .price span { font-size: 14px; color: #fff; }
#products .product-item .info .price span.old { text-decoration: line-through; display: inline-block; padding: 3px 8px; background: #568e6d; }
#products .product-item .info .price span.sale { display: inline-block; padding: 3px 8px; background: #d8608d; margin-left: 20px; }
#products .swiper-container { margin: 25px 0px 0px 40px; overflow: inherit; z-index: 0; }
#products .swiper-container::before { position: absolute; left: -40px; top: 48.5%; content: ''; display: block; z-index: -1; height: 100%; width: 84%; background-color: #1f79a9; ; }
#products .sectionTitle h2:first-letter, #bookbox .sectionTitle h2:first-letter { color: #1f79a9; }
#products .product-item.swiper-slide-active .info-content { display: block; }
#products .product-item.swiper-slide-active .info-content.active { opacity: 1; transform: translateX(0px); transition: linear .3s; }
#products .swiper-button-next, #products .swiper-button-prev { width: 50px; height: 50px; background: #1f79a9; border-radius: 50%; color: #fff; display: flex; justify-content: center; align-items: center; top: 50%; transform: translateY(-50%); box-shadow: 0 10px 17.5px 0.5px rgba(0, 0, 0, 0.2); }
#products .swiper-button-next { left: 605px; }
#products .swiper-button-prev { left: -15px; }

/*截角*/
.product-item .productIndex { position: absolute; display: block; z-index: 1; font-family: 'Damion', cursive; letter-spacing: 0; letter-spacing: 0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); left: 19px; top: 13px; font-size: 24px; }
.product-item .productIndex:before { position: absolute; left: -10px; top: 12px; border-width: 48px 48px 0 0; content: ''; display: block; z-index: -1; height: 0; width: 0; border-color: #fff transparent transparent transparent; border-style: solid; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
/*進度條*/
#progress-content { display: flex; justify-content: center; padding-left: 450px; z-index: 5000; align-items: center; padding-top: 65px; }
#progress-content .swiper-pagination, #progress-content #seek_total { height: 28px; width: 62px; line-height: 0; text-align: center; }
#progress-content .swiper-pagination { position: relative; overflow: hidden; }
.seek_bar { position: relative; overflow: hidden; height: 3px; width: 210px; background-color: #000; }
.seek_line { position: absolute; left: -100%; height: 3px; width: 210px; background-color: #fff; }
.seek_line.start { animation-name: progressStart; animation-duration: 3s; }
.seek_line.change { animation-name: progressChange; animation-duration: 0.5s; }

@keyframes progressStart { 0% { left: -100%; } 100% { left: 0%; } }
@keyframes progressChange { 0% { left: 0%; } 100% { left: 100%; } }

#progress-content #seek_total, #progress-content .swiper-pagination-bullet { font-size: 28px; font-family: 'Damion', cursive; color: #fff; }
#progress-content .swiper-pagination-bullet { position: absolute; left: 0; top: -23px; width: 100%; padding: 10px 0 0; text-align: center; transform: translateY(28px); -webkit-transform: translateY(28px); background: none; opacity: 1; }

#progress-content .swiper-pagination-bullet-active { transform: translateY(0); transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; 
-webkit-transform: translateY(0); }
#progress-content .seek_num._leave { transform: translateY(-28px); transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; 
-webkit-transform: translateY(-28px); }

#progress-content #seek_total { padding: 9px 0 0; }

#NPBox { padding-bottom: 120px; padding-top: 60px; }
#NPBox .sectionTitle h2 { text-align: center; color: #fff; }
#NPBox .btn a { margin: 0 auto; }
#NPBox .new-list { display: flex; flex-wrap: wrap; margin: 0 -1.25%; padding: 0 0 70px; }
#NPBox .news-item { padding: 20px 20px 16px; margin: 0 1.33% 40px; width: 30.6%; background: #fff; }
#NPBox .news-item .photobox { overflow: hidden; }
#NPBox .news-item a.photo { display: block; transition: ease .3s; }
#NPBox .news-item a.photo:hover { transform: scale(1.15); }
#NPBox .news-item .info { margin: 23px 0 15px; }
#NPBox .news-item .info .date { font-family: 'Damion', cursive; margin: 0 12px 0 0; font-size: 18px; color: #414c65; }
#NPBox .news-item .info .cate { font-size: 11px; background: #c45220; padding: 3px 8px; color: #fff; }
#NPBox .news-item .info>p { margin: 23px 0 15px; }
#NPBox .news-item .info h3 { margin: 0 0 28px; font-size: 16px; -webkit-line-clamp: 2; }

#bookbox .flex { margin-bottom: 36px; }
#bookbox .book-bg { padding-top: 100px; margin-left: 95px; position: relative; padding-bottom: 160px; }
#bookbox .book-bg::before { position: absolute; right: 0; top: 0; content: ''; display: block; background-color: #1f79a9; height: 82%; width: 74%; }
#bookbox .book-item { height: 100%; padding: 20px 20px 15px; transition: box-shadow 0.3s ease; background: #fff; }
#bookbox .book-item .photobox>div { overflow: hidden; margin-bottom: 20px; }
#bookbox .book-item a.photo { display: block; transition: ease .3s; }
#bookbox .book-item a.photo:hover { transform: scale(1.15); }
#bookbox .book-item .info { color: #272727; font-weight: 700; letter-spacing: 0.1em; line-height: 1.6; -webkit-line-clamp: 2; }
#bookbox .book-item .info h3 { font-size: 16px; }
#bookbox .book-item .info .title { -webkit-line-clamp: 2; }
#bookbox .book-bg { overflow: hidden; }
#bookbox .swiper-container { padding-bottom: 115px; overflow-y: inherit; }
#bookbox .swiper-button-next, #bookbox .swiper-button-prev { width: 40px; height: 40px; background: #1f79a9; border-radius: 50%; color: #fff; display: flex; justify-content: center; align-items: center; bottom: 0px; top: auto; transform: translateY(-50%); box-shadow: 0 10px 17.5px 0.5px rgba(0, 0, 0, 0.2); }
#bookbox .swiper-button-next { left: 150px; }
#bookbox .swiper-button-prev { left: 50px; }

#ssbanner .bxslider { display: flex; }
#ssbanner .bxslider .ssbanner-item { width: 24%; margin: 0 0.9%; }
#ssbanner .bxslider .ssbanner-item a.photo, #ssbanner .bxslider .ssbanner-item a.photo img { height: 100%; }
#ssbanner .bxslider .ssbanner-item a.photo { transition: ease .3s; position: relative; }
#ssbanner .bxslider .ssbanner-item .photoCircle { background: #fff; border-radius: 50%; overflow: hidden; width: 324px; height: 324px; margin: 0 auto; }
#ssbanner .bxslider .ssbanner-item .txt { margin-top: 15px; display: flex; justify-content: space-between; align-items: center; padding: 0 30px; }
#ssbanner .bxslider .ssbanner-item .txt .title { font-size: 16px; display: inline-block; width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: ease .3s; }
#ssbanner .bxslider .ssbanner-item .txt:hover .title { color: #1f79a9; }
#ssbanner .bxslider .ssbanner-item .txt i { color: #1f79a9; }

#other-content { padding-top: 120px; }
#other-content.noneCI { display: none; }
#other-content .other-set { display: flex; }
#other-content .other-set .item { width: 33%; justify-content: center; padding: 60px; background: #fff; position: relative; }
#other-content .other-set .item::before { content: ""; position: absolute; bottom: 0; left: 0; background: #1f79a9; width: 100%; height: 100%; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right top; transform-origin: right top; transition: transform .3s; }
#other-content .other-set .item:hover::before { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left top; transform-origin: left top; }

#other-content .other-set .item:nth-child(2) { border-right: 1px solid #e2e2e2; border-left: 1px solid #e2e2e2; }
#other-content .other-set .item .othertitle p { text-align: center; font-size: 22px; margin-bottom: 15px; }
#other-content .other-set .item font { text-align: center; font-size: 16px; }
#other-content .other-set .item article { position: relative; transition: ease .3s; }
#other-content .other-set .item:hover article { color: #fff; }
#aboutBox { padding-top: 100px; }
#aboutBox .about-img { background-size: cover; padding: 50px 0px; position: relative; }
#aboutBox .about-img::after { content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); }
#aboutBox .about-info { text-align: center; width: 50%; margin: 0 auto; position: relative; z-index: 1; color: #fff; }
#aboutBox .about-info h2 { text-align: center; font-size: 44px; display: inline-block; }
#aboutBox .about-info>span { font-size: 24px; margin-left: 10px; }
#aboutBox .about-info .subtitle { font-size: 24px; padding-left: 10px; }
#aboutBox #SeoStarRating { text-align: center; padding: 10px 0px; }
#aboutBox #youtube iframe { width: 100%; padding: 0 70px; height: 300px; }
#aboutBox .about-info .info { text-align: center; padding-top: 10px; font-size: 16px; }
#aboutBox .btn a { margin: 35px auto 0px; width: 316px; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
#aboutBox .btn a::after { z-index: -1; background-color: #fff; }
#aboutBox .btn a:hover { color: #1f79a9; }

@media screen and (min-width: 1024px) {
	#ssbanner .bxslider .ssbanner-item a.photo:hover { transform: scale(1.1); }
}
@media screen and (min-width: 768px) {
	#products .product-item .photobox { width: 100%; }
	#products .swiper-slide { width: 640px !important; }
}
@media screen and (max-width: 1400px) {
	#products .swiper-container::before { width: 90%; }
	#progress-content { padding-left: 500px; }
}
@media screen and (max-width: 1280px) {
	#products .swiper-container::before { width: 92%; }
	#progress-content { padding-left: 580px; }
}
@media screen and (max-width: 1200px) {
	#ssbanner .bxslider .ssbanner-item .photoCircle { width: 280px; height: 280px; }
	#products .swiper-container { padding-bottom: 100px; }
	#progress-content { display: none; }
}
@media screen and (max-width: 1024px) {
	#aboutBox .about-info { width: 70%; }
	.btn a span { padding: 20px 40px; }
}
@media screen and (max-width: 940px) {
	#products .swiper-container::before { width: 98%; }
}
@media screen and (max-width: 768px) {
	.sectionTitle h2 { font-size: 48px; }
	.flex { flex-wrap: wrap; }
	#NPBox .btn a { width: 70%; }
	.btn a span { padding: 20px 25px; }
	#products .swiper-container { margin: 0 auto; }
	#products .swiper-slide { width: 100% !important; }
	#products .product-item .photobox { width: 100%; }
	#products .product-item a.photo { display: block; background-size: cover; }
	#products .product-item .info-content { right: auto; left: 5%; width: 90%; }
	#products .swiper-button-prev { left: 15px; }
	#products .swiper-button-next { right: 15px; left: auto; }
	.product-item .productIndex { left: 18px; }
	#products .swiper-container::before { width: 100%; left: 0px; }
	#NPBox { padding-top: 100px; }
	#NPBox .news-item { width: 47%; }
	#bookbox .book-bg { margin-left: 15px; }
	#bookbox .book-bg::before { height: 78%; }
	#bookbox .book-item { width: 74% !important; min-width: 340px; }
	#bookbox .swiper-button-next, #bookbox .swiper-button-prev { bottom: 25px; }
	#bookbox .swiper-button-next { left: 100px; }
	#bookbox .swiper-button-prev { left: 40px; }
	#other-content .other-set { flex-wrap: wrap; }
	#other-content .other-set .item { width: 100%; margin: 10px 0px; padding: 25px; }
	#aboutBox .about-info { width: 85%; }
	#aboutBox #youtube iframe { padding: 0px; }
}
@media screen and (min-width: 640px) and (max-width: 768px) {
	#ssbanner .bxslider .ssbanner-item .photoCircle { width: 260px; height: 260px; }
}
@media screen and (max-width: 640px) {
	#products .flex, #bookbox .flex { padding-bottom: 30px; }
	#products .btn, #bookbox .btn { padding-left: 0px; width: 100%; }
	#products .product-item .info { padding: 30px; }
	#other-content { padding-top: 70px; }
	#aboutBox .btn a { width: 70%; }
}
@media screen and (max-width: 540px) {
	#products .product-item .info-content { top: 240px; }
}
@media screen and (max-width: 480px) {
	#products .product-item .info .title { font-size: 20px; }
	#products .swiper-container::before { height: 115%; }
	#bookbox .book-item { min-width: auto; }
	#bookbox .book-bg::before { width: 55%; }
	#aboutBox .about-info { width: 90%; }
	#NPBox .news-item .info .date { display: block; }
	#products .product-item .info-content { top: 200px; }
}
@media screen and (max-width: 414px) {
	#aboutBox .about-info h2 { font-size: 32px; }
	#aboutBox .about-info span { font-size: 16px; }
	#ssbanner .bxslider .ssbanner-item .txt { padding: 15px; }
}
@media screen and (max-width: 400px) {
	#products .product-item .info .title { font-size: 20px; }
	#products .product-item .info { padding: 15px; }
	#products .product-item .info .price { display: flex; }
}
@media screen and (max-width: 375px) {
	#bookbox .swiper-button-prev { left: 25px; }
	#bookbox .swiper-button-next { left: 80px; }
	#ssbanner .bxslider .ssbanner-item .photoCircle { width: 250px; height: 250px; }
	#products .product-item .info-content { top: 180px; }
}