@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{margin: 0 0 0 40px}*/
#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;}
}