@charset "utf-8";
/* CSS Document */

body{margin:0; padding:0; background: url("images/bg.png") repeat-y center top;font-family: 'Noto Sans TC', sans-serif;}
a{text-decoration: none; color: inherit;}

header{background:url("images/book.png") no-repeat left top/contain; position: relative; z-index: 5; max-height: 1211px; }
header:before{content:''; display: block; padding-top:63%;}
h1{ background: url("images/title.png") no-repeat center center/contain;width:47%; max-width: 909px;margin:0; position: absolute; left:50%; top:calc(6% + 70px);}
h1:after{ content: ''; display: block; padding-top:44%;}
h2{ background-size:cover;}

/*消費活動書單抽PO幣*/
.page1{margin-top:-105px; position: relative; z-index: 1; background: url("images/bg-content.png") no-repeat center top; padding:0 0 100px 0;}
.page1 h2{width:95%; max-width:1866px; margin: 0 auto; background:url(images/title-page1.png) no-repeat center top/contain;}
.page1 h2:after{content:''; display: block; padding-top: 15.5%;}
h3{text-align: center; font-size:22px; margin:40px 0 50px 0; }
h3 mark{background:linear-gradient(transparent 40% ,#94dffd 40% );}
.award{ display:flex; flex-direction: row; justify-content: space-between;width:95%; max-width:950px; margin:10px auto 30px auto; gap:20px;}
.award-info{ font-weight: 500; background:#e3f7ff; text-align:center; font-size:20px; width:90%; max-width:300px; border-radius: 20px; box-sizing: border-box; padding:20px 20px 50px 20px; position: relative;}
.award-info p{ position: relative;}
.award-info strong{font-size:2em; position: relative; color:#004bdb;}
.award-info:before{content:''; display:block; position: absolute; top:15px; left:15px; right:15px; bottom:15px; border-radius:15px ; border:2px solid #a3e5fb;}
.aware{width:90%; max-width:700px; margin:0px auto;}
.aware h3{ margin: 0;}
.page1 ul{font-size:17px; padding:0;}
.page1 ul li{list-style:none; padding:5px 0 5px 40px; background: url("images/list-style.png") no-repeat left 2px;}
fieldset{width:80%; max-width:950px; margin:50px auto ; border:1px solid #156085; font-size:15px; color:#156085;}
fieldset li+li{margin-top:10px;}
fieldset mark{background:linear-gradient(transparent 40% ,#94dffd 40% ); color:#156085;}
fieldset a{color:#310d94; border-bottom:1px solid;}



/*主題選書日日暢讀*/
.page2{background:#0047e7; position: relative; padding:0 0 100px 0;}
.page2:before{content:''; display: block; background:url("images/bg-page2.png") no-repeat center top;width:100%; height: 100px; position: absolute; left: 0; top:-100px;}
.page2 h2{position:relative; margin: 0 auto; background:url(images/title-page2.png) no-repeat center top/contain; width:95%; max-width:1866px;}
.page2 h2:after{content:''; display: block; padding-top: 5.3%;}
.page2 h3{color:#fff; margin: 20px 0 ;}

#tabs ul{list-style: none; margin: 0 0 30px 0; padding:20px 0;text-align: center; position: sticky; top:0; background:#0047e7; }
#tabs li{display: inline-block; margin: 5px;}
#tabs li a{display:block; padding:5px 30px; border-radius:30px; color:#fff; border:1px solid #fff;}
#tabs .ui-tabs-active a{ background:#fff; color:#0047e7;}
.wrapbox{ display:flex; flex-wrap: wrap; gap:20px; margin: 0 auto; max-width:1055px;}
.book{ padding:10px; width:175px; font-family: sans-serif; font-weight: bold; background:#fff;}
.book>span{display:block;}
.book img{display:block;}
.bimg{margin-bottom: 5px;}
.bauthor{font-size:0.8em; color:#898989;}

@media screen and ( max-width:1055px){
	.page1{margin-top:-50px;}
	.wrapbox{max-width:840px; }
}
@media screen and ( max-width:840px){
	.wrapbox{max-width:625px; }
	#tabs li a{ padding:5px 0px;}

}
@media screen and ( max-width:625px){
	.wrapbox{max-width:405px; }
}
@media screen and ( max-width:480px){
	header{background-position: -5px bottom; background-size: 605px;}
	header:before{padding-top:calc(60% + 325px);}
	h1{ top:80px; left: 50%; transform: translate( -50% ,0); width:80%;}
	.page1{margin-top:30px;}
	.page1 h2{ background:url("images/title-page1-device.png") no-repeat center center/contain;}
	.page1 h2:after{ padding-top:33%;}
	.award{ flex-direction: column; align-items: center;}
	
	.page2 h2{background:url("images/title-page2-device.png") no-repeat center center/contain;}
	.page2 h2:after{ padding-top:11.3%;}
	h3{font-size:20px;}
	.wrapbox{ flex-direction: column; align-items: center;}
}



/***********POBAR***********/
#po_bar{ display:flex; padding: 5px 15px;  width:100%; box-sizing: border-box; font-size:16px; font-weight: 500; position: absolute; top:0; left: 0; z-index: 10;}
#option{flex:2; list-style: none; padding: 0; margin: 0; text-align: right;}
#option li{ display: inline-block; line-height: 55px; vertical-align: middle;}
#option li:nth-of-type(-n+4){ margin-left: 5px;}
#option a{ text-decoration: none; color:#e9faff;}
#option img{width:18px;}
#gotop{ position:fixed; bottom:20px; right:20px; cursor: pointer; z-index:99;}
.btn-menu{display: none;}
/*************/
@media screen and (max-width:468px){
	#gotop{ bottom:20px; right:20px;}
	.menu{ text-align: right; flex: 1;z-index: 20; position: relative;}
	.btn-menu{display:inline-block; line-height: 44px; width:25px;}
	.logo{width:80px;}
	#po_bar{ padding:5px; margin-bottom:25px;}
	#option{ display: none; position: fixed; right: 0; top:0; transition: all 0.5s; padding: 50px 5px 20px 5px;  background:#101f31; width:50%; height: 100vh; box-sizing: border-box; z-index: 15; box-shadow: -5px 0 10px #0000002e;}
	#option li{ display: block; text-align: center; margin-left: 0;}
	#option img{ width:25px;}
	.menu.show{position:fixed; top:5px; right:5px;}
	.menu.show+#option{display: block;}
}