@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;
}
.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: 250px;
}
/* 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;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.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;
	}
	/* 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;
}
/* <<<<<<<<<<<投稿辦法>>>>>>>>>>> */
.post .wrap{
	background-color: rgba(255, 255, 255, 0.349);
	border-radius: 16px;
	border: 0.5px solid rgba(255, 255, 255, 0.548);
	backdrop-filter: blur(2px);
	padding: 36px 0;
}
.post .posttxt{
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 180%; /* 28.8px */
	letter-spacing: 1px;
}
.post .posthint{
	color: #5a5a5a;
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	line-height: 130%;
}
/* 審稿辦法詳細文字 */
.reviewrule p.reviewruletxt{
	color: #000;
	font-size: 14px;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: 1px;
	padding: 16px 0;
	margin-top: 16px;
	border-top: 0.5px dashed #8d8d8d;
}
/* 書評規範 */
.post ul{
	list-style: decimal;
	display: flex;
	flex-direction: column;
}
.post ul li {
	margin-left: 1em;
}
.post ul li .txt{
	width: fit-content;
	padding: 8px 0;
}
.post ul li .txt p{
	display: block;
	text-align: center;
	line-height: 150%;
}
.post ul li .txt p span{
	color: #E06917;
	font-weight: 500;
	font-size: 18px;
}
.post ul li .txt p span a{
	color: #E06917;
	text-decoration: underline;
}
/* <<<<<<<<<<<閱讀大賞_加碼活動>>>>>>>>>>> */
.plusactivity p{
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 180%; /* 28.8px */
	letter-spacing: 1px;
	text-align: center;
}
.plusactivity p a{
	color: #E06917;
	font-weight: 500;
	text-decoration: underline;
}
/* 誰是借閱王_活動規則 */
.plusactivityrule ul{
	width: 100%;
}
.plusactivityrule ul li{
	margin-bottom:12px;
	display: flex;
	flex-wrap: wrap;
}
.plusactivityrule ul li p{
	width: 100%;
	color: #000;
	font-size: 20px;
	font-weight: 600;
	line-height: 180%; /* 28.8px */
	letter-spacing: 1px;
	text-align: center;
}
.plusactivityrule ul li span,
.plusactivityrule ul li ol{
	width: 100%;
	margin: auto;
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 180%; /* 28.8px */
	letter-spacing: 1px;
	text-align: center;
}
.plusactivityrule ul li ol{
	list-style: decimal;
}
.plusactivityrule ul li ol li{
	margin-bottom:0px;
}
.plusactivityrule ul li ol li span{
	width: 100%;
}
/* 得獎公布 */
.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;
	}
}
.readmore{
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	padding: 16px 32px;
	border: 1px solid #023872;
	border-radius: 999px;
	color: #023872;
	margin-top: 16px;
}
.readmore:hover{
	background-color: #023872;
	color: #fff;
}


/* .press_rest a .pic, .bookshelf .bookall .bookall_area a .pic{
	display: flex;
	align-items: center;
	aspect-ratio: 1/1.5;
	position: relative;
	width: 100%;
	overflow: hidden;
}
.press_rest a .pic img, .bookshelf .bookall .bookall_area a .pic img{
	max-width: 100%;
	max-height: 100%;
	z-index: 2;
}
.press_rest a .pic img.bg, .bookshelf .bookall .bookall_area a .pic img.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);
} */