/* 關於小青田:五大特色輪播(桌機 5 欄、平板 3 欄、手機 1 欄)與箭頭修正 */

/* 三角箭頭的黑色方塊:CSS 三角形的上下邊框未設透明,預設吃到文字深色。 */
.gsbp-be58695b48228,
.gsbp-35279b8a4ea99 {
	border-top-color: transparent !important;
	border-bottom-color: transparent !important;
	cursor: pointer;
}

/* ---- 三角箭頭:導圓角並縮小(客戶調整 33) ----
   原本是 CSS border 畫的三角形(30px 寬、上下各 26px),
   border 三角形沒有辦法加圓角,所以改用 SVG 背景圖:
   實心 fill 再疊一層同色 stroke,配合 stroke-linejoin: round,
   三個角就會是圓潤的。尺寸同時由 30x52 縮到 21x36(約七成)。 */
.gsbp-be58695b48228,
.gsbp-35279b8a4ea99 {
	border: 0 !important;
	width: 21px !important;
	height: 36px !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* 這兩顆是 position: absolute 且 left 與 right 同時有值,
   兩邊都定住時寬度會被它們夾出來,設定的 width 不會生效。
   各自把對側改成 auto,width 才吃得到。 */
.gsbp-be58695b48228 {
	right: auto !important;
}

.gsbp-35279b8a4ea99 {
	left: auto !important;
}

.gsbp-be58695b48228 {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'><path d='M19 7 L7 20 L19 33 Z' fill='%23EDA269' stroke='%23EDA269' stroke-width='7' stroke-linejoin='round' stroke-linecap='round'/></svg>");
}

.gsbp-35279b8a4ea99 {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'><path d='M5 7 L17 20 L5 33 Z' fill='%23EDA269' stroke='%23EDA269' stroke-width='7' stroke-linejoin='round' stroke-linecap='round'/></svg>");
}


/* 以下樣式只在 JS 成功建立輪播結構(容器加上 .cyan-about-carousel)後生效,
   JS 未載入時維持原本 grid 版面 */
.cyan-about-carousel.gsbp-bfe20210149f3 {
	display: block !important;
}

.cyan-about-scroller {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 4 * 28px) / 5); /* 一次顯示 5 張,同原本 5 欄 */
	column-gap: 28px;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}

.cyan-about-scroller::-webkit-scrollbar {
	display: none;
}

.cyan-about-scroller > div {
	scroll-snap-align: start;
}

/* 平板(690–999.98px):3 張一列,同樣輪播循環。
   Greenshift 在此斷點把兩顆箭頭設成 display:none、容器 padding 壓到 12px,
   兩者都要覆寫回來,否則箭頭消失或壓在卡片上。 */
@media (max-width: 999.98px) {
	.cyan-about-carousel .gsbp-be58695b48228,
	.cyan-about-carousel .gsbp-35279b8a4ea99 {
		display: block !important;
	}

	/* box-sizing 必須明講:Greenshift 這個容器沒宣告，
	   content-box 下左右各 44px 會把容器撐出視窗，造成水平捲動 */
	.cyan-about-carousel.gsbp-bfe20210149f3 {
		box-sizing: border-box !important;
		padding-left: 44px !important;
		padding-right: 44px !important;
	}

	.cyan-about-scroller {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: calc((100% - 2 * 20px) / 3);
		column-gap: 20px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}
}

/* 手機(≤689.98px):1 張一列。單欄卡片變高,箭頭改垂直置中。 */
@media (max-width: 689.98px) {
	.cyan-about-scroller {
		grid-auto-columns: 100%;
		column-gap: 0;
	}

	.cyan-about-carousel .gsbp-be58695b48228,
	.cyan-about-carousel .gsbp-35279b8a4ea99 {
		top: 50% !important;
		transform: translateY(-50%);
	}
}