@charset "UTF-8";@keyframes ripple{0%{width:0;height:0;opacity:.5}100%{width:250px;height:250px;opacity:0}}[v-cloak]{display:none}.fade-enter-active,.fade-leave-active{transition:opacity .5s ease}.fade-enter-from,.fade-leave-to{opacity:0}label{position:relative;top:0;left:0;width:100%;height:50px;display:block}label:after{content:"";position:absolute;top:0;right:0;width:30px;height:100%;display:block;border-top:solid 1px #ccc;border-right:solid 1px #ccc;border-bottom:solid 1px #ccc;border-top-right-radius:5px;border-bottom-right-radius:5px;background-color:#429ce6;box-sizing:border-box;background-image:url(img/arrow.png);background-repeat:no-repeat;background-position:center center;pointer-events:none}label select{padding:0 20px;width:100%;height:100%;font-size:16px;color:#000;border-radius:5px;border:solid 1px #ccc;background-color:#fff;cursor:pointer}.btn_group{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px}.btn_group button{width:100%;height:50px;color:#fff;font-size:16px;display:flex;justify-content:center;align-items:center;gap:10px;border-radius:5px;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:opacity .3s}.btn_group button:hover{opacity:.8}#app .first_view{padding:20px;z-index:9999;position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background-image:url(img/first_view.webp);background-size:cover;box-sizing:border-box}#app .first_view .first_view_inner h3{padding:0;text-align:center;border:none}#app .first_view .first_view_inner button.problem_start_btn{margin-top:20px;width:100%;height:50px;color:#fff;font-size:16px;display:flex;justify-content:center;align-items:center;gap:10px;background-color:#f3a13f;border-radius:5px;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:opacity .3s}#app .first_view .first_view_inner button.problem_start_btn:hover{opacity:.8}#app .problem .problem_voice{display:flex;align-items:center;gap:15px}#app .problem .problem_voice .problem_speak_btn{position:relative;padding:20px 10px;width:25%;height:50px;color:#fff;display:flex;justify-content:center;align-items:center;gap:10px;border-radius:5px;background-color:#f3a13f;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;transition:opacity .3s}#app .problem .problem_voice .problem_speak_btn:hover{opacity:.8}#app .problem .problem_voice .problem_speak_btn:after{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;background:rgba(255,255,255,.5);border-radius:50%;transform:translate(-50%,-50%);animation:ripple 1.15s infinite}#app .problem .problem_voice .problem_speak_btn svg{width:30px}#app .problem .problem_voice .problem_speak_btn span{font-size:15px}#app .problem .problem_voice .speaking{pointer-events:none}#app .problem .problem_voice .listened:after{content:none;animation:none}#app .problem .answer{margin-top:40px;filter:grayscale(.75);pointer-events:none}#app .problem .answer input[type=text]{width:100%;height:50px;padding:0 20px;font-size:16px;color:#000;border-radius:5px;border:solid 1px #ccc;background-color:#fff;box-sizing:border-box}#app .problem .answer .answer_btn_group button.answer_btn{background-color:#f3a13f}#app .problem .answer .answer_btn_group button.next_btn{background-color:#777}#app .problem .listened{filter:none;pointer-events:auto}#app .result{z-index:9999;position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.65)}#app .result .result_inner{padding:20px;background-color:#fff;border-radius:5px}#app .result .result_inner h4{margin-bottom:20px;font-size:20px;text-align:center}#app .result .result_inner .result_text{margin-bottom:20px}#app .result .result_inner .result_btn_group button.post_btn{background-color:#429ce6}#app .result .result_inner .result_btn_group button.again_btn{background-color:#f3a13f}#description .content_box .content_group{margin-bottom:20px}@media screen and (max-width:480px){#app .problem .problem_voice{height:auto;flex-direction:column}#app .problem .problem_voice .problem_speak_btn{width:100%}}