@import url("https://fonts.googleapis.com/css2?family=Arvo:wght@700&family=Noto+Sans+TC:wght@200;400;500;700&family=Redacted+Script&display=swap");.gradient-placeholder{background:radial-gradient(circle, rgba(170,221,238,0.7), rgba(102,170,187,0.8))}@keyframes loading-animation{from{opacity:0.5}to{opacity:1}}.division-line{width:1200px;height:1px;background:#e8e8e8;border:none;margin-top:37px;margin-bottom:50px}*,*:before,*:after{box-sizing:border-box}body{font-weight:500;font-size:16px;line-height:13.3px;font-family:"Noto Sans TC",sans-serif}body a{text-decoration:none;color:inherit}body button{font-size:19px;line-height:16px;cursor:pointer;border:none}.page-container{min-height:100%;display:flex;flex-direction:column}.content-wrap{background:#fff;flex:1;padding-bottom:40px}img:hover{cursor:pointer;opacity:0.7;transition:ease-in-out 0.3s}.nav-wrapper{position:fixed;top:0;left:0;width:100%;height:54px;background-color:#fff;padding:10px 0;z-index:999}.nav-wrapper .nav-content{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center}.logotype-h2{font-weight:700;font-size:30px;line-height:34px;color:#489}.nav-list{display:flex;transition:all 0.3s}.nav-list .nav-item{padding:10px;color:#666;cursor:pointer}.nav-list .nav-item:hover{color:black}.nav-line{width:100%;height:1px;background:#e8e8e8;border:none}.modal{display:none;position:fixed;left:0;top:0;width:100%;height:100vh;background-color:rgba(0,0,0,0.5);z-index:2000;flex-direction:column;align-items:flex-start}.modal-content{width:340px;position:relative;margin:0 auto auto auto;padding:15px;background-color:#fff;border-radius:0 0 6px 6px}.color-bar{width:340px;height:10px;margin:80px auto 0 auto;background:linear-gradient(270deg, #378 0%, #6ab 100%);border-radius:6px 6px 0 0}.close-btn{position:absolute;top:17px;right:17px;cursor:pointer;font-size:20px;font-weight:200;color:rgba(117,117,117,0.6)}#login-form,#register-form{display:flex;flex-direction:column}.login-h3,.register-h3{font-size:24px;line-height:24px;font-weight:700;color:#666;margin:auto;margin-bottom:15px}.login-input,.register-input{padding:15px;border-radius:5px;border:1px solid #e8e8e8;margin-bottom:10px}#login-btn,#register-btn{font-size:19px;line-height:16px;padding:10px 20px;background-color:#489;color:white;border-radius:5px;margin-bottom:10px}.go-to-register,.go-to-login{margin:auto;color:#666}.go-to-register #show-login,.go-to-register #show-register,.go-to-login #show-login,.go-to-login #show-register{cursor:pointer}.go-to-register #show-login:hover,.go-to-register #show-register:hover,.go-to-login #show-login:hover,.go-to-login #show-register:hover{color:rgba(68,136,153,0.8)}#register-error,#login-error{margin:15px auto 0 auto;color:#eb4747;line-height:18px}main{max-width:1200px;margin:auto;display:flex;flex-direction:column;justify-content:center;align-items:center}footer{display:flex;justify-content:center;align-items:center;background-color:#757575;height:104px;width:100%;color:#f8f8f8;font-weight:700}footer:hover{cursor:none}@media (max-width: 1200px){.nav-list .nav-item-2{padding-right:0}.nav-wrapper{padding:10px}.button-list-wrapper{margin:40px 15px 20px 15px}.button-list-wrapper .left-arrow{left:0}.button-list-wrapper .right-arrow{right:0}.division-line{width:calc(100% - 20px);margin-left:10px;margin-right:10px}}*,*:before,*:after{box-sizing:border-box}body{font-weight:500;font-size:16px;line-height:13.3px}body a{text-decoration:none;color:inherit}body button{font-size:19px;line-height:16px;cursor:pointer;border:none}.jumbotron{margin-top:54px;height:320px;background-size:cover;background-position:left top}.jumbotron-text{max-width:1200px;margin:0 auto;display:flex;flex-direction:column}.jumbotron-text .slogan-h1{font-weight:700;font-size:28px;line-height:24px;margin-top:85px;margin-bottom:25px;color:#f8f8f8;text-shadow:0px 0px 30px #abc}.jumbotron-text .subtitle-p{font-weight:700;margin-bottom:25px;color:#f8f8f8}.search-bar{position:relative;width:460px;height:46px;border-radius:5px}.search-bar #search-input{font-weight:500;font-size:16px;line-height:13.3px;background-color:#fff;border-radius:5px;outline:none;border:1px solid #ccc;font-weight:700;border-radius:5px 0 0 5px;outline:none;padding:15px;height:100%;width:calc(460px - 60px);background-color:#fff;box-shadow:-5px 5px 15px rgba(0,0,0,0.1),-5px -5px 15px rgba(0,0,0,0.1),0px 5px 15px rgba(0,0,0,0.1)}.search-bar #search-input ::placeholder{color:#757575}.search-bar #search-button{position:absolute;top:0;right:0;width:60px;height:100%;margin:0;border-radius:0 5px 5px 0;padding:8px 15px;color:#fff;background-color:#489}.search-bar #search-button:hover{background-color:#eda007;opacity:0.8;transition:loading-animation 0.2s infinite alternate}.button-list-wrapper{position:relative;height:50px;max-width:1200px;margin:40px auto 20px auto}.button-list-wrapper .arrow-button{width:32px;height:32px;padding:0;position:absolute;top:23px;font-size:22px;transform:translateY(-50%);background-color:rgba(232,232,232,0.1);color:rgba(117,117,117,0.9);border:solid 1.3px rgba(117,117,117,0.85);border-radius:100%;line-height:30px;text-align:center}.button-list-wrapper .arrow-button:hover{background:#fff;color:black}.button-list-wrapper .left-arrow{left:15px}.button-list-wrapper .right-arrow{right:15px}.button-wrapper{margin:0 57px;padding:13px 0;white-space:nowrap;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;scroll-behavior:smooth}.button-wrapper::-webkit-scrollbar{display:none}.button-wrapper .keyword-button{font-weight:500;font-size:16px;line-height:13.3px;color:#757575;background-color:#fff;margin:0;padding:5px 15px}.button-wrapper .keyword-button:hover{color:black}.photo-profile{padding:15px;display:flex;justify-content:center;align-items:center;gap:30px 30px;flex-wrap:wrap;width:100%}.photo-profile .profile-li{height:242px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;flex:1 1 calc(25% - 30px);max-width:270px;border-radius:5px;border:1px solid #e8e8e8;background:#fff}.profile-img{height:197px;position:relative;width:100%;overflow:hidden}.profile-img .main-image{height:197px;width:100%;object-fit:cover;background:radial-gradient(circle, rgba(102,170,187,0.6), rgba(51,119,136,0.7));animation:loading-animation 0.5s ease-in-out infinite}.profile-img .fallback-text{background:url("../images/jumbotron-bg.png") no-repeat top right;display:flex;justify-content:center;align-items:center;height:197px;width:100%;font-size:19px;line-height:16px;font-weight:700;color:rgba(117,117,117,0.8)}.profile-img-div{display:flex;align-items:center;width:100%;padding:10px}.profile-title{position:absolute;bottom:0;height:40px;justify-content:flex-start;background-color:rgba(0,0,0,0.6);color:white;font-weight:700}.profile-des{height:45px;justify-content:space-between;background-color:white}.no-data{font-size:24px;line-height:24px;font-weight:700;color:#fff;background-color:rgba(170,187,204,0.6);border-radius:5px;height:300px;width:100%;text-align:center;line-height:300px}@media (max-width: 1200px){.jumbotron .jumbotron-text{margin:0 20px}.button-list-wrapper{margin:40px 15px 20px 15px}.button-list-wrapper .left-arrow{left:0}.button-list-wrapper .right-arrow{right:0}}@media (min-width: 800px) and (max-width: 1200px){.photo-profile .profile-li{flex:1 1 30%}}@media (min-width: 600px) and (max-width: 880px){.photo-profile .profile-li{flex:1 1 50%}}@media (max-width: 600px){.search-bar{width:285px}.search-bar #search-input{width:calc(285px - 60px)}.photo-profile .profile-li{height:270px;flex:1 1 100%;max-width:320px}.profile-img{height:235px}.profile-img .main-image{height:235px}.profile-img .fallback-text{height:235px}}