<style type="text/css">
html { width:100%;height:100%;margin:0 auto 0;padding:0;}
body { width:100%;height:100%;margin:0 auto 0;padding:0;font-family:"微軟正黑體", Microsoft JhengHei, Verdana, Arial, Clean, Helvetica, sans-serif, Monotype Corsiva;font-size:16px;overflow-y:auto;overflow-x:hidden;}

.fullblock {width:100%;min-height:100vh;margin:0 auto;font-family:"微軟正黑體", Microsoft JhengHei, Verdana, Arial, Clean, Helvetica, sans-serif, Monotype Corsiva;background:#29337d;display:inline-block;color:#ffffff;}
.fullblock .listblock {width:100%;max-width:100%;height:100%;text-align:center;}
.fullblock .listblock .listitemblock {float:left;margin:1%;width:calc(100%/4 - 2.2%);height:calc(100vh/2 - 4.5%);line-height:calc(50vh - 6vh);border:1px #ffffff solid;font-size:64px;font-weight:bold;cursor:pointer;color:#ffffff;border-radius:6px;-webkit-transition: 1s ease-in-out;}
.fullblock .listblock .listitemblock:hover {
	-webkit-transform: scale(1.05);
	color:#fbfa86;
	border:1px #fbfa86 solid;
	background:rgba(181,252,249,0.2);
}
.fullblock .listblock .listitemblock .subtitle{position:relative;z-index:100;top:-85%;font-size:48px;color:#fff;}

.fullblock .listblock .listitemblocknew {float:left;margin:1%;width:calc(100%/4 - 2.2%);height:calc(100vh/2 - 4.5%);line-height:calc(50vh - 6vh);border:1px #fbfa86 solid;font-size:64px;font-weight:bold;cursor:pointer;color:#fbfa86;border-radius:6px;-webkit-transition: 1s ease-in-out;}
.fullblock .listblock .listitemblocknew:hover {
	-webkit-transform: scale(1.05);
	color:#fbfa86;
	border:1px #fbfa86 solid;
	background:rgba(181,252,249,0.2);
}
.fullblock .listblock .listitemblocknew .subtitle{position:relative;z-index:100;top:-85%;font-size:48px;color:#fff;}

.fullblock .listblock  .newbarclass {position: absolute;width:80px;height:22px;line-height:22px;border:0px #999999 solid;border-radius:22px;color:#ee0000;background:#fcfdb8;font-size:12px;text-align:center;overflow:hidden;font-family: 微軟正黑體, Microsoft JhengHei, Verdana;-webkit-transition: 0.6s ease-in-out;display:none;}



@media screen and (max-width: 359px)  {
.fullblock .listblock .listitemblock { float:left;margin:10px;width:calc(100%/4 - 22px);height:calc(100vh/2 - 22px);line-height:calc(50vh - 27px);border:1px #ffffff solid;font-size:17px;font-weight:bold;border-radius:6px;}
.fullblock .listblock .listitemblock .subtitle{top:-75%;font-size:15px;}

.fullblock .listblock .listitemblocknew { float:left;margin:10px;width:calc(100%/4 - 22px);height:calc(100vh/2 - 22px);line-height:calc(50vh - 27px);font-size:17px;font-weight:bold;border-radius:6px;}
.fullblock .listblock .listitemblocknew .subtitle{top:-75%;font-size:15px;}
}
@media screen and (min-width: 360px) and (max-width: 640px)  {
.fullblock .listblock .listitemblock { float:left;margin:10px;width:calc(100%/4 - 22px);height:calc(100vh/2 - 22px);line-height:calc(50vh - 27px);border:1px #ffffff solid;font-size:calc(1vh + 1vw + 10px);font-weight:bold;border-radius:8px;}
.fullblock .listblock .listitemblock .subtitle{top:-75%;font-size:calc(1vh + 1vw + 8px);}

.fullblock .listblock .listitemblocknew { float:left;margin:10px;width:calc(100%/4 - 22px);height:calc(100vh/2 - 22px);line-height:calc(50vh - 27px);font-size:calc(1vh + 1vw + 10px);font-weight:bold;border-radius:8px;}
.fullblock .listblock .listitemblocknew .subtitle{top:-75%;font-size:calc(1vh + 1vw + 8px);}
}
@media screen and (min-width: 641px) and (max-width: 1020px)  {
.fullblock .listblock .listitemblock { float:left;margin:10px;width:calc(100%/4 - 22px);height:calc(100vh/2 - 22px);line-height:calc(50vh - 27px);border:1px #ffffff solid;font-size:calc(1.2vh + 1vw + 10px);font-weight:bold;border-radius:10px;}
.fullblock .listblock .listitemblock .subtitle{top:-80%;font-size:calc(1.2vh + 1vw + 8px);}

.fullblock .listblock .listitemblocknew { float:left;margin:10px;width:calc(100%/4 - 22px);height:calc(100vh/2 - 22px);line-height:calc(50vh - 27px);font-size:calc(1.2vh + 1vw + 10px);font-weight:bold;border-radius:10px;}
.fullblock .listblock .listitemblocknew .subtitle{top:-80%;font-size:calc(1.2vh + 1vw + 8px);}
}
@media screen and (min-width: 1021px) and (max-width: 1680px)  {
.fullblock .listblock .listitemblock { float:left;margin:10px;width:calc(100%/4 - 22px);height:calc(100vh/2 - 22px);line-height:calc(50vh - 22px);border:1px #ffffff solid;font-size:calc(1vh + 1vw + 15px);font-weight:bold;border-radius:12px;}	
.fullblock .listblock .listitemblock .subtitle{top:-88%;font-size:calc(1vh + 1vw + 10px);}

.fullblock .listblock .listitemblocknew { float:left;margin:10px;width:calc(100%/4 - 22px);height:calc(100vh/2 - 22px);line-height:calc(50vh - 22px);font-size:calc(1vh + 1vw + 15px);font-weight:bold;border-radius:12px;}	
.fullblock .listblock .listitemblocknew .subtitle{top:-88%;font-size:calc(1vh + 1vw + 10px);}
}
@media screen and (min-width: 1681px)  {
.fullblock .listblock .listitemblock  { float:left;margin:1vw;width:calc(100%/4 - 2.2vw);height:calc(100vh/2 - 2.2vw);line-height:calc(50vh - 5vh);border:1px #ffffff solid;font-size:58px;font-weight:bold;border-radius:15px;}
.fullblock .listblock .listitemblock .subtitle{top:-85%;font-size:42px;}

.fullblock .listblock .listitemblocknew  { float:left;margin:1vw;width:calc(100%/4 - 2.2vw);height:calc(100vh/2 - 2.2vw);line-height:calc(50vh - 5vh);font-size:58px;font-weight:bold;border-radius:15px;}
.fullblock .listblock .listitemblocknew .subtitle{top:-85%;font-size:42px;}
}
@media screen and (orientation: portrait) {
.fullblock .listblock .listitemblock { float:left;margin:10px;width:calc(100%/2 - 23px);height:calc(100vh/4 - 22px);line-height:calc(25vh - 32px);border:1px #ffffff solid;font-weight:bold;}
.fullblock .listblock .listitemblocknew { float:left;margin:10px;width:calc(100%/2 - 23px);height:calc(100vh/4 - 22px);line-height:calc(25vh - 32px);font-weight:bold;}
}
</style>
