@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap);

html,body{
  font-family:'open sans',sans-serif;
  font-size:10px;
  color:#fff;
  background: #fff;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;height:100dvh;
  overflow: hidden;
  letter-spacing: 0em;
}

html[lang=zh-TW] ,html[lang=zh-TW] body{
  font-family:Inter,'Noto Sans TC','微軟正黑體',sans-serif;
  letter-spacing: .125em;
}

html[lang=ja] ,html[lang=ja] body{
  font-family:Inter,'Noto Sans JP','微軟正黑體',sans-serif;
  letter-spacing: .125em;
}

html[lang=ko] ,html[lang=ko] body{
  font-family:Inter,'Noto Sans KR','微軟正黑體',sans-serif;
  letter-spacing: .125em;
}
body.night{background: #000;}
html, body, * {
    touch-action: manipulation;
}
img,svg{width: 100%;height: auto;}

img{max-width: 100%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);}

#bgPlayer{pointer-events: none;opacity: 0;position: absolute;}
#bellPlayer{pointer-events: none;opacity: 0;position: absolute;}

@media screen and (min-width: 1150px){
    html,body{
        font-size: 6.29333px;
    }

}
@media screen and (max-width: 750px){
    html,body{
        font-size: calc( 10/750 *100vw );
    }
}
.loading-main{
  position: relative;
}
.loading-hide-bg{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -9999;
  left: 100%;
  pointer-events: none;
}
.loading-tip p{
  font-size: 3rem;
  letter-spacing: .5em;
  font-weight: 400;
  margin-top: 2em;
}
#audioPlayer{pointer-events: none;opacity: 0;}

.loadingbox{
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;align-items: center;
  z-index: 99;
  background: url(../images/loading.jpg);
}
.loading-con{
  display: flex;justify-content: center;align-items: center;
  flex-direction: column;
}

img{max-width: 100%;}


.loadingbox .loading-txt{color: #FFF;text-align: center;font-family: Inter;font-size: 3rem;
font-style: normal;font-weight: 500;line-height: 150%; letter-spacing: .4em;
padding-top: 2.5em;
}
.loadingbox .loading-txt span{letter-spacing: 0.125em;}

#Loading-lottie{width: 26rem;margin-bottom: 2rem;height: 40rem;}
/*p{font-size: 2.4rem;color: #7aaaf7;text-align: center;}*/

.wrap{max-width: 75rem;margin:0 auto;width: 100%;height: 100%;position: relative;}

p{
  color: #FFF;
  text-align: center;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 170%;
  letter-spacing:0.05em;
}
a p{
  font-size: 3rem;
}
html[lang=ko] p,html[lang=ja] p{
  font-size: 3.6rem;
  letter-spacing: .05em;
}
html[lang=zh-TW] p{
  font-size: 3.6rem;
  letter-spacing: .1em;
}
#audioPlayer{position: absolute;}
.sound-btn{
  position: absolute;
  right: 2rem;
  top: 2rem;
  cursor: pointer;
  z-index: 8;
}
.sound-btn.on{
  width: 5.2rem;
  height: 5rem;
  background: url(../images/on.png) center center no-repeat;
  background-size: cover;
}
.sound-btn.off{
  width: 5.2rem;
  height: 5rem;
  background: url(../images/off.png) 0% center no-repeat;
  background-size: contain;
}

section{overflow: hidden;position: relative;width: 100%;height: 100%;opacity: 0;}

.flex-section{
  display: flex;
  justify-content: center;align-items: center;
  flex-direction: column;
}
section.expand{display: block;}

.lottie-visible svg{overflow: initial;}
.lottie-visible svg g{  clip-path:none;}

/*kv*/
.kv{
  background: url(../images/bg_kv.jpg) center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 1;
}
#kv-lottie{
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100dvh;
  width: calc(100dvh * 750/1334 );
  transform: translate(-50%,-50%);
}
.kv .logo {
  position: absolute;
  width: 13rem;
  height: 13rem;
  background-image: url('../images/sky_lang.png');
  background-size: cover;
  left: 50%;
  top: 10rem;
  transform: translateX(-50%);
}
html[lang=zh-TW] .logo {
  

  width: 15.2rem;
  height: 13rem;
  background: url('../images/logo.png');
  background-size: cover;
}
.sound-pop{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background:rgb(0 0 0 / .7);
  z-index: 9;
  display: flex;
  justify-content: center;align-items: center;
}
.sound-con{
  width: 56.6rem;
  height: 47rem;
  background: #fff;
  border-radius: 2.4rem;
  display: flex;
  justify-content: center;align-items: center;
  flex-direction: column;
}
.sound-con > img{width: 13.1rem;}
.sound-con p{
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 4.6rem;
  letter-spacing: 0em;
  text-align: center;
  padding: 0 4rem;
  color: #205FA8;
  margin: 1em 0;
}
html[lang=zh-TW] .sound-con p{
  letter-spacing: 0.4em;
}
html[lang=ko] .sound-con p,html[lang=ja] .sound-con p{
  letter-spacing: 0.05em;
}
.popsound-btn{
  width: 27.1rem;
  height: 8.5rem;
  cursor: pointer;
  background: url('../images/alert_btn.png');
  background-size: cover;
}
.popsound-btn p{
  color: #fff;
  line-height: 8.5rem;
  margin: 0;
  font-size: 4rem;
}


.kv-con{

}
.kv-con h1{
  font-size: 0;
  text-indent: -9999px;
  position: absolute;
}
.kv-title{width: 61.4rem;margin:0 auto}

.kv-txt{
  font-size: 3.2rem;
  font-weight: 500;
  text-align: center;line-height: 4.6rem;
  letter-spacing: 0em;
  margin-top: .25em;
}

html[lang=zh-TW] .kv-txt{
  font-size: 3.8rem;
  font-weight: 700;
  letter-spacing: 0.6em;
}
html[lang=ja] .kv-txt,html[lang=ko] .kv-txt{
  letter-spacing: 0.05em;

}

.kv-btn{
  width: 40.5rem;
  height: 8.4rem;
  background: url('../images/btn_start.png');
  background-size: cover;
  position: absolute;
  bottom: 10dvh;
}
.kv-btn p{line-height: 8.4rem;font-weight: 700;}
.kv-bird{
  position: absolute;
  width: 10rem;
  height: 10.4rem;
  
  
}
.kv-bird1{
  top:50%;left: -10rem;
}
.kv-bird2{
  transform: scaleX(-1);
  right: -10rem;
  top: 80%;
}
.kv-bird span{
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  background: url(../images/bird/bird.png);
  background-size: 100% auto;
}

/*test*/
.test{
  position: absolute;
  left: 0;
  top: 0;
}
.test-head{
  position: relative;
  z-index: 2;
}
#test-lottie1,#test-lottie2,#test-lottie3,#q8-lottie{
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100dvh;
  width: calc(100dvh * 750/1334 );
  transform: translate(-50%,-50%);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
     filter: brightness(100%);
}
.pcbg{
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
     filter: brightness(100%); 
}
.pcbg.q2,.q2 #test-lottie1{  filter: brightness(90%);}
.pcbg.q3,.q3 #test-lottie1{  filter: brightness(70%);}
.pcbg.q4,.q4 #test-lottie1{  filter: brightness(50%) contrast(140%) hue-rotate(22deg) saturate(90%);}
.pcbg.q5,.q5 #test-lottie1{  filter: brightness(40%) contrast(180%) hue-rotate(22deg) saturate(100%);}
.pcbg.q6,.q6 #test-lottie1{  filter: brightness(40%) contrast(220%) hue-rotate(22deg) saturate(90%);}
.pcbg.q7{  filter: brightness(40%) contrast(220%) hue-rotate(22deg) saturate(90%);}
.pcbg.q8{  filter: brightness(40%) contrast(220%) hue-rotate(22deg) saturate(90%);}




#q2-lottie{
  width: 37.2rem;
  height: 37.7rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
#q4-lottie{
  width: 60rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
#q6-lottie{
  width: 75rem;
  height: 60rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
#q9-lottie{
  width: calc(60rem *.8);
  height: calc(50rem *.8);
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%,-50%);
  cursor: pointer;
}
#q11-lottie{
  width: 75rem;
  height: 133.4rem;
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%,-50%);
}
#q12-lottie{
  width: 32rem;
  height: 50rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}


.test.q1,.test.q2,.test.q3,.test.q4,.test.q5,.test.q6{
  /*background: url(../images/bg_type1.jpg) center center;*/
  background-size: cover;
}

.test-body{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.test-box{
  position: absolute;
  width: 100%;
  height: calc(100% - 0rem);
  left: 0;top: 0rem;
  padding-top: 22rem;
}
.test-qNum{
  position: relative;
  width: 14.4rem;
  height: 11.5rem;
  background-size: cover;
  left: 50%;
  transform: translateX(-50%);
  top: 8rem;
 
}



.test .test-qNum span{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  opacity: 0;
   -webkit-transition: all .5s ease;
  transition: all .5s ease;
  transition-delay: .5s;
  -webkit-transition-delay: .5s;
}
.test .test-qNum span:nth-child(1){  background-image: url(../images/dotq1.svg);}
.test .test-qNum span:nth-child(2){  background-image: url(../images/dotq2.svg);}
.test .test-qNum span:nth-child(3){  background-image: url(../images/dotq3.svg);}
.test .test-qNum span:nth-child(4){  background-image: url(../images/dotq4.svg);}
.test .test-qNum span:nth-child(5){  background-image: url(../images/dotq5.svg);}
.test .test-qNum span:nth-child(6){  background-image: url(../images/dotq6.svg);}
.test .test-qNum span:nth-child(7){  background-image: url(../images/dotq7.svg);}
.test .test-qNum span:nth-child(8){  background-image: url(../images/dotq8.svg);}
.test .test-qNum span:nth-child(9){  background-image: url(../images/dotq9.svg);}
.test .test-qNum span:nth-child(10){  background-image: url(../images/dotq10.svg);}
.test .test-qNum span:nth-child(11){  background-image: url(../images/dotq11.svg);}
.test .test-qNum span:nth-child(12){  background-image: url(../images/dotq12.svg);}

.test.q1 .test-qNum span:nth-child(1){opacity: 1;}
.test.q2 .test-qNum span:nth-child(2){opacity: 1;}
.test.q3 .test-qNum span:nth-child(3){opacity: 1;}
.test.q4 .test-qNum span:nth-child(4){opacity: 1;}
.test.q5 .test-qNum span:nth-child(5){opacity: 1;}
.test.q6 .test-qNum span:nth-child(6){opacity: 1;}
.test.q7 .test-qNum span:nth-child(7){opacity: 1;}
.test.q8 .test-qNum span:nth-child(8){opacity: 1;}
.test.q9 .test-qNum span:nth-child(9){opacity: 1;}
.test.q10 .test-qNum span:nth-child(10){opacity: 1;}
.test.q11 .test-qNum span:nth-child(11){opacity: 1;}
.test.q12 .test-qNum span:nth-child(12){opacity: 1;}


.question{
  position: relative;
  font-weight: 500;
  font-size: 3.4rem;
  line-height: 5.4rem;
  text-align: center;
  letter-spacing: 0.0625em;
  z-index: 2;
  padding: 0 .5em;
}
html[lang=vi] .question,html[lang=id] .question,html[lang=en] .question{
  line-height: 1.25em;
}
.ans-list{
  width: 57rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6dvh;
}
.ans-list li{
  width: 57rem;
  height: 13.2rem;
  border-radius: 7rem;
  background: url('../images/qbtn.png') center center no-repeat;
  background-size: cover;
  /* background: #fff;
  box-shadow: 0px 0px 1rem 0px #0000002E; */
  margin:3rem 0;
  color: #0050A2;
  font-size: 2.9rem;
  line-height: 4.3rem;
  font-weight: 500;
  display: flex;justify-content: flex-start;align-items: center;
  padding: 1em;
  cursor: pointer;
}
html[lang=vi] .ans-list li,html[lang=id] .ans-list li,html[lang=en] .ans-list li{
  font-size: 2.8rem;
  line-height: 1.2em;
}
html[lang=id] .ans-list li{
  line-height: 1em;
}

.ans-list li:nth-child(1):before{
  content: "A";
  position: relative;
  display: inline-block;
  padding-right: .5em;
  border-right: 1px solid #0050A2;
  line-height: 8.8rem;
  margin-right: 1em;
}
.ans-list li:nth-child(2):before{
  content: "B";
  position: relative;
  display: inline-block;
  padding-right: .5em;
  border-right: 1px solid #0050A2;
  line-height: 8.8rem;
  margin-right: 1em;
}
.ans-list li:active,.ans-list li.active{
  color: #fff;
/*   background: #0050A2; */
  background: url('../images/qbtnh.png') center center no-repeat;
  background-size: cover;
}
.ans-list li:active:before,.ans-list li.active:before{
  border-right: 1px solid #fff;
}
.test9-tip{
  font-size: 2.8rem;
  position: absolute;
  text-align: center;
  width: 17.4rem;
  height: 17.4rem;
  left: 50%;
  top: 62.5%;
/*   text-decoration: underline; */
  cursor: pointer;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
}
.test9-tip::before{
  content: '';
  background: url('../images/btn_music_light.png');
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.test9-tip::after{
  content: '';
  background: url('../images/btn_music_icon.png?v=2');
  background-size: cover;
  position: absolute;
  left: calc(50% - 4.5rem);
  top: calc(50% - 4.5rem);
  width: 9rem;
  height: 9rem;
  border-radius: 4.5rem;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;

}
.test9-tip:hover::after{
  background-color: #fff;
  background-image: url('../images/btn_music_icon2.png');
  background-size: cover;
}

/**/




/*finish*/
.finish{
  background: #000;
  background-size: cover;
  display: flex;
  justify-content: center;align-items: center;
  flex-direction: column;
}

.finish-pic{
  width: 57.9rem;
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%,0rem);
}
.act2 .finish-pic{
  opacity: 0;
  -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
#Finish-lottie{opacity: 0;}
.act2 #Finish-lottie{
  opacity: 1;
  -webkit-transition: all .3s ease;
    transition: all .3s ease;
    transition-delay: 1s;
    -webkit-transition-delay: 1s;
}
.finish > p{
  position: absolute;
  color: #fff;
  width: 100%;
  font-size: 3.4rem;
  line-height: 5.3rem;
  font-weight: 500;
  letter-spacing: .125em;
  padding: 0 4rem;
  z-index: 2;
  top: 50%;
  transform: translateY(-20dvh);
}
html[lang=ja] .finish > p{
  letter-spacing: .05em;
}
html[lang=ko] .finish > p{
  letter-spacing: .05em;
}
#Finish-lottie{
  width: 75rem;
  height: 133.4rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.result-btn{
  width: 23.3rem;
  height: 23.3rem;
  /* background: url('../images/result_btn.png');
  background-size: cover; */
  position: absolute;
  bottom: 5dvh;
  left: 50%;
  transform: translateX(-50%);
}
.result-btn p{
  line-height: 23.3rem;

}
html[lang=ja] .result-btn p,
html[lang=ko] .result-btn p,
html[lang=en] .result-btn p,
html[lang=vi] .result-btn p,
html[lang=id] .result-btn p{
  font-size: 2.75rem;
  letter-spacing: 0;
}



.result-btn::before{
  content: '';
  background: url('../images/btn_music_light.png');
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
/*result*/
#result{
  overflow-y: scroll;
}

.result-footer{
  position: relative;
  width: 75rem;
  height: 133.4rem;
  background-size: 100% auto;
  padding-top: 8rem;
}

.style1 .result-footer{background-image :url(../images/rbg1.png?v=1);}
.style2 .result-footer{background-image :url(../images/rbg2.png?v=1);}
.style3 .result-footer{background-image :url(../images/rbg3.png?v=1);}
.style4 .result-footer{background-image :url(../images/rbg4.png?v=1);}
.style5 .result-footer{background-image :url(../images/rbg5.png?v=1);}
.style6 .result-footer{background-image :url(../images/rbg6.png?v=1);}
.style7 .result-footer{background-image :url(../images/rbg7.png?v=1);}

.result-footer::after{
  position: absolute;
  left: 0;
  top: 56.5rem;
  content: "";
  width: 100%;
  height: 18.6rem;
  background-size: 100% auto;
}

.style1 .result-footer::after{  background-image: url('../images/zh-TW/rb1.png');}
.style2 .result-footer::after{  background-image: url('../images/zh-TW/rb2.png');}
.style3 .result-footer::after{  background-image: url('../images/zh-TW/rb3.png');}
.style4 .result-footer::after{  background-image: url('../images/zh-TW/rb4.png');}
.style5 .result-footer::after{  background-image: url('../images/zh-TW/rb5.png');}
.style6 .result-footer::after{  background-image: url('../images/zh-TW/rb6.png');}
.style7 .result-footer::after{  background-image: url('../images/zh-TW/rb7.png');}
html[lang=zh-TW] .result-footer::after{height: 11.4rem;}


html[lang=en] .style1 .result-footer::after{ background-image: url('../images/en/rb1.png');}
html[lang=en] .style2 .result-footer::after{ background-image: url('../images/en/rb2.png');}
html[lang=en] .style3 .result-footer::after{ background-image: url('../images/en/rb3.png');}
html[lang=en] .style4 .result-footer::after{ background-image: url('../images/en/rb4.png');}
html[lang=en] .style5 .result-footer::after{ background-image: url('../images/en/rb5.png');}
html[lang=en] .style6 .result-footer::after{ background-image: url('../images/en/rb6.png');}
html[lang=en] .style7 .result-footer::after{ background-image: url('../images/en/rb7.png');}

html[lang=id] .style1 .result-footer::after{  background-image: url('../images/id/rb1.png');}
html[lang=id] .style2 .result-footer::after{  background-image: url('../images/id/rb2.png');}
html[lang=id] .style3 .result-footer::after{  background-image: url('../images/id/rb3.png');}
html[lang=id] .style4 .result-footer::after{  background-image: url('../images/id/rb4.png');}
html[lang=id] .style5 .result-footer::after{  background-image: url('../images/id/rb5.png');}
html[lang=id] .style6 .result-footer::after{  background-image: url('../images/id/rb6.png');}
html[lang=id] .style7 .result-footer::after{  background-image: url('../images/id/rb7.png');}

html[lang=ja] .style1 .result-footer::after{  background-image: url('../images/ja/rb1.png');}
html[lang=ja] .style2 .result-footer::after{  background-image: url('../images/ja/rb2.png');}
html[lang=ja] .style3 .result-footer::after{  background-image: url('../images/ja/rb3.png');}
html[lang=ja] .style4 .result-footer::after{  background-image: url('../images/ja/rb4.png');}
html[lang=ja] .style5 .result-footer::after{  background-image: url('../images/ja/rb5.png');}
html[lang=ja] .style6 .result-footer::after{  background-image: url('../images/ja/rb6.png');}
html[lang=ja] .style7 .result-footer::after{  background-image: url('../images/ja/rb7.png');}

html[lang=ko] .style1 .result-footer::after{  background-image: url('../images/ko/rb1.png');}
html[lang=ko] .style2 .result-footer::after{  background-image: url('../images/ko/rb2.png');}
html[lang=ko] .style3 .result-footer::after{  background-image: url('../images/ko/rb3.png');}
html[lang=ko] .style4 .result-footer::after{  background-image: url('../images/ko/rb4.png');}
html[lang=ko] .style5 .result-footer::after{  background-image: url('../images/ko/rb5.png');}
html[lang=ko] .style6 .result-footer::after{  background-image: url('../images/ko/rb6.png');}
html[lang=ko] .style7 .result-footer::after{  background-image: url('../images/ko/rb7.png');}

html[lang=vi] .style1 .result-footer::after{  background-image: url('../images/vi/rb1.png');}
html[lang=vi] .style2 .result-footer::after{  background-image: url('../images/vi/rb2.png');}
html[lang=vi] .style3 .result-footer::after{  background-image: url('../images/vi/rb3.png');}
html[lang=vi] .style4 .result-footer::after{  background-image: url('../images/vi/rb4.png');}
html[lang=vi] .style5 .result-footer::after{  background-image: url('../images/vi/rb5.png');}
html[lang=vi] .style6 .result-footer::after{  background-image: url('../images/vi/rb6.png');}
html[lang=vi] .style7 .result-footer::after{  background-image: url('../images/vi/rb7.png');}



.result-downarrow{
    position: fixed;
    bottom: 2rem;
    right: calc(50% - 35.5rem);
    width: 5.4rem;
/*     background: url(../images/scrolldown_bg.png); */
    background-size: cover;
    z-index: 66;
    cursor: pointer;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
/* .result-downarrow::after{
  content: "";
  position: absolute;
  width: 1.37rem;
  height: 1rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  background: url('../images/scrolldown_arrow.svg') center center no-repeat;
  background-size: cover;

} */
.result-downarrow.hide{
  opacity: 0;
}


.result-tip{
  width: 100%;
  position: relative;
  margin:0 auto;
}
/* html[lang=en] .result-tip{width: 65.8rem;}
html[lang=id] .result-tip{width: 65.8rem;}
html[lang=vi] .result-tip{width: 60.4rem;}
html[lang=ja] .result-tip{width: 54rem;} */


.result-footer > p{
      margin-top: 10rem;
    font-size: 3.4rem;
        letter-spacing: 0.25em;
}
html[lang=en] .result-footer > p,html[lang=id] .result-footer > p,html[lang=vi] .result-footer > p{
  letter-spacing: 0.05em;
}

.result-logo{
  position: absolute;
  width: calc(18.4rem * .85);
  height: calc(15.9rem * .85);
  background: url('../images/sky_lang.png');
  background-size: cover;
  left: 50%;
  bottom: 4rem;
  transform: translateX(-50%);
}
html[lang=zh-TW] .result-logo {
  width: 18.4rem;
  height: 15.9rem;
  background: url('../images/rlogo.png');
  background-size: cover;
}
.result-footer .btns{
  position: relative;
  margin-top: 24rem;
}
.search-btn{
  margin:0 auto;
  width: 54.4rem;
  height: 10.7rem;
  background: url(../images/result-btnbg.png);
  background-size: 100% auto;
  display: flex;
  justify-content: center;align-items: center;
  padding: 0 2rem;
  margin-bottom: 2rem;

}

.share-btn{
  margin:0 auto;
  width: 54.4rem;
  height: 10.7rem;
  background: url(../images/result-btnbg.png);
  background-size: 100% auto;
  display: flex;
  justify-content: center;align-items: center;
  padding: 0 2rem;
  margin-bottom: 2.5rem;
}
.search-btn p,.share-btn p{
  color: #575757;
  letter-spacing: 0em;
  text-align: left;
/*   width: calc(100% - 5.5rem); */
  line-height: 1.25em;
}
html[lang=zh-TW] .search-btn p,html[lang=zh-TW] .share-btn p{
  letter-spacing: 0.2em;
}
html[lang=ko] .search-btn p,html[lang=ko] .share-btn p{
  letter-spacing: 0.05em;
}
html[lang=ja] .search-btn p,html[lang=ja] .share-btn p,html[lang=ja] .again-btn p{
  font-size: 3.2rem;
}
html[lang=vi] .search-btn p,html[lang=vi] .share-btn p,html[lang=vi] .again-btn p{
  font-size: 2.6rem;
}

.again-btn{
  display: flex;
  justify-content: center;align-items: center;
}
.again-btn p{

}

.search-btn i,.share-btn i,.again-btn i{
  width: 4.5rem;
  height: 4.5rem;
  position: relative;
  display: inline-block;
  margin-right: 1rem;
}
.pcbg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/pcbg1.jpg);
    background-size: cover;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
  }
.pcitem{
  pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  body.dusk .pcbg{
    background-image: url(../images/pcbg2.jpg);
  }
  body.night .pcbg{
    background:#000;
  }

.copyright{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1em;
  font-size: 1.4rem;
  line-height: 2.5rem;
  width: 100%;
  color: #0050A2;
  text-align: center;
}
.night .copyright{
  color: #fff;
}
.rcopyright{
  position: absolute;
  color: #fff;
}
.fin .allcopyright{
  display: none;
}
.showjk{display: none;}
.noshowjk{margin-right: .25em;}
html[lang=ja] .showjk{
  display: inline-block;
}
html[lang=ko] .showjk{
  display: inline-block;
  margin-left: .5em;
}
html[lang=ja] .noshowjk,html[lang=ko] .noshowjk{
  display: none;
}
@media screen and (min-width: 1100px){
      html,body{
        font-size: .58271605dvh;
    }

    .pc-logo{
      width: 85px;
      height: 85px;
      background: url('../images/sky_lang.png');
      background-size: cover;
      position: absolute;
      left: 25px;
      top: 25px;
    }
    html[lang=zh-TW] .pc-logo {
      width: 100px;
      height: 80px;
      background: url('../images/logo2.png');
      background-size: cover;
    }
    .qrcode{
      position: absolute;
      width: 14vh;
      bottom: 5vh;
      right: 4vh;
      border-radius: 1.5vh;
      overflow: hidden;
    }
    .qrcode p{
      font-size: 1.25vh;
      line-height: 1.2em;
      background: #53C9F9;
      padding: .5em 0;
      letter-spacing:0;
    }
    html[lang=ja] .qrcode p,html[lang=ko] .qrcode p{
      font-size: 1.25vh;
      padding: 1em 0;
    }
    html[lang=zh-TW] .qrcode p{
      font-size: 1.5vh;
      line-height: 3em;
    }
    .wrap{
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      height: 78.426dvh;
    }

    .wrap::after{
      content: "";
      width: calc(105%);
      height: calc(102%);

      background: url(../images/pcline.png);
      background-size: 100% 100%;
      position: absolute;
      left: -2.5%;
      top: -1%;
      pointer-events: none;
    }

}
@media screen and (min-width: 751px) and (max-width: 1099px){
      html,body{
        font-size: .7496251867dvh;
    }
    .wrap::after{
      content: "";
      width: calc(105%);
      height: calc(102%);

      background: url(../images/pcline.png);
      background-size: 100% 100%;
      position: absolute;
      left: -2.5%;
      top: -1%;
      pointer-events: none;
    }
}
@media screen and (max-width: 750px){
  .pcbg{display: none;}
}

@media screen and (max-width: 1099px){
  .pc-logo{
    display: none;
    }
    .qrcode{
display: none;
    }
}
@media screen and (max-width: 750px) and (min-aspect-ratio: 375/670) {
  html, body{
    min-height: 178vw;
    overflow: scroll;
  }
}

@media screen and (max-width: 750px) and (min-aspect-ratio: 750/1334) {
  #kv-lottie{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100vw;
    height: calc(100vw / 750 *1334 );
    transform: translate(-50%,-50%);
  }
  #test-lottie1,#test-lottie2,#test-lottie3,#q8-lottie{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100vw;
    height: calc(100vw / 750 *1334 );
    transform: translate(-50%,-50%);
  }
  .q10 .test-lottie{
    /*width: calc(131.4rem * .7) !important;*/
    /*height: calc(172.9rem * .7) !important;*/
  }
}

@media screen and (max-width: 750px) and (max-height: 750px){
  .q10 .test-lottie{
/*    width: calc(131.4rem * .7) !important;
    height: calc(172.9rem * .7) !important;*/
  }
  .finish > p{
    top: 50%;
  }
  #Finish-lottie{
    width: 75rem;
    height: 133.4rem;
    position: absolute;
    left: 50%;
    top: 45%;

/*    bottom: 0%;
    top: initial;
    transform: translate(-50%,0%);*/
  }
}

.language-selector {
  position: absolute;
  top: 1.5rem;
  right: 8rem;
  z-index: 100;
  background: url('../images/lang_bg.png?v=2');
  background-size: cover;
  width: 24.8rem;
  height: 6rem;
  z-index: 8;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-right: 1rem;
}

.language-icon{
  position: absolute;
  width: 3.9rem;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.language-selector select {
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
  outline: none;
  color: #0050A2;
  height: 100%;
  width: calc(100% - 3.9rem);
/*   padding-left: .25em; */
      font-size: 3.2rem;
    font-weight: 700;
/*     letter-spacing: 0.25em; */
    text-align: center;
    color: #205FA8;
    appearance: none;
    -webkit-appearance: none;
    z-index: 2;
    display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  opacity: 0 ;
}
.language-selector input{
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
  outline: none;
  position: absolute;
  left: 0;
  top: 0;
  
  color: #205FA8;
  height: 100%;
  font-size: 3.2rem;
  appearance: none;
    -webkit-appearance: none;
    font-weight: 700;
  text-align: center;
  width: calc(100% - 3.9rem);
  text-align: center;
  pointer-events:none;
  z-index: 3;
}
.language-selector select option {
  background-color: #333;
  color: white;
  text-align: center;
}