body{margin:0;color:#666;font-size:16px}*{box-sizing:border-box;padding:0;margin:0;font-family:微軟正黑體;letter-spacing:1px;word-wrap:break-word}a{text-decoration:none}header{background-color:#f7f7f7;box-shadow:0 0 10px #b7b7b7;position:fixed;width:100%;height:70px;z-index:100;padding:10px 30px 10px 40px;font-weight:bold}header a{display:inline-block;transition-duration:.3s;color:#666;font-size:20px;margin-right:10px}header a:hover{color:#8db18f}header img{height:50px;vertical-align:middle}header .right{float:right;position:relative}header .user,header .other{display:inline-block;cursor:pointer;vertical-align:middle;border-radius:10px;transition-duration:.3s;padding:5px 10px}header .user img{height:40px;border-radius:100%;margin-right:10px;box-shadow:2px 2px 5px #b9b9b9}header .user:hover{background-color:#e6e6e6}header .other{width:40px;height:40px;background-image:url(app.png);background-size:100%;padding:10px;box-shadow:2px 2px 5px #cacaca;border-radius:100%}header .other:hover{filter:brightness(.8)}header .other_box,header .user_box{width:150%;background-color:#f9f9f9;position:absolute;top:70px;right:-10px;padding:10px;box-shadow:2px 2px 10px #cecece;display:none;border-radius:10px}header .user_box{text-align:center;transition-duration:.3s;padding:0}header .user_box a{color:#8db18f;display:block;padding:10px;font-size:16px}header .user_box:hover{background-color:#ddeade}header .other_box .channel{display:inline-block}header .channel{margin:20px 6px;text-align:center}header .channel .logo{width:60px;height:60px;overflow:hidden;margin:auto}header .channel img{width:100%;height:auto}header .channel .name{margin-top:5px;font-size:14px}nav{display:inline-block;width:350px;height:100vh;background-color:#f7f7f7;padding:20px 28px;overflow-y:auto;position:fixed;top:70px}nav a{padding:20px 0;margin:10px 0;transition-duration:.3s;display:block;text-align:center;font-weight:bold;cursor:pointer;color:#666}nav a:hover{background-color:#eee}nav a.active{background-color:#ddeade}.hbg{width:50px;height:50px;float:right;display:none;cursor:pointer;border-radius:100%;padding-top:8.5px}.hbg span{display:block;height:3px;background-color:#8db18f;transition-duration:.3s;width:23px;margin:6px auto}.close span:nth-child(1){transform:rotate(45deg) translateX(7px) translateY(8px)}.close span:nth-child(2){transform:rotate(-45deg) translateX(-1px) translateY(0)}.close span:nth-child(3){display:none}article{width:calc(100% - 358px);padding:40px 80px;min-height:100vh;vertical-align:top;line-height:28px;margin-left:350px;display:block}article:nth-child(3){display:block}article.article_login,.article_reg,.article_pwdget{display:block;margin:auto;width:100%}.content{width:80%;margin:auto;padding-top:70px}.content h2{margin:30px 0;font-size:30px;line-height:45px}.content p,.content li{margin:20px 0}.content h3{margin:60px 0 30px 0;font-size:24px;color:#8db18f}.content ul{padding-left:40px}.content li p{margin:10px 0}.content span{color:#8db18f;font-weight:bold}.content ul ul{list-style:decimal}.content a{color:#d08a06}.content a:hover{border-bottom:1px solid #f7a60d;background-color:#ffd68930}.content .pic{text-align:center}.content .pic img{width:300px}.content .list{padding:20px;padding-top:50px;border-top:5px solid #ddeade}.content .info{width:60%;margin:auto;margin-top:30px}.info p{margin:35px 0}.info span{color:#666;margin-right:10px}.info input,.info select{background-color:#eee;border:none;padding:8px 15px;border-radius:10px;width:calc(100% - 44px);transition-duration:.3s}.info select{margin-left:-5px}.info .done{background-color:#f1f1f16e;color:#8db18f;appearance:none;-moz-appearance:none;-webkit-appearance:none}input:focus{outline:none;background-color:#ddeade}.info .done:focus{background-color:transparent}.article_login .content,.article_reg .content{padding-top:0}.content .login{width:500px;position:relative;border:2px solid #eee;padding:20px;border-radius:10px;box-shadow:2px 2px 5px #eee}.login .errMSG{color:red;font-weight:bold}.login img{display:block;margin:auto;width:90px;border-radius:999em}.login h3{text-align:center;margin-top:0;margin-bottom:20px;padding-bottom:20px;border-bottom:5px solid #ddeade;font-size:20px}.login p{margin:25px 0}.login span{display:block;margin-bottom:10px}.login input{width:100%}.login .button{width:180px;background-color:#8db18f;color:#fff;font-size:16px;border:none;display:inline-block;padding:10px;border-radius:10px;transition-duration:.3s;cursor:pointer;text-align:center;margin:0 10px;vertical-align:top;box-shadow:2px 2px 5px #dcdcdc;height:48px}.login button:hover,.login a:hover{filter:brightness(.9);border-bottom:none}.login .other_account{margin-bottom:15px}.login .bottom{position:absolute;bottom:10px;text-align:center;width:100%;left:0}.login .bottom2{position:absolute;bottom:-45px;margin:0;right:0}.login .bottom2 a{margin:0 5px;transition-duration:.3s}.login .bottom a{background-color:transparent;color:#8db18f;width:auto;display:inline-block;margin:0 10px}p.center{text-align:center;margin:0}#fb{background-color:#4267b2}#google{background-color:#fff;color:#666}#google img{height:28px;width:auto;display:inline-block;vertical-align:middle;margin-right:15px}#twitch{background-color:#9246fe;color:#fff}#twitch img{height:28px;width:auto;display:inline-block;vertical-align:middle;margin-right:15px;border-radius:initial}#line{background-color:#fff;color:#666}#line img{height:28px;width:auto;display:inline-block;vertical-align:middle;margin-right:15px}.top{background-color:#8db18f7d;position:fixed;bottom:8px;right:8px;color:#fff;padding:10px;cursor:pointer;display:none;transition-duration:.3s}i{color:#8db18f;float:right;cursor:pointer}i:hover{filter:brightness(.8)}i.fa-check{display:none}.article_reg .agree{margin:0}.pass-box{position:relative;width:240px;height:80px;margin:20px auto;border:1px #000 solid}.pass-box .pass-line{margin:0 auto;width:100%;height:100%}.pass-box .line-box{float:left;width:58px;height:80px}.pass-box .line{display:block;width:40px;height:3px;margin:38px auto 0;background:#000}.pass-box .passInput{position:absolute;width:240px;height:40px;left:0;top:0}.pass-box .inputCont{float:left;width:40px!important;height:80px!important;margin:0 8.5px!important;z-index:2!important;font-size:50px!important;color:#333!important;line-height:40px!important;text-align:center!important;background:none!important;padding:initial!important;font-weight:bolder}@media screen and (max-width:1200px){nav{width:220px;padding:20px 0}article{width:calc(100% - 220px);margin-left:220px;padding:40px 3%}.content{width:100%}}@media screen and (max-width:768px){.content .info{width:80%}}@media screen and (max-width:600px){header{padding-left:20px;padding-right:10px}header .right{display:none}nav{transform:translateX(500px);right:0;transition-duration:.3s;padding:0;box-shadow:0 0 15px #b7b7b7;z-index:99}.hbg{display:block}.translate{transform:translateX(0)}article{width:100%;margin-left:0;padding:10px 3%}.content h3{margin:40px 0 30px 0}.content .login{padding:10px 10px 75px 10px}.login h3{margin-top:0;margin-bottom:30px}.content .info{width:100%;margin-top:0}.info p{margin:20px 0}.login .other_account{margin-bottom:5px}.login .button{width:150px;margin:0 2px}p.center{margin:0}article.article_login{padding-bottom:100px}}@media screen and (max-width:320px){.login .button{width:130px;margin:0 2px}.login h3{margin-top:0;margin-bottom:0}.login p{margin:10px 0}.content .login{padding:10px 10px 55px 10px}}.mt-7{margin-top:7px!important}.mt-8{margin-top:8px!important}.mt-9{margin-top:9px!important}