@charset "utf-8";
/* CSS Document */
body {
    font-family: 微軟正黑體, Arial;
    margin: 0 auto;
    padding: 0;
    background-color: #FFF;
    overflow-x: hidden;
    animation: bgani 30s infinite linear;
}

@keyframes bgani {
    0% { background-position: 0 0; }
    100% { background-position: 0px -1000px; }
}

a {
    color: #de507d;
    text-decoration: none;
}
a:hover {
    color: #0CC;
}

.gp {
    display: inline-block;
}

/* 東立選單 */
#nav {
    min-height: 1vh;
    text-align: center;
    margin-bottom: 0;
    z-index: B6DDFE9;
    margin-top: 1em;
}

#nav a {
    color: #572A1B;
    animation: 1s linear 0s normal none infinite jello-horizontal;
    margin: 1%;
    font-size: 1.1em;
    display: inline-block;
    text-decoration: none;
}

@-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);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
/* 東立選單結束 */

/* 主視覺 */

.visual {
    width: 100%;
    display: block;
    margin: 0 auto;
	text-align:center;
	position:relative;
	z-index:99;
}
.visual img {
    width: 100%;
    max-width: 1000px;
	
}
/* 主視覺結束 */


.block {
    position: relative;
    width: 100%;
    text-align: center;
}

.block3 {
    display: block;
    margin: auto;
    width: 65%;
}


.copyright {
    display: block;
    color: #000;
    font-size: 12px;
    margin: 1% auto;
    letter-spacing: .1em;
    line-height: 2em;
    text-align: center;
}


p {
    line-height: 2.5em;
    margin: 3em auto;
    text-align: center;
	letter-spacing:0.2em;
    font-weight: bolder;
    text-indent: 0;
	font-size:1em;
	background:linear-gradient(90deg,rgba(51,51,51,1), rgba(102,102,102,1), rgba(102,102,102,1), rgba(51,51,51,1)); background-clip:text;-webkit-background-clip: text; color: transparent;animation:bt 30s infinite linear ; font-weight:bold;-webkit-filter:brightness(1); heig:auto; font-weight:bold; animation:bt linear infinite 10s;
}

p a {
    text-decoration: none;
}



.quiz-btn{
  display: inline-block;
  width:150px;
  padding:1.5%;
  background:#f3f6f9;
  border-radius:2em;
  cursor:pointer;
  font-weight:600;
  margin:2%;
  user-select:none;
  transition:0.15s;
  border:1px solid rgba(0,0,0,0.1);
}
.quiz-btn:hover{ 
  background:linear-gradient(0deg,#29CFCB, #369);
  border-color:#3CC;
  color:#FFF;
}
.quiz-btn.selected{
  background:linear-gradient(0deg,#29CFCB, #000);
  border-color:#39C;
  color:#FFF;
}
.quiz-btn.disabled{
  opacity:0.6;
  pointer-events:none;
}

.feedback{
  margin:2% auto;
  padding:2%;
  min-height:40px;
  border-radius:1em;
  font-size:1.2em;
  font-weight:800;
  background:none
}

.book-count{
  margin:2% auto;
  font-size:16px;
}

.book-count input{
  width:20%;
  padding:1%;
  font-size:1.2em;
  border-radius:1em;
  border:1px solid #ccc;
  margin:1% auto;
}

.submit-btn{
  display:inline-block;
  margin:10px 0;
  padding:10px 20px;
  background:#f3f6f9;
  border-radius:1em;
  cursor:pointer;
  font-weight:600;
  border:1px solid rgba(0,0,0,0.1);
  transition:0.15s;
}

.submit-btn:hover{
 background:linear-gradient(0deg,#29CFCB, #369);
  border-color:#3CC;
  color:#FFF;
}


#publisherImage img{
  max-width:20%;
  margin-top:10px;
  border-radius:1em;
}

#publisherImage canvas {
  max-width:50%;  
  height: auto;    
  display: block;
  margin: 0 auto;
  box-shadow:#333 0 0 20px
}


.gradient2 {
    background:linear-gradient(90deg,rgba(51,153,204,1), rgba(51,204,204,1), rgba(51,102,204,1), rgba(51,153,204,1)); background-clip:text;-webkit-background-clip: text; color: transparent;animation:bt 30s infinite linear ; font-weight:bold;-webkit-filter:brightness(1); heig:auto; font-weight:bold; animation:bt linear infinite 20s;
    letter-spacing: .05em;
    line-height: 2em;
    font-size:2em;
    text-align: center;
    margin-top: 4em;
    font-weight: bold;
}

 
.gradient3 {
  background: linear-gradient(90deg, rgba(0, 175, 236, 0), rgba(102,204,204,1), rgba(102,153,204,1), rgba(51,153,204,1), rgba(0, 175, 236, 0));
  color: #FFF;
  width: 80%;
  margin: 2% auto;
  font-size: 1.3em;
  letter-spacing: 0.1em;
  font-weight: bolder;
}


.gradient4 {
  color: #FFF;
  font-size: 1.5em;
  letter-spacing: 0.1em;
  font-weight: bolder;
  margin: 1% auto;
  line-height: 2em;
  text-align: center;
  text-shadow: 0 0 4px #F60, 0 0 7px #F60, 0 0 10px #F60, 0 0 15px #F60;
}

.gradient4 span {
  position: relative;
  display: inline-block;
  letter-spacing: 0.05em;
  color: #F60;
  font-size: 0.8em;
  text-shadow: 0 0 4px #FFF, 0 0 7px #FFF, 0 0 10px #FFF;
  animation: jump 1s ease infinite;
}

.gradient4 span:nth-child(2) {
  animation-delay: 0.14s;
}
.gradient4 span:nth-child(3) {
  animation-delay: 0.28s;
}
.gradient4 span:nth-child(4) {
  animation-delay: 0.42s;
}
.gradient4 span:nth-child(5) {
  animation-delay: 0.56s;
}
.gradient4 span:nth-child(6) {
  animation-delay: 0.7s;
}
.gradient4 span:nth-child(7) {
  animation-delay: 0.84s;
}


@media (max-width:767px){
.block3{  width:90% }
.gradient2 {font-size: 1.4em; margin-top: 2em;}
.gradient3 {background:rgba(0, 175, 236, 0.6)}
.visual{ width:100%}
#publisherImage {
    text-align: left; 
    width: 100%;      
    padding: 10px;   
  }
#publisherImage canvas {
    max-width: 90%;
  }
.book-count input{
  width:80%;
}

}

/*San*/
.boxxx{ width:100%; position:relative; margin:0 auto}
.box{ 
	height:40vh;
    width:30%;
	margin:2em auto;
	margin-left:0.5em;
	margin-right:0.5em;
	position:relative;
    border-radius:15px;
	border-top: 1px solid rgba(255,255, 255, 0.5);
    border-left: 1px solid rgba(255,255, 255, 0.5);
    backdrop-filter:blur(5px) ;
    background:rgba(255,255, 255, 0.1);
    box-shadow:0px 0px 20px rgba(0, 0, 0, 0.1);
	display:inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align:center;
	line-height:1.5em;
	color:#666;
	}
	.box:hover{box-shadow:0px 0px 5px rgba(102,153,204,0.1),0px 0px 50px rgba(153,204,255,1);}
	@media (max-width:765px){.box{margin:1em auto;margin-left: auto;margin-right: auto; width:100%;}}
	.box h1{background:linear-gradient(90deg,rgba(51,153,204,1), rgba(51,204,204,1), rgba(51,102,204,1), rgba(51,153,204,1)); background-clip:text;-webkit-background-clip: text; color: transparent;animation:bt 30s infinite linear ; font-weight:bold;-webkit-filter:brightness(1); heig:auto; font-weight:bold; animation:bt linear infinite 20s; line-height: 1.2;}
	@keyframes bt {
		from{}
		to{ background-position:3000px 500px;}
	}
#bg{width:100%; height:100%; position:fixed; top:0; margin:0 auto; z-index:0;}
main{ position:relative; margin:0 auto; background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,1), rgba(255,255,255,0)); }


/* 新增給測驗 */
#result-area {
  display: none; /* 初始隱藏 */
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  margin-top: 3em;
  padding-bottom: 5em;
}

/* 啟動顯示 */
#result-area.active {
  display: block;
  opacity: 1;
}

/* 產出的文字 */
#summary {
  max-width: 700px;
  margin: 0 auto;
  line-height: 2.5em;
  color: #572A1B; /* 深色調文字 */
  font-size: 1.4em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  text-align:left
}