/* version 1.0 */

:root {
  --global-bodyBgColor: #394f8a;
  --global-headerBgColor: #00ddff;
  --global-neckerBgColor: #79b565;
    --global-menuboxBgColor: #ffff00;
  --global-mainerBgColor: #0049B7;
  --global-footerBgColor: #79b565;
  --global-groupBgColor: #79b565;
  --global-studentBgColor: green;
  --global-frontBgColor: green;
  --global-backBgColor: #FFFFFF;
}

* {
  margin:0; padding:0;
  box-sizing:border-box;
}

html {
  width:100%; height:100%;
}

body {
  position: relative;
  margin:0; padding:0;
  //padding: 1vw;
  width:100%;
  background-color: var(--global-bodyBgColor);
  //background: linear-gradient(180deg, #4b6cb7 0%, #182848 100%);
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* 标准语法 */
  color: black;
}

#screener {
  position: absolute;
  left: 0; top: 0;
  display: block;
  width:100%;
  height:100%;
  padding: 0;
  margin: 0 auto;
  //visibility: hidden;
  //background: linear-gradient(180deg, #4b6cb7 0%, #182848 100%);
  z-index: -1;
}

.container {
  position: relative;
  width:100%;
  display:flex;
  flex-direction: column;
  //padding: 1vw;
}

#header {
  padding: 0vw 0vw 1vw 0vw;
  width:100%; height: min(20vh,20vw);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: white;
  //background-color: val(--global-headerBgColor);
}

#necker {
  padding: 0.5vw;
  width:100%;
  background-color: var(--global-neckerBgColor);
  display: flex;
  justify-content: space-between;
	align-items: center;
	gap: 0.5vw;
  //display: none;
}

@keyframes blink {
  0% {
    border-radius: 0%;
    box-shadow: none;
  }
  100% {
    border-radius: 50%;
    box-shadow: inset 0 0 16px #000;
  }
}

.menu-box {
  background: var(--global-menuboxBgColor);
  border: 1px solid black;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: min(3vh,2vw);
  border-radius: 0.4vw;
  cursor: pointer;
}

.menu-box-down { background: #FF5733; color: white; }

.menu-box:nth-child(1){
  background-color: #58D68D;
}
.menu-box:nth-child(7){
  background: linear-gradient(180deg, #FC466B 0%, #3F5EFB 100%);
  color: white;
}
.menu-box:nth-child(10){
  background: linear-gradient(180deg, #9ebd13 0%, #008552 100%);
  color: white;
}

#mainer {
  position: relative;
  padding:1vw 0vw;
  width:100%;
  padding: 1vw;
  //background-color: black;
  height: 100%;
}

#shower {
  width: 100%;
  position: relative;
  display: block;
  //background-color: red;
  display: grid;
  grid-template-columns: 1fr;
  font-size:1.5em;
  width: 100%;
}

#shower > div {
  display: grid;
  grid-template-columns: 1fr 2fr repeat(10,1fr) 1.5fr;
  grid-template-rows: 1fr;
  font-size: 1.5em;
  width: 100%;
  color: white;
}

#shower > div > div {
  display: flex;
  flex-direction: center;
  justify-content: center;
  border: 1px solid white;
  padding: 0.3em 0;
}

#footer {
  height:4%; width:100%;
  padding: 0.5vw;
  background-color: var(--global-footerBgColor);
  display: grid;
  grid-template-columns: 8fr 2fr;
  grid-template-rows: 1fr;
  grid-gap: 0.5vw;
}

#logo {
  height: 100%;
  width: 30%;
  width: 24.5vw;
  container-type: size;
  display: flex;
  justify-content: center;
  align-items: center;
}

#logo-image {
  height: 80cqh;
  width: 80cqh;
  background-image: url(../../../img/logo_cc.png);
  background-size: auto 100%;
  background-repeat: no-repeat;
}

#title {
  height:100%;
  width: 50%;
  width: 58.8vw;
  font-size: 5.5vw;
  font-size: min(15vh,5.5vw);
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 6px;
}

.clockBigger {
  animation: bigger 5s ease backwards;
}

@keyframes bigger {
  0% { height: 70%; }
  12.3% { height: 70%; }
  14% { height: 100%; }
  16.4% { height: 70%; }
  45.3% { height: 70%; }
  46.2% { height: 100%; }
  47.1% { height: 70%; }
  47.8% { height: 70%; }
  49.1% { height: 100%; }
  50.3% { height: 70%; }
  80.5% { height: 70%; }
  82.1% { height: 100%; }
  83.7% { height: 70%; }
  100% { height: 70%; }
}

#button {
  margin: 0; padding: 1vw 0 1vw 1vw;
  width: 14%;
  width: 14.7vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1vw;
}

#fs-button {
  //width: 50%; height: 100%;
  width: 5vw; height: 5vw;
  background: #FF5733;
  cursor: pointer;
  font-size: 1.8vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

#fn-button {
  position: relative;
  width: 5vw; height: 5vw;
  background: #FF5733;
  
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: 0;
}

#fn-button > div:nth-child(2) {
  cursor: pointer;
  z-index: 12;
  font-size: 1.8vw;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

#fn-button > div:nth-child(1) {
  position: absolute;
  top: 50%; left: 0%;
  width:100%;
  padding: 1vw;
  background: #FF5733;
  z-index: 10;
  padding: 2.5vw 0 1vw;
  font-size: 1.8vw;
  text-align: center;
}

#fn-button > div:nth-child(1) > span {
  display: block;
  width: 100%;
  padding: 0.2vw;
  //background-color: pink;
}

#name-box { padding: 0.5vw; width: 100%; height: 100%; background-color: yellow; overflow: hidden; font-size: 1.3vw; line-height: 100%; }

#func-box { width: 100%; height: 100%; background-color: #FF5733; color: white; font-size: 1.8vw; display: flex; justify-content: center; align-items: center; cursor: pointer; font-weight: bold; }

.lot-box {
  position: relative;
  font-size: min(4vh,2.5vw);
  border: 0px solid transparent;
  transition:0.1s;
  transform-style: preserve-3d;
  position: relative;
  cursor: pointer;
}

.rotating {
  transform: rotateY(180deg); 
  //box-shadow: 0 0 16px yellow; /* 水平偏移 垂直偏移 模糊距离 颜色 */
}

.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0; left: 0;
}

.front {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2; /* for firefox 31 */
  transform: rotateY(0deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: #27ae60;
  border: 0px solid white;
  //color: white;
}

.back {
  width: 100%; height: 100%;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--global-backBgColor);
  border: 1px solid green;
}