/* indexbox */
.indexbox { position: relative; }
.indexbox h3.boxtit {font-size: 10vw;color: #f7f7f7;text-align: center;line-height: 100%;font-weight: bold;font-family: 'Noto Sans TC', sans-serif;}
.indexbox .more { margin-top: 40px; }
.indexbox .more a {position: relative;color: #5f5f5f;position: relative;display: inline-block;line-height: 45px;padding-right: 35px;outline: none;font-weight: 700;z-index: 1;}
.indexbox .more a:before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 3px;
    margin-right: 15px;
    border-radius: 5px;
    vertical-align: middle;
    background: #e4decd;
}
.indexbox .more a:hover:before {
    -webkit-transform: translateX(5px);
    -ms-transform: translateX(5px);
    transform: translateX(5px);
}
.indexbox .more a:after {
    content: '';
    position: absolute;
    width: 45px;
    height: 45px;
    top: 0;
    border-radius: 50%;
    opacity: .8;
    border: 1px solid #e4decd;
    z-index: -1;
    transition: all .5s ease-out;
    left: 95px;
    right: auto;
}
.indexbox .more a:hover:after {
    -webkit-animation: 2s filp ease both;
    animation: 2s filp ease both;
}
@-webkit-keyframes filp {
  30% {
    -webkit-transform: translateX(-50px) rotateY(0);
            transform: translateX(-50px) rotateY(0);
  }
  40% {
    -webkit-transform: translateX(-50px) rotateY(90deg);
            transform: translateX(-50px) rotateY(90deg);
    background-color: transparent;
    background-image: none;
    border-color: rgb(187 131 118 / 50%);
  }
  50% {
    -webkit-transform: translateX(-50px) rotateY(0);
            transform: translateX(-50px) rotateY(0);
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    background-image: linear-gradient(to right, rgb(200 148 134 / 80%) 0%, rgb(187 131 118) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#10e351', endColorstr='#00fdff',GradientType=1 );
    /* IE6-9 */
    border-color: transparent;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0);
            transform: translateX(0) rotateY(0);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    background-image: linear-gradient(to right, rgb(200 148 134 / 80%) 0%, rgb(187 131 118) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#10e351', endColorstr='#00fdff',GradientType=1 );
    /* IE6-9 */
    border-color: transparent;
  }
}

@keyframes filp {
  30% {
    -webkit-transform: translateX(-50px) rotateY(0);
            transform: translateX(-50px) rotateY(0);
  }
  40% {
    -webkit-transform: translateX(-50px) rotateY(90deg);
            transform: translateX(-50px) rotateY(90deg);
    background-color: transparent;
    background-image: none;
    border-color: rgb(187 131 118 / 50%);
  }
  50% {
    -webkit-transform: translateX(-50px) rotateY(0);
            transform: translateX(-50px) rotateY(0);
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    background-image: linear-gradient(to right, rgb(232 229 229 / 80%) 0%, rgb(218 218 218) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#10e351', endColorstr='#00fdff',GradientType=1 );
    /* IE6-9 */
    border-color: transparent;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0);
            transform: translateX(0) rotateY(0);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    background-image: linear-gradient(to right, rgb(232 229 229 / 80%) 0%, rgb(218 218 218) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#10e351', endColorstr='#00fdff',GradientType=1 );
    /* IE6-9 */
    border-color: transparent;
  }
}

/* NewsBox */
#NewsBox { position: absolute; width: 500px; background: #fff; right: 0; bottom: 0; z-index: 2; }
#NewsBox .btn { position: absolute; font-size: 0; right: 0; top: 0; }
#NewsBox .btn a , #bookBox .bookinfo .btns a { width: 67px; height: 67px; background: #dce5eb; line-height: 67px; text-align: center; }
#NewsBox .btn a#prevBtn , #bookBox .bookinfo .btns a#bookPBtn { margin-right: 1px; }
#NewsBox .btn a i , #bookBox .bookinfo .btns a i { font-size: 20px; color: #0f2942; }
#NewsBox h2 { padding: 20px 135px 20px 30px; border-bottom: 1px #e8f0f7 solid; }
#NewsBox ul { padding: 15px 0 15px 30px; }
#NewsBox ul li { position: relative; }
#NewsBox ul li a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#NewsBox ul li .time { font-size: 12px; color: #404040; }
#NewsBox ul li .txt { height: 60px; -webkit-line-clamp: 2; }

/* aboutBox */
#aboutBox {padding-top: 6vw;background: #fff;padding-bottom: 50px;}
#aboutBox .fixTxt {position: absolute;font-size: 12vw;font-weight: bolder;color: #f7f7f7;white-space: nowrap;left: 0;top: 0;z-index: 1;line-height: 130%;font-family: 'Noto Sans TC', sans-serif;}
#aboutBox #pictureBox { position: absolute; width: 380px; height: 245px; box-shadow: 0 0 40px 0 rgba(0, 0, 0, .3); right: 0; top: 0; z-index: 3; }
#aboutBox #pictureBox a.photo { width: 100%; height: 245px; }
#aboutBox .aboutinfo { position: relative; font-size: 0; z-index: 2; }
#aboutBox .aboutinfo .row { width: 50%; display: inline-block; vertical-align: top; }
#aboutBox .aboutinfo .row.info {padding: 3vw 7vw 5vw 10vw;width: calc(50% - 17vw);}
#aboutBox .aboutinfo .row.info h2 { margin-bottom: 25px; font-weight: 400; font-size: 35px; }
#aboutBox .aboutinfo .row.info h3 {margin-bottom: 10px;font-weight: bold;line-height: 230%;font-size: 17px;text-align: justify;}
#aboutBox .aboutinfo .row.info article {margin-bottom: 30px;font-weight: 300;line-height: 230%;font-size: 17px;text-align: justify;}
#aboutBox .aboutinfo .row.img {position: absolute;height: 100%;padding: 0 7vw 0 0;width: calc(50% - 7vw);}
#aboutBox .aboutinfo .row.img a.photo { width: 100%; height: 100%; }

/* SeoStarRating */
#SeoStarRating { text-align: right; }

/* productBox */
#productBox {padding: 0 10vw 5vw;z-index: 2;background: #fff;}
#productBox .bg { position: absolute; width: 30vw; height: 17vw; background: no-repeat 50% / cover; box-shadow: 0 0 40px 0 rgba(0, 0, 0, .3); top: -7vw; right: 10vw; z-index: 4; }
#productBox .productinfo { position: relative; z-index: 3; }
#productBox .productinfo ul {}
#productBox .productinfo ul li { position: relative; }
#productBox .productinfo ul li a { position: absolute; width: 100%; height: 100%; z-index: 2; }
#productBox .productinfo ul li .info {padding: 20px;}
#productBox .productinfo ul li .img {margin-bottom: 30px;background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 85%;}
#productBox .productinfo ul li .img {
    border-radius: 50%;
    border: 20px solid #bf9c84;
    background-color: #fff;
}
#productBox .productinfo ul li:hover .img {
    border: 20px solid #e8e3d3;
    margin-top: -20px;
    }
#productBox .productinfo ul li .price font { margin-right: 10px; display: inline-block; font-size: 15px; }
#productBox .productinfo ul li .price font.old { color: #a3a3a3; }
#productBox .productinfo ul li h3 {margin-bottom: 15px;height: 34px;font-size: 20px;-webkit-line-clamp: 1;text-align: center;}
#productBox .productinfo ul li article {height: 81px;font-weight: 400;color: #393939;-webkit-line-clamp: 3;font-size: 15px;text-align: justify;}

/* bookBox */
#bookBox {background: #c18c80;}
#bookBox .bg {position: absolute;width: 42%;height: calc(100% - 50px);left: 50%;bottom: 0;z-index: 2;background: #fff;display: none;}
#bookBox .bg >div { height: 100%; background: no-repeat 50% / cover; opacity: .2; }
#bookBox .bookinfo {position: relative;z-index: 3;}
#bookBox .bookinfo .rightBox , #bookBox .bookinfo .slick-dots { position: absolute; margin-left: calc(5% + 50px); width: 22%; text-align: left; font-size: 0; bottom: 50px; left: 62%; }
#bookBox .bookinfo .boxtit { font-size: 30px; bottom: calc(100% - 200px); }
#bookBox .bookinfo .list { position: relative; }
#bookBox .bookinfo ul li { font-size: 0; }
#bookBox .bookinfo ul li .img { margin: 50px 50px 50px 0; width: 62%; display: inline-block; box-shadow: 0 0 50px 2px rgba(0, 0, 0, .3); }
#bookBox .bookinfo ul li .info { margin-left: 5%; width: 22%; display: inline-block; }
#bookBox .bookinfo ul li .info a { width: 90%; height: 170px; font-size: 20px; color: #292929; -webkit-line-clamp: 5; }
#bookBox .bookinfo .btns { margin: auto; width: 135px; right: 8%; left: auto; }
#bookBox .bookinfo .slick-dots li { margin: 0; }
#bookBox .bookinfo .slick-dots li button:before , #bookBox .bookinfo .slick-dots li.slick-active button:before { color: #0f2942; }
#bookBox .bookinfo .more { width: 90%; text-align: right; }

/* customBox */
#customBox{
    overflow: hidden;
}
#customBox:after{content:'';position: absolute;top: -50px;left: 0;width: 100%;height: 185px;background-image: url(/images/36/page-down.png);background-repeat: no-repeat;background-position: 50% 50%;z-index: 9;background-size: cover;transform: rotate(
180deg
);}
#customBox ul {padding: 0;z-index: 2;width: 100%;}
#customBox ul li {position: relative;padding: 330px 150px 120px;}
#customBox ul li .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; z-index: 1; }
#customBox ul li .bg iframe { width: 100%; height: 100%; }
#customBox ul li .info {position: relative;z-index: 2;}
#customBox ul li:after{position:absolute;content:'';height: 100%;width: 100%;background: #e4decd;bottom: 0;left: 0;opacity: .5;z-index: 1;}
#customBox ul li .info h3 {color: #323847;font-weight: 400;font-size: 35px;text-align: center;line-height: 140%;}
#customBox ul li .info article {color: #323847;font-weight: 300;line-height: 230%;font-size: 17px;text-align: center;letter-spacing: 3px;}

/* followus */
#followus{
    position: relative;
}
#followus .share{
    position: absolute;
    right: 120px;
    top: calc(50% - 90px);
    background: #fff;
    width: 455px;
    padding: 40px 25px;
    text-align: center;
    box-shadow: 0 0 10px rgb(0 0 0 / 15%);
}
#g-map iframe{
}

#followus .share a{
    display: inline-block;
    margin: 0 20px;
    width: calc((100%/3) - 70px);
    text-align: center;
    position: relative;
}
#followus .share a b{
    display: block;
    text-align: center;
    font-size: 13px;
    margin-top: 10px;
    color: #5d5a59;
}
#followus .share a:after{content:'';position:absolute;top: 0;right: -25px;width: 1px;height: 100%;background: #e6e6e6;}
#followus .share a:last-child:after{
    display: none;
}
#followus .share a:hover{opacity:.5;}

@media screen and (min-width:1281px) {
	.indexbox .more a:hover {color: #bf9c84;}
	.indexbox .more a:hover:before {
    -webkit-transform: translateX(5px);
    -ms-transform: translateX(5px);
    transform: translateX(5px);
}
}
@media screen and (min-width:1024px) {
#customBox ul li .bg{
    background-attachment: fixed;
}
}
@media screen and (max-width:1280px) {
	#productBox .productinfo ul li.slick-active .img { box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3); }
	#bookBox .bookinfo .rightBox , #bookBox .bookinfo .slick-dots { margin-left: 50px; }
	#bookBox .bookinfo ul li .info { margin-left: 0; }
	#productBox{
    padding: 0 5vw 5vw;
}
}
@media screen and (max-width:1024px) {
	#productBox:before { width: 95vw; }
	#bookBox .bookinfo .boxtit {margin-left: 0;width: 100%;text-align: center;top: -40px;bottom: auto;left: 0;display: none;}
	#bookBox .bookinfo ul li .img { margin: 30px 30px 30px 0; width: calc(92% - 135px); box-shadow: 0 0 20px 2px rgba(0, 0, 0, .3); }
	#bookBox .bookinfo ul li .info { position: absolute; width: calc(92% - 135px); background: #0f2942; display: block; left: 0; bottom: 30px; z-index: 2; }
	#bookBox .bookinfo ul li .info a { margin: 10px 20px 4px; height: 34px; color: #fff; -webkit-line-clamp: 1; }
	#bookBox .bookinfo .slick-dots { margin-left: 0; width: 100%; text-align: center; left: 0; bottom: -10px; }
    #followus .share{
    right: 0;
    bottom: 0;
    top: inherit;
}
}
@media screen and (max-width:980px) {
	#aboutBox {padding-top: 0;padding-bottom: 0;}
	#aboutBox .fixTxt { display: none; }
	#aboutBox #pictureBox { top: -7vw; }
	#aboutBox #pictureBox , #aboutBox #pictureBox a.photo { width: 40vw; height: 25vw; }
	#aboutBox .aboutinfo {padding: 5vw 0 0;}
	#aboutBox .aboutinfo .row.info { position: relative; padding: 3vw 10vw; width: 80%; z-index: 2; }
	#aboutBox .aboutinfo .row.info h3.boxtit { color: #25496b; }
	#aboutBox .aboutinfo .row.info .more a {color: #5f5f5f;}
	#aboutBox .aboutinfo .row.img {width: 100%;opacity: .4;top: 0;left: 0;z-index: 1;display: none;}
	#productBox .bg { display: none; }
	#customBox ul li .info article {
    margin-top: 10px;
    line-height: 180%;
}
}
@media screen and (max-width:768px) {
#customBox ul li{
    padding: 330px 50px 120px;
}
}
@media screen and (max-width:640px) {
	#NewsBox { position: relative; width: 90%; }
	#productBox .productinfo ul {margin: auto;width: 100%;}
	#bookBox .bookinfo ul li .img { margin: 30px; width: calc(100% - 60px); }
	#bookBox .bookinfo ul li .info { width: calc(100% - 60px); left: 30px; }
	#bookBox .bookinfo .btns { display: none; }
	#followus .share{display: none;}
}
@media screen and (max-width:500px) {
	#NewsBox  , #productBox .productinfo ul { width: 100%; }
	#productBox .productinfo ul li .img {
    border: 10px solid #e5dbd2;
}
#customBox ul li .info h3{
    font-size: 25px;
}
}