/* css variable */

:root {
  --theme-dark: #df542f;
  --theme-light: #fff4ef;

  --gray-dark: #555;
  --gray-middle: #d9d9d9;
  --gray-light: #f9f9f9;
}

/* css reset */

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  color: var(--gray-dark);
  background: var(--gray-light);
  cursor: default;
}

a {
  color: var(--gray-dark);
  text-decoration: none;
  transition: all .3s;
}

a:hover {
  color: var(--theme-dark);
}

input[type='button'] {
  color: inherit;
  background: inherit;
  border: 1px solid var(--gray-middle);
  cursor: pointer;
}

input[type='text'],
input[type='password'] {
  color: inherit;
  background: inherit;
  border: 1px solid var(--gray-middle);
  outline: none;
}

[type='button'],
[type='checkbox'],
[type='radio'],
label {
  cursor: pointer;
}

/* common class */

/* 醒目的标题识别块 */

.titleblock::before {
  content: '';
  width: 3px;
  height: 0.8em;
  margin-right: 10px;
  background: var(--theme-dark);
  transition: all .3s;
  display: inline-block;
}

/* 背景遮罩 */

.cloak {
  width: 100%;
  height: 100%;
  background: #666666cc;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

/* css animation */

/* 顺时针旋转 */

.clockwise {
  --angle: 90deg;
  animation: clockwise .3s ease-out forwards;
}

@keyframes clockwise {
  form {
    transform: rotate(0)
  }

  to {
    transform: rotate(var(--angle))
  }
}

/* 逆时针旋转 */

.anticlockwise {
  --angle: 90deg;
  animation: anticlockwise .3s ease-in forwards;
}

@keyframes anticlockwise {
  from {
    transform: rotate(var(--angle))
  }

  to {
    transform: rotate(0)
  }
}

/* 最大高度减少 */

.heightless {
  --maxheight: 1000px;
  animation: heightless .3s linear forwards;
  overflow: hidden;
}

@keyframes heightless {
  from {
    max-height: var(--maxheight);
    opacity: 1;
  }

  to {
    max-height: 0;
    opacity: 0;
  }
}

/* 最大高度增大 */

.heightmore {
  --maxheight: 1000px;
  animation: heightmore .3s linear forwards;
  overflow: hidden;
}

@keyframes heightmore {
  from {
    max-height: 0;
    opacity: 0;
  }

  to {
    max-height: var(--maxheight);
    opacity: 1;
  }
}

/* 弹出 */

.popup {
  animation: popup .3s forwards;
}

@keyframes popup {
  0% {
    transform: scale(0);
  }

  85% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

/* 缩回 */

.shrink {
  animation: shrink .3s forwards;
}

@keyframes shrink {
  0% {
    transform: scale(1);
  }

  85% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(0);
  }
}

/* 淡入 */

.slowshow {
  animation: slowshow .3s forwards;
}

@keyframes slowshow {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* 淡出 */

.slowopacity {
  animation: slowopacity .3s forwards;
}

@keyframes slowopacity {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* 上升显示 */

.updisplay {
  animation: updisplay .3s forwards;
}

@keyframes updisplay {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* 下降隐藏 */

.downhide {
  animation: downhide .3s forwards;
}

@keyframes downhide {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }

  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* 上升隐藏 */

.uphide {
  animation: uphide .3s forwards;
}

@keyframes uphide {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }

  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* 下降显示 */

.downdisplay {
  animation: downdisplay .3s forwards;
}

@keyframes downdisplay {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* 向左显示 */

.leftdisplay {
  animation: leftdisplay .3s forwards;
}

@keyframes leftdisplay {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* 向右显示 */

.rightdisplay {
  animation: rightdisplay .3s forwards;
}

@keyframes rightdisplay {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@media (max-width: 750px) {
  .box {
    width: 100% !important;
  }
}