#NewsBox{padding:100px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#NewsBox .speBox{display:inline-block;width:611px;vertical-align:top}
#NewsBox .speBox .titleSet{margin:0 100px}
#NewsBox .speBox .titleSet .speBoxTitle{font-size:50px;line-height:120%;font-weight:400;font-family:'Merriweather',serif}
#NewsBox .speBox .titleSet .subBoxTitle{color:#9a9a9a;font-size:15px;font-weight:400;margin:30px 0 50px;line-height:160%}
#NewsBox .speBox .titleSet .submore a,#product .subBoxTitle a{display:inline-block;border:1px solid #d0d0d0;font-size:13px;padding:12px 55px;color:#545454;position:relative;transition:all linear .2s}
#NewsBox .speBox .titleSet .submore a:before,#product .subBoxTitle a:before{content:'+';position:absolute;left:12px;top:10px;color:#d0d0d0;font-size:24px}
#news{display:inline-block;width:calc(100% - 615px);margin-right:-4px}
#news .newsList >div{margin-bottom:35px}
#news .newsList .border{position:relative;overflow:hidden}
#news .newsList .border a,#product #prolay .p-box a{position:absolute;display:block;width:100%;height:100%;left:0;top:0;z-index:5}
#news .newsList .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;float:left}
#news .newsList .photo img,#product #prolay .photo img{width:100%}
#news .newsList .news-info{float:left;margin-left:30px;width:calc(100% - 340px)}
#news .newsList .news-info p{font-size:14px;color:#000}
#news .newsList .news-info h3{font-size:24px;line-height:110%;font-weight:400;margin:7px 0 20px;color:#3c3838;font-family:'Noto Serif TC',serif;transition:all linear .2s}
#news .newsList .news-info .describe{color:#888;font-weight:400;font-size:16px;position:relative}
#news .newsList .news-info .describe h4{font-weight:400;width:calc(100% - 80px)}
#news .newsList .more{position:absolute;right:0;top:0;font-family:'Merriweather',serif;padding-bottom:15px;font-size:13px}
#news .newsList .more b{font-weight:400;color:#5f5f5f}
#news .newsList .more:after{content:'';display:block;position:absolute;left:21px;bottom:0;width:15px;height:1px;background:#bd8655;transform:rotate(35deg);transform-origin:center right;transition:all linear .2s}
#news .newsList .more:before{content:'';display:block;position:absolute;left:6px;bottom:0;width:30px;height:1px;background:#bd8655;transition:all linear .2s;transition-delay:.2s}
#aboutWrap{overflow:hidden;padding: 80px 0;position:relative;}
#aboutWrap section{position:relative;}
#aboutWrap .bgstyle{position:absolute;width:100%;height:100%;top:0;left:0;z-index:-1;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;transform:scale(1.1);}
#aboutWrap .tit h3{position:relative;text-align: center;padding:0;font-size: 30px;color: #ed497c;line-height: 30px;font-weight: normal;display: none;}
#aboutWrap .tit h3:after{
    width: 70px;
    height: 1px;
    margin: 30px auto 0;
    background: #b3aeb0;
    display: block;
    content: "";
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }
#aboutWrap .tit h4{color:#0e0e0e;font-size:20px;line-height:120%;}
#aboutWrap .aboutBox ,
#aboutWrap .fbBox ,
#aboutWrap .adList ul li{}
#aboutWrap .aboutBox .tit{overflow:hidden;}
#aboutWrap .aboutBox .tit .left-t{}
#aboutWrap  .right-t{
    text-align: center;
}
#aboutWrap  .right-t a{
    letter-spacing: 5px;
}
#aboutWrap  .right-t a i{
    margin-left: 5px;
    transition: all 0.4s ease;
}
#aboutWrap .right-t a:hover i{margin-left: 10px;}
#aboutWrap .aboutBox article{margin: 50px auto 20px;color:#575757;font-size:16px;line-height:170%;width: 40%;text-align: center;}
#aboutWrap .aboutBox a{padding:5px 15px;display:inline-block;background:#535353;background:-moz-linear-gradient(left, #535353 0%, #383737 100%);background:-webkit-gradient(linear, left top, right bottom, color-stop(0%,#535353), color-stop(100%,#383737));background:-webkit-linear-gradient(left, #535353 0%,#383737 100%);background:-o-linear-gradient(left, #535353 0%,#383737 100%);background:-ms-linear-gradient(left, #535353 0%,#383737 100%);background:linear-gradient(to right, #535353 0%,#383737 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#535353', endColorstr='#383737',GradientType=0);color:#fff;border-radius:5px;}
#aboutWrap .fbBox{margin-left:5%;width:35%;}
#aboutWrap .adList ul{overflow:hidden;margin: 30px auto;width: 960px;}
#aboutWrap .adList ul li{animation-name:fadeInUp;-webkit-animation-name:fadeInUp;display: inline-block;vertical-align: top;width: calc((100%/3) - 30px);margin: 0 10px;}
#aboutWrap ul li:nth-child(2){-webkit-animation-delay:0.5s;}
#aboutWrap ul li:nth-child(3){-webkit-animation-delay:1s;}
#aboutWrap ul li:nth-child(4){-webkit-animation-delay:1.5s;}
#aboutWrap .adList ul li a.photo ,
#bookWrap ul li a.photo ,
#bookWrap ul li .hoverBox{transition:all 0.4s ease;overflow: hidden;background-position: 50% 50%;background-repeat: no-repeat;background-size: auto 100%;display: block;}
#aboutWrap .adList ul li:hover a.photo{background-size: auto 97%;}
#youtube{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
#youtube .UTwo{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
#youtube .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 0.3s;padding:0;}
#youtube .UTwo a:hover{width:110px;height:110px;line-height:110px;left:calc(50% - 55px);top:calc(50% - 55px);font-size:34px;}
#youtube .UTwo iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
#index-article{padding: 30px 0;background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;}
#index-article h2,
#product h2{
	font-size: 20px;
	color:#313131;
	/* padding-bottom:10px; */
	position:relative;
	line-height: 100%;
	font-family: 'Meddon', cursive;
	overflow:hidden;
	text-align: center;
	font-weight: 400;
}
#index-article p{
    text-align: center;
    margin-top: 5px;
    letter-spacing: 5px;
}
#index-article h2 b,
#product h2 b{
	color:#6967b5;
}
#index-article h2 span,
#product h2 span{
	float:right;
}
#index-article h2 span a,
#product h2 span a{
	display:block;
    color: #000;
    font-size: 15px;
}
#index-article h2 span a b,
#product h2 span a b{
	margin-left: 7px;
}
#index-article h2:after,
#product h2:after{
	position:absolute;
	display:block;
	content:'';
	width:6em;
	height:4px;
	background:#f0d973;
	bottom:-4px;
	left:0;
}
#index-article .articleList{
	overflow:hidden;
	margin: 30px 0;
}
#index-article .articleList .article-list{
	position: relative;
}
#index-article .articleList .article-list,
#index-article .articleList .article-list div,
#index-article .articleList .article-list img,
#index-article .articleList .article-list a{
	outline:none;
}
#index-article .articleList .article-list .photo{
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}
#index-article .articleList .article-list .photo a{
    display: block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    /* background-image:url(../../images/10/index-profile-style.png); */
    transition:all ease-in-out 0.2s;
    background: linear-gradient(360deg, rgba(0, 0, 0, 0.55) 5%, rgba(255, 255, 255, 0) 25%);
}
#index-article .articleList .article-list .photo a img,
#product .product-show .p-box .photo a img{
	width:100%;
}
#index-article .articleList .article-list .article-info{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-bottom: 40px;
	color: #fff;
}
#index-article .articleList .article-list .article-info article{
    text-align: center;
    margin-bottom: 10px;
}
#index-article .articleList .article-list .article-info h3{
	text-align:center;
	font-size: 20px;
	width: 80%;
	margin: 0 auto;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #fff;
	font-weight: normal;
}
#index-article .articleList .article-list .article-info h3 a{
	color:#fff;
}
#index-article .articleList .article-list .article-info p{
	text-align:center;
	width: 80%;
	margin: 0 auto;
	line-height: 120%;
	display: none;
}
#index-article .articleList .article-list:hover .article-info p{
    display: block;
    margin-top: 30px;
    letter-spacing: 0;
    line-height: 165%;
    text-align: left;
}
#index-article .articleList .article-list .article-info p a{
	color:#fff;
}
#index-article .articleList .article-list .article-info p.more{
	display: none;
	transition:all ease-in-out 0.4s;
	margin-top: 0;
}
#index-article .articleList .article-list .article-info p.more a{
	color: #fff;
	display: inline-block;
	padding: 8px 0;
	letter-spacing: 0;
	border-bottom: 2px solid #fff;
}
#index-article .articleList .article-list:hover .photo a{background-color: rgba(0, 0, 0, 0.75);}
#index-article .articleList .article-list:hover .article-info p.more{
	display: block;
	margin-top: 20%;
	margin-bottom: 10%;
	text-align: center;
}
#product{    padding: 30px 0;background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;} 
#product .product-show{
	margin-top: 30px;
}
#product .product-show .p-box{
	position: relative;
	margin: 0 10px;
}
#product .product-show .p-box .photo a{
    display: block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}
#product .product-show .p-box h3{
	text-align:center;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	background:rgba(0,0,0,0.7);
	padding: 5px 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#product .product-show .p-box h3 a{
	color:#fff;
	font-size:16px;
}
#bookBox{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;padding:70px 0 100px}
#bookBox .speBox{margin-bottom:50px}
#bookBox .speBox p{text-align:center}
#bookBox .speBox p a{transition:all linear .2s}
#bookBox #book{width:900px;margin:0 auto}
#bookBox #book .bList{overflow:hidden}
#bookBox #book .bList >div{float:left;width:50%;text-align:center;margin-bottom:30px}
#bookBox #book .bList >div:nth-child(even){margin-top:80px}
#bookBox #book .mofd{display:inline-block;position:relative}
#bookBox #book .photo{background-repeat:no-repeat;background-position:50%;background-size:auto 100%;margin-right:50px;background-color:#000;transition:all linear .2s}
#bookBox #book .photo a{display:block}
#bookBox #book .photo img{width:100%}
#bookBox #book h3{background:#fff;padding:25px 30px;position:absolute;bottom:-22px;right:0;max-width:calc(60% - 60px);word-break: break-all;}
#bookBox #book h3 a{color:#383838;font-size:20px;font-family:'Noto Serif TC',serif}
@media (min-width: 1025px) {
#NewsBox .speBox .titleSet .submore a:hover,#product .subBoxTitle a:hover{background:#d0d0d0;color:#fff}
#product #prolay .p-box:hover .photo img{background:rgba(0,0,0,0.41)}
#product #prolay .p-box:hover .photo:after,#product #prolay .p-box:hover .photo:before{opacity:1}
#bookBox #book .photo:hover{background-size:auto 110%}
#news .newsList .border:hover .more:after{transform:rotate(0deg);opacity:0}
#news .newsList .border:hover .more:before{width:0;left:30px}
#news .newsList .border:hover .news-info h3{color:#d2ab52}
#bookBox .speBox p a:hover{color:#ad925f}
}
@media screen and (max-width: 1440px) {
#NewsBox .speBox{width:500px}
#news{width: calc(100% - 510px);}
}
@media screen and (min-width: 1281px) {
#youtube{display:table;width:100%}
#youtube .useU2{display:table-cell;vertical-align:middle}
}
@media screen and (max-width: 1280px) {
#NewsBox .speBox{width:400px}
#news{width:calc(100% - 400px)}
#news .newsList .photo{width:100px}
#news .newsList .news-info{width:calc(100% - 190px)}
#news .newsList .news-info h3{margin:4px 0 15px;font-size:20px}
#NewsBox .speBox .titleSet .speBoxTitle{font-size:42px}
#NewsBox .speBox .titleSet{margin:0 70px}
#index-article .articleList .article-list{
		margin-right: 0;
}
}
@media screen and (max-width: 1024px) {
#NewsBox .speBox{width:100%}
#news{width:calc(100% - 140px);margin:70px 70px 0}
#news .newsList .news-info{width:calc(100% - 130px)}
#bookBox #book{width:95%}
#aboutWrap .adList ul {    width: 100%;}
}
@media screen and (max-width: 640px) {
#news{width:calc(100% - 60px);margin:70px 30px 0}
#NewsBox .speBox .titleSet{margin:0 30px}
#news .newsList .news-info p.more{display:none}
#news .newsList .news-info .describe h4,#about-slide .about .arts,#about-slide .free p,#about-slide .about .more{width:100%}
#product #prolay .p-info h3{font-size:20px;margin:17px 0 10px}
#bookBox #book .bList .photo{    margin-right: 0;}
#bookBox #book .bList >div{margin-bottom: 0;}
#bookBox #book .bList h3{    bottom: 0;
    padding: 15px 20px;max-width: calc(60% - 40px);}
#bookBox #book .bList h3 a{font-size: 18px;}
#bookBox #book .bList >div:nth-child(even){margin-top: 0;}
#aboutWrap .aboutBox ,
#aboutWrap .fbBox{width:95%;margin-left:2.5%;}
#aboutWrap .aboutBox{margin-bottom:20px;}
#aboutWrap .adList ul li{width:100%;margin: 10px 0;}
#aboutWrap .fbBox{text-align:center;}
#aboutWrap .aboutBox article {    width: 85%;}
}
@media screen and (max-width: 480px) {
#NewsBox{padding:70px 0}
#news{width:100%;margin:50px 0 0}
#news .newsList .news-info .describe h4{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#news .newsList .news-info h3{margin:0 0 10px;font-size:18px}
#news .newsList .news-info{margin-left:20px;width:calc(100% - 120px)}
#NewsBox .speBox .titleSet .speBoxTitle{font-size:35px}
#NewsBox .speBox .titleSet .subBoxTitle{margin:10px 0 30px}
#product .titleSet .speBoxTitle,#bookBox .speBox h2{font-size:30px}
#product .titleSet{margin:40px}
#product #prolay .p-box{margin:0 10px}
#product #prolay .p-info h3{font-size:18px}
#product #prolay .p-info .price span.now b{font-size:16px}
#bookBox #book .photo{margin-right:20px}
#bookBox #book h3{padding:15px 20px;max-width:calc(70% - 40px)}
#bookBox #book h3 a{font-size:17px}
#bookBox #book .bList h3{
    padding: 10px 15px;
    max-width: calc(80% - 30px);
}
#bookBox #book .bList h3 a{
    font-size: 16px;
}
#aboutWrap .tit h3{line-height:100%;}
}
@media screen and (max-width:320px){
#aboutWrap ul li:nth-child(2) ,
#aboutWrap ul li:nth-child(3){width:100%;}
#aboutWrap ul li:nth-child(2) ,
#aboutWrap ul li:nth-child(3){margin-left:0;margin-right:0;}
}