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

/* product */
#product , #about .workframe , #NewsBox ul li , #customBox .workframe , #bookBox ul {
	overflow: hidden;
}
#product h2 {
	margin: 5% 0 0 110px;
	float: left;
	width: 15%;
	font-family: 'Tangerine', cursive,微軟正黑體, 蘋果儷中黑;
	font-size: 70px;
	font-weight: normal;
	line-height: 60px;
}
#product .pro-list {
	position: relative;
	float: left;
	width: calc(85% - 130px);
}
#product .pro-list .slick-list {
	margin: 0 90px;
}
#product .pro-list .slick-list h3 {
	height: 35px;
	text-align: center;
}
#product .pro-list .slick-list h3 a {
	font-size: 18px;
	color: #000;
	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: #2c7de2;
}
#product .pro-list .slick-slide {
	padding: 0 20px;
}

/* about */
#about {
	background-color: #fff1d673;
}
#about .workframe > div {
	overflow: hidden;
	margin: 40px 0;
	float: left;
	width: 40%;	
}
#about .workframe .leftPhoto > div {
	overflow: hidden;
	float: left;
	width: 25%;
}
#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 {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}
#about .workframe .rightAbout {
	width: 90%;
}
#about .workframe .rightAbout > div {
	float: left;
	width: 50%;
}
#about .workframe .rightAbout .info {
	padding: 50px 10% 0;
	width: 30%;
}
#about .workframe .rightAbout .info h4 {
	font-family: 'Tangerine', cursive,微軟正黑體, 蘋果儷中黑;
	font-weight: normal;
	font-size: 43px;
	line-height: 33px;
}
#about .workframe .rightAbout .info h2 {
	font-size: 40px;
	color: #a1a1a1;
}
#about .workframe .rightAbout .info .arts {
    margin: 25px 0 20px;
    height: 108px;
	font-size: 16px;
    -webkit-line-clamp: 4;
}

/* NewsBox */
#NewsBox h2  , #bookBox h2 {
	margin-bottom: 50px;
}
#NewsBox h2 font , #bookBox h2 font {
	margin-right: 40px;
	font-family: 'Tangerine', cursive,微軟正黑體, 蘋果儷中黑;
	font-size: 70px;
	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 .newImg:before {
	position: absolute;
    width: 50%;
    height: 40%;
    background: #2b7de2;
	content: "";
    left: 0;
    bottom: 0;
	z-index: 1;
}
#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: #444444;
}
#NewsBox ul li .info p.cate , #NewsBox ul li .info p.cate a {
	color: #2c7de2;
}
#NewsBox ul li .info p.cate {
	margin: 5px 0;
}
#NewsBox ul li .info p.cate font {
	margin-left: 5px;
	font-style: italic;
	color: #777777;
}
#NewsBox ul li .info .describe {
	height: 87px;
	-webkit-line-clamp: 3;
	color: #9c9b9b;
	font-size: 16px;
}
/* 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) {
	#product h2 {
		margin-left: 70px;
		width: 260px;
	}
	#product .pro-list { width: calc(100% - 330px); }
	#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: 0 0 0 20px;
		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: 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.39);
		display: block;
		content: "";
	}
	#NewsBox ul li .info p.cate font {
		display: block;
	}
	#customBox .workframe .customTitle .tabs__item h2 {
		font-size: 18px;
	}
}
@media screen and (max-width: 450px) {
	#about .workframe .leftPhoto > div img { height: 170px; }
	#NewsBox ul li .info .describe { display: none; }
}