@charset "utf-8";
/* CSS Document */
body {
  Font-family:微軟正黑體,Arial;
  margin:0 auto;
  padding:0;
background:
    radial-gradient(#795649 0px, transparent 0),
    radial-gradient(#795649 0px, transparent 0),
    linear-gradient(#fff 4px, transparent 0),
    linear-gradient(45deg, transparent 74px, transparent 75px, #795649 75px, #795649 76px, transparent 77px, transparent 109px),
    linear-gradient(-45deg, transparent 75px, transparent 76px, #795649 76px, #795649 77px, transparent 78px, transparent 109px),
    #fff;
    background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
    background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
  animation:120s bganimate infinite linear;
}
@keyframes bganimate {
		0% { background-position:0}
		100% { background-position:(0,400%)}
	}

main{ 
	width:100%; 
	margin:0 auto;
	text-align:center; 
	position:relative;
	overflow-x:hidden;
	}

p{line-height:2em;margin:2%;text-align:left; text-indent:2em;}
a{ text-decoration:none}
.block{
	position:relative;
	color:#000;
	padding:2% 3%; 
	margin:0% auto; 
	width:60%;
	font-weight:700;
	display:block; 
	text-align:center;
	letter-spacing:.1em;}
.block2{
	position:relative;
	color:#FFF;
	background:rgba(000,000,000,.6);
	box-shadow:#000 0 0 20px;
	padding:2% 3%; 
	margin:0% auto; 
	width:60%;
	font-weight:700;
	display:block; 
	text-align:left;
	letter-spacing:.1em;}
.block3{
	position:relative;
	color:#FFF;
	background:rgba(000,000,000,.7);
	box-shadow:#000 0 0 5px;
	padding:2%; 
	margin:5% auto; 
	width:100%;
	border-radius:1.5em;
	font-weight:700;
	display:block; 
	text-align:left;
	letter-spacing:.1em;}
	
.covertitle{letter-spacing:0.07em;font-size:35px; margin:3% auto 1% auto; line-height:1.5em; text-align:center; color:#C3D600}
.author{letter-spacing:.1em; margin:1% auto; text-align:center; font-size:22px; color:#795649; background:#FFF; width:40%}
.title{ font-size:27px; font-weight:bolder; color:#FF0; text-align:center}
ul li{ line-height:2em}
.bgdeco{ width:50vw; top:50%; position: absolute;z-index:-2; left:25%}
.bgdeco img{ width:100%; max-width:1500px}
@keyframes bg {
		0% {top:0}
		100% { top:-500vh}
	}

#cover1{display:block; width:90vw;max-width:1500px;margin:auto; z-index:5; top:0}
.copyright{display:block;
text-shadow:#FFF 0 0 3px,#FFF 0 0 5px,#FFF 0 0 7px,#FFF 0 0 10px,#FFF 0 0 13px;
  color:#000;
  font-size:1em;
  margin:2% auto;
  letter-spacing:.2em}
.bg{width:100%; 
	display:block; 
	text-align:center;
	margin:3% auto;}	
.bg img{ width:100%; max-width:800px;}
.stxt{ background:linear-gradient(90deg,rgba(195,215,0,0) 0%,rgba(195,215,0,.8)25%,rgba(195,215,0,.8)75%, rgba(195,215,0,0) 100%); color:#000; width:100%; margin:auto; font-size:28px}
/*buttom*/
.btn-lg{ color: #C3D600;background:#000; font-size:20px; display:inline-block; margin:2%; padding:1%; width:20%; clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);}
.btn-lg:hover{ color: #000;background:#C3D600;clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
.long{display:block; margin:2% auto; text-align:center; padding:auto; width:30%}
.btn{
    color: #FF0;
    background-color: #000;
    font-size: 36px;
    font-weight: 700;
	display:inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding:1% 5%;
    border-radius: 0;
    border: none;
    position: relative;
    z-index: 1;
	margin:5%;
    transition: all .3s ease 0.15s;
}

.btn:focus{ color: #FF0; }
.btn:hover{
    color: #fff;
    background-color: #C3D600;
	text-shadow:0 0 7px #000;
    box-shadow: 0 0 15px -5px #000;
}
.btn:before,
.btn:after{
    content: "";
    width: 20%;
    height: 20%;
    border-radius: 2px;
    border: 4px solid #FF0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.4s ease,opacity 0.4s ease 0.1s;
}
.btn:after{
    border: 4px solid #FF0;
    border-top-color: transparent;
    border-left-color: transparent;
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
}
.btn:hover:before, 
.btn:hover:after{ 
    width: 100%;
    height: 100%; 
    border: 2px solid #C3D600;
    opacity: 0;
}
@media only screen and (max-width: 767px){
    .btn{ margin-bottom: 30px; }
}


/*buttom*/



@media (max-width:800px){
	#cover1{width:100vw;}
}
@media (max-width:600px){
	.stxt{font-size:1em; line-height:2em}
	.block{width:85%;}
	.block2{width:85%;}
	.block3{ border-radius:1em}
	.btn{	margin:5%;
	text-align:center;
	width:30%;
	font-size: 25px;}
	.btn-lg{width:35%;}
	.long{width:40%}
	}




@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
}
</style>