@charset "UTF-8";
header { display: inline; position: relative; }
header .navbar.sticky-top { top: 0; transition: .5s; }
header .navbar { background-color: rgba(255, 255, 255, 0.75); box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 2rem 100%, 0 calc(100% - 2rem)); clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 2rem 100%, 0 calc(100% - 2rem)); }
header .navbar .navbar-brand { max-width: calc(100% - 0.75rem*2 - 1.2rem - 1rem); overflow: hidden; }
header .navbar .navbar-brand .logo { margin-bottom: 0; }
header .navbar .navbar-toggler { border-color: transparent; padding-left: .5rem; padding-right: .5rem; }
header .navbar .navbar-toggler:focus { box-shadow: none; }
header .navbar .navbar-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fd7e14' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
header .navbar .navbar-toggler:hover { transform: scale(1.25); transition: .35s ease; }
header .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fd7e14'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); width: 1.2rem; height: 1.2rem; }
header .navbar .navbar-collapse { flex-grow: inherit; flex-shrink: 0; }
header .navbar .navbar-nav .nav-link:hover, header .navbar .navbar-nav .nav-link:focus { color: #feb272; }
header .navbar .navbar-nav .nav-link.active { color: #fd7e14; }
header .navbar .navbar-nav .dropdown .dropdown-menu { min-width: 100%; }
@media (min-width: 992px) { header .navbar .navbar-nav .dropdown .dropdown-menu { display: block; border: none; margin-top: 0; top: 150%; left: auto; right: 0; opacity: 0; visibility: hidden; transition: .5s; } }
@media (min-width: 992px) { header .navbar .navbar-nav .dropdown:hover .dropdown-menu { top: 110%; visibility: visible; transition: .5s; opacity: 1; } }
header .navbar .navbar-nav .nav-others.dropdown-toggle::after { display: none; }
header .navbar .navbar-nav .nav-others.btn { width: calc(1em + .75rem*2); height: calc(1em + .75rem*2); display: flex; justify-content: center; align-items: center; }
header .navbar .navbar-nav .nav-user .avater { width: calc(1em*1.5 + 0.375rem*2 + 2px); height: calc(1em*1.5 + 0.375rem*2 + 2px); font-size: calc((1em*1.5 + 0.375rem*2 + 2px)*.4); }

footer .infomation { background-color: rgba(255, 255, 255, 0.75); font-size: .85rem; padding-top: 1rem; padding-bottom: 1rem; -webkit-clip-path: polygon(2rem 0%, calc(100% - 2rem) 0%, 100% 2rem, 100% 100%, 0 100%, 0% 2rem); clip-path: polygon(2rem 0%, calc(100% - 2rem) 0%, 100% 2rem, 100% 100%, 0 100%, 0% 2rem); }
footer .infomation .logo { margin-bottom: 1.5rem; }
footer .infomation .infomation-data { padding-left: 9.5%; margin-bottom: 1.5rem; }
footer .infomation .infomation-data p { margin-bottom: .25rem; }
footer .infomation .infomation-nav { margin-top: .75rem; margin-bottom: .75rem; }
footer .infomation .infomation-nav a { color: #fff; font-size: 1rem; text-align: left; }
footer .infomation .infomation-nav a:hover, footer .infomation .infomation-nav a:focus, footer .infomation .infomation-nav a:active { color: #fff799; }
footer .infomation .infomation-link { font-size: 1rem; display: flex; align-items: center; padding-left: 1rem; margin-bottom: 1.5rem; }
footer .infomation .infomation-link a { display: inline-block; width: 10rem; height: auto; margin-left: 1rem; border-radius: .5rem; overflow: hidden; }
footer .copyright { background-color: rgba(255, 255, 255, 0.75); border-top: 1px solid rgba(33, 37, 41, 0.5); color: #212529; font-size: .85rem; padding-top: .75rem; padding-bottom: .75rem; }
footer .copyright a { margin-right: 1rem; }

main { min-height: calc(100vh - (3rem + 0.3125rem*2 + 0.5rem*2)); }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes slideInLeft { 0% { left: -100%; }
  100% { left: 0; } }
@keyframes slideInRight { 0% { right: -100%; }
  100% { right: 0; } }
@keyframes pulse_right { 0% { transform: rotate(-90deg) translateY(0); }
  100% { transform: rotate(-90deg) translateY(0.5rem); } }
@keyframes rotate { 0% { transform: rotate(0); }
  100% { transform: rotate(359deg); } }
.back-to-top { position: fixed; right: 0.75rem; bottom: 4rem; z-index: 99; width: 2.5rem; height: 2.5rem; padding: 0; display: flex; justify-content: center; align-items: center; background-color: #fff; color: #fd7e14; opacity: .75; }
.back-to-top:hover, .back-to-top:focus, .back-to-top:active { background-color: #fff799; color: #fd7e14; opacity: 1.0; }

.academic { display: flex; flex-direction: column; transition: .35s ease; margin: auto; }
.academic .academic-img { width: 100%; height: 100%; max-width: 160px; max-height: 160px; display: flex; justify-content: center; align-items: center; margin: 0 auto; }
.academic .academic-img img { max-width: 100%; max-height: 100%; }
.academic .academic-name { color: #fff; background-color: inherit; border-radius: 5rem; padding: 0.375rem 0.75rem; font-size: .95rem; display: flex; justify-content: center; align-items: center; text-align: center; white-space: nowrap; }
.academic.disc .academic-name, .academic.discipline .academic-name { background: linear-gradient(to right, #0068b7 0%, #8a2be2 100%); }
.academic.cate .academic-name, .academic.category .academic-name { background: linear-gradient(to right, #8a2be2 0%, #d63384 100%); }
.academic.dept .academic-name, .academic.department .academic-name { background: linear-gradient(to right, #d63384 0%, #fd7e14 100%); }

a.academic:hover { transform: scale(1.1); transition: .35s ease; filter: brightness(1.05); text-decoration: none; }

.metric { display: inline-flex; flex-direction: column; color: #495057; text-align: center; position: relative; margin: .125rem; width: 100px; height: auto; }
.metric img { width: 80px; height: 80px; margin: 10px; }

.disabled, :disabled, [disabled], [disabled="disabled"] { opacity: .25 !important; }

.placeholder { display: inline-block; min-height: 1rem; vertical-align: middle; cursor: wait; background-color: #ced4da; opacity: .5; }

.placeholder.btn::before { display: inline-block; content: ""; }

.nav-underline .nav-link.active { font-weight: 500; }
.nav-underline .nav-link.active:hover, .nav-underline .nav-link.active:focus { border-bottom-color: currentColor; }
.nav-underline .nav-link:hover, .nav-underline .nav-link:focus { border-bottom-color: transparent; }

.accordion-flush > .accordion-item:last-child { border-bottom: var(--bs-border-width) solid var(--bs-accordion-border-color); }

.accordion-button { flex-direction: row-reverse; justify-content: flex-end; }

.accordion-button { font-size: 1.125rem; /*position: relative;
z-index: 1;*/ }
.accordion-button:not(.collapsed) { box-shadow: none; font-weight: 500; }
.accordion-button.collapsed:hover { color: #212529; font-weight: 500; }
.accordion-button::after { margin-left: 0; margin-right: .5rem; }

.accordion-body { padding-left: calc(1.25rem + 1.25rem + .5rem); padding-top: 0; position: relative; }
.accordion-body::before { content: ""; width: 1.5px; height: 0; background-color: #fd7e14; position: absolute; bottom: 1.5rem; left: calc(1.25rem + 1.25rem/2); z-index: 5; transform: translateX(-25%); transition: height 0.3s ease-in-out; }

.accordion-collapse.collapse.show .accordion-body::before { height: calc(100% + 1rem*.8); transition: height 0.3s ease-in-out; }

.input-group [class*="btn"] { color: var(--bs-body-color); background-color: var(--bs-body-bg); border-color: var(--bs-border-color); }
.input-group [class*="btn"]:hover { background-color: #ffe5d0; }

.form-check { padding-top: 0.375rem; padding-bottom: 0.375rem; }

.badge { font-weight: 400; }
.badge.sys { background-color: #20c997; }
.badge.act { background-color: #fd9843; }

.sticky-top { transition: .5s; }

.pagination .btn:disabled, .pagination .btn.disabled { visibility: hidden; }

.page-header { padding-top: 3rem; padding-bottom: 3rem; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; }
.page-header h2 { color: #fff; filter: opacity(0.9); }
.page-header nav { filter: opacity(0.75); }
.page-header .breadcrumb { color: #fff; --bs-breadcrumb-divider-color: var(--bs-white); --bs-breadcrumb-item-active-color: var(--bs-white); }
.page-header .breadcrumb a { color: #fff; }
.page-header .breadcrumb a:hover { color: #fff799; }

#spinner { position: fixed; width: 100vw; height: 100vh; background-color: #fd7e14; display: flex; justify-content: center; align-items: center; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; transition: opacity .5s ease-out, visibility 0s linear .5s; z-index: 99999; }
#spinner.show { transition: opacity .5s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 0.5; }
#spinner .spinner-border { color: #fff799; width: 3rem; height: 3rem; }

html, body { font-size: 14px; letter-spacing: .05em; }
@media screen and (min-width: 768px) { html, body { font-size: 16px; } }
@media screen and (min-width: 1200px) { html, body { font-size: 18px; } }
@media screen and (min-width: 1600px) { html, body { font-size: 20px; } }
html::-webkit-scrollbar, body::-webkit-scrollbar { background-color: transparent; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background-color: #fff; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #fd9843 0%, #fd7e14 50%, #fd7e14 100%); border-radius: 17px; border: 3px solid #fff; }

body { position: relative; overflow-x: hidden; background-color: #fffdeb; }
body::before, body::after { content: ""; display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
body::before { background: radial-gradient(circle at 40% 50%, #fffdeb 0%, transparent 40%), radial-gradient(circle at 60% 20%, #fff799 0%, transparent 30%), radial-gradient(circle at 0% 10%, #fd7e14 0%, transparent 30%), radial-gradient(circle at 80% 80%, #fd7e14 0%, transparent 30%), #fffdeb; filter: blur(100px); z-index: -1; animation: floatBlob 12s ease-in-out infinite alternate; }
body::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 100 100'%3E%3Crect fill='%23fd7e14' width='100' height='100'/%3E%3Crect x='0' y='0' width='99' height='99' fill-opacity='0.25' fill='%23fffdeb'/%3E%3C/svg%3E"); /* https://www.svgbackgrounds.com/set/free-svg-backgrounds-and-patterns/ */ transform: scale(250%) rotate(30deg); z-index: -2; }

@keyframes floatBlob { 0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  25% { transform: translate(-5vw, -5vh) scale(1.05) rotate(15deg); }
  50% { transform: translate(0, 0) scale(1.25) rotate(30deg); }
  75% { transform: translate(5vw, 5vh) scale(0.97) rotate(15deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); } }
a { text-underline-offset: 5px; word-break: break-all; }

.link-scale { transition: .35s ease; }
.link-scale:hover, .link-scale:focus, .link-scale:active { transform: scale(1.1); }

.img-deafult { background-color: #adb5bd; position: relative; }
.img-deafult::after { content: ""; display: block; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-image: url("../img/logo-icon.svg"); background-size: auto 50%; background-repeat: no-repeat; background-position: center center; filter: opacity(0.75); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }
.img-deafult img { z-index: 5; }

.text-title { color: #495057; }

.bg-opacity-5 { --bs-bg-opacity: .05; }

.bg-opacity-85 { --bs-bg-opacity: .85; }

.bg-primary-gradient, .page-header { background: linear-gradient(to right, #44bae4 0%, #15a9dd 50%, #fd7e14 100%); }

.pagination-field .pagination-input { display: inline; padding-right: .25rem; }

.btn-square { padding-left: 0; padding-right: 0; min-width: calc(1em*1.5 + 0.375rem*2 + 2px); min-height: calc(1em*1.5 + 0.375rem*2 + 2px); opacity: 1.0; }

.logo img { max-width: 100%; height: 3rem; }

.avater { background-color: #fd7e14; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; font-size: 0.8rem; line-height: 1; }

.divider-text { position: relative; display: flex; align-items: center; font-size: .8rem; color: #6c757d; }
.divider-text::before, .divider-text::after { content: ""; display: block; flex: 1; width: auto; height: 1px; background-color: rgba(108, 117, 125, 0.5); }
.divider-text::before { margin-right: .5rem; }
.divider-text::after { margin-left: .5rem; }

.login-divider { position: relative; display: flex; align-items: center; }
.login-divider::before, .login-divider::after { content: ""; display: block; flex: 1; width: auto; height: 1px; background-color: rgba(255, 255, 255, 0.5); }
.login-divider::before { margin-right: 1rem; }
.login-divider::after { margin-left: 1rem; }

.btn-favorite { color: #6c757d; }
.btn-favorite::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .25em; background-repeat: no-repeat; background-position: center center; background-size: contain; vertical-align: middle; }
.btn-favorite::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23d62839' class='bi bi-heart' viewBox='0 0 16 16'%3E %3Cpath d='m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15'/%3E %3C/svg%3E"); }
.btn-favorite:hover, .btn-favorite:focus, .btn-favorite:active { color: #d62839 !important; text-decoration: none; }
.btn-favorite.active { color: #d62839; }
.btn-favorite.active::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23d62839' class='bi bi-heart-fill' viewBox='0 0 16 16'%3E %3Cpath fill-rule='evenodd' d='M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314'/%3E %3C/svg%3E"); }

.btn-favorite.text-white { color: #fff !important; }
.btn-favorite.text-white::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-heart' viewBox='0 0 16 16'%3E %3Cpath d='m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15'/%3E %3C/svg%3E"); }
.btn-favorite.text-white.active { color: #fff; background-color: #d62839; }
.btn-favorite.text-white.active::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-heart-fill' viewBox='0 0 16 16'%3E %3Cpath fill-rule='evenodd' d='M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314'/%3E %3C/svg%3E"); }

.btn-compare { color: #6c757d; }
.btn-compare::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .25em; background-repeat: no-repeat; background-position: center center; background-size: contain; vertical-align: middle; }
.btn-compare::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2320c997' class='bi bi-intersect-border' viewBox='0 0 16 16'%3E %3Cpath d='M14,4H12V2a2.006,2.006,0,0,0-2-2H2A2.006,2.006,0,0,0,0,2v8a2.006,2.006,0,0,0,2,2H4v2a2.006,2.006,0,0,0,2,2h8a2.006,2.006,0,0,0,2-2V6A2.006,2.006,0,0,0,14,4ZM4,6v5H2a.945.945,0,0,1-1-1V2A.945.945,0,0,1,2,1h8a.945.945,0,0,1,1,1V4H6A2.006,2.006,0,0,0,4,6Zm7-1v5a.945.945,0,0,1-1,1H5V6A.945.945,0,0,1,6,5Zm4,9a.945.945,0,0,1-1,1H6a.945.945,0,0,1-1-1V12h5a2.006,2.006,0,0,0,2-2V5h2a.945.945,0,0,1,1,1Z'/%3E %3C/svg%3E"); }
.btn-compare:hover, .btn-compare:focus, .btn-compare:active { color: #20c997 !important; text-decoration: none; }
.btn-compare.active { color: #20c997; }
.btn-compare.active::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2320c997' class='bi bi-intersect' viewBox='0 0 16 16'%3E %3Cpath d='M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2zm5 10v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2v5a2 2 0 0 1-2 2zm6-8V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2V6a2 2 0 0 1 2-2z'/%3E %3C/svg%3E"); }

.clip-path-triangle-down { -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); margin-top: -1px; }

.clip-path-card, .exam-item .exam-body { padding: 1.5rem 2rem 1.5rem 1.5rem; box-shadow: 0 0 5px #fff799; border-radius: 0.1875rem 1.875rem 1.875rem 1.875rem; -webkit-clip-path: polygon(0% 0%, 50% 0%, calc(50% + 1rem) 1.5rem, calc(90% - 1rem) 1.5rem, 90% 0%, 100% 0%, 100% calc(100% - 7rem), calc(100% - 1.5rem) calc(100% - 7rem), calc(100% - 1.5rem) calc(100% - 6rem), calc(100% - .5rem) calc(100% - 6rem), calc(100% - .5rem) calc(100% - 7rem), 100% calc(100% - 7rem), 100% calc(100% - 5.5rem), calc(100% - 1.5rem) calc(100% - 5.5rem), calc(100% - 1.5rem) calc(100% - 4.5rem), calc(100% - .5rem) calc(100% - 4.5rem), calc(100% - .5rem) calc(100% - 5.5rem), 100% calc(100% - 5.5rem), 100% calc(100% - 4rem), calc(100% - 1.5rem) calc(100% - 4rem), calc(100% - 1.5rem) calc(100% - 3rem), calc(100% - .5rem) calc(100% - 3rem), calc(100% - .5rem) calc(100% - 4rem), 100% calc(100% - 4rem), 100% 100%, 30% 100%, calc(30% - 1rem) calc(100% - 1rem), calc(10% + 1rem) calc(100% - 1rem), 10% 100%, 0% 100%, 0% calc(6rem + 30%), 1rem calc(6rem + 30% - 1rem), 1rem calc(6rem + 1rem), 0% 6rem); clip-path: polygon(0% 0%, 50% 0%, calc(50% + 1rem) 1.5rem, calc(90% - 1rem) 1.5rem, 90% 0%, 100% 0%, 100% calc(100% - 7rem), calc(100% - 1.5rem) calc(100% - 7rem), calc(100% - 1.5rem) calc(100% - 6rem), calc(100% - .5rem) calc(100% - 6rem), calc(100% - .5rem) calc(100% - 7rem), 100% calc(100% - 7rem), 100% calc(100% - 5.5rem), calc(100% - 1.5rem) calc(100% - 5.5rem), calc(100% - 1.5rem) calc(100% - 4.5rem), calc(100% - .5rem) calc(100% - 4.5rem), calc(100% - .5rem) calc(100% - 5.5rem), 100% calc(100% - 5.5rem), 100% calc(100% - 4rem), calc(100% - 1.5rem) calc(100% - 4rem), calc(100% - 1.5rem) calc(100% - 3rem), calc(100% - .5rem) calc(100% - 3rem), calc(100% - .5rem) calc(100% - 4rem), 100% calc(100% - 4rem), 100% 100%, 30% 100%, calc(30% - 1rem) calc(100% - 1rem), calc(10% + 1rem) calc(100% - 1rem), 10% 100%, 0% 100%, 0% calc(6rem + 30%), 1rem calc(6rem + 30% - 1rem), 1rem calc(6rem + 1rem), 0% 6rem); }

.futuristic-shadow { filter: drop-shadow(0 0 0.25rem rgba(253, 126, 20, 0.08)); }

.futuristic-nav { padding-top: 3rem; font-size: 1.25rem; transform: translateY(1px); }
.futuristic-nav .nav-link.active { background-color: #fff; color: #fd7e14; border-bottom-left-radius: 0; border-bottom-right-radius: 0; -webkit-clip-path: polygon(1rem 0%, calc(100% - 1rem) 0%, 100% 100%, 0% 100%); clip-path: polygon(1rem 0%, calc(100% - 1rem) 0%, 100% 100%, 0% 100%); }

.futuristic-frame { padding: 3rem; background-color: rgba(255, 255, 255, 0.9); border-radius: 1rem; clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 7rem), calc(100% - 1.5rem) calc(100% - 7rem), calc(100% - 1.5rem) calc(100% - 6rem), calc(100% - .5rem) calc(100% - 6rem), calc(100% - .5rem) calc(100% - 7rem), 100% calc(100% - 7rem), 100% calc(100% - 5.5rem), calc(100% - 1.5rem) calc(100% - 5.5rem), calc(100% - 1.5rem) calc(100% - 4.5rem), calc(100% - .5rem) calc(100% - 4.5rem), calc(100% - .5rem) calc(100% - 5.5rem), 100% calc(100% - 5.5rem), 100% calc(100% - 4rem), calc(100% - 1.5rem) calc(100% - 4rem), calc(100% - 1.5rem) calc(100% - 3rem), calc(100% - .5rem) calc(100% - 3rem), calc(100% - .5rem) calc(100% - 4rem), 100% calc(100% - 4rem), 100% 100%, 30% 100%, calc(30% - 1.5rem) calc(100% - 1.5rem), calc(10% + 1.5rem) calc(100% - 1.5rem), 10% 100%, 0% 100%, 0% 75%, 1.5rem calc(75% - 1.5rem), 1.5rem calc(25% + 1.5rem), 0% 25%); }

.futuristic-modal .modal-content { border: 5px solid #fd7e14; border-radius: 2rem; }
.futuristic-modal .modal-header { border-bottom-color: transparent; padding: 0 calc(1rem*3); position: relative; }
.futuristic-modal .modal-header .btn-close { position: absolute; right: 1rem; }
.futuristic-modal .modal-body::-webkit-scrollbar { background-color: transparent; }
.futuristic-modal .modal-body::-webkit-scrollbar-track { background-color: #fff; }
.futuristic-modal .modal-body::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #fd9843 0%, #fd7e14 50%, #fd7e14 100%); border-radius: 17px; border: 3px solid #fff; }
.futuristic-modal .modal-body::-webkit-scrollbar { scrollbar-width: thin; }
.futuristic-modal .modal-body::-webkit-scrollbar-thumb { background: #fd7e14; }
.futuristic-modal .modal-footer { border-top-color: transparent; background-color: #fd7e14; color: #fff; justify-content: center; width: 50%; margin-left: auto; margin-right: auto; border-radius: 0; clip-path: polygon(2rem 0%, calc(100% - 1rem*2) 0%, 100% calc(100% + 1px), 0% calc(100% + 1px)); }
.futuristic-modal .modal-title { background-color: #fd7e14; color: #fff; padding: 0.75rem 3rem; margin-left: auto; margin-right: auto; clip-path: polygon(0% -1px, 100% -1px, calc(100% - 1rem*2) 100%, 2rem 100%); }

.futuristic-modal.TA .modal-content { background-color: #ccf1ff; }
.futuristic-modal.TA .modal-content .exam-item { filter: none; }
.futuristic-modal.TA .modal-content .exam-item .exam-body { background-color: transparent; box-shadow: none; }

.futuristic-modal.TI .modal-content { background-color: #cceed4; }
.futuristic-modal.TI .modal-content .exam-body { box-shadow: none; }

.futuristic-modal.WV .modal-content { background-color: #faead0; }
.futuristic-modal.WV .modal-content .exam-body { box-shadow: none; }

.exam-item { filter: drop-shadow(0 0 0.5rem rgba(253, 126, 20, 0.08)); }
.exam-item .exam-body { min-height: 300px; }
.exam-item .exam-title { display: flex; align-items: center; margin-bottom: 1rem; }
.exam-item .exam-title .exam-icon { flex-grow: 0; flex-shrink: 0; flex-basis: auto; width: 5rem; height: 5rem; border-radius: 100%; display: flex; justify-content: center; align-items: center; margin-right: .5rem; float: left; box-shadow: inset 5px 5px 10px rgba(255, 255, 255, 0.5), inset -2px -2px 10px rgba(0, 0, 0, 0.25), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); position: relative; }
.exam-item .exam-title .exam-icon::after { content: ""; display: block; width: 110%; height: 110%; position: absolute; top: -5%; left: -5%; background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3C!-- Generator: Adobe Illustrator 28.7.3, SVG Export Plug-In . SVG Version: 9.03 Build 54978) --%3E %3C!-- https://www.freepik.com/free-vector/technology-background-with-dots-ans-lines_2359737.htm%23fromView=search&page=1&position=0&uuid=76fc2d22-29b1-4c3b-8f0b-88c62cd191d6 --%3E %3Csvg version='1.1' id='_圖層_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 469.8 469.8' style='enable-background:new 0 0 469.8 469.8;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D .st1%7Bopacity:0.54;%7D .st2%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-miterlimit:10;%7D %3C/style%3E %3Cg id='BACKGROUND_2'%3E %3Cg%3E %3Cpath class='st0' d='M234.9,437c-111.4,0-202.1-90.7-202.1-202.1c0-111.4,90.7-202.1,202.1-202.1S437,123.5,437,234.9 C437,346.3,346.4,437,234.9,437z M234.9,35.8c-109.8,0-199.1,89.3-199.1,199.1c0,109.8,89.3,199.1,199.1,199.1 S434,344.7,434,234.9C434,125.1,344.7,35.8,234.9,35.8z'/%3E %3C/g%3E %3Cg class='st1'%3E %3Cpath class='st2' d='M234.9,469.3c-18.5,0-37-2.2-54.9-6.5L193,409c13.6,3.3,27.8,4.9,41.9,4.9c18.9,0,37.6-2.9,55.4-8.7 l17.1,52.7C284.1,465.5,259.7,469.3,234.9,469.3L234.9,469.3z M434.7,357.7l-47.2-29.1c17.3-28.1,26.5-60.5,26.5-93.7v-0.5h55.4 v0.5C469.3,278.4,457.4,320.8,434.7,357.7L434.7,357.7z M55.9,235.1H0.5v-0.2c0-43.4,11.9-85.7,34.5-122.5l47.2,29 c-17.2,28.1-26.3,60.4-26.3,93.5L55.9,235.1L55.9,235.1z M413.4,220.7c-2.6-33-14.3-64.5-33.8-91.2l44.8-32.7 c25.6,35,40.9,76.4,44.3,119.6L413.4,220.7L413.4,220.7z M89.9,129.9L45.1,97.4c25.5-35.1,60.1-62.5,100.1-79l21.2,51.2 C135.9,82.2,109.4,103.1,89.9,129.9z M179.3,64.7L162.1,12C185.6,4.4,210,0.5,234.9,0.5h0c18.4,0,36.8,2.2,54.6,6.4l-12.9,53.9 c-13.6-3.2-27.6-4.9-41.7-4.9l0,0C215.9,55.9,197.2,58.9,179.3,64.7L179.3,64.7z M98.8,351.1L98.8,351.1l-42.2,36 c28.2,33,64.9,57.6,106,70.9l17.1-52.7l0,0C147.9,394.9,120,375.9,98.8,351.1z'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E"); background-size: 100% 100%; }
.exam-item .exam-title .exam-icon img { max-width: 60%; max-height: 60%; }
.exam-item .exam-title .exam-name { position: relative; }
.exam-item .exam-title .exam-name::after { content: ""; display: block; width: 75%; height: 1px; position: absolute; bottom: -1rem; left: 0; background-color: rgba(253, 126, 20, 0.25); }
.exam-item .exam-title .exam-name small { display: block; font-size: .65em; }
.exam-item .exam-text { padding-left: 2rem; color: #6c757d; }
@media screen and (min-width: 992px) { .exam-item .exam-text { padding-left: 5.5rem; } }
.exam-item .exam-text label { color: #212529; }
.exam-item .exam-text > div { margin-bottom: 1rem; }
.exam-item .exam-text .btn { margin-right: 0.25rem; }

.exam-item:hover .exam-title .exam-icon::after { animation: rotate 30s linear infinite; }

.exam-item.TA .exam-body { background-color: rgba(204, 241, 255, 0.65); }
.exam-item.TA .exam-title { color: #00bbff; }
.exam-item.TA .exam-title .exam-icon { background: linear-gradient(to right, #1779b8 0%, #2892c9 100%); }
.exam-item.TA .exam-title .exam-name::after { background-color: rgba(0, 187, 255, 0.25); }
.exam-item.TA .exam-title .exam-name small { color: #0039ac; }
.exam-item.TA .btn-primary { background-color: #0039ac; border-color: #0039ac; }
.exam-item.TA .btn-outline-primary { background-color: transparent; border-color: #0039ac; color: #0039ac; }

.exam-item.TI .exam-body { background-color: rgba(204, 238, 212, 0.65); }
.exam-item.TI .exam-title { color: #00ab28; }
.exam-item.TI .exam-title .exam-icon { background: linear-gradient(to right, #91bf42 0%, #cad432 100%); }
.exam-item.TI .exam-title .exam-name::after { background-color: rgba(0, 171, 40, 0.25); }
.exam-item.TI .exam-title .exam-name small { color: #006500; }
.exam-item.TI .btn-primary { background-color: #006500; border-color: #006500; }
.exam-item.TI .btn-outline-primary { background-color: transparent; border-color: #006500; color: #006500; }

.exam-item.WV .exam-body { background-color: rgba(250, 234, 208, 0.65); }
.exam-item.WV .exam-title { color: #e89716; }
.exam-item.WV .exam-title .exam-icon { background: linear-gradient(to right, #f1b13f 0%, #f1db38 100%); }
.exam-item.WV .exam-title .exam-name::after { background-color: rgba(232, 151, 22, 0.25); }
.exam-item.WV .exam-title .exam-name small { color: #773d09; }
.exam-item.WV .btn-primary { background-color: #773d09; border-color: #773d09; }
.exam-item.WV .btn-outline-primary { background-color: transparent; border-color: #773d09; color: #773d09; }

.modal.exam-item { border-color: transparent; box-shadow: none; }
.modal.exam-item .modal-content { background-color: transparent; border-color: transparent; }
.modal.exam-item .modal-header, .modal.exam-item .modal-footer { border-color: transparent; }
.modal.exam-item .btn-close { background-color: transparent; border-color: transparent; }

.modal.exam-item.TA .exam-body { background-color: #d9eef3; }

.modal.exam-item.TI .exam-body { background-color: #d9ecd3; }

.modal.exam-item.WV .exam-body { background-color: #fbe9d0; }

.user-data { background: rgba(255, 255, 255, 0.75); border-radius: 0.375rem; padding: 1rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); color: #212529; text-align: center; }
.user-data.sticky-top { top: 1rem; }
.user-data .avater { width: 5rem; height: 5rem; font-size: calc(5rem*.4); margin: 0 auto; background-color: #fd7e14; color: #fff; }
.user-data .user-data-name { text-align: center; margin-top: .25rem; margin-bottom: 1rem; color: #fd7e14; }
.user-data .user-data-list { display: inline-block; list-style: none; margin: 0; padding: 0; font-size: .9rem; margin-bottom: 1rem; text-align: left; }
.user-data .user-data-list li { margin-bottom: .5rem; }

.index { display: flex; justify-content: space-around; min-height: calc(100vh - (3rem + 0.3125rem*2 + 0.5rem*2)); overflow-x: hidden; }

.intro-panel .intro-item { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; padding-top: 1rem; padding-bottom: 1rem; }
.intro-panel .intro-img { position: relative; margin-bottom: .5rem; }
.intro-panel .intro-img::before { content: ""; display: block; width: 0; height: 100%; padding-right: 78.0141843972%; background-color: #fff; border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; box-shadow: 0 0 25px rgba(253, 126, 20, 0.25); }
.intro-panel .intro-img > img { max-height: 25vh; }
.intro-panel .intro-img .intro-img-title { display: block; width: 78.0141843972%; text-align: center; padding: .25rem; background-color: #fd7e14; color: #fff; border-radius: 0.5rem; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.intro-panel .intro-title { color: #fff580; font-size: 1.5rem; font-weight: 700; letter-spacing: .1em; text-shadow: 1px 1px #653208, -1px -1px #653208, -1px 1px #653208, 1px -1px #653208, 2px 2px #fd7e14, 3px 3px #fd7e14, 4px 4px #fd7e14; }
.intro-panel .intro-text { font-size: .9rem; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.75); text-align: center; }

.login-panel { display: flex; justify-content: center; align-items: center; }
.login-panel .login-panel-frame { background-color: rgba(255, 255, 255, 0.75); border-radius: 0.1875rem 1.875rem 1.875rem 1.875rem; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 7rem), calc(100% - 1.5rem) calc(100% - 7rem), calc(100% - 1.5rem) calc(100% - 6rem), calc(100% - .5rem) calc(100% - 6rem), calc(100% - .5rem) calc(100% - 7rem), 100% calc(100% - 7rem), 100% calc(100% - 5.5rem), calc(100% - 1.5rem) calc(100% - 5.5rem), calc(100% - 1.5rem) calc(100% - 4.5rem), calc(100% - .5rem) calc(100% - 4.5rem), calc(100% - .5rem) calc(100% - 5.5rem), 100% calc(100% - 5.5rem), 100% calc(100% - 4rem), calc(100% - 1.5rem) calc(100% - 4rem), calc(100% - 1.5rem) calc(100% - 3rem), calc(100% - .5rem) calc(100% - 3rem), calc(100% - .5rem) calc(100% - 4rem), 100% calc(100% - 4rem), 100% 100%, 30% 100%, calc(30% - 1rem) calc(100% - 1rem), calc(10% + 1rem) calc(100% - 1rem), 10% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 7rem), calc(100% - 1.5rem) calc(100% - 7rem), calc(100% - 1.5rem) calc(100% - 6rem), calc(100% - .5rem) calc(100% - 6rem), calc(100% - .5rem) calc(100% - 7rem), 100% calc(100% - 7rem), 100% calc(100% - 5.5rem), calc(100% - 1.5rem) calc(100% - 5.5rem), calc(100% - 1.5rem) calc(100% - 4.5rem), calc(100% - .5rem) calc(100% - 4.5rem), calc(100% - .5rem) calc(100% - 5.5rem), 100% calc(100% - 5.5rem), 100% calc(100% - 4rem), calc(100% - 1.5rem) calc(100% - 4rem), calc(100% - 1.5rem) calc(100% - 3rem), calc(100% - .5rem) calc(100% - 3rem), calc(100% - .5rem) calc(100% - 4rem), 100% calc(100% - 4rem), 100% 100%, 30% 100%, calc(30% - 1rem) calc(100% - 1rem), calc(10% + 1rem) calc(100% - 1rem), 10% 100%, 0% 100%); }
@media screen and (min-width: 576px) { .login-panel .login-panel-frame { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 7rem), calc(100% - 1.5rem) calc(100% - 7rem), calc(100% - 1.5rem) calc(100% - 6rem), calc(100% - .5rem) calc(100% - 6rem), calc(100% - .5rem) calc(100% - 7rem), 100% calc(100% - 7rem), 100% calc(100% - 5.5rem), calc(100% - 1.5rem) calc(100% - 5.5rem), calc(100% - 1.5rem) calc(100% - 4.5rem), calc(100% - .5rem) calc(100% - 4.5rem), calc(100% - .5rem) calc(100% - 5.5rem), 100% calc(100% - 5.5rem), 100% calc(100% - 4rem), calc(100% - 1.5rem) calc(100% - 4rem), calc(100% - 1.5rem) calc(100% - 3rem), calc(100% - .5rem) calc(100% - 3rem), calc(100% - .5rem) calc(100% - 4rem), 100% calc(100% - 4rem), 100% 100%, 30% 100%, calc(30% - 1rem) calc(100% - 1rem), calc(10% + 1rem) calc(100% - 1rem), 10% 100%, 0% 100%, 0% calc(6rem + 30%), 1rem calc(6rem + 30% - 1rem), 1rem calc(6rem + 1rem), 0% 6rem); clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 7rem), calc(100% - 1.5rem) calc(100% - 7rem), calc(100% - 1.5rem) calc(100% - 6rem), calc(100% - .5rem) calc(100% - 6rem), calc(100% - .5rem) calc(100% - 7rem), 100% calc(100% - 7rem), 100% calc(100% - 5.5rem), calc(100% - 1.5rem) calc(100% - 5.5rem), calc(100% - 1.5rem) calc(100% - 4.5rem), calc(100% - .5rem) calc(100% - 4.5rem), calc(100% - .5rem) calc(100% - 5.5rem), 100% calc(100% - 5.5rem), 100% calc(100% - 4rem), calc(100% - 1.5rem) calc(100% - 4rem), calc(100% - 1.5rem) calc(100% - 3rem), calc(100% - .5rem) calc(100% - 3rem), calc(100% - .5rem) calc(100% - 4rem), 100% calc(100% - 4rem), 100% 100%, 30% 100%, calc(30% - 1rem) calc(100% - 1rem), calc(10% + 1rem) calc(100% - 1rem), 10% 100%, 0% 100%, 0% calc(6rem + 30%), 1rem calc(6rem + 30% - 1rem), 1rem calc(6rem + 1rem), 0% 6rem); } }

.intro-panel { position: relative; }

.intro-line-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

#intro-line-path { stroke: #ff8800; stroke-width: 5; fill: none; stroke-linecap: round; stroke-dasharray: 0; stroke-dashoffset: 0; transition: stroke-dashoffset 2s ease; }

@keyframes draw-intro-line { from { stroke-dashoffset: var(--line-length); }
  to { stroke-dashoffset: 0; } }
.intro-line-animate { animation: draw-intro-line 5s linear forwards; }

.apply { padding-top: 3rem; padding-bottom: 3rem; }

.nice-bot-icon { position: relative; }
.nice-bot-icon::after { content: ""; display: block; width: 4rem; height: 4rem; background-image: url("../img/nice-hi.apng"); background-size: 80% auto; background-repeat: no-repeat; background-position: center; position: absolute; top: 50%; left: 100%; transform: translate(-1.5rem, -50%); }