@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500;600;700;900&family=Noto+Sans+KR:wght@200;300;400;500;600;700;900&family=Noto+Sans+SC:wght@200;300;400;500;600;700;900&family=Noto+Sans+TC:wght@200;300;400;500;600;700;900&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
	font-family: 'Noto Sans', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', Sans !important;
}

/* 底色 */
body {
	/* background-color: #F6F8F9; */
	position: relative;
	background-image: url(../images/component/bgimg_m.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

@media (min-width:768px) {
	body {
		background-image: url(../images/component/bgimg_l.jpg);
	}
}

body.nobg {
	background-color: #FBFBEC;
	background-image: none;
}

/* 所有圖片設定 */
img {
	width: 100%;
	vertical-align: bottom;
}

/* 所有連結裝飾消失 */
a {
	text-decoration: none;
}

/* 容器 */
.wrap {
	width: 90%;
	max-width: 960px;
	margin: auto;
	margin-top: 48px;
}

/* 第二層容器 */
.secwrap {
	width: 90%;
	margin: auto;
}

.mobile {
	display: block;
}

.pc {
	display: none;
}

/* 各section h2 */
.titleh2 {
	font-size: 32px;
	font-weight: 700;
	padding: 0 0 24px;
	box-sizing: border-box;
	text-align: center;
	color: #000;
}

/* 各section h3 */
.titleh3 {
	font-size: 24px;
	font-weight: 600;
	padding: 64px 0 8px;
	box-sizing: border-box;
	text-align: center;
	color: #000;
}

/* <<<<<<<<<<<HEADER>>>>>>>>>>> */
header {
	position: sticky;
	top: 0;
	z-index: 6;
	background-color: #fff;
	-webkit-box-shadow: 0px 3px 31px -14px #657992;
	-moz-box-shadow: 0px 3px 31px -14px #657992;
	box-shadow: 0px 3px 31px -14px #fff;
}

/* header.bgc{
	background-color: #fff;
} */
header .wrap {
	margin-top: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0px;
	position: relative;
	box-sizing: border-box;
}

/* HEADER LOGO*/
/* <<<<<<<<<<<<<<<<依照menu長度調整 >>>>>>>>>>>>*/
header .logo .pic {
	width: 100%;
	max-width: 120px;
}

/* HEADER HAMBURGER*/
header .wholemenu .hamburger {
	cursor: pointer;
}

header .wholemenu .hamburger .pic {
	max-width: 36px;
}

/* HEADER MENU*/
header .menu {
	display: none;
	list-style: none;
	/* padding:16px 0 32px; */
}

header .menu.open {
	display: block;
	width: 100%;
	height: 60vh;
	overflow-y: scroll;
	background-color: #ffffff;
	/* border-radius:8px; */
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 999;
	/* box-shadow: 0px 6px 16px 0px rgba(176,176,176,0.32);
	-webkit-box-shadow: 0px 6px 16px 0px rgba(176,176,176,0.32);
	-moz-box-shadow: 0px 6px 16px 0px rgba(176,176,176,0.32); */
}

header .menu .menu_item {
	display: flex;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	cursor: pointer;
	box-sizing: border-box;
	background-color: #fff;
	justify-content: center;
}

header .menu .menu_item:not(:last-child) {
	border-bottom: 1px solid rgb(221, 221, 221);
}

header .menu .menu_item:hover {
	background-color: #9FB1C8;
}

header .menu .menu_item a {
	width: 100%;
	line-height: 20px;
	font-size: 20px;
	font-weight: 700;
	color: #000;
	text-align: center;
	padding: 24px 0 24px 16px;
}

header .menu .menu_item:hover a {
	color: #fff;
}

/* 即將上線 */
header .menu .menu_item.coming a {
	background-color: #b3b3b3;
	color: #fff;
	cursor: not-allowed;
}

.indexbanner {
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../images/index/street_m.png);
	padding-top: 24px;
}

.indexbanner .bgpic {
	position: relative;
	padding-top: 16px;
}

/* BNwrap */
.indexbanner .bgpic .bgpicwrap {
	width: 80%;
	height: 80vh;
	position: relative;
	margin: auto;
}

.indexbanner .titlepic {
	max-width: 65%;
	margin: auto;
}

/* fade-in animation */
.indexbanner .bgpic .maptag {
	position: absolute;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	animation: scaleAnimation 3s infinite;
}

.indexbanner .bgpic .maptag img {
	max-width: 120px;
	transition: 0.8s;
}

/* maptag hover文字共同樣式 */
.indexbanner .bgpic .maptag:hover::before {
	width: 100%;
	position: absolute;
	bottom: 105%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 36px;
	font-weight: 600;
	color: #fff;
	text-align: center;
}

@keyframes scaleAnimation {
	0% {
		transform: scale(1);
		/* 初始大小 */
	}

	50% {
		transform: scale(1.05);
		/* 放大到 1.2 倍大小 */
	}

	100% {
		transform: scale(1);
		/* 回到初始大小 */
	}
}

/* 交易所 */
.indexbanner .bgpic .maptag.tradetag {
	left: 0%;
	top: 0%;
}

/* 交易所:hover文字 */
/* .banner .bgpic .maptag.tradetag:hover::before{
	content: "交易所";
} */
/* 博物館 */
.indexbanner .bgpic .maptag.museumtag {
	left: 0%;
	top: 25%;
}

/* 博物館:hover文字 */
/* .banner .bgpic .maptag.museumtag:hover::before{
	content: "博物館";
} */
/* 科技園區 */
.indexbanner .bgpic .maptag.sciencetag {
	left: 0%;
	top: 50%;
}

/* 科技園區:hover文字 */
/* .banner .bgpic .maptag.sciencetag:hover::before{
	content: "科技園區";
} */
/* 醫療中心 */
.indexbanner .bgpic .maptag.hospitaltag {
	left: 0%;
	top: 75%;
}

/* 醫療中心:hover文字 */
/* .banner .bgpic .maptag.hospitaltag:hover::before{
	content: "醫療中心";
} */
/* 文創市集 */
.indexbanner .bgpic .maptag.markettag {
	right: 0%;
	top: 0%;
}

/* 文創市集:hover文字 */
/* .banner .bgpic .maptag.markettag:hover::before{
	content: "文創市集";
} */
/* 購物中心 */
.indexbanner .bgpic .maptag.shoppingmalltag {
	right: 0%;
	top: 25%;
}

/* 購物中心:hover文字 */
/* .banner .bgpic .maptag.shoppingmalltag:hover::before{
	content: "購物中心";
} */
/* 學校 */
.indexbanner .bgpic .maptag.schooltag {
	right: 0%;
	top: 50%;
}

/* 學校:hover文字 */
/* .banner .bgpic .maptag.schooltag:hover::before{
	content: "學校";
} */
/* 書店 */
.indexbanner .bgpic .maptag.bookstoretag {
	right: 0%;
	top: 75%;
}

/* 書店:hover文字 */
/* .banner .bgpic .maptag.bookstoretag:hover::before{
	content: "書店";
} */
@media (min-width:480px) {
	.indexbanner .bgpic .maptag img {
		max-width: 160px;
	}
}

/* 中央導覽列 */
.section_nav {
	width: 100%;
	position: sticky;
	top: 82px;
	z-index: 3;
	padding-top: 32px;
	margin: auto;
}

.section_nav .wrap {
	margin-top: 0;
}

.section_nav ul {
	white-space: nowrap;
	display: flex;
	background-color: #fff;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
	border-radius: 8px;
	padding: 0 32px;
	overflow-x: scroll;
	justify-content: space-between;
	/* 隱藏scrollbar */
	-ms-overflow-style: none;
	/* Hide scrollbar on Internet Explorer/Edge */
	scrollbar-width: none;
	/* Hide scrollbar on Firefox */
}

.section_nav ul::-webkit-scrollbar {
	display: none;
	/* Hide scrollbar on Webkit browsers (Chrome, Safari, etc.) */
}

.section_nav ul li {
	padding: 16px 12px;
	cursor: pointer;
}

.section_nav_item.active {
	color: #9FB1C8;
}

/* <<<<<<<<<<<電子書借閱步驟>>>>>>>>>>> */
/* owl-carousel區域 */
.ebooks_step {
	margin-top: 84px;
}

.ebooks_step .wrap .owl-carousel {
	padding-bottom: 64px;
	/* background-color: #EC6C00; */
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
}

.ebooks_step .boxbtnwrap {
	display: flex;
	cursor: pointer;
	justify-content: center;
}

.ebooks_step .boxbtnwrap .boxbtn {
	width: 50%;
	padding: 16px 0px;
	color: #636363;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	background-color: #ffffff1e;
	text-align: center;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
}

.ebooks_step .boxbtnwrap .boxbtn.active {
	background-color: #bbcbe094;
	color: #000;
}

.ebooks_step .owl-carousel {
	display: none !important
}

.ebooks_step .owl-carousel.active {
	display: block !important;
	z-index: 1;
}

/* 你還可以來這裡學台語 */
.ebooks_step .owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
	position: absolute;
	color: #000000;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	border-radius: 999px;
	background-color: #ffffff;
	opacity: 0.5;
	font-size: 36px;
}

.ebooks_step .owl-carousel .owl-nav button.owl-prev span,
.owl-carousel .owl-nav button.owl-next span {
	font-size: 40px;
	line-height: 40px;
	vertical-align: super;
}

.ebooks_step .owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
	color: #000000;
	background-color: #ffffff;
	opacity: 1;
}

.ebooks_step .owl-carousel .owl-nav button.owl-prev {
	right: 80%;
}

.ebooks_step .owl-carousel .owl-nav button.owl-next {
	left: 80%;
}

/* owl-carousel下方點點標示 */
.ebooks_step .owl-theme .owl-dots .owl-dot span {
	background-color: rgb(245, 245, 245);
	transition: 0.25s linear;
}

/* owl-carousel下方點點hover效果 */
.ebooks_step .owl-theme .owl-dots .owl-dot span:hover {
	background-color: #333333;
}

/* owl-carousel目前輪播點點標示 */
.ebooks_step .owl-theme .owl-dots .owl-dot.active span {
	background-color: #9EB0C8;
	width: 45px;
}

/* owl-carousel輪播元件 */
.ebooks_step .owl-carousel .item {
	width: 100%;
	padding: 24px 0;
	background-color: #bbcbe094;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
}

/* owl-carousel輪播元件文字 */
.ebooks_step .owl-carousel .item .txt {
	width: 80%;
	margin: auto;
}

/* 標題 */
.ebooks_step .owl-carousel .item .txt h3 {
	display: block;
	width: fit-content;
	color: #000;
	font-size: 24px;
	font-weight: 600;
	line-height: normal;
	text-align: center;
	padding-bottom: 8px;
	position: relative;
	margin: auto;
}

/* 內文 */
.ebooks_step .owl-carousel .item .txt p {
	color: #424242;
	text-align: center;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	/* 24px */
	letter-spacing: 1px;
	padding-top: 8px;
}

/*PC Web btn */
.ebooks_step .owl-carousel.PC .item:first-child .txt p {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.ebooks_step .owl-carousel.PC .item:first-child .txt p a {
	margin: 0 8px;
}

.ebooks_step .owl-carousel.PC .item:first-child .txt p a img {
	transition-duration: 0.5s;
}

.ebooks_step .owl-carousel.PC .item:first-child .txt p a:hover img {
	transform: translateY(-6px);
}

/*mobile app download btn */
.ebooks_step .owl-carousel.mobile .item:first-child .appbtn {
	display: flex;
	justify-content: center;
	padding-top: 16px;
}

.ebooks_step .owl-carousel.mobile .item:first-child .appbtn a {
	display: flex;
	padding: 0 8px;
	max-width: 200px;
}

.ebooks_step .owl-carousel.mobile .item:first-child .appbtn a img {
	width: 100%;
	transition-duration: 0.5s;
}

.ebooks_step .owl-carousel.mobile .item:first-child .appbtn a:hover img {
	transform: translateY(-6px);
}

/* owl-carousel輪播元件圖片 */
.ebooks_step .owl-carousel .item .pic {
	width: 80%;
	margin: auto;
	margin-top: 32px;
}

.ebooks_step .owl-carousel.mobile .item .pic img {
	width: auto;
	max-height: 300px;
	margin: auto;
}

/*<<<<<<<<<<< 熱門必讀 >>>>>>>>>>>>*/
/* .press{
	padding-bottom: 48px;
} */
.press .press_rest {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.press .press_rest .item {
	width: calc((100% - 8px) /2);
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 24px;
	transition: 0.25s linear;
}

/* label */
.press .press_rest .item .pic {
	position: relative;
}

.press .press_rest .item .pic .label {
	position: absolute;
	width: 55%;
	top: 0;
	left: 0;
}

.press .press_rest .item:hover {
	transform: translateY(-8px);
}

.press .press_rest .item .txt span {
	padding-top: 4px;
	box-sizing: border-box;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 16px;
	line-height: 150%;
	color: #000;
	overflow: hidden;
	height: 3rem;
}

.press .press_rest .item:hover .txt span {
	color: #033E79;
}

/*<<<<<<<<<<< 主題串流 >>>>>>>>>>>>*/
.ytstream {
	background-size: cover;
	background-repeat: repeat;
	background-color: #ffffff48;
	padding: 36px 0;
	margin-top: 36px;
}

.ytstream .wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0;
}

.ytstream .wrap .item {
	margin-bottom: 24px;
}

.ytstream .wrap .item .txt p {
	color: #000;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	box-sizing: border-box;
	padding: 4px 0;
	text-align: center;
}

.ytstream .wrap .item .txt span {
	color: #424242;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: 1px;
	text-align: center;
}

/* <<<<<<<<<<<駐站書評>>>>>>>>>>> */
.review {
	position: relative;
	z-index: 0;
}

.review h2 {
	display: flex;
	width: fit-content;
	height: 100%;
	color: #000;
	font-size: 32px;
	font-weight: 700;
	position: relative;
	margin: auto;
	box-sizing: border-box;
}

.review .owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
	position: absolute;
	color: #000;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	border-radius: 999px;
	background-color: #fff;
	opacity: 0.5;
	font-size: 36px;
}

.review .owl-carousel .owl-nav button.owl-prev span,
.owl-carousel .owl-nav button.owl-next span {
	font-size: 40px;
	line-height: 40px;
	vertical-align: super;
}

.review .owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
	color: #000;
	background-color: #fff;
	opacity: 1;
}

/* owl-carousel下方點點標示 */
.review .owl-theme .owl-dots .owl-dot span {
	background-color: rgb(245, 245, 245);
	transition: 0.25s linear;
}

/* owl-carousel下方點點hover效果 */
.review .owl-theme .owl-dots .owl-dot span:hover {
	background-color: #333333;
}

/* owl-carousel目前輪播點點標示 */
.review .owl-theme .owl-dots .owl-dot.active span {
	background-color: #9EB0C8;
	width: 45px;
}

.review .owl-carousel .owl-nav button.owl-prev {
	right: 80%;
}

.review .owl-carousel .owl-nav button.owl-next {
	left: 80%;
}

.review .owl-carousel .item .pic {
	border-radius: 16px;
	overflow: hidden;
}

.review .owl-carousel .item {
	margin: 36px 24px;
}

.review .owl-carousel .item {
	transition: 0.5s linear;
}

.review .owl-carousel .item:hover {
	transform: translateY(-4px);
	/* background-color: #f5f5f5; */
}

.review .txt p::after {
	content: '';
	height: 2px;
	width: 0px;
	background-color: #023872;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: 0.5s linear;
}

.review .owl-carousel .item:hover .txt p {
	color: #023872;
}

.review .owl-carousel .item:hover .txt p::after {
	width: 100%;
}

.review .txt {
	padding: 0 16px;
}

.review .txt p {
	position: relative;
	display: block;
	width: fit-content;
	color: #000;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	box-sizing: border-box;
	padding: 4px 0;
}

.review .txt span {
	color: #424242;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: 1px;
	padding-top: 8px;
	box-sizing: border-box;
}

.review .txt span .highlight {
	color: #a0835a;
	font-weight: 600;
}

/*<<<<<<<<<<< 精選書籍 >>>>>>>>>>>>*/
.selectbook {
	margin-top: 36px;
	padding-top: 36px;
	background-size: cover;
	background-repeat: repeat;
	background-color: #ffffff48;
}

.selectbook .wrap {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	margin-top: 0px;
}

.selectbook .boxbtnwrap {
	width: 90%;
	display: flex;
	box-sizing: border-box;
	justify-content: start;
	margin-bottom: 12px;
	overflow-x: auto;
}

.selectbook .boxbtnwrap .boxbtn {
	width: 50%;
	min-width: 150px;
	text-align: center;
	cursor: pointer;
	font-size: 22px;
	padding: 8px 0px 16px;
	box-sizing: border-box;
	color: #747474;
	font-weight: 300;
	border-bottom: 2px solid #9b9b9b;
}

.selectbook .boxbtnwrap .boxbtn.active {
	color: #023872;
	font-weight: 700;
	/* background-color: #FCD1B5;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px; */
	border-bottom: 2px solid #023872;
}

#selectbookshelf {
	background-size: cover;
	background-repeat: repeat;
	background-color: #ffffff48;
	padding-bottom: 24px;
}

#selectbookshelf .wrap {
	margin-top: 0;
}

.bookshelf {
	display: none;
}

.bookshelf.active {
	display: block;
	position: relative;
	padding: 0 8px;
}

.bookshelf .tab_area {
	/* width: 100%; */
	display: flex;
	padding: 0 5%;
	justify-content: space-between;
	box-sizing: border-box;
	overflow-x: scroll;
}

.bookshelf .tab_area a {
	font-size: 20px;
	text-decoration: none;
	color: #000;
	padding: 24px 16px;
	box-sizing: border-box;
	white-space: nowrap;
}

.bookshelf .tab_area a.active {
	color: #E06917;
}

.bookshelf .bookall {
	display: none;
}

.bookshelf .bookall.active {
	display: block;
}

.bookshelf .bookall .bookall_area {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
}

.bookshelf .bookall .bookall_area a {
	transition: 0.25s linear;
	width: calc(100% /2);
	padding: 0 4px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.bookshelf .bookall .bookall_area a:hover {
	transform: translateY(-8px);
}

.bookshelf .bookall .bookall_area a:hover .pic {
	box-shadow: 0px -1px 16px -1px #0238728a;
	-webkit-box-shadow: 0px -1px 16px -1px #0238728a;
	-moz-box-shadow: 0px -1px 16px -1px #0238728a;
}

.bookshelf .bookall .bookall_area a .txt p {
	padding-top: 4px;
	box-sizing: border-box;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 16px;
	line-height: 150%;
	color: #000;
	height: 3rem;
}

/* 分頁控制 */
.bookshelf .bookall .pagination {
	display: flex;
	justify-content: space-between;
	overflow-x: auto;
}

.bookshelf .bookall .pagination button {
	font-size: 20px;
	border: transparent;
	background-color: transparent;
	cursor: pointer;
	margin: 0 4px;
	padding: 16px 24px;
	transition: 0.5s;
	color: #fff;
}

.bookshelf .bookall .pagination button:hover {
	color: #023872;
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 999px;
}

.bookshelf .bookall .pagination button.active {
	background-color: #023872;
	color: #fff;
	border-radius: 999px;
}

/* footer */
footer {
	padding: 48px 0;
	background: url(../images/bg.webp);
	background-size: cover;
	background-repeat: repeat;
}

footer ul {
	display: flex;
	justify-content: center;
	padding: 0px 0 8px;
}

footer ul li {
	padding: 0 4px;
	transition: 0.5s linear;
}

footer ul li:hover {
	transform: translateY(-2px);
}

footer p {
	color: #494949;
	text-align: center;
	font-size: 12px;
}

@media (min-width:768px) {
	.pc {
		display: block;
	}

	.mobile {
		display: none;
	}

	/* HEADER MENU*/
	header .wholemenu {
		display: flex;
		align-items: center;
	}

	header .wholemenu .menu {
		/* display: flex; */
		margin-right: 24px;
	}

	header .wholemenu .menu_item.pc a {
		display: flex;
		font-size: 18px;
		font-weight: 700;
		cursor: pointer;
		color: #000;
		padding: 0 24px 0 0;
	}

	/* header .wholemenu .menu_item.pc a:hover{
		color: #ff9900;
	} */
	header .menu .menu_item {
		cursor: pointer;
	}

	.mobile {
		display: none !important;
	}

	.indexbanner {
		width: 100%;
		height: 100vh;
		background-repeat: no-repeat;
		background-position: center;
		background-image: url(../images/index/street_l.png);
		background-size: cover;
		position: relative;
	}

	.indexbanner .titlepic {
		max-width: 450px;
		max-height: 15vh;
		margin: auto;
	}

	.indexbanner .bgpic {
		padding-top: 0;
	}

	/* BNwrap */
	.indexbanner .bgpic .bgpicwrap {
		width: 100%;
		max-width: 960px;
	}

	.indexbanner .bgpic .maptag:hover img {
		transform: scale(1.1);
	}

	/* hover建築物背景變黑 */
	.bgcbgc {
		content: "";
		display: block;
		pointer-events: none;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 4;
		background-color: #151011;
		opacity: 0;
		-webkit-transition: opacity 0.3s ease-in-out;
		transition: opacity 0.3s ease-in-out;
	}

	.indexbanner .bgpic .maptag:hover~.bgcbgc {
		opacity: 0.5;
	}

	/* 交易所 */
	.indexbanner .bgpic .maptag.tradetag {
		left: 10%;
		top: 10%;
	}

	/* 博物館 */
	.indexbanner .bgpic .maptag.museumtag {
		left: 30%;
		top: 42%;
	}

	/* 科技園區 */
	.indexbanner .bgpic .maptag.sciencetag {
		left: 0%;
		top: 50%;
	}

	/* 醫療中心 */
	.indexbanner .bgpic .maptag.hospitaltag {
		left: 26%;
		top: 75%;
	}

	/* 文創市集 */
	.indexbanner .bgpic .maptag.markettag {
		right: 0%;
		top: 10%;
	}

	/* 購物中心 */
	.indexbanner .bgpic .maptag.shoppingmalltag {
		right: 30%;
		top: 15%;
	}

	/* 學校 */
	.indexbanner .bgpic .maptag.schooltag {
		right: 22%;
		top: 48%;
	}

	/* 書店 */
	.indexbanner .bgpic .maptag.bookstoretag {
		right: 5%;
		top: 70%;
	}

	@media (max-height:600px) {
		.indexbanner .bgpic .maptag img {
			max-width: 120px;
		}

		/* 購物中心 */
		.indexbanner .bgpic .maptag.shoppingmalltag {
			right: 35%;
			top: 30%;
		}

		/* 學校 */
		.indexbanner .bgpic .maptag.schooltag {
			right: 31%;
			top: 64%;
		}

		/* 文創市集 */
		.indexbanner .bgpic .maptag.markettag {
			right: 10%;
			top: 20%;
		}

		/* 博物館 */
		.indexbanner .bgpic .maptag.museumtag {
			top: 35%;
		}
	}

	/* 中央導覽列 */
	.section_nav {
		width: 60%;
		max-width: 600px;
	}

	.section_nav .wrap ul {
		justify-content: center;
	}

	/*<<<<<<<<<<< press >>>>>>>>>>>>*/
	.press .press_rest .item {
		width: calc((100% - 72px) /4);
	}

	/*<<<<<<<<<<< 主題串流 >>>>>>>>>>>>*/
	.ytstream .wrap.more-than-three-items {
		justify-content: start;
	}

	.ytstream .item {
		width: calc(100%/2);
		padding: 0 12px;
		box-sizing: border-box;
	}

	/* 編輯精選 */
	.review .owl-item {
		-webkit-transform: scale(0.9) !important;
		transform: scale(0.9) !important;
	}

	/* 控制中間圖片 */
	.review .owl-item.active.center {
		/* box-sizing: content-box; */
		-webkit-transform: scale(1.2) !important;
		transform: scale(1.1) !important;
		transition: 0.8s;
	}

	.review .owl-carousel .owl-nav button.owl-prev {
		right: 100%;
	}

	.review .owl-carousel .owl-nav button.owl-next {
		left: 100%;
	}

	.review ul {
		display: flex;
		justify-content: space-between;
	}

	/* .review .owl-carousel .item{
		width: calc((100% - 16px) /3 );
	} */
	.review .txt p {
		font-size: 24px;
	}

	/*<<<<<<<<<<< bookshelf >>>>>>>>>>>>*/
	.bookshelf .bookall .bookall_area a {
		width: calc(100%/4);
		padding: 0 8px;
	}

	/* 分頁控制 */
	.bookshelf .bookall .pagination {
		justify-content: center;
	}

	/* 推薦內容 */
	.bookshelf .reccomand_area {
		flex-direction: row;
	}

	.bookshelf .reccomand_area a {
		width: calc((100% - 24px) /3);
	}

	/* <<<<<<<<<<<電子書借閱步驟>>>>>>>>>>> */

	/* 內文 */
	.ebooks_step .owl-carousel .item .txt p {
		font-size: 18px;
	}

	/* owl-carousel輪播元件圖片 */
	.ebooks_step .owl-carousel.PC .item .pic {
		width: 60%;
	}

	.ebooks_step .owl-carousel.mobile .item .pic img {
		max-height: 500px;
	}

	/*<<<<<<<<<<< footer >>>>>>>>>>>>*/
	footer .wrap {
		flex-direction: row-reverse;
		justify-content: space-between;
	}
}

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<閱讀大賞&常駐抽獎>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* -----------------閱讀大賞----------------- */
/* 活動引言 */
.quote {
	/* background-color: rgba(255, 255, 255, 0.8); */
	padding: 12px 0 20px;
	position: relative;
}

/* .quote::before,.quote::after{
	content: "";
	position: absolute;
	width: 1px;
	height: 16px;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: #fff;
} */
.quote .wrap {
	margin-top: 0;
}

.quote p {
	width: 80%;
	text-align: center;
	margin: auto;
	color: #424242;
	font-size: 16px;
	font-weight: 500;
	line-height: 180%;
	/* 28.8px */
	letter-spacing: 1px;
}

/* <<<<<<<<<<<三欄>>>>>>>>>>> */
.threerow_list li {
	transition-duration: 0.5s;
}

.threerow_list li:hover {
	transform: translateY(-6px);
}

.threerow_list li:not(:first-child) {
	margin-top: 24px;
}

.threerow_list li .pic {
	display: flex;
	justify-content: center;
}

.threerow_list li .txt {
	margin-top: 4px;
}

.threerow_list li .txt h3 {
	color: #000;
	text-align: center;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 120%;
	margin-top: 8px;
}

.threerow_list li .txt p {
	color: #272727;
	text-align: center;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: 1px;
}

.threerow_list li .txt p span {
	font-weight: 700;
	font-size: 20px;
}

/* <<<<<<<<<<<兩欄>>>>>>>>>>> */
.tworow_list li {
	transition-duration: 0.5s;
}

.tworow_list li:not(:first-child) {
	margin-top: 24px;
}

.tworow_list li .pic {
	display: flex;
	justify-content: center;
}

.tworow_list li .txt {
	margin-top: 4px;
}

.tworow_list li .txt h3 {
	color: #000;
	text-align: center;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 120%;
	/* min-height: 72px; */
	margin-top: 8px;
}

.tworow_list li .txt p {
	color: #272727;
	text-align: center;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: 1px;
}

/* 得獎公布 */
.winningprize p {
	color: #363636;
	font-size: 20px;
	font-weight: 400;
	line-height: 180%;
	/* 28.8px */
	letter-spacing: 1px;
	text-align: center;
}

/* <<<<<<<<<<<注意事項>>>>>>>>>>> */
.notice {
	margin-top: 36px;
}

.notice ol {
	list-style: decimal;
	padding-left: 1rem;
}

.notice ol li {
	padding-top: 16px;
}

.notice ol li p {
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 180%;
	/* 28.8px */
	letter-spacing: 1px;
}

/* <<<<<<<<<<<投稿專區>>>>>>>>>>> */
.postform {
	background-color: rgba(255, 255, 255, 0.363);
	padding: 4px 0 36px;
	margin-top: 36px;
}

.postform .btngroup a {
	width: fit-content;
	display: flex;
	margin: auto;
	font-size: 20px;
	font-weight: 600;
	padding: 16px 24px;
	background-color: #fff;
	color: #000;
	border-radius: 8px;
	margin-top: 48px;
	transition: 0.5s;
}

.postform .btngroup a:hover {
	background-color: #EC6C00;
	color: #fff;
}

.postform .btngroup p {
	font-size: 14px;
	text-align: center;
	color: #757575;
	margin-top: 8px;
	letter-spacing: 1px;
}

@media (min-width:768px) {

	/* <<<<<<<<<<<三欄>>>>>>>>>>> */
	.threerow_list {
		display: flex;
		align-items: flex-end;
		flex-wrap: wrap;
	}

	.threerow_list li {
		width: calc(100% / 3);
		padding: 0 8px;
		box-sizing: border-box;
	}

	.threerow_list li .txt h3 {
		min-height: 48px;
	}

	.threerow_list li .txt p {
		color: #272727;
		font-size: 16px;
		font-weight: 400;
		line-height: 150%;
		letter-spacing: 1px;
		min-height: 72px;
	}

	/* <<<<<<<<<<<兩欄>>>>>>>>>>> */
	.tworow_list {
		display: flex;
		align-items: flex-end;
		flex-wrap: wrap;
	}

	.tworow_list li {
		width: calc(100% / 2);
		box-sizing: border-box;
	}

	.tworow_list li .txt p {
		color: #272727;
		font-size: 16px;
		font-weight: 400;
		line-height: 150%;
		letter-spacing: 1px;
		min-height: 60px;
	}

	/* 活動引言 */
	.quote {
		padding: 24px 0 36px;
	}

	.quote p {
		font-size: 20px;
		line-height: 150%;
	}

	/* <<<<<<<<<<<投稿辦法>>>>>>>>>>> */
	.post .posttxt {
		width: 80%;
		margin: auto;
	}

	.tworow_list li:not(:first-child) {
		margin-top: 0px;
	}

	/* <<<<<<<<<<<加碼活動>>>>>>>>>>> */
	.plusactivity p {
		font-size: 18px;
		line-height: 150%;
	}

	/* 誰是借閱王_活動規則 */
	.plusactivityrule ul {
		width: 70%;
		margin: auto;
	}

	.plusactivityrule ul li {
		display: flex;
		flex-wrap: flex;
	}

	.plusactivityrule ul li p {
		width: 20%;
		text-align: end;
		padding-right: 16px;
		box-sizing: border-box;
	}

	.plusactivityrule ul li span,
	.plusactivityrule ul li ol {
		width: 80%;
		text-align: start;
	}

	/* <<<<<<<<<<<注意事項>>>>>>>>>>> */
	.notice {
		margin-top: 48px;
	}

	.notice ol {
		width: 80%;
		margin: auto;
	}

	.notice ol li p {
		font-size: 18px;
		line-height: 150%;
	}

	.notice ol li:first-child {
		padding-top: 0;
	}

	.notice ol li:not(:first-child) {
		padding-top: 24px;
	}

	/* 書評規範 */
	.post ul {
		width: 60%;
		max-width: 450px;
		margin: auto;
	}
}

/* -----------------母語文化----------------- */
.guide {
	margin-bottom: 48px;
}

.guide p {
	width: 95%;
	margin: auto;
	font-size: 20px;
	text-align: center;
	line-height: 180%;
	letter-spacing: 1px;
}

/* 母語教學網站、這些網站讓你快速了解母語文化、翻譯工具 */
.langagewebsite .threerow_list li a,
.fastlearnlangage .threerow_list li a,
.translatetool .threerow_list li a {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.langagewebsite .threerow_list li {
	margin-top: 0;
}

.fastlearnlangage {
	margin-top: 48px;
}

/* 這些網站讓你快速了解母語文化兩欄的時候 */
.fastlearnlangage .tworow_list li a .pic {
	width: 80%;
	margin: auto;
}

.fastlearnlangage .tworow_list li a .txt {
	width: 80%;
	margin: auto;
}

.langagewebsite .threerow_list li a .txt,
.fastlearnlangage .threerow_list li a .txt {
	width: 80%;
}

.fastlearnlangage .wrap ul li a .txt p {
	font-size: 20px;
	font-weight: 600;
	min-height: auto;
}

.fastlearnlangage .wrap ul li a .txt span {
	color: #000;
	font-size: 16px;
	line-height: 150%;
}

/* 翻譯工具 */
.translatetool {
	margin-bottom: 48px;
}

.translatetool .threerow_list {
	justify-content: center;
}

.nativelanguagebookshelf {
	background-color: #fdfbce7a;
	padding: 36px 0;
}

.nativelanguagebookshelf .bookshelf .bookall .bookall_area .txt p {
	color: #3b3b3b;
}

.nativelanguagebookshelf .bookshelf .bookall .bookall_area a:hover .pic {
	box-shadow: 0px -1px 16px -1px rgba(237, 147, 3, 0.65);
	-webkit-box-shadow: 0px -1px 16px -1px rgba(237, 147, 3, 0.65);
	-moz-box-shadow: 0px -1px 16px -1px rgba(237, 147, 3, 0.65);
}

/* 精選文章 */
.choosearticle .wrap {
	margin-top: 0;
	padding-top: 48px;
}

.choosearticle .wrap ul li {
	padding: 0 16px;
	margin-bottom: 24px;
}

.choosearticle .wrap ul li a .txt {
	width: 90%;
	margin: auto;
}

.choosearticle .wrap ul li a .txt p {
	font-size: 20px;
	font-weight: 600;
	padding-top: 8px;
}

.choosearticle .wrap ul li a .txt span {
	color: #000;
	font-size: 16px;
	line-height: 150%;
}

/* 你還可以來這裡學台語 */
.whatelse .owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
	position: absolute;
	color: #000000;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	border-radius: 999px;
	background-color: #ffffff;
	opacity: 0.5;
	font-size: 36px;
}

.whatelse .owl-carousel .owl-nav button.owl-prev span,
.owl-carousel .owl-nav button.owl-next span {
	font-size: 40px;
	line-height: 40px;
	vertical-align: super;
}

.whatelse .owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
	color: #000000;
	background-color: #ffffff;
	opacity: 1;
}

.whatelse .owl-carousel .owl-nav button.owl-prev {
	right: 80%;
}

.whatelse .owl-carousel .owl-nav button.owl-next {
	left: 80%;
}

.whatelse .owl-carousel {
	display: block !important;
}

.whatelse .owl-carousel .owl-stage-outer {
	height: auto;
}

.whatelse .owl-carousel .item {
	padding: 0;
}

.whatelse .owl-carousel .owl-dots {
	display: none
}

.whatelse .wrap ul li {
	padding: 0 16px;
	margin-bottom: 24px;
}

.whatelse .wrap ul li .pic {
	width: 90%;
	margin: auto;
}

.whatelse .wrap ul li .txt {
	width: 100%;
	margin: auto;
}

.whatelse .wrap ul li .txt p {
	width: 100%;
	min-height: auto;
	font-size: 20px;
	font-weight: 600;
}

.whatelse .wrap ul li .txt span {
	color: #000;
	font-size: 16px;
	line-height: 150%;
	min-height: 70px;
}

.whatelse .wrap ul li .txt span span {
	font-weight: 600;
	color: #EC6C00;
	min-height: auto;
}

.yellowbg {
	background-image: url(../images/nativelanguage/whatelse_bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

.nobg #bookallshelf {
	background-color: #ffe7d7;
}

.nobg #bookallshelf .bookshelf .bookall_area .txt p {
	color: #000;
}

.nobg #bookallshelf .bookshelf .pagination button {
	color: #000;
}

@media (min-width:768px) {
	.choosearticle .wrap ul li a .txt {
		width: 90%;
		margin: auto;
	}

	.choosearticle .wrap ul li a .txt p {
		font-size: 18px;
		font-weight: 600;
	}

	/* 你還可以來這裡學台語 */
	.whatelse .owl-carousel .owl-nav button.owl-prev,
	.owl-carousel .owl-nav button.owl-next {
		position: absolute;
		color: #000000;
		top: 50%;
		transform: translateY(-50%);
		width: 50px;
		height: 50px;
		border-radius: 999px;
		background-color: #ffffff;
		opacity: 0.5;
		font-size: 36px;
	}

	.whatelse .owl-carousel .owl-nav button.owl-prev span,
	.owl-carousel .owl-nav button.owl-next span {
		font-size: 40px;
		line-height: 40px;
		vertical-align: super;
	}

	.whatelse .owl-carousel .owl-nav button.owl-prev:hover,
	.owl-carousel .owl-nav button.owl-next:hover {
		color: #000000;
		background-color: #ffffff;
		opacity: 1;
	}

	.whatelse .owl-carousel .owl-nav button.owl-prev {
		right: 80%;
	}

	.whatelse .owl-carousel .owl-nav button.owl-next {
		left: 80%;
	}

	.whatelse .owl-carousel {
		display: block !important;
	}

	.whatelse .owl-carousel .owl-stage-outer {
		height: auto;
	}

	.whatelse .wrap ul {
		display: block;
		padding: 0 24px;
		box-sizing: border-box;
	}

	.whatelse .wrap ul li {
		display: flex;
	}

	.whatelse .wrap ul li:nth-child(even) {
		flex-direction: row-reverse;
	}

	.whatelse .wrap ul li:nth-child(even) .txt {
		padding-right: 16px;
		box-sizing: border-box;
	}

	.whatelse .wrap ul li .owl-carousel,
	.whatelse .wrap ul li .txt {
		width: 50%;
	}

	.whatelse .wrap ul li:nth-child(odd) .txt {
		padding-left: 16px;
		box-sizing: border-box;
	}

	.whatelse .wrap ul li .txt p {
		margin: 0;
	}

	.whatelse .owl-carousel .item {
		padding: 0;
	}

	.whatelse .owl-carousel .owl-dots {
		display: none
	}

	.whatelse .wrap ul li {
		padding: 0 16px;
	}

	.nobg #bookallshelf {
		background-color: #ffe7d7;
	}

	.nobg #bookallshelf .bookshelf .bookall_area .txt p {
		color: #000;
	}

	.nobg #bookallshelf .bookshelf .pagination button {
		color: #000;
	}
}


/* <<<<<<<<<<<活動獎項>>>>>>>>>>> */
.prize {
	margin-top: 84px;
}

.prize h2 {
	display: flex;
	width: fit-content;
	height: 100%;
	color: #000;
	font-size: 32px;
	font-weight: 700;
	/* padding: 0 0 16px 0; */
	position: relative;
	margin: auto;
	margin-bottom: 24px;
}

/* .prize h2::after{
	position: absolute;
	content: "";
	background: #000;
	width: 100%;
	height: 8px;
	top: 100%;
	left: 0;
} */
.prize .prize_list {
	display: flex;
	flex-wrap: wrap;
}

.prize .prize_list li {
	width: 100%;
	box-sizing: border-box;
	transition-duration: 0.5s;
}

.prize .prize_list li:hover {
	transform: translateY(-6px);
}

.prize .prize_list li:not(:first-child) {
	margin-top: 16px;
}

.prize .prize_list li .pic {
	display: flex;
	justify-content: center;
	width: 100%;
}

.prize .prize_list li .pic img {
	width: 100%;
}

.prize .prize_list li .txt {
	margin-top: 16px;
}

.prize .prize_list li .txt h3 {
	color: #000;
	text-align: center;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 180%;
	/* 36px */
}

.prize .prize_list li .txt p {
	color: #525252;
	text-align: center;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 180%;
	/* 25.2px */
	letter-spacing: 2px;
}

.prize .prize_list li .txt p span {
	font-size: 20px;
	font-weight: 700;
	color: #414141;
}

@media (min-width:768px) {

	/* <<<<<<<<<<<活動獎項>>>>>>>>>>> */
	.prize h2 {
		font-size: 40px;
		font-weight: 700;
	}

	.prize .prize_list {
		display: flex;
		align-items: flex-end;
	}

	.prize .prize_list li {
		padding: 0 8px;
		box-sizing: border-box;
	}

	.prize .prize_list li .pic {
		width: 100%;
	}

	.prize .prize_list li .pic img {
		width: 100%;
	}

	.prize .prize_list li .txt h3 {
		font-size: 20px;
		font-weight: 600;
		line-height: 180%;
		/* 36px */
	}

	.prize .prize_list li .txt p {
		color: #272727;
		font-size: 24px;
		font-weight: 400;
		line-height: 180%;
		/* 25.2px */
		letter-spacing: 2px;
		min-height: 80px;
	}
}

/* <<<<<<<<<<<注意事項>>>>>>>>>>> */
.rule .titleh2 {
	padding: 16px 0 8px;
}

.rule .wrap p {
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 180%;
	/* 28.8px */
	letter-spacing: 1px;
	text-align: center;
	margin: 0 auto 48px;
}

.rule .wrap p span {
	color: #c43f29;
	font-size: 28px;
	font-weight: 600;
}

@media (min-width:768px) {
	.rule .wrap p {
		width: 80%;
		font-size: 18px;
	}
}

.bookall_area a {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.bookall_area a .pic {
	display: flex;
	align-items: center;
	aspect-ratio: 5/6;
	position: relative;
	width: 100%;
	overflow: hidden;
}

.bookall_area a .pic img {
	max-width: 100%;
	max-height: 100%;
	z-index: 2;
}

.bookall_area a .pic .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	opacity: 0.8;
	filter: brightness(105%) blur(10px);
	z-index: 1;
	transform: scale(2);
}