/* CSS Reset */
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, 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,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a, button, input, textarea, select {
  -webkit-tap-highlight-color: transparent;
}


/* Custom Styles */
@font-face {
  font-family: 'LINESeedTW_TTF_Bd';
  src: url('LINESeedTW_TTF_Bd.ttf');
}

@font-face {
  font-family: 'LINESeedTW_TTF_Eb';
  src: url('LINESeedTW_TTF_Eb.ttf'); 
}

@font-face {
  font-family: 'LINESeedTW_TTF_Rg';
  src: url('LINESeedTW_TTF_Rg.ttf'); 
}
/* h1 {
  font-family: 'MyCustomFont', Arial, sans-serif;
} */

img{max-width: 100%; width: 100%;}
body{ background-color:black;}
.wrapper{
    margin: 0 auto;
    max-width: 640px;
    width: 100%;
    overflow-x: hidden;

    background-image: url(../img/bg.png);
    background-size: 100%;
    background-position: 50% 0;
}

.container{
  position: relative;
  width: 100%;
  background-image: url(../img/bg.png);
  background-size: 100%;
  background-position: 50% 0;
  /* aspect-ratio: 640 / 1386; */
  /* aspect-ratio: 640 / 1266; */
  width: 100%;
  height: auto;
  /* min-height: calc(100vh - (100vw*110/640)); */
  margin-top: calc(100vw*120/640);
}
.header{
  position: fixed;
  top: 0;
  z-index: 20;
  width: 100%;
}
.container, .pc {
    display: none;
}
.pc{
  /* position: fixed; */
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
}

.pc>img{
  /* position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100vh;
  width: auto;
  max-width: initial; */
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.pc-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  padding-left: 40px;
  background-color: #FFF;
  display: flex;
  align-items: center;
  z-index: 10;
}
.pc-header img{width: 303px;}

.item {
  opacity: 1;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hide {opacity: 0;}
.in{display: block;}
.out{display: none;}

.pages{
    /* top: calc(100vh * 30/1386); */
    position: relative;
}

#js-p1,#js-p2,#js-p1,#js-p3{
    position: relative;
    width: 100%;
    /* height: 100%; */
    /* height: calc(100vh * 1236/1386); */
    height: calc(100vw* 1236/640);
}
#js-p3{
    top: calc(100vh * -180 / 1386);
}

.bottom-text{
  position: absolute;
  aspect-ratio: 424 / 50;
  width: calc(100% * 424 / 640);
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100vh * 31 / 1386);
}
/* 
#js-p2 .bottom-text{
  bottom: calc(100vh * -240 / 1386);
} */

/* 首頁 */
.deco-1{
    position: relative;
    width: calc(100% * 431/640);
    margin-top: -39%;
    left: calc(100% * -92/640);
    z-index: 1;
}
.deco-1.item.hide{
    transform: translateX(-100%);
}

.deco-2{
    position: relative;
    width: calc(100% * 377/640);
    margin-top: -34%;
    left: calc(100% * 368/640);
    z-index: 2;
}
.deco-2.item.hide{
    transform: translateX(100%);
}

.p1-content{
    position: relative;
    width: calc(100% * 572 / 640);
    /* margin:auto; */
    /* top: calc(100vh * 30 / 1386); */
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 3;
}
.p1-content.item.hide{
    transform: translate(-50%,50%);
}

.p1-content>a{
    display: block;
    width: calc(100% * 392/640);
    transform: translate(-50%,-50%);
    position: relative;
    left: 50%;
    animation: clickEffect 1.2s linear infinite;
    transform-origin: 50% 100%;
}
@keyframes clickEffect {
  0% {
    transform: translate(-50%,-50%) scale(1);
  }
  30% {
    transform: translate(-50%,-50%) scale(1);
  }
  40% {
    transform: translate(-50%,-50%) scale(.97);
  }
  60% {
    transform: translate(-50%,-50%) scale(1);
  }
  100% {
    transform: translate(-50%,-50%) scale(1);
  }
}

.p1-hand{
  pointer-events: none;
  position: absolute;
  width: calc(100% * 91/640);
  bottom: 6%;
  right: 22%;
  animation: hand-slide-in 1.2s linear infinite;
}

@keyframes hand-slide-in {
  0% {
    transform: translate(80%,50%);
    opacity: 0;
  }
  30% {
    transform: translate(0,0);
    opacity: 1;
  }
  40% {
    transform: translate(0,0) scale(.9);
    opacity: 1;
  }
  50% {
    transform: translate(0,0);
    opacity: 1;
  }
  100% {
    transform: translate(0,0);
    opacity: 1;
  }
}


/* 測驗頁 */
.p2-bg{
  position: absolute;
  /* margin: calc(100vh * -140 / 1386) auto; */
  height: calc(100vw * 1386 / 640);
  /* position: fixed; */
  /* top: 0; */
  bottom: 0;
  width: 100%;
  min-height: 100dvh;
  opacity: 0;
  transition: all 0.3s linear;
  background-size: cover;
  pointer-events: none;
}
.p2-bg.show1,.p2-bg.show2,.p2-bg.show3,.p2-bg.show0{opacity: 1;}
.p2-bg.show1{background-image: url(../img/bg-q1-5.png); 
  height: calc(100vw * 1362 / 640);
}
.p2-bg.show2{background-image: url(../img/bg-q2-6.png); 
  /* margin-top: calc(100vh * -103 / 1386);  */
  height: calc(100vw * 1326 / 640);
}
.p2-bg.show3{background-image: url(../img/bg-q3-7.png); 
  /* margin-top: calc(100vh * -176 / 1386); */
}
.p2-bg.show0{background-image: url(../img/bg-q4-8.png); 
  /* margin-top: calc(100vh * -176 / 1386); */
}


.p2-q-main{
  font-family: LINESeedTW_TTF_Bd;
  position: relative;
  width: calc(100% * 563 / 640);
  margin:auto;
  top: calc(100vh * 30 / 1386);
  transform: translate(0) scale(1);
}

.p2-q-main.item.hide{
  transform: translate(0,50%) scale(.001);
}
.p2-q-main.item.next{
  opacity: 0; 
}

.p2-q-topic{
  position: absolute;
  width: 90%;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}

.p2-q-main-content{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.p2-q-serial{
  position: absolute;
  width: calc(100vw * 76 / 640);
  left: 50%;
  transform: translate(-50%, -50%);
}

.p2-q-serial-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #FFF;
  font-family: LINESeedTW_TTF_Eb;
  font-size: calc(100vw * 30 / 640);
}

.p2-q-topic-text{
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2%;
  box-sizing: border-box;
  font-size: calc(100vw * 34 / 640);
  line-height: calc(100vw * 48 / 640);
  text-align: center;
  color: #163b8d;
}

.p2-a-list{
  width: 90%;
  margin: 5% auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.p2-a-list>a{
  position: relative;
  color:#163b8d;
  transform: translateX(0);
  display: block;
}

.p2-a-list>a.hide{
  transform: translateX(100%);
}
.p2-q-main.hide.next{
  opacity: 0; 
}

.p2-a-text{
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  padding-left: 10%;
  box-sizing: border-box;
  text-align: center;
  top: 50%;
  transform: translate(0, -50%);
  font-size: calc(100vw * 26 / 640);
  line-height: calc(100vw * 40 / 640);
}

/* 結果頁 */
.p3-content{
  /* aspect-ratio: 640/2160; */
  width: 100%;
  height: calc(100vw*2160/640);
  position: absolute;
  top: 0;
  background-size: cover;
  background-repeat: no-repeat;
  /* margin-top: calc(100% * -120 / 640); */
}

.p3-content.r1{background-image: url(../img/result-1.png);}
.p3-content.r2{background-image: url(../img/result-2.png);}
.p3-content.r3{background-image: url(../img/result-3.png);}
.p3-content.r4{background-image: url(../img/result-4.png);}
.p3-content.r5{background-image: url(../img/result-5.png);}
.p3-content.r6{background-image: url(../img/result-6.png);}
.p3-content.r7{background-image: url(../img/result-7.png);}
.p3-content.r8{background-image: url(../img/result-8.png);}

.p3-result-title{
    position: relative;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* width: calc(100% * 610 / 640); */
    width: 100%;
    /* top: calc(100% * 1055 / 2150); */
    top: calc(100vw * 1055 / 640);
}

.p3-result-title-text{
  width: calc(100% *540/640);
  aspect-ratio: 569/181;
  margin-left: calc(100% * -10 / 640);
  margin-right: calc(100% * -10 / 640);
}

.p3-deco-arrow{
  width: calc(100% *50/640);
  aspect-ratio: 65/100;
  animation: arrow-move 1s infinite;
}

.p3-deco-arrow:first-child{
  margin-left: calc(100% * 10 / 640);
}

@keyframes arrow-move {
  0% { transform: translateY(0)}
  50% { transform: translateY(50%)}
  100% { transform: translateY(0)}
}

.p3-result-btns{
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: calc(100%*15/640);
  align-items: center;
  justify-content: center;
  /* top: calc(100% * 1080 / 2150); */
  top: calc(100vw * 1055 / 640);
}

.p3-result-btns>a{
  display: block;
  width: calc(100%*279/640);
}

.p3-rules{
  position: relative;
  aspect-ratio: 582/723;
  width: calc(100%*582/640);
  left: calc(100%*40/640);
  /* top: calc(100% * 1110 / 2160); */
  top: calc(100vw * 1080 / 640);
  background-image: url(../img/bg-rules.png);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.p3-rules-container{
  overflow-x: hidden;
  overflow-y: auto;
  width: calc(100% * 480/562);
  height: calc(100% * 590 / 723);
  margin: calc(100% * 100 / 723) auto 0 calc(100% * 30 / 562);
  display: flex;
  flex-direction: column;
  gap: calc(100% * 30 / 723);
  padding-right: calc(100% * 10/562);
}

.p3-rules-container a{
  text-decoration: none;
  color: #273653;
}

ul,ol{
  padding: 1rem 0 1rem 1.5rem;
  margin-left: .5em;
}

ul {
  list-style-type: disc;
}
ol {
  list-style-type: decimal;
}

.p3-rules-block{
  color: #273653;
  font-family: LINESeedTW_TTF_Rg;
  font-size: calc(100vw * 28 / 640);
  line-height: calc(100vw * 36 / 640);
}
.p3-rules-block *{
  word-wrap: break-word;
}

.p3-rules-block h3{
  font-family: LINESeedTW_TTF_Bd;
  font-size: calc(100vw * 30 / 640);
  line-height: calc(100vw * 40 / 640);
}

.p3-rules-block h4{
  font-family: LINESeedTW_TTF_Bd;
}

.p3-bottom-text{
  position: relative;
  display: block;
  aspect-ratio: 428 / 54;
  width: calc(100% * 428 / 640);
  left: 50%;
  transform: translateX(-50%);
  top: calc(100vw * 1080 / 640);
}



/* 自訂滾動條的寬度與背景 */
.p3-rules-container::-webkit-scrollbar {
  width: 10px;            /* 垂直滾動條寬度 */
  height: 10px;           /* 水平滾動條高度（如有需要） */
  background: #d0d8e8;    /* 可選，滾動條軌道背景 */
  border-radius: 5px;
}

.p3-rules-container::-webkit-scrollbar-thumb {
  /* background: linear-gradient(120deg, #4f8cff, #17d1fd); */
  background: #163b8d;
  border-radius: 5px;
  box-shadow: 0 2px 7px rgba(0,0,0,0.08);
}

/* 滑鼠懸停在滾動條上時 */
.p3-rules-container::-webkit-scrollbar-thumb:hover {
  /* background: linear-gradient(120deg, #3472d5, #0eb2e3); */
  background: #163b8d;
}

/* 滾動條軌道 */
.p3-rules-container::-webkit-scrollbar-track {
  background: #d0d8e8;
  border-radius: 5px;
}