@import url('https://fonts.googleapis.com/css?family=Tangerine');
.wrap{background: #000;margin-top: -7px;}
.wrap > div { position: relative; padding: 30px 0; z-index: 1; }
#product a.photo{
	background-size: cover;
}
#product .pro-list * , #NewsBox ul * { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }

#product .pro-list *{
	margin: 0px auto;
}

/* product */
#product a.photo{display:block;background-size: cover; position: relative;}
#product a.photo::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	transition: .3s ease;
	border: 1px solid #eee;
	opacity: 0;
	left: 0px;
	top: 0px;
	background-color: #ffffff91;
}
#product a.photo::after{
	content: "VIEW";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	opacity: 0;
	color: #000;
	font-size: 18px;
	transition: .3s ease;
}
#product a.photo:hover::before{
	content: "";
	position: absolute;
	transform: scale(.8);
	transition: .3s ease;
	opacity: 1;
}
#product a.photo:hover::after{
	opacity: 1;
}


#product , #about .workframe , #NewsBox ul li , #customBox .workframe , #bookBox ul {
	overflow: hidden;
}
#product h2 {
    margin: 5% 0 0 0px;
    float: left;
    width: 100%;
    color: #FFE5A6;
    font-family: 'Tangerine', cursive,微軟正黑體, 蘋果儷中黑;
    font-size: 55px;
    font-weight: normal;
    line-height: 60px;
    text-align: center;
}
#product h2 p{text-align: center;}
#product .pro-list {
	position: relative;
	float: left;
	width: 100%;
}
#product .pro-list .slick-list {
	margin: 60px 90px;
}
#product .pro-list .slick-list h3 {
	height: 35px;
	text-align: center;
	color: #fff;
	margin-top: 15px;
}
#product .pro-list .slick-list h3 a {
	font-size: 18px;
	color:#eee;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#product .pro-list .slick-list p.price {
    display: block;
    color: #3f3f3f;
	text-align: center;
    font-size: 18px;
}
#product .pro-list .slick-list p.price span.old {
	margin-right: 10px;
    font-size: 15px;
    text-decoration: line-through;
    color: #858585;
}
#product .pro-list .slick-list p.price b {
    font-size: 20px;
    margin: 0 2px 0 10px;
    color: #e42d2d;
}
#product .pro-list .slick-list p.price span.old b {
    font-size: 15px;
    font-weight: normal;
    margin: 0;
    color: #858585;
}
#product .slick-prev {
	left: 30px;
	width:40px;
	height:40px;
}
#product .slick-next {
	right: 30px;
	width:40px;
	height:40px;
}
#product .slick-arrow:before {
	font-size: 40px;
	color: #FFE5A6;
}
#product .pro-list .slick-slide {
	padding: 0 20px;
}

/* about */
#about .workframe > div {
	overflow: hidden;
	margin: 40px 0;
	display: flex;
	justify-content: center;
	width: 100%;
}
#about .workframe .leftPhoto{
	margin-top: 80px;
}
#about .workframe .leftPhoto > div {
	overflow: hidden;
	float: left;
	width: 20%;
}

#about .workframe .leftPhoto > div a.photo ,
#about .workframe .rightAbout .aboutImg a.photo {
	background-size: cover;
}
#about .workframe .leftPhoto > div a.photo img ,
#about .workframe .rightAbout .aboutImg a.photo img {
	max-width: inherit;
}
#about .workframe .leftPhoto > div a.photo:hover {
	opacity: 1;
}
#about .workframe .rightAbout {
	width: 100%;
}
#about .workframe .rightAbout > div {
	float: left;
	width: 30%;
}
#about .workframe .rightAbout .info {
	padding: 50px 53px 0 0px;
	width: 45%;
}
#about .workframe .rightAbout .info h4 {
	font-family: 'Tangerine', cursive,微軟正黑體, 蘋果儷中黑;
	font-weight: normal;
	font-size: 43px;
	line-height: 33px;
	color: #eee;
}
#about .workframe .rightAbout .info h2 {
	font-size: 40px;
	color: #FFE5A6;
}
#about .workframe .rightAbout .info .arts {
    margin: 25px 0 20px;
    height: 108px;
	font-size: 16px;
    color: #bbb9b9;
    white-space:pre-wrap;
}

#about .workframe .leftPhoto > div a.photo{
	background-size:contain;
	opacity: .8;
}

/* NewsBox */
#NewsBox{background-attachment: fixed;}
#NewsBox h2  , #bookBox h2 {
	margin-bottom: 50px;
	color: #FFE5A6;
}
#NewsBox h2 font , #bookBox h2 font {
	margin-right: 40px;
	font-family: 'Tangerine', cursive,微軟正黑體, 蘋果儷中黑;
	font-size: 55px;
	font-weight: normal;
}
#NewsBox h2 a.more {
	vertical-align: bottom;
}
#NewsBox ul li > div {
	position: relative;
	float: left;
	width: 50%;
}
#NewsBox ul li .newImg a.photo , #NewsBox ul li .info article {
	position: relative;
	margin: 0 10px 10px;
	z-index: 2;
}
#NewsBox ul li .newImg a.photo img {
	width: 100%;
}

#NewsBox ul li .info {
	margin: 0 5%;
	padding: 15px 0;
	width: 40%;
}
#NewsBox ul li .info h3 {
	height: 32px;
	-webkit-line-clamp: 1;
}
#NewsBox ul li .info h3 a {
	font-size: 20px;
	color: #dac74d;
}
#NewsBox ul li .info p.cate , #NewsBox ul li .info p.cate a {
	color: #eee;
}
#NewsBox ul li .info p.cate {
	margin: 5px 0;
}
#NewsBox ul li .info p.cate font {
	margin-left: 5px;
	font-style: italic;
	color: #eee;
}
#NewsBox ul li .info .describe {
	height: 87px;
	-webkit-line-clamp: 3;
	color: #9c9b9b;
	font-size: 16px;
	margin-top: 30px;
}
/* customBox */
.wrap #customBox {
	padding: 0;
}
#customBox .workframe > div {
	overflow: hidden;
	position: relative;
	margin: 30px 0;
	padding: 0;
	float: left;
	width: 50%;
}
#customBox .workframe .youtube 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;
}
#customBox .workframe .youtube a:hover {
    width: 110px;
    height: 110px;
    line-height: 110px;
    left: calc(50% - 55px);
    top: calc(50% - 55px);
	font-size: 34px;
}
#customBox .workframe .customTitle {
	margin-bottom: 0;
	margin-left: 10%;
	width: 40%;
}
#customBox .workframe .customTitle .tabs {
	position: relative;
	height: 100%;
	overflow: hidden;
}
#customBox .workframe .customTitle .tabs__item {
	will-change: transform, opacity, box-shadow;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-bottom: 50px;
	z-index: 1;
	background: #d8d8d8;
	box-shadow: 0 30px 60px transparent;
	-webkit-transform-origin: center 5%;
		-ms-transform-origin: center 5%;
			transform-origin: center 5%;
	overflow: hidden;
	-webkit-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
			transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
#customBox .workframe .customTitle .tabs__item.color1 { background: #ffd4d4; }
#customBox .workframe .customTitle .tabs__item.color2 { background: #bdcbff; }
#customBox .workframe .customTitle .tabs__item h2 {
	margin: 20px 30px;
    font-size: 30px;
}
#customBox .workframe .customTitle .tabs__item article {
	margin: 0 30px;
	font-size: 16px;
	line-height: 180%;
}
#customBox .workframe .customTitle .views-toggle {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;
	opacity: 0.6;
}
#customBox .workframe .customTitle .views-toggle--hidden {
	opacity: 0;
	visibility: hidden;
	z-index: 0;
}
#customBox .workframe .customTitle .views-toggle:hover { opacity: 1; }
#customBox .workframe .customTitle .views-toggle i { font-size: 20px; }

/* bookBox */
#bookBox h2 font , .wrapper #bookBox h2 span { color: #fff; border-color: #fff; }
.wrapper #bookBox h2 a.more:hover span { color: #000; }
.wrapper #bookBox h2 a.more span:after { border-color: #fff transparent transparent transparent; }
.wrapper #bookBox h2 a.more i { background: #fff; color: #000; }
#bookBox {
	background: #000;
}
#bookBox ul li {
	float: left;
	width: calc(100% / 8);
}
#bookBox ul li a.photo {
	position: relative;
	margin: 10px;
}
#bookBox ul li a.photo font {
	position: absolute;
	padding-top: 25%;
	width: 100%;
	height: 75%;
	background: rgba(0, 0, 0, 0.63);
	text-align: center;
	color: #fff;
	font-size: 16px;
	top: -100%;
	left: 0;
	opacity: 0;
}
#bookBox ul li:hover a.photo font {
	top: 0;
	opacity: 1;
}
#bookBox ul li a.photo img { width: 100%; }

@media screen and (max-width: 1440px) {
	
	#about .workframe .leftPhoto > div { width: 50%; }
	#about .workframe .leftPhoto > div img { height: 200px; }
}
@media screen and (max-width: 1280px) {
	#bookBox ul li { width: 25%; }
}
@media screen and (max-width: 1024px) {

	#product h2 {
		margin: 0px;
		float: none;
		width: auto;
	}
	#product h2 p {
		margin-left: 30px;
		display: inline-block;
		vertical-align: text-top;
	}
	#product .pro-list { width: 100%; }
}
@media screen and (max-width: 980px) {

	#product h2 p { vertical-align: inherit; }
	#product .pro-list .slick-list p.price span {
		display: block;
		text-align: center;
	}
	.wrapper #bookBox h2 a.more:hover span { border-width: 0; }
	#about .workframe > div , #about .workframe .rightAbout , #customBox .workframe > div , #customBox .workframe .customTitle {
		float: none;
		width: 100%;
	}
	#about .workframe .rightAbout > div { width: 40%; }
	#about .workframe .rightAbout .info { padding: 50px 30px 0; width: calc(60% - 60px); }
	#NewsBox h2, #bookBox h2 { margin-top: 50px; }
	#customBox .workframe .customTitle { margin-left: 0; }
	#bookBox ul li { width: calc(100% / 3); }
	#bookBox ul li a.photo font , #bookBox ul li:hover a.photo font {
		top: 0;
		opacity: 1;
	}
}
@media screen and (max-width: 768px){
	#about .workframe > div{
		flex-wrap: wrap;
	}
	#about .workframe .leftPhoto > div{
		padding: 30px 0px;
	}
}
@media screen and (max-width: 600px){
	.wrapper > div a.more{margin-top: 30px;}
	#product h2,#NewsBox h2 font, #bookBox h2 font{font-size: 44px;}
	#about .workframe .rightAbout .info h2{font-size: 29px;}
}
@media screen and (max-width: 480px) {
	#about .workframe .rightAbout {
		position: relative;
	}
	#about .workframe .rightAbout .info {
		position: relative;
		padding: 50px 30px;
		width: calc(100% - 60px);
		z-index: 2;
	}
	#about .workframe .rightAbout .info h2 {
		color: #000;
	}
	#about .workframe .rightAbout .aboutImg {
		position: absolute;
		width: 100%;
	}
	#about .workframe .rightAbout .aboutImg:before {
		position: absolute;
		width: 100%;
		height: 100%;
		background:rgba(255, 255, 255, 0.58);
		display: block;
		content: "";
	}
	#about .workframe .rightAbout .info .arts{
		color: #000;
	}
	#NewsBox ul li .info p.cate font {
		display: block;
	}
	#customBox .workframe .customTitle .tabs__item h2 {
		font-size: 18px;
	}
	#SeoStarRating font:last-child{
		color: #962626;
	}
}
@media screen and (max-width: 450px) {
	#about .workframe .leftPhoto > div img { height: 170px; }
	#NewsBox ul li .info .describe { display: none; }
}
@media screen and (max-width: 420px){
	#product h2,#NewsBox h2 font, #bookBox h2 font{font-size: 35px;}
}