/* indexbox */
.indexbox { position: relative; }
.indexbox h3.boxtit {text-align: center;font-weight: 400;font-size: 35px;}
.indexbox .more { margin-top: 40px; }
.indexbox .more a {position: relative;padding: 15px 50px;color: #fff;background: #ee3111;}
.indexbox .more a:hover{background: #c7280d;}

/* 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 {background: #fff;}
#aboutBox .fixTxt {position: absolute;font-size: 13vw;font-weight: 900;color: #f9f9f9;white-space: nowrap;left: 0;bottom: 20px;z-index: 1;text-transform: uppercase;line-height: 100%;}
#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 article { margin-bottom: 30px; font-weight: 300; line-height: 230%; font-size: 18px; }
#aboutBox .aboutinfo .row.img { position: absolute; height: 100%; }
#aboutBox .aboutinfo .row.img a.photo { width: 100%; height: 100%; }

/* pandr-title */
#pandr-title{padding: 70px 0;}
#pandr-title h2.Ptitle{
    text-align: center;
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 35px;
}
#pandr-title p{
    margin-bottom: 30px;
    font-weight: 300;
    line-height: 180%;
    font-size: 15px;
    width: 50%;
    margin: 0 auto 25px;
    text-align: center;
}
#pandr-title .webframe, #sixBox .webframe{overflow:hidden;width: 1530px;margin: 0 auto;}
#pandr-title .title-set{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}
#pandr-title .title-set >div{
    width: calc((100%/4) - 60px);
    position: relative;
    padding: 30px 30px 90px;
    clear: both;
}
#pandr-title .title-set >div:before {
    content: '';
    width: 100%;
    height: 1px;
    background: #e0e0e0;
    position: absolute;
    bottom: 26px;
    left: 0;
    transition: all 0.4s ease;
}

#pandr-title .title-set >div:nth-of-type(4n+1):before{
    width: calc(100% - 30px);
    left: 30px;
  }
#pandr-title .title-set >div:nth-of-type(4n):before{
    width: calc(100% - 30px);
    left: 0;
  }
#pandr-title .title-set >div:hover:before{background: #ee3111;}
#pandr-title .title-set >div .free{}
#pandr-title .title-set >div .free .num{
    width: 32px;
    height: 32px;
    background: #f5f7fa;
    border: 1px solid #dedede;
    border-radius: 50%;
    text-align: center;
    color: #454545;
    font-size: 13px;
    line-height: 30px;
    letter-spacing: 0;
    position: absolute;
    bottom: 10px;
    left: 90px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
#pandr-title .title-set >div:hover .free .num{
    background: #ee3111;
    color: #fff;
    border: 1px solid #f5f7fa;
    }
#pandr-title .title-set >div .free .icon{
    width: 48px;
    height: 55px;
    float: left;
    margin-right: 15px;
    position: relative;
    overflow: hidden;
}
#pandr-title .title-set >div .free .icon img{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: inline-block;
}
#pandr-title .title-set >div:hover .free .icon img{
    top: -52px;
}
#pandr-title .title-set h2{font-weight:400;font-size:24px;color: #111;font-size: 20px;line-height: 120%;-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;}
#pandr-title .title-set h3{color: #9a9a9a;font-size: 14px;line-height: 20px;letter-spacing: 0.6px;overflow: hidden;margin-top: 5px;font-weight: normal;font-family: Nunito, sans-serif, cwTeXHei, serif, 微軟正黑體, Arial, "Arial Narrow";}
#pandr-title .small-talk{float:right}
#pandr-title .small-talk p{text-align:right;font-size:16px;color:#e19dc5;line-height:180%;width:280px}

/* contentBox */
#contentBox{
    background-position: 50% 50%;
    background-image: url(/images/36/index-topBox-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 50px 0;
}
#contentBox .webframe{
    width: 1160px;
    margin: 0 auto;
    text-align: center;
}
#contentBox .wrap{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }
  #contentBox .topItem{
    flex: 1;
    background: rgba(255, 255, 255, 0.85);
    position: relative;
    padding: 50px 0;
    text-align: center;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }
  #contentBox .topItem:nth-of-type(2)::before{
    content: '';
    width: 1px;
    height: calc(100% - 60px);
    background: #b2b2b2;
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 1;
  }
  #contentBox .topItem h3{
    color: #111;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1.2px;
    margin-bottom: 25px;
    text-align: center;
  }
  #contentBox .telBox a{
    display: block;
    color: #3ab900;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
  }
  #contentBox .telBox a:hover{
  }
  #contentBox .telBox a i{
    font-size: 30px;
    display: inline-block;
    margin-right: 5px;
  }
  #contentBox .storeBox .btn{
    text-align: center;
}
  #contentBox .storeBox .btn a{
    background: #ee3111;
    width: 225px;
    height: 45px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 0;
    display: inline-block;
    font-size: 14px;
    line-height: 45px;
    letter-spacing: 1.5px;
    text-align: center;
    position: relative;
    padding: 0;
    z-index: 5;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  #contentBox .storeBox .btn a:hover{
    background: #111;
  }

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

/* productBox */
#productBox {padding: 3vw 5vw;z-index: 2;background: #ffff;}
#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 {margin-top: 20px;}
#productBox .productinfo ul li {position: relative;margin: 10px 0;}
#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: 20px;background: no-repeat 50% / cover;}
#productBox .productinfo ul li:hover .img {-webkit-filter:saturate(0.5);}
#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;}
#productBox .productinfo ul li article {height: 75px;font-weight: 400;color: #393939;-webkit-line-clamp: 3;font-weight: normal;font-family: Nunito, sans-serif, cwTeXHei, serif, 微軟正黑體, Arial, "Arial Narrow";font-size: 15px;}

/* bookBox */
#bookBox { background: #efebe9; }
#bookBox:before , #customBox:before { position: absolute; width: 50%; height: 100%; background: #dcd7d2; top: 0; left: 0; z-index: 1; content: ""; }
#bookBox .bg { position: absolute; width: 42%; height: calc(100% - 50px); left: 50%; bottom: 0; z-index: 2; background: #fff; }
#bookBox .bg >div { height: 100%; background: no-repeat 50% / cover; opacity: .2; }
#bookBox .bookinfo { position: relative; top: -50px; 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 ul { padding: 50px 0; z-index: 2; }
#customBox ul li { position: relative; }
#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; padding: 70px 0; min-height: 215px; background: rgb(15 41 66 / .8); z-index: 2; }
#customBox ul li .info h3 { text-align: center; font-size: 35px; }
#customBox ul li .info article { margin: 30px auto 0; width: 700px; line-height: 200%; text-align: center; font-weight: 400; color: #ccc; }

/* bottomBox */
#bottomBox{
    overflow: hidden;
}

/* sixBox */
#sixBox{
    padding: 3vw 7vw 5vw 10vw;
    float: left;
    width: calc(50% - 17vw);
}
#sixBox h2{
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 35px;
}
#sixBox article{
    margin-bottom: 30px;
    font-weight: 300;
    line-height: 180%;
    font-size: 15px;
    margin-bottom: 25px;
}
#sixBox ul li{width: calc((100%/3) - 15px);display: inline-block;margin: 10px 5px;vertical-align: top;}
#sixBox ul li .item {background-color: #2b2a2a;padding: 45px 10px;position: relative;}
#sixBox ul li:hover .item{background-color: #ee3111;}
#sixBox ul li .item .top_line{position: absolute;width: 100%;height: 1px;background-color: #ebebeb;top: 7px;opacity: 0;transform: translateX(-105%);transition: all .5s ease;right: 0;}
#sixBox ul li .item .right_line{position: absolute;width: 1px;height: 100%;background-color: #ebebeb;right: 7px;opacity: 0;transform: translateY(-105%);transition: all .5s ease;bottom: 0;}
#sixBox ul li .item .bottom_line {position: absolute;width: 100%;height: 1px;background-color: #ebebeb;bottom: 7px;opacity: 0;transform: translateX(105%);transition: all .5s ease;left: 0;}
#sixBox ul li .item .left_line {position: absolute;width: 1px;height: 100%;background-color: #ebebeb;left: 7px;opacity: 0;transform: translateY(105%);transition: all .5s ease;top: 0;}
#sixBox ul li:hover .item .top_line{opacity: 1;transform: translateX(0);}
#sixBox ul li:hover .item .right_line{opacity: 1;transform: translateY(0);}
#sixBox ul li:hover .item .bottom_line{opacity: 1;transform: translateX(0);}
#sixBox ul li:hover .item .left_line{opacity: 1;   transform: translateY(0);}
#sixBox ul li .item p{text-align: center;margin-bottom: 10px;}
#sixBox ul li .item p img{width: 40px;color: #fff;}
#sixBox ul li:hover .item p i{color: #ffffff;}
#sixBox ul li .item h2{font-size: 16px;color: #fff;font-weight: bold;letter-spacing: 2px;text-align: center;font-family: Nunito, sans-serif, cwTeXHei, serif, 微軟正黑體, Arial, "Arial Narrow";}
#sixBox ul li .item h2 b{
    display: block;
    font-size: 12px;
}
#sixBox ul li:hover .item h2{color: #ffffff;}

/* rightadBox */
#rightadBox {
    padding: 3vw 7vw 5vw 0;
    float: left;
    width: calc(50% - 7vw);
}
#rightadBox .aboutBox a.photo{ height: 387px; background-size: contain; background-position: 0; }
#rightadBox .aboutBox h2 { position: relative; display: inline-block; font-size: 5rem; color: #9c7555; margin-top: -80px; text-shadow: 0px 0px 16px #fff; z-index: 2; } 
#rightadBox .aboutBox h4.small-title { display: block; color: #9c7555; font-family: 'Playfair Display', serif; font-size: 30px; margin-top: -30px; }
#rightadBox .aboutBox p.about-text{ width: 90%; display: block; font-size: 14px; color: #626060; margin: 15px 0 25px; max-height: initial; overflow: hidden; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; }
#rightadBox .aboutBox #SeoStarRating { display: block; }
#rightadBox .aboutBox .btn { width: 90%; text-align: right; padding-top: 12px; }
#rightadBox .aboutBox .btn a { border: 1px solid #e0e0e0; padding: 7px 30px; }
#rightadBox .aboutBox .btn a:hover { height: 100%; top: auto; bottom: 0; background-color: #cbbfaf; color: #fff; }
#rightadBox .listBox {position: relative;margin: 0 auto;background: #fff;}
#rightadBox .listBox:before { position: absolute; width: 100%; height: 1px; background: #fff; display: block; bottom: 20px; left: 0; z-index: 10; content: ""; } 
#rightadBox .listBox .titleBox { padding: 15px 0; text-align: center; }
#rightadBox .listBox .titleBox h2.title { display: inline-block; }
#rightadBox .listBox .titleBox:before , #rightadBox .listBox .titleBox:after { margin: 0 15px; width: 7px; height: 7px; background: #9c7556; border-radius: 50%; display: inline-block; content: ""; }
#rightadBox .listBox ul {padding: 20px;}
#rightadBox .listBox ul li {padding: 20px;border-bottom: 1px #efedea solid;}
#rightadBox .listBox ul li .img{
    float: left;
    width: 130px;
    background-size: cover;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
#rightadBox .listBox ul li .right{
    float: right;
    width: calc(100% - 170px);
}
#rightadBox .listBox ul li .right h4{
    letter-spacing: 2px;
    font-size: 20px;
    font-family: "微軟正黑體";
}
#rightadBox .listBox ul li .right article{
    -webkit-line-clamp: 2;
    font-weight: normal;
    font-family: "微軟正黑體";
    height: 48px;
    overflow: hidden;
    font-size: 14px;
}
#rightadBox .listBox ul li .right p{font-family: "微軟正黑體";margin-top: -5px;}
#rightadBox .listBox ul li .right p font{
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    color: #ff9800;
}
#rightadBox .listBox ul li .right p font i{
    font-size: 14px;
}

@media screen and (min-width:1281px) {
	.indexbox .more a:hover { color: #fff; }
	.indexbox .more a:hover:before { width: 100%; }
	#contentBox{background-attachment: fixed;}
}
@media screen and (max-width: 1560px) {
#pandr-title .webframe, #sixBox .webframe{
    width: 95%;
}
#sixBox{
    padding: 3vw 5vw;
    width: calc(50% - 10vw);
}
}
@media screen and (max-width:1280px) {
	#productBox .productinfo ul li.slick-active .img {}
	#bookBox .bookinfo .rightBox , #bookBox .bookinfo .slick-dots { margin-left: 50px; }
	#bookBox .bookinfo ul li .info { margin-left: 0; }
    #aboutBox .aboutinfo .row.info article{font-size:15px;}
    #contentBox .webframe{
    width: 90%;
}
}
@media screen and (max-width:1024px) {
	#productBox:before { width: 95vw; }
	#productBox {padding: 5vw;}
	#bookBox .bookinfo .boxtit { margin-left: 0; width: 100%; text-align: center; top: -40px; bottom: auto; left: 0; }
	#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; }
    #pandr-title .title-set >div{
    width: calc(50% - 60px);
}
#pandr-title .title-set >div:nth-of-type(4n+1):before, #pandr-title .title-set >div:nth-of-type(4n):before{
    left: 0;
    width: 100%;
}
#pandr-title p{
    width: 80%;
}
#sixBox{
    float: none;
    width: calc(100% - 10vw);
}
#rightadBox{
    float: none;
    width: 100%;
    padding: 0;
}
#rightadBox .listBox ul{
    padding: 50px;
}
}
@media screen and (max-width:980px) {
	#aboutBox { padding-top: 0; }
	#aboutBox .fixTxt { display: none; }
	#aboutBox #pictureBox { top: -7vw; }
	#aboutBox #pictureBox , #aboutBox #pictureBox a.photo { width: 40vw; height: 25vw; }
	#aboutBox .aboutinfo { padding: 5vw 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 {}
	#aboutBox .aboutinfo .row.img {width: 100%;display: block;opacity: .2;top: 0;left: 0;z-index: 1;}
	#productBox .bg { display: none; }
	#customBox ul li .info article { width: 85%; }
}
@media screen and (max-width:640px) {
	#NewsBox { position: relative; width: 90%; }
	#productBox .productinfo ul { margin: auto; width: 80%; }
	#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; }
}
@media screen and (max-width: 500px) {
	#NewsBox  , #productBox .productinfo ul { width: 100%; }
#pandr-title p{
    width: 100%;
}
#pandr-title .title-set >div{
    width: calc(100% - 60px);
    padding: 30px 30px 70px;
}
#contentBox .wrap{display: block;}
#contentBox .topItem:nth-of-type(2)::before{
    width: 100%;
    height: 1px;
    top: 0;
}
#productBox .productinfo ul li .info{
    padding: 10px;
}
#sixBox ul li{
    width: calc(50% - 15px);
}
#rightadBox .listBox ul li .img{
    width: 70px;
}
#rightadBox .listBox ul li .right{
    width: calc(100% - 90px);
}
#rightadBox .listBox ul li{
    padding: 20px 0;
}
#rightadBox .listBox ul li .right h4{
    font-size: 18px;
}
#rightadBox .listBox ul{
    padding: 30px;
}
}