.wrap {position: relative;z-index: 998;}
.wrap #wrapBox >div { position: relative; }
.wrap #wrapBox .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; opacity: .4; }

/* aboutBox */
#about{
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: fixed;
    position:relative;
    background-size: cover;
    z-index: 2;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    ::i-block-chrome, #about {
		background-attachment:initial;
    }
}
.abbg{
	overflow: hidden;
	width: 30%;
	padding: 150px 0;
	margin: 0 auto;
}
#about .about-box{overflow:hidden;position:relative;}
#about #indexyoutube{
    display: block;
    width: 50%;
    float: left;
    background-repeat: no-repeat;
    background-position:  50%;
    background-size: cover;
    left: 0;
    top.: 0;
    top: 0;
    z-index: 54;
}
/**for u2**/
.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(255, 5, 5, 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;
}
.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%;}
#about #about-wrap h2{text-align: center;font-size: 40px;color: #fff;}
#about #about-wrap p{
    text-align: center;
    color: #fff;
    font-size: 20px;
    letter-spacing: 7px;
    margin-bottom: 30px;
}
#about #about-wrap span{
    background-color: #fff;
    height: 3px;
    width: 70px;
    display: block;
    margin: 0 auto;
}
#about-wrap article{
	color: #ffffff;
	font-size: 18px;
	margin: 50px 0 30px;
	line-height: 150%;
	font-weight: 500;
	text-align: center;
}
#about-wrap p .more{
	background-repeat: repeat-x;
	background-position: 50% 50%;
	color: #fff;
	display: inline-block;
	height: 44px;
	line-height: 44px;
	text-align: center;
	font-size: 15px;
	border: 1px solid #fff;
	padding: 0 50px;
}
#about-wrap p .more:hover{
    background-color: #fff;
    color: #1f1f1f;
}
/* Bgoods */
#Bgoods{
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: fixed;
    position:relative;
    background-size: cover;
    z-index: 2;
    overflow: hidden;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    ::i-block-chrome, #Bgoods {
		background-attachment:initial;
    }
}
#Bgoods .abbg{
	overflow: hidden;
	float: none;
	width: 100%;
	margin-right: 0;
	padding: 150px 0;
}
#Bgoods .abbg p a{
    border: 1px solid #000;
    font-size: 15px;
    color: #000;
    padding: 0 50px;
}
#Bgoods .abbg p a:hover{background-color:#000;color: #f9f9fb;}
#Bgoods .abbg article{
    text-align: center;
    margin: 0px 0 50px;
    font-size: 30px;
    letter-spacing: 10px;
    color: #565656;
    font-weight: 500;
}
#Bgoods .abbg p{
    text-align: center;
}
#Bgoods .abbg h2{
    text-align: center;
    font-size: 40px;
    font-family: 'Oxygen', sans-serif;
    text-transform: uppercase;
}
#Bgoods .Bgoods-box{overflow:hidden;position:relative;}
#Bgoods #indexyoutube{
    display: block;
    width: 50%;
    float: left;
    background-repeat: no-repeat;
    background-position:  50%;
    background-size: cover;
    left: 0;
    top.: 0;
    top: 0;
    z-index: 54;
}
/**for u2**/
.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(255, 5, 5, 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;
}
.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%;}
#Bgoods-wrap{
}
#Bgoods-wrap article{
	color:#2a2a2a;
	font-size:18px;
	margin: 50px 0 30px;
	text-shadow: 0 0 3px #fff, 0 0 3px #fff;
	line-height: 150%;
	font-weight: bold;
}
#Bgoods-wrap p .more{
	background-image: url(/images/08/index-Bgoods-more.png);
	background-repeat: repeat-x;
	background-position: 50% 50%;
	color: #fff;
	display: inline-block;
	height: 44px;
	line-height: 44px;
	text-align: center;
	font-size: 18px;
	padding: 0 10px;
}

/* productBox */
#productBox{overflow:hidden;width:100%;padding:50px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
#productBox .slick-slider{
    margin-bottom: 0;
}
#productBox h3.tit, #book h3.tit, #news h2{margin-bottom:30px;text-align:center;font-size:28px;font-weight: 400;color: #505050;position: relative;z-index: 5;}
#productBox h3.tit:after {
    position: absolute;
    content: '03';
    left: calc(50% - 50px);
    bottom: 0;
    color: rgba(218, 218, 218, 0.3);
    font-size: 100px;
    letter-spacing: 0;
    font-family: "Oswald","Noto Sans TC",Arial,Helvetica,sans-serif;
    -webkit-text-stroke: 1px #f2f2f2;
    color: transparent;
    z-index: -1;
}
#productBox .bd{overflow:hidden;padding:25px 0;width: 1440px;margin: 0 auto;}
#productBox .slick-prev{left:calc(50% - 40px);top:calc(100% + 40px);z-index:9;width:40px;height:40px;}
#productBox .slick-next{right:calc(50% - 40px);top:calc(100% + 40px);z-index:9;width:40px;height:40px;}
#productBox .slick-prev:before, #productBox .slick-next:before{color:#91cec8;font-size:26px;}
#productBox >.more{text-align:center;margin-top:30px;overflow:hidden;}
#productBox .more a{display:inline-block;background:rgba(46, 177, 165, 0.79);color:#fff;padding:7px 20px;border-radius:5px;border:1px solid #108076;transition:all ease-in-out 0.3s;}
#productBox .tempWrap{margin:auto;}
#productBox ul li{float:left;width:16%;}
#productBox ul li > div{margin:0 10px;}
#productBox ul li .productPhoto{overflow:hidden;}
#productBox ul li .productPhoto .photo ,
#adBox .list .photo{background-size:cover;}
#productBox ul li:hover .productPhoto a.photo ,
#adBox .list:hover .photo{-webkit-transform:scale(0.8,1.8);-moz-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3);}
#productBox ul li .info{padding:20px;}
#productBox ul li .info h4 a{color: #1f1f1f;text-align: center;}
#productBox ul li .info article{height:45px;font-size:14px;-webkit-line-clamp:2;}
#productBox ul li .info p.price{overflow:hidden;height:24px;}
#productBox ul li .info p.price span{float:right;color:#094b45;font-size:16px;}
#productBox ul li .info p.price span b{margin:0 3px;}
#productBox ul li .info p.price span.old{float:left;color:#7e7e7e;text-decoration:line-through;font-size:12px;}
#productBox ul li .info p.price span.old b{}
#productBox ul li .info a.more{color:#2eb1a5;}
#productBox .arrow{text-align:center;}
#productBox .arrow a{margin:10px 5px;width:40px;height:40px;display:inline-block;border:1px #ddd solid;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;text-align:center;line-height:33px;color:#ddd;font-size:20px;}
#productBox .arrow a:hover{border-color:#2eb1a5;color:#2eb1a5;}

/* news */
#news{
	padding: 0 0 65px;
	position: relative;
	z-index: 2;
}
#news h2{
    margin-top: 50px;
}
#news h2:after {
    position: absolute;
    content: '01';
    left: calc(50% - 50px);
    bottom: 0;
    color: rgba(218, 218, 218, 0.3);
    font-size: 100px;
    letter-spacing: 0;
    font-family: "Oswald","Noto Sans TC",Arial,Helvetica,sans-serif;
    -webkit-text-stroke: 1px #f2f2f2;
    color: transparent;
    z-index: -1;
}
#news .newslist{
    margin-top: 50px;
    margin-bottom: 0;
}
#news div{
	outline:none;
}
#news .newsdeilt{
    margin: 0 10px;
    background-color: #fff;
}
#news .newslist >div{
	overflow:hidden;
}
#news .newslist .photo{
}
#news .newslist .photo a{
	outline:none;
}
#news .newslist .news-info{padding: 20px;}
#news .newslist .news-info h3{
	font-size:20px;
	margin: 0;
	line-height: 130%;
	height: 30px;
	overflow: hidden;
}
#news .newslist .news-info h3 a{
	color: #1a1b1b;
	font-weight: 500;
}
#news .newslist .news-info p{
	font-size: 13px;
	color: #cecece;
}
#news .newslist .news-info p b{
    color: #fff;
    padding: 2px 20px;
    margin-right: 10px;
    background: #4f663d;
    border-radius: 5px;
    display: inline-block;
}
#news .newslist .news-info article{
	color:#212020;
	height: 66px;
	overflow: hidden;
	font-size: 14px;
}
#news .newslist .news-info span{
    margin-top: 20px;
    display: block;
}
#news .newslist .news-info span a{
    text-align: end;
    font-size: 12px;
    letter-spacing: 3px;
    color: #64ccc9;
}
#news .newslist .news-info:hover span a{letter-spacing: 0;}
.newslist{
	margin:50px 0;
	padding-bottom:50px;
}

/* bookBox bookList*/
#bookBox {font-size: 0;}
#bookBox .row { position: relative; width: 100%; }
#bookBox #BookList {padding-bottom: 7vh;}
#bookBox #BookList ul li { position: relative; width: 100%; max-width: 1180px; -webkit-box-shadow: 0px 5px 30px -5px rgba(0, 0, 0, 0.3); box-shadow: 0px 5px 30px -5px rgba(0, 0, 0, 0.3);   }
#bookBox #BookList ul li.slick-slide {position: relative;-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);-ms-transform:scale(0.8);transform: scale(0.8);z-index: -1;margin: 0 -70px;filter: blur(3px);}
#bookBox #BookList ul li.slick-slide:after {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgb(215 162 151 / 78%);content: "";}
#bookBox #BookList ul li.slick-center{ z-index: 1; -webkit-transform: scaleY(0.9); -ms-transform: scaleY(0.9); transform: scaleY(0.9); filter: none}
#bookBox #BookList ul li.slick-center:after { display: none; }
#bookBox #BookList ul li h3 {position: absolute;width: 100%;left: 0;bottom: 35px;}
#bookBox #BookList ul li h3 a {height: 70px;color: #fff;font-size: 3rem;font-weight: bold;text-shadow: 0 0 10px rgb(0 0 0 / 50%);text-align: center;-webkit-line-clamp: 1;}

/* bookBox customBox*/
#bookBox #customBox { background: url(/images/42/flower-bg.jpg) no-repeat 50% / cover; }
#bookBox #customBox ul { margin-bottom: 0;}
#bookBox #customBox .custom{position: relative;height: 80vh;font-size: 0;}
#bookBox #customBox .imgs {position: absolute;top: 0;right: 0;display: inline-block;width: 48vw;z-index: 1;}
#bookBox #customBox .imgs .list {height: 100vh;background: no-repeat 50% / cover;}
#bookBox #customBox .info {display: inline-block;width: 25vw;vertical-align: top;padding: 5vw 13vw 0;float: left;z-index: 3;}
#bookBox #customBox .info h3 { position: relative; font-size: 40px; color: #D7A297; text-align: center;}
#bookBox #customBox .info h3:after { position: absolute; bottom: -11px; left: calc((100% - 80px) / 2); width: 80px; height: 1px; background:#D7A297; content: ""; }
#bookBox #customBox .info article {color: #6D6D6D;margin: 55px 0;}
#bookBox #customBox .slick-dots { position: absolute; bottom: 4vh; left: -25%; }
#bookBox #customBox .slick-dots li button:before{ color: #d49e93; font-size: 10px; opacity: .25 }
#bookBox #customBox .slick-dots li.slick-active button:before{ color: #d7a297; opacity: .75 }

@media screen and (max-width: 1440px) {
#productBox .bd{width: 90%;}
}
@media screen and (max-width: 1366px) {
.abbg {width: 40%;}
}
@media screen and (max-width: 1280px) {
	#aboutBox .imgs , #bookBox .row {position: relative;width: 100%;display: inline-block;}
	#aboutBox .info {padding: 70px 15%;width: 70%;background: rgb(249 249 249);}
	#aboutBox p.more{ text-align: center;}
}
@media screen and (max-width: 1024px) {
.abbg{
    width: 60%;
}
}
@media screen and (max-width: 980px) {
	#aboutBox .info .title { font-size: 8vw; }
	#bookBox #BookList ul li.slick-slide{ margin: 0}

	#bookBox #customBox .custom { height: auto;}
	#bookBox #customBox .info {width: 100%; height: 48vh; display: block;float: none;padding: 10vh 0;}
	#bookBox #customBox .info article {width: 60%;margin: 0 auto;padding: 5vh 0;}
	#bookBox #customBox .imgs {position: relative;width: 100%;}
	#bookBox #customBox .imgs .list {height: 35vh;}
	#bookBox #customBox .slick-dots {bottom: 40vh;left: calc(0% / 2);}
}
@media screen and (max-width: 680px) {
	#aboutBox .imgs .list {height: 60vw;}
	#productBox .proList {padding: 5vh 0 1vh;}
	#productBox .proList li.slick-center {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
    #bookBox #customBox .info article{width: 90%;padding: 8vw 0 0;}
	#productBox ul li .info {padding: 15px 0;}
	#productBox ul li .info h4 a {line-height: 130%;}
	#Bgoods .abbg h2 {font-size: 30px;}
	#Bgoods .abbg article {font-size: 20px;}
	.abbg {    width: 85%;}
	#Bgoods, #about{
    background-attachment: unset;
}
}
@media screen and (max-width: 450px) {	
	#aboutBox .info { padding: 10vw 5vw; width: 90vw; }
}