@import url('https://fonts.googleapis.com/css2?family=Gelasio:wght@400&display=swap');

/******************************** kv start ************************************/
.kvContainer {
	max-width: none;
}
/******************************** kv end **************************************/

/********************************* news start ****************************************/
.midBlock .news {
	display: inline-flex;
	float: left;
	overflow: hidden;
	font-size: 13px;
	margin-top: 10px;
}

.midBlock .news em {
	float: left;
	display: block;
	font-style: normal;
	margin-right: 10px;
}

.midBlock .news em a {
	display: block;
	width: 3.3rem;
	text-align: center;
	padding: 0.3em 0.5em;
	color: #fff;
	line-height: 1em;
	background: #999;
	border-radius: 4px 0;
}

.midBlock .news em a:hover {
	background: #666;
}

.midBlock .news ul {
	float: left;
	margin-top: 1px;
}

.midBlock .news ul li {
	line-height: 1.4em;
	display: none;
}

.midBlock .news ul li:only-child {
	display: block;
}

/********************************* news end ****************************************/

/********************************* promo start ****************************************/
.promo {
	display: inline-flex;
	overflow: hidden;
	font-size: 13px;
	margin: 1em 2.5% 0;
}

.promo em {
	float: left;
	display: block;
	font-style: normal;
	margin-right: 10px;
}

.promo em a {
	display: block;
	width: 3.3rem;
	text-align: center;
	line-height: 1em;
	color: #fff;
	background: #999;
	padding: 0.3em 0.5em;
	border-radius: 4px 0;
}

.promo ul {
	float: left;
	margin-top: 1px;
	color: #c00;
}

.promo ul li {
	line-height: 1.4em;
}

/********************************* promo end ****************************************/

em.cta{
	display: flex;
	justify-content: center;
	align-items: center;
	letter-spacing: 0.1em;
}
em.cta:after{
	content:"";
	display: inline-block;
	font-size: 0.7em;
	margin-left:0.5em;
	width:1em;
	height:1em;
	border:0.5em solid;
	border-top-color:transparent;
	border-right-color:transparent;
	border-bottom-color:transparent;
}

/********************************* 新品區 start ****************************************/
.newArrival{
	padding:2.5% 3.33%;
	color:#333;
	background: #f9f9f9;
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
}

/**************** 標題 start ********************/
.newArrival hgroup{
	width:19.64%;
	text-align: center;
}
.newArrival h2{
	font-size: 0.9em;
	font-weight: normal;
	font-family: 'Gelasio', sans-serif;
}
.newArrival h2 > *{
	display: block;
}
.newArrival h2 strong{
	font-size: 7.14em;
	font-weight: normal;
	line-height: 1em;
	height: 1em;
	transform: translateY(-0.25em);
}
.newArrival h2 strong sup{
	font-size: 0.5em;
}
.newArrival h2 span{
	font-size: 1.57em;
	padding:0 1em;
	margin-top:0.25em;
	line-height: 1.3em;
}
.newArrival hgroup em{
	font-style: normal;
	margin-top:1em;
	padding-top:1.5em;
	border-top:1px solid;
	font-size: 1.14em;
}
/**************** 標題 end ********************/

/**************** 商品 start ********************/
.newArrival .slick{
	width:76.42%;
	display: none;
}
.newArrival .slick.slick-initialized{
	display: block;
}

.newArrival .slick-list,
.newArrival .slick-track{
	display: flex;
}

.newArrival .slickPN{
	background: none;
	opacity: 1;
}
.newArrival .slickPN.prev{
	left:-30px;
}
.newArrival .slickPN.next{
	right:-30px;
}

.newArrival .slick a{
	display: block;
	margin:0 5.6%;
	padding:8.41% 0;
	background: #FFF;
	text-align: center;
}
.newArrival .slick a figure{
	overflow: hidden;
}
.newArrival .slick a figure img{
	display: block;
	width:100%;
	transition: transform 0.5s;
}
.newArrival .slick a figure figcaption{
	position: relative;
	padding:0 1em;
	line-height: 1.5em;
	height:3em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.newArrival .last a{
	height: 100%;
}
.newArrival .last .txt{
	margin:0 10%;
	height:100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.newArrival .last span{
	display: block;
	font-size: 1.15em;
	font-family: 'Gelasio', sans-serif;
	line-height: 1.6em;
}
.newArrival .last em{
	font-style: normal;
	margin-top:1.2em;
	padding-top:1.5em;
	border-top:1px solid;
	font-size: 1.14em;
}
/**************** 商品 end ********************/

/**************** 自製捲軸 start *************/
.newArrival .scroller{
	display: none;
}
/**************** 自製捲軸 end *************/

/**************** 滑動提示 start *************/
.newArrival .hint{
	display: none;
}
/**************** 滑動提示 end *************/
/********************************* 新品區 end ****************************************/

/********************************* 指標選品 start ****************************************/
.productList{
	margin-top: 2.5%;
}

.productList > li,
.productList.r4 > li{
	width:25%;
}
.productList.r5 > li{
	width:20%;
}

.sceneBanner,
.hrBanner{
	margin-top:5%;
}
.sceneBanner a,
.sceneBanner img,
.hrBanner a,
.hrBanner img{
	display: block;
}
.sceneBanner img,
.hrBanner img{
	width: 100%;
}

.sceneBanner{
	display: flex;
	justify-content: space-between;
}
.sceneBanner li{
	width:31.66%;
}
.sceneBanner .img{
	position: relative;
}
.sceneBanner .img:after{
	position: absolute;
	content:"";
	display: block;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background: rgba(255, 255, 255, 0.5);
	opacity:0;
	transition: opacity 0.5s;
}
.sceneBanner .txt{
	margin-top:1em;
	font-size: 1.14em;
	text-align: center;
	color: #333;
	transition: color 0.2s;
}
.sceneBanner h4{
	font-weight: normal;
	letter-spacing: 0.1em;
}
.sceneBanner h3{
	margin-top:0.4em;
	font-size: 1.25em;
}
.sceneBanner em{
	margin-top:0.75em;
	font-style: normal;
}

.hrBanner img:nth-child(2){
	display:none;
}
/********************************* 指標選品 end ****************************************/

/********************************* 熱門活動 start ****************************************/
section.event{
	border-top:1px solid #CCC;
	padding-top:4%;
}

section.event ul {
	overflow: hidden;
}

section.event ul li {
  padding: 0 5px;
  float: left;
  margin-top: 10px;
  width: 25%;
}

section.event ul li a {
  display: block;
}

section.event ul li a figure {
  position: relative;
}

section.event ul li a figure img {
  display: block;
  width: 100%;
  border: none;
}

section.event ul li a figure:after {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  padding-top: 100%;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity 0.5s;
}

section.event ul li a figure figcaption {
  background: #f4f4f4;
  padding: 15px;
}

section.event ul li a figure figcaption h3 {
  color: #000;
  font-size: 15px;
  line-height: 1.2em;
  height: 1.2em;
  overflow: hidden;
}

section.event ul li a figure figcaption h4 {
  line-height: 1.4em;
  height: 1.4em;
  overflow: hidden;
  margin-top: 5px;
}

section.event ul li a figure figcaption p {
  margin: 0.2em 0 0;
  padding: 0;
  line-height: 1.6em;
  height: 3.2em;
  overflow: hidden;
}
/********************************* 熱門活動 end ****************************************/

/********************************* 觀點文化 start ****************************************/
section.culture ul.slick {
  margin: 2.5% 0;
}

section.culture ul:not(.slick-dots) li {
  padding: 0 5px;
}

section.culture ul li a {
  display: block;
}

section.culture ul li a figure {
  position: relative;
}

section.culture ul li a figure img {
  display: block;
  width: 100%;
  border: none;
}

section.culture ul li a figure figcaption {
  position: absolute;
  left: 0;
  top: 82.5%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  transition: top 0.5s;
}

section.culture ul li a figure figcaption div {
  position: absolute;
  left: 15%;
  top: 5.75%;
  width: 70%;
  transform: translateY(0);
  color: #333;
  transition: all 0.6s;
}

section.culture ul li a figure figcaption div h4 {
  font-size: 20px;
  line-height: 1em;
  height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
}

section.culture ul li a figure figcaption div p {
  margin: 2.5em 0 0;
  padding: 0;
  line-height: 1.6em;
}
/********************************* 觀點文化 end ****************************************/


@media screen and (min-width: 1025px) {
	
	/********************************* 新品區 start ****************************************/
	/**************** 商品 start ********************/
	.newArrival .slickPN:hover{
		opacity: 1;
	}
	.newArrival .slickPN:hover:before,
	.newArrival .slickPN:hover:after{
		background: #CCC;
	}
	.newArrival .slick a:hover figure img{
		transform:scale(1.05);
	}
	/**************** 商品 end ********************/
	/********************************* 新品區 end ****************************************/
	
	/********************************* 指標選品 start ****************************************/
	.sceneBanner a:hover .img:after{
		opacity: 1;
	}
	.sceneBanner a:hover .txt{
		color:#999;
	}
	/********************************* 指標選品 end ****************************************/
	
	/********************************* 熱門活動 start ****************************************/
	section.event ul li a:hover figure:after {
	  opacity: 1;
	}

	section.event ul li a:hover figure figcaption h3,
	section.event ul li a:hover figure figcaption h4 {
	  color: #666;
	}
	/********************************* 熱門活動 end ****************************************/
	
	/********************************* 觀點文化 start ****************************************/
	section.culture ul li a:hover figure figcaption {
	  top: 0;
	}

	section.culture ul li a:hover figure figcaption div {
	  top: 50%;
	  transform: translateY(-50%);
	}

	section.culture ul li a:hover figure figcaption div h4 {
	  line-height: 1.4em;
	  height: auto;
	  white-space: normal;
	  overflow: visible;
	}
	/********************************* 觀點文化 end ****************************************/
	
}


@media screen and (min-width: 768px) and (max-width: 1200px) {
	
	/********************************* 新品區 start ****************************************/
	.newArrival{
		font-size: 1.2vw;
	}
	/********************************* 新品區 end ****************************************/
	
}


@media screen and (max-width: 1023px) {

	/********************************* promo start ****************************************/
	.promo {
		margin-left: 10px;
		margin-right: 10px;
	}
	/********************************* promo end ****************************************/

	section.culture .slickPN {
		opacity: 1;
	}

	section.event ul li a figure figcaption,
	section.culture ul li a figure figcaption div p {
		font-size: 13px;
	}

	section.culture ul li a figure figcaption div h4 {
		font-size: 15px;
	}
	
}


@media screen and (min-width: 769px) and (max-width: 1023px) {

  /********************************** 熱門活動 start *********************************/
  section.event ul li {
    width: 33.33%;
  }
  /********************************* 熱門活動 end *********************************/

}


@media screen and (min-width: 481px) and (max-width: 768px) {

  /********************************* 熱門活動 start *********************************/
  section.event ul li {
    width: 50%;
  }
  /********************************* 熱門活動 end *********************************/

}


@media screen and (max-width: 767px) {
	
	/********************************* 新品區 start ****************************************/
	.newArrival{
		padding:5%;
		flex-direction: column;
		font-size: 3.5vw;
	}

	/**************** 標題 start ********************/
	.newArrival hgroup{
		width:85%;
	}
	
	.newArrival h2{
		font-size: 0.75em;
	}
	/**************** 標題 end ********************/

	/**************** 商品 start ********************/
	.newArrival .slick{
		position: relative;
		left:50%;
		width:100vw;
		transform: translateX(-50%);
		margin-top:8%;
		display: flex;
		align-self: flex-start;
		overflow:auto;
	}
	.newArrival .slick::-webkit-scrollbar{
		display: none;
	}
	
	.newArrival .slick li{
		width:40vw;
		flex-shrink: 0;
	}
	/**************** 商品 end ********************/
	
	/**************** 自製捲軸 start *************/
	.newArrival .scroller{
		position: relative;
		display: block;
		width:30%;
		height:3px;
		margin-top:1em;
		background: #DDD;
		border-radius:5px;
	}
	.newArrival .scroller i{
		position: absolute;
		left:0;
		top:0;
		display: block;
		height:100%;
		background: #666;
		border-radius:5px;
	}
	/**************** 自製捲軸 end *************/
	
	/**************** 滑動提示 start *************/
	.newArrival .hint{
		width:20px;
		height:20px;
		margin-top:1em;
		display: block;
	}
	.newArrival .hint:before{
		content:"";
		display: block;
		padding-top:100%;
		background: url(../images/icon_drag_hint.svg) no-repeat center/contain;
		animation:hint 2s ease-in-out 0.5s 3 backwards;
	}
	@keyframes hint{
		0%{
			opacity:0;
		}
		30%{
			opacity:1;
		}
		100%{
			opacity:0;
			transform: translateX(-180%);
		}
	}
	/**************** 滑動提示 end *************/
	/********************************* 新品區 end ****************************************/
	
	/********************************* 指標選品 start *********************************/
	.productList > li,
	.productList.r4 > li,
	.productList.r5 > li{
		width:50%;
	}
	
	.sceneBanner,
	.hrBanner{
		padding:0 5%;
	}
	
	.sceneBanner{
		display:block;
		font-size: 0.9em;
	}
	.sceneBanner li{
		width:auto;
	}
	.sceneBanner li+li{
		margin-top:5%;
	}
	
	.hrBanner img:nth-child(1){
		display:none;
	}
	.hrBanner img:nth-child(2){
		display:block;
	}
	/********************************* 指標選品 end **********************************/
	
}


@media screen and (max-width: 480px) {

	/********************************* 熱門活動 start *********************************/
	section.event{
		margin-left:5%;
		margin-right:5%;
		padding-top:5%;
	}
	section.event ul li{
		width: 100%;
		margin-top:0;
		padding: 0;
	}
	section.event ul li+li{
		margin-top:5%;
	}
	/********************************* 熱門活動 end *********************************/
	
}