article{background-size: 100%;}
.hide{display: none;}
mark{background: linear-gradient(to right,#c3da69 0%,#00a6d5 40%,#c487b9 100%);color:white;padding: 0.1rem 0.3rem;margin-right: 0.6rem;letter-spacing: 0.09rem;}
#event{/*background:#d7deef;*/background: url('../images/1312040_bg.jpg') repeat-y top center / 100%;}

.banner{padding: 2.5rem 0 0;}
.banner img{width: 100%;}
#event_content{overflow: hidden;}
#event_content #event_sale{padding:0;margin:10px 0;width:100%}
.booklist , .booklist2{width:auto;padding:0 0 1%;display:flex;flex-wrap:wrap;font-size:1rem;margin: auto;}
.booklist h3{font-size:1.8rem;display: inline-block;background-color: #aa5a77;padding:1% 6% 1% 17%;width: auto;transform: skew(-20deg);margin:0 0 2% -3%;position: relative;color: white;}
.booklist:nth-of-type(2) h3{background-color: #00abac;}
.booklist h3 span{transform: skew(20deg);display: inline-block;}
.booklist>div,.booklist2>div{display: flex;flex-direction: row;justify-content: center;align-items: flex-start; margin: auto;flex-wrap: wrap;}
.booklist>div{width: 86%;padding: 0 0 .5rem;border-bottom: 5px dotted #ffffffcc;}
.booklist2>div{width: 70%;}
figure{width:calc(100%/4 - 2%);margin:1%;text-align: center; }
figure img{filter: drop-shadow(2px 2px 5px #0000002a);/*border: 1px solid #b9b9b9;box-shadow: -1px 2px 7px -1px #b6bfd7;*/}
/*figure:nth-of-type(1) {margin-top: -2rem;}
figure:nth-of-type(1) img{border: 0;box-shadow: none;}*/
figcaption{margin:.7rem auto ;color:#454547;}
figcaption a{display:block;color:#454547;margin: 0 0 6%;}
.booklist2>div>figure{width:calc(100%/2 - 2%);margin: .1rem auto;text-align: center;position: relative;left: -1.5rem;}
.booklist2>div>figure>figcaption{padding: 0 0 0 3rem;}
.booklist img{border: 1px solid #ccc;}

#event_master{display: flex;justify-content: center;align-items: center;padding: 2rem 0 0}
#event_sale{float:left;width:100%}
#event_sale span{font-weight:bold;color:#ca3254;font-size:1.6rem;display:inline-block}
#event_sale img{vertical-align:middle;margin:0 3%}
.sale_list{width:auto;margin:auto;/*background-color: #ebe4f1;*/padding:0 0 3%;display: flex;flex-wrap: wrap;text-align: left;font-size: 1.3rem;font-weight: bold;}
.subtitle{width: 100%;background: linear-gradient(to right,#c3da69 0%,#00a6d5 40%,#c487b9 100%);padding: 1.5% 0;text-align: center;font-size: 1.5rem;color: white;margin-bottom:.8%;}
.subtitle a{color: white;}
.sale{width: 82%;margin: auto;line-height: 1.8;color: #134354;}
.sale p b{color: #ca3254;}
#event_sale h2{font-size:1.3em;margin: 0;}
.sale a {display: inline-block;margin-left: .5rem;padding:.06rem .5rem .1rem;background-color: #00836e;color: #f6f3ca;font-size: 1.2rem;text-decoration: none;border-radius: 10px;line-height: initial;}

/* main */
#event_note{background-color: #437EB4;color: white;}


@media all and (min-width: 1201px){
	/* css reset 歸0 */
	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tfoot,thead{margin:0;padding:0;border:0;outline:0;font-size:100%}
	blockquote,q{quotes:none}
	blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
	/* remember to define focus styles! */
	:focus {outline: 0;	}
	/* remember to highlight inserts somehow! */
	ins{text-decoration:none}
	del{text-decoration:line-through}
	/* css reset 歸0 end */
	body{background:url(../images/0206030-2_line-bg.gif) #fdfdfd;margin:0;padding:0;}
	#BodyContainer{width:850px;margin-right:auto;margin-left:auto}

	/* bodyHeader */
    #BodyHeader #header-share{line-height:2;font-size:13px;color:#000}
    #BodyHeader #header-share a{font-size:13px;color:#000;text-decoration:underline}
    #BodyHeader_m{display:none}
    #BodyContentEvent{width:850px;float:left}

	/* Event css */
	#event{width:100%;margin-right:auto;margin-left:auto;font-family:"Microsoft JhengHei",Verdana,Arial;background-repeat:repeat;}
	#event a:hover{text-decoration:none;position:relative;top:2px;left:2px;}
	#event_master,#event_content,#event_note,#event_news{padding:1rem 0;margin:0;width:100%;}
    
	/* event主圖 */
	#event_content{width: 100%;}
    #event_master img{max-width:100%;}
    /* .sale {width: 92%;margin:.1rem auto;line-height: 1.25;}
    .booklist>div {width: 92%;} */
    .booklist2>div>figure>figcaption {padding: 0 0 0 2rem;}

	/*注意事項*/
	#event_note{width:850px;margin-right:0;margin-bottom:0;margin-left:0;float:left;padding:3% 0;}
	#event_note p{font-size: .9rem;line-height: 22px;margin-left: 17%;}

	/* news */
	#event_news{margin:0;padding:3% 0 4%;display: inline-block;background: linear-gradient(0deg, #ffffff8a, #ffffffcc);}
	#event_news .NewsStyle_title{font-size:1.1rem;line-height:1.3em;font-family:"Microsoft JhengHei",Arial;color:#ca3254}
	#event_news .NewsStyle{font-size:.9rem;color:#454547;line-height:18px;font-family:"Microsoft JhengHei",Arial}
	#event_news .NewsStyle a:link{font-size:.9rem;color:#454547;line-height:18px;font-family:"Microsoft JhengHei",Arial}
	#event_news .NewsStyle a:visited{font-size:.9rem;color:#454547;line-height:18px;font-family:"Microsoft JhengHei",Arial}
	#event_news .NewsStyle a:hover{font-size:.9rem;color:#134354;text-decoration:none;line-height:18px;font-family:"Microsoft JhengHei",Arial}
	#event_news .NewsStyle a:active{font-size:.9rem;color:#454547;line-height:18px;font-family:"Microsoft JhengHei",Arial}
	/* news end*/

	/* Footer */
	#BodyFooter_rwd{float:left;width:850px;margin-left:auto;margin-right:auto;color:#333;font-family:"微軟正黑體"}
	#BodyFooter_rwd #footer_line{width:90%;display:block;float:left;height:auto;text-align:center;border-top-width:thin;border-top-style:solid;border-top-color:#333;margin:2% 5%}
	#BodyFooter_rwd #footer_inline a{color:#333}
	#BodyFooter_rwd #footer_inline ul{float:left;width:100%;margin-bottom:0;margin-top:3%}
	#BodyFooter_rwd #footer_inline ul li{display:inline;line-height:2em;font-size:1em;clear:both;width:100%;margin-right:1%;margin-bottom:0}
	#BodyFooter_rwd #footer_inline ul li img{width:20%;height:auto;vertical-align:middle}
	#BodyFooter_rwd #footer_address{margin-top:0;float:left;width:100%;margin-right:auto;text-align:center;margin-left:auto}
	#BodyFooter_rwd #footer_address a{color:#333}
	#BodyFooter_rwd #footer_address ul{float:left;text-align:center;margin-bottom:1%;width:100%;clear:both}
	#BodyFooter_rwd #footer_address ul li{float:left;display:block;width:100%;line-height:2em;text-align:center;font-size:.8em}
	/* Footer end */

	/* 舊版IE */
	#noie{background-color:#FFF;width:100%;text-align:center}
	/* 舊版IE end */

	#topbutton{display:none}
}


@media (min-width: 768px) and (max-width:1199px) {
	article {overflow: hidden;}
	.booklist>div {width: 94%;}
	.sale {width: 92%;line-height: 1;}
	
}


@media(max-width:767px){
	.visible-xs{display:block!important}
	.hidden-xs{display:none!important}
	article{overflow:hidden}
	
	.banner {padding: 2.5rem 1rem 0;}
	.sale h2,.sale p{display:block;margin: 3% 0;}
	.sale h2{text-align:center}
	.sale{line-height: 1.3;}
	.sale a{margin: .5rem auto;}
	.sale_list{font-size: 1.2rem;}
	mark{display: block;margin: auto;}
	#event_sale{width:100%}
	.booklist>div{/*width: auto;*/width: 94%;flex-flow: inherit;justify-content:space-around;text-align: center;}
	.booklist2>div{width: 100%;}
	.booklist2>div>figure {left: -1rem;width: calc(100% / 2);}
	.booklist2>div>figure>figcaption {padding: 0 0 0 1.5rem;}
	figure{width: 48%;}
	@media screen and (max-width: 350px){figure{width: 96%;}}
	.booklist{margin: 0 0 3%;}
	.booklist h3{width: 100%;transform: none;margin: auto;text-align: center;padding: 1% 0;}
	.booklist h3 span{transform: none;}
}