/* 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}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
/* css reset 歸0 end */

body{margin:0 auto;padding:0;font-family: 'Noto Sans TC', sans-serif;background: url(../images/line_bg.gif);}
#BodyContainer{margin:0 auto}
#BodyContentEvent,#event{width:100%}
#event a:hover{text-decoration:none;left:1px;top:1px;position:relative}
.bgcolor0{
    background: -moz-linear-gradient(156deg, #ED783E 54%, #E50030 54%, #ED783E 83%);/* FF3.6+ */
    background: -webkit-gradient(linear, 156deg, color-stop(54%, ED783E), color-stop(54%, E50030), color-stop(83%, ED783E));/* Chrome,Safari4+ */
    background: -webkit-linear-gradient(156deg, #ED783E 54%, #E50030 54%, #ED783E 83%);/* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(156deg, #ED783E 54%, #E50030 54%, #ED783E 83%);/* Opera 11.10+ */
    background: -ms-linear-gradient(156deg, #ED783E 54%, #E50030 54%, #ED783E 83%);/* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1301FE', endColorstr='#F4F60C', GradientType='1'); /* for IE */
    background: linear-gradient(156deg, #ED783E 54%, #E50030 54%, #ED783E 83%);/* W3C */
}
.bgcolor1{background: linear-gradient(to bottom, white 0%, #FDEBC7 30%);}
.bgcolor2{background: #2e458b;}
.w-full {width: 100%;}
img {max-width: 100%;height: auto;margin: 0 auto;}
h1{
    font-size: 3.5rem;color: white;line-height: 1.2;font-family: "Microsoft YaHei", Verdana;
    position: relative;padding: 3rem 0 0;font-weight: normal;letter-spacing: 0.15rem;text-align: center;
    overflow: hidden;
}
h1 strong{font-size: 8.3rem;font-weight: bold;}
h1 span:nth-of-type(1){width: 65%;}
h1 span:nth-of-type(2){width: 35%;margin-top: -3rem;}
h2{font-size: 1.5rem}
h3 {font-size: 3.0rem;color: #ac8800;font-family: "Microsoft YaHei", Verdana;position: relative;padding: 5% 0 0;font-weight: normal;letter-spacing: 0.15rem;}
h3 a{color: #ac8800;}
h3 strong{font-size: 4rem;color: #a8272b;font-weight: bold;}
h4{font-size: 1.6rem}
h5{font-size: 2.3rem;font-family: "Microsoft YaHei", Verdana;color: #142b7d;}

:root{
    --yellow1: #FFF24E;
    --red1: #E50012;
    --orange1: #EA6000;
    --aquamarine: #00A2AB;
    --green1: #3C9638;
    --purple1: #C0507E;
    --blue1: #3071B7;
}

hgroup{padding: 0 7% 2%;}


[class*="flex"] {display: flex;flex-wrap: wrap;}
[class*="grid"] {display: grid;}

.bookcover{position: relative;}
.cover{width: 36%;margin:-4.6rem auto 0 -3rem;position: relative;}
.cover2{width: 35%;margin:3% auto;align-content: center;}
.cover figure{text-align: right;}
.cover2 figure{text-align: left;padding: 3% 0 0 0;margin: 0 0 0 -4%;position: relative;}
.gohit {
    position: absolute;
    content: "";
    z-index: 1;
    width: 130px;
    height: 90px;
    right: -12%;
    top:-6%;
    text-align: center;
    background: var(--yellow1);
    border-radius: 50%;
    font-size: 1.1rem;
    color: white;
    padding: 1.4rem 0 1rem;
    animation: move1 .6s linear alternate infinite;
}
.gohit span{
    display: block;
    font-size: 1.7rem;
    font-weight: bold;
}
.gohit a{color: black;}
.hot{
    text-align: center;padding: 3%;position: absolute;background: linear-gradient(to right,#a8842c 10%,#f4eba6 50%,#a8842c 90%);
    font-size: 1.2rem;font-weight: bold;right: 5%;border-radius: 1.0rem;line-height: 1.4rem;
}
.cover figcaption,.cover2 figcaption{margin: 1rem auto;font-size: 1.0rem;background-color: white;text-align: center;width: max-content;padding: 0.4rem 1rem;border-radius: 1rem;}
.cover figcaption a,.cover2 figcaption a{text-decoration: none;color: black;}
.cover figcaption a i{color: #a8272b;font-size: 1.2rem;}
.cover2 figcaption a i{color: #1a347f;font-size: 1.2rem;}
.author,.author2{width: 60%;justify-content: center;align-items: center;font-size: 1.1rem;line-height: 1.7;padding-left: 2rem;}
.author div,.author2 div{margin: 1% 0 1%;justify-content: center;row-gap: 2rem;align-items: center;}
.author div img{filter: drop-shadow(6px 6px 12px white);}
.author dl{margin: .2rem auto 1rem;color: white;font-size: 1.1rem;display: inline-block;padding: .5rem;border:solid 1px white;}
.author dt{letter-spacing: 0.2rem;color: #ffffff;font-weight: bold;font-size: 1.5rem;line-height: 1.2rem;margin: 0px 3% 4% 3%;}
.author dt span{font-size: 3.2rem;}
.author dd a{color: white;}
.author dd{width: 100%;}
.author ul{padding: 0 2rem;list-style: none;font-size: 1.7rem;text-align: center;flex-direction: column;font-weight: bold;}
.author ul li{
    padding: 0 3.5rem;margin-bottom: 0.5rem;text-align: center;background-color: var(--yellow1);
    border-radius:26px;display: inline-block;width: fit-content;margin: auto;
}
.author ul li:nth-of-type(even){background-color: transparent;color: white;font-size: 1rem;padding: 0;margin: 0;border-radius:0;margin: auto;}
.author2 ul{padding: 1rem .5rem 1rem 2rem;list-style: none;background: linear-gradient(to left,#e7e7e7 2%,#ffffff 18%);margin: 3rem 0% 3rem .5rem;border-radius: 1.5rem 0 0 1.5rem;font-size: 1.1rem;border-bottom: solid 6px #cbb780;}

.author2 ul li{border-bottom: dashed 1px #b3b3b3;margin-bottom: 0.5rem;}
.author b{color: #a8272b;display: block;/* text-indent: -1rem; */font-size: 1.4rem;line-height: 1.8rem;}
.author2 b{color: #0049a4;display: block;/* text-indent: -1rem; */font-size: 1.4rem;line-height: 1.8rem;}

.info{justify-content: left;align-items: flex-start;margin: 0 auto;padding: 1rem 1rem 1rem;}
.info figure{width: 52%;margin:0 auto 2rem;justify-content: center;}
.info figure:nth-of-type(2),.info figure:nth-of-type(4){width: 48%;}
.info figure:nth-of-type(n+3):nth-of-type(-n+4){margin:0 auto;}
.info figcaption{font-size: 1.3rem;color: #a02d54;}
.info figcaption span{
    color:#f7ead9;background: #594292;display: inline-block;padding: 0 .3rem;margin:0 .5rem .5rem 0;
    border-radius: 8px;border: solid 2px #a37927;
}
.info dl{justify-content: center;align-items: center;flex-direction: column;position: relative;width: 48%;}
.info dt{
    position: absolute;
    font-size: 1.5rem;border-radius:50%;color: var(--yellow1);width: 8.6rem;height: 8.6rem;
    text-align: center;justify-content: center;align-items: center;align-content: center;
    box-shadow: 0px 10px 5px -5px rgba(0, 0, 0, .3);z-index: 1;
}
.info img{
    box-shadow: 0px 10px 15px -5px rgba(0, 0, 0, .2);
}
.info dt span{font-size: 1.1rem;color: white;}
.info_a{background-color: var(--aquamarine);top:-0.5rem;}
.info_b{background-color: var(--orange1);top:2.5rem;}
.info_c{background-color: var(--green1);top:1rem;}
.info_d{background-color: var(--purple1);}
.info_e{background-color: var(--blue1);bottom: 4rem;}
[class*="info_"]{right: -1rem;}
.info_m{display: none;}
[class*="box_"]{position: relative;}
[class*="box_"]::before,[class*="box_"]::after{
    position: absolute;content: '';z-index: 0;
}
.box_a{order: 1;z-index: 4;margin: 1%;}
.box_b{order: 3;z-index: 2;margin: -30% 2% 1% 0;}
.box_c{order: 5;z-index: 1;margin: -12rem 0 1% 1%;}
.box_d{order: 2;z-index: 3;margin: 1%;}
.box_e{order: 4;z-index: 0;margin: -45% 2% 1% 0;}
.box_a::before{width: 8rem;height: 2.2rem;border:solid 4px var(--red1);border-radius:8px;left: 0rem;top: 9rem;}
.box_a::after{width: 13rem;height: .25rem;left:8rem;top: 9rem;background-color: var(--red1);transform: rotate(-20deg);transform-origin: left;}
.box_b::before{width: 8rem;height: 2.2rem;border:solid 4px var(--orange1);border-radius:8px;left: 0rem;top: 4.5rem;}
.box_b::after{width: 13rem;height: .25rem;left:8.3rem;top: 6.5rem;background-color: var(--orange1);transform: rotate(2deg);transform-origin: left;}
.box_c::before{width: 8rem;height: 2.2rem;border:solid 4px var(--green1);border-radius:8px;left: 0rem;top: 1.5rem;}
.box_c::after{width: 13rem;height: .25rem;left:8.5rem;top: 3.5rem;background-color: var(--green1);transform: rotate(2deg);transform-origin: left;}
.box_d::before{width: 97%;height: 78%;border:solid 4px var(--purple1);border-radius:8px;left: 0rem;top: 6.5rem;}
/* .box_d::after{width: 13rem;height: .25rem;left:8rem;top: 9rem;background-color: var(--purple1);transform: rotate(-20deg);transform-origin: left;} */
.box_e::before{width: 11rem;height: 2.2rem;border:solid 4px var(--blue1);border-radius:8px;left: 0rem;bottom: 7rem;}
.box_e::after{width: 7rem;height: .25rem;left:11.5rem;bottom: 8rem;background-color: var(--blue1);transform: rotate(0deg);transform-origin: left;}


/*命中*/
.h1-hit span:nth-of-type(2){margin-top: -7.2rem;}
.author_hit{margin-top: -2.5rem;}
.cover-hit{margin: -9rem auto 0 0;width: 24%;}
.cover-hit figcaption{margin:.5rem auto;}
.event_hit{margin:2% 3%;position: relative;z-index: 1;}
.quiz_flex{padding-bottom: .5rem;margin-bottom: .5rem;border-bottom: dashed thin gray;}
h6{
    text-align: center;margin: 0;padding:0;font-size: 2.5rem;width: 100%;display: block;font-family: "CHei3HK";color: var(--red1);line-height: 1.5;}
.quiz_group{width: 96%;margin: auto;}
.quiz_group:nth-of-type(2) .quiz_flex:nth-of-type(2){margin-bottom: 0;}
.quiz:first-child{width: 100%;}
.quiz p:first-of-type{font-weight: bold;color: #23448b;}
.quiz_flex:last-child{border-bottom: none;}
.quiz{width: calc(100%/2.05);padding: 0 .2rem;}
.quiz p{margin: .1rem 0;}
.quiz p:last-child {color: #ff283d;}
.quiz img{
    border-radius: 10px;
    border-right: #EE7C1A 2px solid;
    border-bottom: #EE7C1A 2px solid;
    border-top: #0098B3 solid 2px;
    border-left: #0098B3 solid 2px;
}
.quiz:nth-of-type(even) img{
    border-radius: 10px;
    border-left: #EE7C1A 2px solid;
    border-top: #EE7C1A 2px solid;
    border-bottom: #0098B3 solid 2px;
    border-right: #0098B3 solid 2px;
}
.quiz figure{margin: auto;}
.hit_text{font-size: 2.6rem;color:black;background: var(--yellow1);border-radius: 16px;display: inline-block;padding: 0 2rem;}


@keyframes move1{0%{transform: scale(1);}100%{transform: scale(1.03);}}

#event_buy{text-align: center;}
.buy {padding: 2% 0;background: var(--red1);color: white;}
.buy ul li{display: inline;font-size: 1.3rem;}
.buy ul li a{color: var(--yellow1);font-size: 1.6rem;font-weight: bold;display: inline-block;}
.buy a{padding: 0 2%;}
#event_note {
    text-align: center;
    float: left;
    width: 100%;
    padding-top: 1%;
    padding-bottom: 2%;
    background: linear-gradient(to right,#a8842c 10%,#f4eba6 50%,#a8842c 90%);
}
#event_note ul{display: inline-block;}
#event_note li {
    font-size: 13px;
    line-height: 20px;
    color: black;
    text-align: left;
    list-style: none;
}

@media (min-width:992px) and (max-width:1199p){
    .box_a::before{top: 11rem;width: 10rem;}
    .box_a::after{top: 11rem;left: 10rem;width: 14rem;}
    .box_b::before{top: 6rem;}
    .box_b::after{width: 14rem;}
    .box_c::before{top: 2rem;}
    .box_c::after{width: 14rem;}
    .box_d::before{top: 8rem;}
    .box_e::after{width: 11rem;}
}
@media (min-width:768px) and (max-width:991px){

}

@media (max-width:767px){
	hgroup {text-align: center;padding: 0 0% 2%;}
    h1 span:nth-of-type(1),h1 span:nth-of-type(2){width: unset;}
    h1 span:nth-of-type(1){}
    h1 span:nth-of-type(2){margin-top:0rem;}
	h1 {font-size: 2.6rem;padding: 0 0 0;letter-spacing: 0.15rem;flex-direction: column-reverse;gap:1.2rem;line-height: 1.4;}
	h1 strong {font-size: 4rem;font-weight: bold;}
	h1 img {position: initial;display: block;margin: 0 auto;}
    .author,.cover,.cover2{width: 100%;top:0;margin:.5rem auto;justify-content: center;align-items: center;}
    .cover{overflow: hidden;}
    .cover figure,.cover2 figure{display: flex;flex-wrap: wrap;flex-direction: column;margin: 0 0;}
    .cover figcaption{text-align: center;margin:1rem auto;}
    .cover2{flex-direction: column;margin: 2rem auto 0;gap:1rem;}
    .gohit{top: 0.3rem;right: 0.1rem;}
    .title h2{line-height: normal;height: auto;padding-left: initial;padding: .5rem 0; text-align: center;font-size: 1.4rem;}
    .author,.author2{width: 100%;padding-left: 0;}
    .author2 ul{margin:1rem 0% 3rem .5rem;}
    .author dl{margin: 1rem 1rem 0;width: fit-content;padding-top: 5%;font-size: 1rem;}
    .author div{flex-direction: column;}
    @media screen and (max-width:360px){
        .author ul{font-size: 1.3rem;}
        .author ul li{padding: 0 2rem;}
    }    
    .info{margin-top: 2rem;}
    .info figure,.info figure:nth-of-type(2), .info figure:nth-of-type(4){width: 100%;}
    .info dl{width: 100%;}
    [class*="box_"]{display: none;}
    .info_m{display: block;margin: auto;}
    .info img{box-shadow: none;}
	.revert{flex-direction: column-reverse;}
}

/*各大相容檢視*/
@media screen and (-webkit-min-device-pixel-ratio:0) { /*Webkit*/
}
@-moz-document url-prefix(){/*Firefox*/
}

@media \0screen\,screen\9 {/*IE 6 7 8*/
}

@media screen\0 {/*IE 8 9 10 11*/
}

@media print {
}