@import url('https://fonts.googleapis.com/css?family=Lusitana');
#ssbanner .bxslider{margin:0}
#ssbanner{
	background-image: url(/images/21/index-news-bg.png);
	background-repeat: no-repeat;
	background-position: 50% 136%;
	padding: 10px 0 10px;
	position: relative;
	z-index: 2;
	background-size: auto;
}

#ssbanner .bxslider .slick-slide{
    position: relative;
    padding-top: 15px;
    height: 165px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1;
}
#ssbanner .bxslider .Img {
    margin-left: auto;
    margin-right: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100px;
    height: 100px;
}
#ssbanner .bxslider a img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: none;
    object-fit: none;
}
#ssbanner .bxslider .info{z-index:2;display:table;vertical-align:middle;height: 26px;font-size: 15px;font-weight: 400;letter-spacing: .4px;color: #111111;text-align: center;margin: auto;padding: 10px 0 0;}
#ssbanner .bxslider .info h2{font-weight:400;text-align:center;letter-spacing: 0px;font-size: 18px;height: 36px;font-size: 15px;font-weight: 800;letter-spacing: .4px;color: #111111;font-family: 'Oswald','Microsoft JhengHei';}

/* news */
#news {background-repeat:repeat-x;background-position: 0 -30px;padding: 28px 0 15px;position:relative;z-index:2;}
#news .newstitle {position: relative;float: left;}
#news .newsList {float: right;width: 57%;margin: 0;}
#news .newsList .newsbox ,
#news .newsList .newsbox .info h3 { overflow:hidden; }
#news .newsList .newsbox .time {float:left;width:67px;margin-top: 12px;}
#news .newsList .newsbox .time p {font-family: 'Titillium Web', sans-serif;color: #a5a5a5;font-size:25px;}
#news .newsList .newsbox .time p.Pubyear {color:#9f9999;font-size:14px;text-align: right;display: none;}
#news .newsList .newsbox .info {float:left;width: calc(90% - 57px);margin-left:20px;}
#news .newsList .newsbox .info h3 a {color:#3b3b3b;font-size: 19px;font-family: 'Microsoft JhengHei';}
#news .newsList .newsbox .info span {width:45px;height:1px;display:block;background: #ffffff;margin: 2px 0;}
#news .newsList .newsbox .info article {color:#595757;font-size: 13px;height: 37px;font-family: 'Microsoft JhengHei';}

#aboutFunc{padding:150px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;overflow:hidden}
#aboutFunc #about{float:right;width:calc(50% - 80px);margin-right:50px}
#aboutFunc #about h2{color:#c35696;border-left:7px solid #c35696;padding-left:40px;font-size:22px;font-family:'cwTeXHei',serif;font-weight:400;animation-name:fadeInLeft}
#aboutFunc #about h2 b{display:block;font-family:'Lusitana',serif;color:#e9c68b;font-size:80px;line-height:100%;margin-top:15px;font-weight:400}
#aboutFunc .arts{font-size:17px;line-height:190%;margin-left:45px;margin-top:30px;animation-delay:.7s}
#aboutFunc .more{margin-left:45px;margin-top:40px;position:relative;display:inline-block;border-radius:25px;overflow:hidden;animation-delay:1s}
#aboutFunc .more a,#bookBox #BookTitle .index-title .more p a{color:#e9c68b;display:inline-block;border:1px solid #e9c68b;border-radius:25px;padding:3px 30px;font-family:'Lusitana',serif;position:relative;z-index:2}
#aboutFunc .more a b,#bookBox #BookTitle .index-title .more p a b{margin-right:10px}
#youtube{float:left;width:calc(50% - 100px);margin-left:50px;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
.UTwo{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}
.UTwo a{display:block;width:100px;height:100px;text-align:center;line-height:100px;border-radius:50%;background:rgba(0,0,0,0.6);position:absolute;z-index:5;color:#dcdcdc;font-size:30px;left:calc(50% - 50px);top:calc(50% - 50px);transition:all linear .3s}
.UTwo a:hover{width:110px;height:110px;line-height:110px;left:calc(50% - 55px);top:calc(50% - 55px);font-size:34px}
.UTwo iframe,.UTwo object,.UTwo embed{position:absolute;top:0;left:0;width:100%;height:100%}
#pandr-title{background-color:#944473;background-image:url(/images/21/index-book-title-bg.png);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;padding:80px 0;color:#fff}
#pandr-title .webframe{overflow:hidden;width:1160px}
#pandr-title .title-set{float:left}
#pandr-title .title-set h2{font-weight:400;font-size:24px}
#pandr-title .title-set h3{color:#e9c68b;font-weight:400;font-size:50px;line-height:130%}
#pandr-title .small-talk{float:right}
#pandr-title .small-talk p{text-align:right;font-size:16px;color:#e19dc5;line-height:180%;width:280px}
.big-content{background-image:url(/images/21/index-book-room-bg.png);background-repeat:no-repeat;background-position:0 50%}

.topic{text-align:center;position:relative;padding: 40px 0;}
.topic .topic-title{display:inline-block;position:relative;z-index:3;color:#333}
.topic .topic-title h2{font-family:'Rubik',sans-serif;text-align:center;font-size:32px;line-height:110%}
.topic .topic-title p{text-align:center;font-size: 42px;line-height:110%;margin-top:7px;font-weight: 600;font-family: 'Oswald','Microsoft JhengHei';letter-spacing: 1px;color: #df1027;}
.topic b{font-family:'Marck Script',cursive;position:absolute;z-index:2;left:0;width:100%;height:100%;display:block;top:0;font-size:170px;color:#eaeaea;line-height:197px;text-align:center;font-style:italic;transform:rotate(-5deg);font-weight:400}
.slick-slider
{
    margin-bottom: 70px;
}
#product{overflow:hidden;position:relative}
#product .webframe{position:relative;z-index:3;width: 1366px;margin: 0 auto;}
#product:after{width:100%;height:70%;content:'';display:block;position:absolute;top:0;left:0;z-index:1}
#product .topic .topic-title{color:#fff}
#product .topic b{color:rgba(245,245,245,0.12)}
#prolay{position:relative;z-index:3;padding-bottom: 50px;}
#prolay .slick-list{padding:15px}
#prolay .pro-list .p-border{position:relative;padding:30px;background:#fff;/* border:1px solid #f5f5f5; */transition:all linear .2s;text-align: center;}
#prolay .pro-list h4{color: #7c7c7c;font-weight:400;font-size: 12pt;text-align: center;}
#prolay .pro-list .photo{margin: 0px 0;background-color: #ffffff;background-position:50% 50%;background-repeat:no-repeat;background-size:contain;}
#prolay .pro-list .photo img{width:100%}
#prolay .pro-list a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5}
#prolay .pro-list .p-info h3{line-height:130%;font-size: 15pt;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align: center;}
#prolay .pro-list .p-info >span{background:#ff7166;display:block;width:20px;height:1px;margin:20px 0}
#prolay .pro-list .p-info .describe{line-height:140%;font-size:11pt;overflow:hidden;height:30pt;display: none;}
#prolay .pro-list .p-info .price{overflow:hidden;margin:10px 0 0;height:22px}
#prolay .pro-list .p-info .price span{float:right;font-size:10pt;color:#565656}
#prolay .pro-list .p-info .price span.old{float:left;text-decoration:line-through}
#prolay .pro-list .p-info h5{margin:0;margin-top:20px;text-align: center;}
#prolay .pro-list .p-info h5 b{font-size:11pt;display:inline-block;background: #df1027;padding:6px 35px;/* border-radius:25px; */color: #ffffff;}
#prolay .slick-prev{width:40px;height:40px;left:-50px}
#prolay .slick-next{width:40px;height:40px;right:-50px}
#prolay .slick-prev:before,#prolay .slick-next:before{font-size:40px;color:#3a3f4a}
.same-btn{text-align:center;margin-top:40px;display: none;}
.same-btn a{display:inline-block;background:#384250;color:#fff;font-size:11pt;font-weight:700;padding:15px 45px;border-radius:25px;transition:all linear .2s}
.same-btn a:hover{opacity:.8}
#prolay .same-btn{margin-top:40px}
#bookBox #book .photo a, #bookBox #book .photo .pic {
    display: block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}
#bookBox{overflow:hidden;position:relative;background-repeat:no-repeat;background-position:50%;background-size:cover}
#bookBox #BookTitle{position:absolute;width:463px;left:7.5%;top:calc(50% - 150px);z-index:5;display: none;}
#bookBox #BookTitle .index-title h3{font-size:24px;font-weight:400;margin-bottom:10px}
#bookBox #BookTitle .index-title h2{color:#e9c68b;font-family:'Lusitana',serif;font-size:70px;line-height:120%;font-weight:400;letter-spacing:.1em}
#bookBox #BookTitle .index-title >p{font-size:17px;line-height:180%;margin-top:50px;width:60%}
#bookBox #BookTitle .index-title .more{text-align:right;width:60%;margin-top:41px}
#bookBox #BookTitle .index-title .more p{text-align:right}
#bookBox #book{}
#bookBox #book li{float:left;width:calc(100% / 3)}
#bookBox #book .photo{overflow:hidden}
#bookBox #book .photo a{position:relative}
#bookBox #book .info{position:absolute;width:100%;height:100%;color:#fff;z-index: 3;/* padding: 190px 0px 0; */}
#bookBox #book .info h3{font-weight: 400;}
#bookBox #book .info p{font-size:18px;z-index:1;text-align: center;width: 100%;padding: 190px 0px 0;font-family: 'Microsoft JhengHei';}
#bookBox #book .info span{vertical-align:super;display:inline-block;width:50px;height:1px;background:#fff;margin-right:30px}
#bookBox #book .photo .pic{position:absolute;left:0;top:0;width:100%;height:100%;z-index: 1;transition:linear all .6s;}
.wow{animation-name:fadeInUp;animation-duration:.5s}
@media screen and (min-width: 1025px) {
#ssbanner .bxslider .Img:after{content:'';background: rgba(220, 220, 220, 0.65);position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:linear all .3s;}
#ssbanner .bxslider a:hover:after,#bookBox #book .info:hover:after{opacity:1}
#pandr-title{background-attachment:fixed}
#bookBox #book .info:after{position:absolute;width:calc(100% - 30px);height:calc(100% - 30px);left:15px;top:15px;background: rgba(0, 0, 0, 0.28);content:'';display:block;transition:linear all .3s;opacity:0;}
#bookBox #book .info:before{position:absolute;width:calc(100% - 30px);height:calc(100% - 30px);left:15px;top:15px;content:'';display:block;transition:linear all .6s;opacity:0;}
#bookBox #book .info:hover:before{opacity:1;width:100%;height:100%;left:0;top:0}
#bookBox #book .photo:hover .pic{transform:scale(1.2)}
#aboutFunc .more p,#bookBox #BookTitle .index-title .more p{position:relative;overflow:hidden;display:inline-block;border-radius:25px}
#aboutFunc .more:after,#bookBox #BookTitle .index-title .more p:after{content:'';position:absolute;width:100%;height:100%;left:0;top:0;background:#8c4747;display:block;z-index:1;transform:scale(0,1);transform-origin:right center 0;transition:transform 1s cubic-bezier(0.08,0.65,0.38,1.08)}
#aboutFunc .more:hover:after,#bookBox #BookTitle .index-title .more p:hover:after{transform:scale(1,1);transform-origin:left center 0}
#pandr-title .title-set{width:calc(100% - 350px)}
}
@media screen and (max-width: 1680px) {
#ssbanner .bxslider .info{
    padding: 5px 0 0;
}
#ssbanner .bxslider .info .circle{width:151px;height:151px;font-size:50px;line-height:151px;margin:0 auto 20px}
#ssbanner .bxslider .info span{margin:10px auto}
#bookBox #BookTitle{left:5%}
#bookBox #BookTitle .index-title h2{font-size:65px}
#bookBox #book .info p {
    padding: 160px 0px 0;
}
}
@media screen and (max-width: 1440px) {
#bookBox #BookTitle .index-title h2{font-size:60px}
#pandr-title .title-set h3{font-size:40px}
#bookBox #book .info p {
    padding: 140px 0px 0;
}
#news {
    background-repeat: repeat-x;
    background-position: -240px -18px;
}
#ssbanner .bxslider .info h2 {
    text-align: center;
    font-size: 14px;
    line-height: 139%;
}
}
@media screen and (max-width: 1366px) {
#bookBox #BookTitle .index-title h2{font-size:52px}
#bookBox #BookTitle{width:350px}
	#news .newstitle {width: 50%;}
	#news .newsList {width: 50%;}
#product .webframe {
    position: relative;
    z-index: 3;
    width: 80%;
    margin: 0 auto;
}
#bookBox #book .info p {
    padding: 140px 0px 0;
}
}
@media screen and (max-width: 1280px) {
#ssbanner .bxslider .info{left:calc(50% - 115px);}
#ssbanner .bxslider .info .circle{width:121px;height:121px;font-size:40px;line-height:121px}
#pandr-title .webframe{width:90%}
#aboutFunc .more a,#bookBox #BookTitle .index-title .more p a{color:#fff;background:#d0b07b;border:1px solid #fff}
#aboutFunc #about h2 b{font-size:60px}
#bookBox #BookTitle{margin-left:5%;width:90%;position:initial;margin-bottom:50px;    margin-top: 50px;}
#bookBox #book{width:100%;margin-left:0}
#bookBox #BookTitle .index-title >p,#bookBox #BookTitle .index-title .more{width:100%}
#prolay .slick-list{padding:0}
#prolay{width:calc(100% - 90px);margin:0 auto}
#bookBox #book .info h3 {
    font-size: 27px;
    line-height: 110%;
    margin: 50px 0;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 3px #592543;
    text-align: center;
    font-weight: 400;
    color: #ffffff;
}
#bookBox #book .info p {
    padding: 80px 0px 0;
}
}
@media screen and (max-width: 1024px) {
#pandr-title .title-set{float:none;width:100%}
#pandr-title .small-talk{float:none;width:100%}
#pandr-title .small-talk p{width:100%}
#bookBox #book .info p {
    padding: 50px 0px 0;
}
}
@media screen and (min-width: 1025px) {
#freeboxlist .free:hover,#prolay .pro-list .p-border:hover,#book .border:hover{transform:translate(-15px,-15px)}
}

@media screen and (min-width: 981px) {
}
@media screen and (max-width: 980px) {
#pandr-title{padding:60px 0}
#pandr-title .title-set h3,#bookBox #BookTitle .index-title h2{font-size:35px;line-height:110%}
#bookBox #BookTitle .index-title h2{letter-spacing:0}
#bookBox #book .info h3{font-size:22px;margin:40px}
#bookBox #book .info p{/* margin:40px; *//* font-size:15px; */display: none;}
#news {
    background-repeat: no-repeat;
    background-position: -170px -8px;
    background-size: 180%;
    padding: 0px 0 9px;
}
#news .newsList .newsbox .info {
    float: left;
    width: calc(90% - 57px);
    margin-left: 20px;
    margin-top: 10px;
}
#news .newsList .newsbox .time {
    margin-top: 20px;
}
}
@media screen and (max-width: 768px) {
#youtube{width:calc(100% - 100px)}
#aboutFunc #about{width:calc(100% - 100px);margin-top:50px}
#aboutFunc #about h2 b{font-size:50px}
#aboutFunc #about h2{font-size:18px}
#aboutFunc{padding:70px 0}
	#news .newstitle {/* float:none; *//* width:100%; *//* margin-bottom:80px; */}
#news {
    background-repeat: no-repeat;
    background-position: -70px -2px;
    background-size: 180%;
    padding: 0px 0 9px;
}
}
@media screen and (max-width: 640px) {
#ssbanner .bxslider .info .circle{width:100px;height:100px;font-size:32px;line-height:100px}
#pandr-title .title-set h2,#bookBox #BookTitle .index-title h3{font-size:18px}
#pandr-title .small-talk{float:none;width:100%;clear:both;text-align:right}
#pandr-title .small-talk p{font-size:8pt}
#pandr-title{padding:40px 0}
#bookBox #book li{float:left;width:50%}
#bookBox #book li:nth-child(3) {
    float: left;
    width: 100%;
}
#bookBox #BookTitle .index-title >p{margin-top:0;font-size:.8rem}
	#news .newstitle img { height:50px; }
#bookBox #book .info p {
    /* margin: 40px; */
    font-size: 15px;
}
	#news .newsList ,
	#news .newstitle img{/* height: 87px; */width: 100%;margin-top: 40px;}
}
@media screen and (max-width: 480px) {
#ssbanner .bxslider a img{padding:30px 0}
#ssbanner .bxslider .info{width:90%;left:5%;}
#aboutFunc #about{width:calc(100% - 60px);margin-top:50px;margin-right:30px}
#youtube{width:calc(100% - 60px);margin-left:30px}
#aboutFunc #about h2{padding-left:25px}
#aboutFunc .arts,#aboutFunc .more{margin-left:25px}
#aboutFunc{padding:50px 0}
#bookBox #book .info h3{font-size:20px;margin:20px}
#bookBox #book .info p{margin:20px;font-size:12px}
#aboutFunc #about h2 b{font-size:40px}
#pandr-title .title-set h3,#bookBox #BookTitle .index-title h2{font-size:28px}
#prolay .pro-list .p-border{padding:20px}
	#news .newstitle img  { height:45px; }
	#news .newsList .newsbox .time { float:none; margin:0; }
	#news .newsList .newsbox .info { float:none; width:100%; margin:15px 0 0; }
	#news .newsList .newsbox .time p.Pubyear { text-align:left; }
	#news .newstitle { margin-bottom: 50px; }
}