@import"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap";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:middle}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{position:relative;overflow-x:hidden}ol,ul,button{margin:0;padding:0}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*:focus,a:hover,a:active,a:focus,button:focus{text-decoration:none;outline:none}button,a{border:none;font-size:unset;padding:0;margin:0;background:rgba(0,0,0,0);background-color:none;outline:none;border:none}img{max-width:100%;height:auto}.tab-content>.tab-pane{height:0;display:block;opacity:0;pointer-events:none}.tab-content>.active{height:auto;opacity:1;pointer-events:auto}.nav-tabs .nav-link,.nav-tabs a.nav-link,.nav-tabs a.nav-link.active,.nav-pills .nav-link,.nav-pills a.nav-link,.nav-pills a.nav-link.active{padding:0;background:rgba(0,0,0,0);background-color:none}.tab-pane{display:none}.tab-pane.active{display:block}@keyframes fadeInUp{0%{transform:translate(0%, 100%);opacity:0}100%{transform:translate(0%, 0%);opacity:1}}@keyframes fadeInRight{0%{transform:translate(100%, 0%);opacity:0}100%{transform:translate(0%, 0%);opacity:1}}@keyframes fadeInLeft{0%{transform:translate(-100%, 0%);opacity:0}100%{transform:translate(0%, 0%);opacity:1}}@keyframes fadeInBig{0%{transform:scale(0.5);opacity:0}90%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}body{background:linear-gradient(180deg, #FFFFFF 30%, #CDECFF 100%);color:#fff;font-family:"Noto Sans TC",sans-serif,Arial}footer#ft{background:#000;border-top:1px solid hsla(0,0%,100%,.2039215686)}nav .navbar-nav a:nth-of-type(3),nav .navbar-nav a:nth-of-type(5),nav .navbar-nav a:nth-of-type(6){display:none}*{box-sizing:border-box}body{position:relative;margin:0;background:#f4f7fb;font-family:sans-serif;color:#333}#nav{display:none}main#header .app{position:relative;height:100vh;margin:0px auto;background:#000}@media only screen and (max-width: 480px){main#header .app{min-height:800px}}main#header .app .hidden{display:none}main#header .app .nav{position:fixed;top:0px;left:0px;width:100%;display:flex;flex-wrap:nowrap;justify-content:space-between}@media only screen and (max-width: 480px){main#header .app .nav img{height:60px}}main#header .app .nav ul{display:flex;padding-top:8px}main#header .app .nav ul li{list-style-type:none;padding-right:8px}main#header .app .intro-screen1{position:absolute;left:0px;top:0px;width:100%;background:url("../images/mainBg.png") no-repeat center center;background-size:cover;min-height:100vh}main#header .app .intro-screen1 .nav ul{display:none}main#header .app .intro-screen1 .wrapper{position:absolute;left:73%;top:120px;width:800px;transform:translateX(-50%);text-align:center}@media only screen and (max-width: 767px){main#header .app .intro-screen1 .wrapper{left:50%;max-width:100%;top:unset;bottom:30px}}main#header .app .intro-screen1 .wrapper .main_title1{margin-top:-50px}main#header .app .intro-screen1 .wrapper .main_title2{margin-top:-40px}@media only screen and (max-width: 480px){main#header .app .intro-screen1 .wrapper .main_title2{margin-top:-30px}}main#header .app .intro-screen1 .wrapper #startBtn{position:relative;width:289px;max-width:100%;height:70px;background:url("../images/mainBtn.png") no-repeat center center;background-size:contain}main#header .app .intro-screen1 .wrapper #startBtn::after{position:absolute;content:"";width:100%;height:100%;left:50%;top:50%;transform:translate(-50%, -50%);background:url("../images/mainBtn_hover.png") no-repeat center center;background-size:contain;opacity:0;transition:.3s all}main#header .app .intro-screen1 .wrapper #startBtn:hover::after{opacity:1}main#header .app .intro-screen2{position:absolute;left:0px;top:0px;width:100%;background:url("../images/s1BG.png") no-repeat center center;background-size:cover;min-height:100%;padding-bottom:120px;overflow:hidden}main#header .app .intro-screen2::before{content:"";position:absolute;width:685px;max-width:100%;height:878px;top:12%;left:50%;transform:translate(-125%, 0%);background:url("../images/s1_char1.png") no-repeat center center/contain;z-index:0}@media only screen and (max-width: 767px){main#header .app .intro-screen2::before{display:none}}main#header .app .intro-screen2::after{content:"";position:absolute;width:772px;max-width:100%;height:923px;top:14%;right:50%;transform:translate(102%, 0%);background:url("../images/s1_char2.png") no-repeat center center/contain;z-index:0}@media only screen and (max-width: 767px){main#header .app .intro-screen2::after{display:none}}main#header .app .intro-screen2 .nav ul{display:none}main#header .app .intro-screen2 .wrapper{position:relative;left:50%;top:50px;width:630px;height:830px;padding:250px 110px 150px 110px;background:url("../images/s1_wrapper.png") no-repeat center center;background-size:100%;max-width:100%;transform:translateX(-50%);text-align:center;z-index:1}@media only screen and (max-width: 767px){main#header .app .intro-screen2 .wrapper{padding:250px 80px 150px 80px}}@media only screen and (max-width: 480px){main#header .app .intro-screen2 .wrapper{max-width:130%;top:0px}}main#header .app .intro-screen2 .wrapper .txt_wrapper p{font-size:24px;color:#7f5729;text-align:center}@media only screen and (max-width: 767px){main#header .app .intro-screen2 .wrapper .txt_wrapper p{font-size:20px;line-height:34px}}main#header .app .intro-screen2 .wrapper .start-btn{margin-top:50px;transition:.3s all}main#header .app .intro-screen2 .wrapper .start-btn:hover{filter:brightness(120%)}@media only screen and (max-width: 767px){main#header .app .intro-screen2 .wrapper .start-btn{margin-top:30px}}main#header .app .quiz#quiz_wrapper{position:absolute;left:0px;top:0px;width:100%;background:url("../images/s2Bg.png") no-repeat center center;background-size:cover;min-height:100%;padding-bottom:120px;overflow:hidden}main#header .app .quiz#quiz_wrapper .nav ul{display:none}main#header .app .quiz#quiz_wrapper .quiz-card{position:relative;width:630px;max-width:100%;margin:auto}main#header .app .quiz#quiz_wrapper .bg{position:relative;top:50px;width:630px;height:830px;padding:180px 110px 150px 110px;background:url("../images/s1_wrapper.png") no-repeat center center;background-size:100%;max-width:100%;text-align:center;z-index:1}@media only screen and (max-width: 767px){main#header .app .quiz#quiz_wrapper .bg{padding:220px 80px 150px 80px}}@media only screen and (max-width: 480px){main#header .app .quiz#quiz_wrapper .bg{max-width:130%;left:50%;transform:translateX(-50%);top:0px}}main#header .app .quiz#quiz_wrapper .bg .question{color:#7f5729;font-size:24px;height:60%}@media only screen and (max-width: 767px){main#header .app .quiz#quiz_wrapper .bg .question{font-size:20px;line-height:34px}}main#header .app .quiz#quiz_wrapper .bg .options{display:flex;flex-direction:column;gap:15px}@media only screen and (max-width: 767px){main#header .app .quiz#quiz_wrapper .bg .options{gap:10px}}main#header .app .quiz#quiz_wrapper .bg .options .option-btn{background:#967451;border:1px solid #362603;filter:drop-shadow(2px 2px 0px #5e4123);height:48px;border-radius:13px;color:#fff;transition:.3s all}main#header .app .quiz#quiz_wrapper .bg .options .option-btn:hover{transform:translate(2px, 2px);filter:unset}@media only screen and (max-width: 767px){main#header .app .quiz#quiz_wrapper .bg .options .option-btn{height:40px}}main#header .app .quiz#quiz_wrapper .quiz_01::after{content:"";position:absolute;max-width:50%;background:url("../images/s2_mon11.png") no-repeat center center/contain;z-index:1}@media only screen and (max-width: 767px){main#header .app .quiz#quiz_wrapper .quiz_01::after{display:none}}main#header .app .quiz#quiz_wrapper .quiz_01::before{content:"";position:absolute;max-width:50%;background:url("../images/s2_mon12.png") no-repeat center center/contain}@media only screen and (max-width: 767px){main#header .app .quiz#quiz_wrapper .quiz_01::before{display:none}}main#header .app .quiz#quiz_wrapper .quiz_02::after{content:"";position:absolute;max-width:50%;background:url("../images/s2_mon21.png") no-repeat center center/contain;z-index:1}@media only screen and (max-width: 767px){main#header .app .quiz#quiz_wrapper .quiz_02::after{display:none}}main#header .app .quiz#quiz_wrapper .quiz_02::before{content:"";position:absolute;max-width:50%;background:url("../images/s2_mon22.png") no-repeat center center/contain}@media only screen and (max-width: 767px){main#header .app .quiz#quiz_wrapper .quiz_02::before{display:none}}main#header .app .quiz#quiz_wrapper .quiz_03::after{content:"";position:absolute;max-width:50%;background:url("../images/s2_mon31.png") no-repeat center center/contain;z-index:1}@media only screen and (max-width: 767px){main#header .app .quiz#quiz_wrapper .quiz_03::after{display:none}}main#header .app .quiz#quiz_wrapper .quiz_03::before{content:"";position:absolute;max-width:50%;background:url("../images/s2_mon32.png") no-repeat center center/contain}@media only screen and (max-width: 767px){main#header .app .quiz#quiz_wrapper .quiz_03::before{display:none}}main#header .app .quiz#quiz_wrapper .quiz_04::after{content:"";position:absolute;max-width:50%;background:url("../images/s2_mon41.png") no-repeat center center/contain;z-index:1}@media only screen and (max-width: 767px){main#header .app .quiz#quiz_wrapper .quiz_04::after{display:none}}main#header .app .quiz#quiz_wrapper .quiz_04::before{content:"";position:absolute;max-width:50%;background:url("../images/s2_mon42.png") no-repeat center center/contain}@media only screen and (max-width: 767px){main#header .app .quiz#quiz_wrapper .quiz_04::before{display:none}}main#header .app .quiz#quiz_wrapper .quiz_05::after{content:"";position:absolute;max-width:50%;background:url("../images/s2_mon51.png") no-repeat center center/contain;z-index:1}@media only screen and (max-width: 767px){main#header .app .quiz#quiz_wrapper .quiz_05::after{display:none}}main#header .app .quiz#quiz_wrapper .quiz_05::before{content:"";position:absolute;max-width:50%;background:url("../images/s2_mon52.png") no-repeat center center/contain}@media only screen and (max-width: 767px){main#header .app .quiz#quiz_wrapper .quiz_05::before{display:none}}main#header .app .quiz#quiz_wrapper .quiz_06::after{content:"";position:absolute;max-width:50%;background:url("../images/s2_mon61.png") no-repeat center center/contain;z-index:1}@media only screen and (max-width: 767px){main#header .app .quiz#quiz_wrapper .quiz_06::after{display:none}}main#header .app .quiz#quiz_wrapper .quiz_06::before{content:"";position:absolute;max-width:50%;background:url("../images/s2_mon62.png") no-repeat center center/contain}@media only screen and (max-width: 767px){main#header .app .quiz#quiz_wrapper .quiz_06::before{display:none}}main#header .app .quiz#quiz_wrapper .quiz_01::after{width:280px;height:258px;left:-50px;top:20px}main#header .app .quiz#quiz_wrapper .quiz_01::before{width:376px;height:384px;right:-150px;bottom:-60px}main#header .app .quiz#quiz_wrapper .quiz_02::after{width:283px;height:252px;left:-131px;top:20px}main#header .app .quiz#quiz_wrapper .quiz_02::before{width:324px;height:262px;right:-200px;bottom:-20px}main#header .app .quiz#quiz_wrapper .quiz_03::after{width:296px;height:272px;left:-90px;top:20px}main#header .app .quiz#quiz_wrapper .quiz_03::before{width:251px;height:226px;right:-200px;bottom:-20px}main#header .app .quiz#quiz_wrapper .quiz_04::after{width:268px;height:329px;left:-110px;top:-40px}main#header .app .quiz#quiz_wrapper .quiz_04::before{width:296px;height:336px;right:-165px;bottom:-30px}main#header .app .quiz#quiz_wrapper .quiz_05::after{width:209px;height:355px;left:-50px;top:20px}main#header .app .quiz#quiz_wrapper .quiz_05::before{width:208px;height:344px;right:-150px;bottom:-60px}main#header .app .quiz#quiz_wrapper .quiz_06::after{width:301px;height:257px;left:-50px;top:20px}main#header .app .quiz#quiz_wrapper .quiz_06::before{width:426px;height:460px;right:-170px;bottom:-95px}main#header .app .result{position:absolute;left:0px;top:0px;width:100%;min-height:100%;overflow:hidden}main#header .app .result .nav{z-index:1;justify-content:flex-end}main#header .app .result .nav .logo{margin-top:8px}main#header .app .result .nav ul{display:none}main#header .app .result .result-bg{position:absolute;inset:0;background-size:cover;background-position:center}main#header .app .result .result-content{position:absolute;left:200px;top:0px;height:100%;z-index:2;color:#fff;text-align:left;border-left:10px solid #fff;padding-top:140px;padding-left:50px;pointer-events:none}@media only screen and (max-width: 767px){main#header .app .result .result-content{padding-top:240px;border:unset;left:0px;padding-left:15px;max-width:60%}}@media only screen and (max-width: 480px){main#header .app .result .result-content{max-width:100%;padding-top:220px}}main#header .app .result .result-content .result-job{animation:fadeInUp .5s ease .3s 1 forwards;opacity:0}@media only screen and (max-width: 480px){main#header .app .result .result-content .result-job{max-width:70%}}main#header .app .result .result-content .result-desc{font-size:20px;line-height:26px;font-weight:500;margin-top:70px;margin-bottom:40px;filter:drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3764705882));animation:fadeInUp .5s ease .5s 1 forwards;opacity:0}@media only screen and (max-width: 767px){main#header .app .result .result-content .result-desc{margin-top:25px;font-size:18px;line-height:24px;margin-bottom:15px;filter:drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.7058823529))}}@media only screen and (max-width: 480px){main#header .app .result .result-content .result-desc{font-size:16px;line-height:20px;display:none}}main#header .app .result .result-content .result-gallery{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;animation:fadeInUp .5s ease .7s 1 forwards;opacity:0}@media only screen and (max-width: 767px){main#header .app .result .result-content .result-gallery{grid-template-columns:repeat(1, 1fr);max-width:50%;gap:8px}}@media only screen and (max-width: 480px){main#header .app .result .result-content .result-gallery{margin-top:30px;max-width:100%;grid-template-columns:repeat(2, 1fr);filter:drop-shadow(0px 0px 1px black)}}main#header .app .result .result-bg .txt{position:absolute;left:0px;top:30px;animation:fadeInLeft .5s ease .7s 1 forwards;opacity:0}main#header .app .result .result-bg .char{position:absolute;top:0%;width:100%;height:100%;animation:fadeInBig .5s ease .7s 1 forwards;opacity:0}@media only screen and (max-width: 480px){main#header .app .result .result-bg .char{top:-8%}}main#header .app .result .result-bg .char img{position:absolute;max-width:unset}main#header .app .result.Warrior .result-bg .char img{left:62%;transform:translate(-50%, -5%)}@media only screen and (max-width: 767px){main#header .app .result.Warrior .result-bg .char img{left:80%}}main#header .app .result.Mage .result-bg .char img{left:54%;transform:translate(-50%, -4%)}@media only screen and (max-width: 767px){main#header .app .result.Mage .result-bg .char img{top:-16%}}main#header .app .result.Knight .result-bg .char img{left:73%;transform:translate(-50%, 0%)}@media only screen and (max-width: 767px){main#header .app .result.Knight .result-bg .char img{left:119%;top:-21%}}@media only screen and (max-width: 480px){main#header .app .result.Knight .result-bg .char img{left:141%;top:-29%}}main#header .app .result.Archer .result-bg .char img{left:65%;transform:translate(-50%, -7%)}@media only screen and (max-width: 767px){main#header .app .result.Archer .result-bg .char img{left:91%;top:-13%}}main#header .app .result.Scholar .result-bg .char img{left:69%;transform:translate(-50%, -6%)}@media only screen and (max-width: 767px){main#header .app .result.Scholar .result-bg .char img{left:105%;top:-10%}}main#header .app .result.Priest .result-bg .char img{left:70%;transform:translate(-50%, -7%)}@media only screen and (max-width: 767px){main#header .app .result.Priest .result-bg .char img{left:111%;top:-6%}}@media only screen and (max-width: 767px)and (max-width: 480px){main#header .app .result.Priest .result-bg .char img{left:100%}}main#header .app .result.Wizard .result-bg .char img{left:66%;transform:translate(-50%, -5%)}@media only screen and (max-width: 767px){main#header .app .result.Wizard .result-bg .char img{left:103%;top:-14%}}@media only screen and (max-width: 767px)and (max-width: 480px){main#header .app .result.Wizard .result-bg .char img{top:-21%}}main#header .app .result.Assassin .result-bg .char img{left:68%;transform:translate(-50%, -17%)}@media only screen and (max-width: 767px){main#header .app .result.Assassin .result-bg .char img{left:120%;top:-30%}}@media only screen and (max-width: 767px)and (max-width: 480px){main#header .app .result.Assassin .result-bg .char img{left:129%;top:-36%}}main#header .app .result.Warrior .result-share{background:url("../images/job_bg1.png") no-repeat center center}main#header .app .result.Warrior .result-share .job-suggest{background:url("../images/job_txt1.png") no-repeat center center/contain}main#header .app .result.Mage .result-share{background:url("../images/job_bg2.png") no-repeat center center}main#header .app .result.Mage .result-share .job-suggest{background:url("../images/job_txt2.png") no-repeat center center/contain}main#header .app .result.Knight .result-share{background:url("../images/job_bg3.png") no-repeat center center}main#header .app .result.Knight .result-share .job-suggest{background:url("../images/job_txt3.png") no-repeat center center/contain}main#header .app .result.Archer .result-share{background:url("../images/job_bg4.png") no-repeat center center}main#header .app .result.Archer .result-share .job-suggest{background:url("../images/job_txt4.png") no-repeat center center/contain}main#header .app .result.Scholar .result-share{background:url("../images/job_bg5.png") no-repeat center center}main#header .app .result.Scholar .result-share .job-suggest{background:url("../images/job_txt5.png") no-repeat center center/contain}main#header .app .result.Priest .result-share{background:url("../images/job_bg6.png") no-repeat center center}main#header .app .result.Priest .result-share .job-suggest{background:url("../images/job_txt6.png") no-repeat center center/contain}main#header .app .result.Wizard .result-share{background:url("../images/job_bg7.png") no-repeat center center}main#header .app .result.Wizard .result-share .job-suggest{background:url("../images/job_txt7.png") no-repeat center center/contain}main#header .app .result.Assassin .result-share{background:url("../images/job_bg8.png") no-repeat center center}main#header .app .result.Assassin .result-share .job-suggest{background:url("../images/job_txt8.png") no-repeat center center/contain}main#header .app .result .result-share{position:absolute;width:629px;height:789px;max-block-size:100%;right:0px;bottom:0px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0px 0px 15px 130px;animation:fadeInRight .3s ease .7s 1 forwards;opacity:0}@media only screen and (max-width: 767px){main#header .app .result .result-share{height:600px;max-width:100%}}@media only screen and (max-width: 480px){main#header .app .result .result-share{padding:0px 0px 15px 0px}}main#header .app .result .result-share .job-suggest{margin-left:130px;padding-bottom:15px;animation:fadeInRight .3s ease .9s 1 forwards;opacity:0}@media only screen and (max-width: 767px){main#header .app .result .result-share .job-suggest{margin-left:125px}}@media only screen and (max-width: 480px){main#header .app .result .result-share .job-suggest{margin-left:180px}}main#header .app .result .result-share .job-suggest img{opacity:0}main#header .app .result .result-share .share{padding-bottom:15px;animation:fadeInRight .3s ease 1.1s 1 forwards;opacity:0;filter:brightness(100%);transition:.3s all}@media only screen and (max-width: 767px){main#header .app .result .result-share .share{width:280px;padding-left:100px}}@media only screen and (max-width: 480px){main#header .app .result .result-share .share{padding-right:15px;padding-left:35%;width:100%}}main#header .app .result .result-share .share img{transition:.3s all;transform:scale(1)}main#header .app .result .result-share .share:hover{filter:brightness(110%)}main#header .app .result .result-share .share:hover img{transform:scale(1.05)}main#header .app .result .result-share ul{animation:fadeInRight .3s ease 1.3s 1 forwards;opacity:0}@media only screen and (max-width: 767px){main#header .app .result .result-share ul{max-width:80%}}main#header .app .result .result-share ul li{list-style:none;padding-right:15px}main#header .app .result .result-share ul li:nth-of-type(3){display:none}main#header .app .result.is-hidden .result-share{animation:unset}main#header .app .result.is-hidden .result-share .job-suggest,main#header .app .result.is-hidden .result-share .share,main#header .app .result.is-hidden .result-share ul{animation:unset}main#header .app .result.is-hidden .result-job,main#header .app .result.is-hidden .result-desc,main#header .app .result.is-hidden .result-gallery{animation:unset}main#header .app .result.is-hidden .result-bg .txt,main#header .app .result.is-hidden .result-bg .char{animation:unset}main#header .app .restart{position:fixed;left:10px;top:50px;margin-top:50px;border:none;padding:16px 32px;border-radius:12px;background:#fff;color:#333;font-size:18px;cursor:pointer}@media only screen and (max-width: 767px){main#header .app .restart{display:none}}main#header .app .result-scores{display:none;position:fixed;margin:30px auto;left:10px;bottom:10px;max-width:500px;text-align:left;background:rgba(78,53,53,.63);padding:20px;border-radius:16px;backdrop-filter:blur(4px)}@media only screen and (max-width: 767px){main#header .app .result-scores{display:none}}main#header .app .score-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid hsla(0,0%,100%,.15)}main#header .app .score-item:last-child{border-bottom:none}main#header .app .score-name{font-weight:bold;color:#fff}main#header .app .score-value{color:#ffe082}.page{opacity:1;visibility:visible;transition:opacity .5s ease,visibility .5s ease}.page.is-hidden{opacity:0;visibility:hidden;pointer-events:none}@keyframes heartbeat{0%{transform:scale(1);transform-origin:center center;animation-timing-function:ease-out}10%{transform:scale(0.91);animation-timing-function:ease-in}17%{transform:scale(0.98);animation-timing-function:ease-out}33%{transform:scale(0.87);animation-timing-function:ease-in}45%{transform:scale(1);animation-timing-function:ease-out}}.falling-leaves{height:100%;width:100%;position:absolute;top:0;left:0;background-size:cover;overflow:hidden;pointer-events:none;z-index:101}.leaf-scene{position:absolute;top:0;left:0;height:100%;width:100%;transform-style:preserve-3d}.leaf-scene div{position:absolute;top:0;left:0;width:12px;height:17px;background:url(../images/petal.png) no-repeat;background-size:100%;transform-style:preserve-3d;backface-visibility:visible}