@charset "UTF-8";
html {
  font-size: 14px;
  height: 100%; }

body {
  position: relative;
  color: #FFFFFF;
  background: #001c28;
  height: 100%; }

a, a:hover {
  color: #00B3C3;
  text-decoration: none; }

a:hover, .link:hover {
  opacity: 0.8; }

.link {
  cursor: pointer; }

/* 容器 */
.page-section {
  width: 100%;
  box-sizing: border-box; }

.page-loading {
  padding-top: 20%; }

.flex {
  display: flex; }

/* 字体 */
.fs-10 {
  font-size: 10px; }

.fs-11 {
  font-size: 11px; }

.fs-12 {
  font-size: 12px; }

.fs-14 {
  font-size: 14px; }

.fs-16 {
  font-size: 16px; }

.fs-18 {
  font-size: 18px; }

.fs-20 {
  font-size: 20px; }

.fs-22 {
  font-size: 22px; }

.fs-24 {
  font-size: 24px; }

.fs-28 {
  font-size: 28px; }

.fs-30 {
  font-size: 30px; }

.fs-36 {
  font-size: 36px; }

.fs-40 {
  font-size: 40px; }

/* 字体颜色 */
.text-green {
  color: #00B3C3; }

.text-blue {
  color: #4385e7; }

/* 动画元素 */
.ani {
  opacity: 0; }

@keyframes ani-scale {
  from {
    transform: scale(1); }
  to {
    transform: translateY(-3px); } }

/* 自定义 */
.case-container {
  min-height: 150px; }

.case-container .item {
  padding: 5px; }

.case-container .item:hover {
  position: relative;
  animation: ani-scale 200ms linear forwards;
  cursor: pointer;
  background-color: #00B3C3; }

.case-container .item.header:hover {
  position: relative;
  cursor: default;
  animation: none;
  background-color: transparent; }

.offcanvas {
  box-shadow: -4px -1px 3px rgba(0, 0, 0, 0.5); }

.offcanvas .btn-close {
  background-color: white;
  top: 0;
  right: 0;
  padding: 12px;
  z-index: 1000;
  border-radius: 0; }

.offcanvas-body {
  background-color: #001c28;
  color: #FFFFFF; }

.offcanvas-end.col-12 {
  width: 100%; }

@media (min-width: 992px) {
  .offcanvas-end.col-lg-6 {
    flex: 0 0 auto;
    width: 50%; } }