first commit

css/global.css

@@ -0,0 +1,196 @@
+@font-face {
+    font-family: electronicFont;
+    src: url(../font/DS-DIGIT.TTF);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    text-decoration: none;
+}
+
+li {
+    list-style: none;
+}
+
+.clearfix:after {
+    content: "";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+}
+
+.header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 100;
+    height: 100px !important;
+    width: 100%;
+    transition: 0.5s;
+}
+
+.show {
+    margin: 0 auto;
+    padding: 0 50px;
+    max-width: 1600px;
+}
+
+.header_box {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 100;
+    height: 0;
+}
+
+.header_box:before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    background-size: 100% 100%;
+    content: "";
+    transition: 0.5s;
+}
+
+.header .show {
+    height: 100%;
+    max-width: 100%;
+    justify-content: space-between;
+    display: flex;
+    align-items: center;
+}
+
+.header .right{
+    margin: 0 auto;
+}
+
+.header .right .right_under {
+    display: flex;
+    align-items: center;
+    /* justify-content: flex-end; */
+}
+
+.header .show {
+    background-color: #fff;
+}
+
+.header .on {
+    height: 100px !important;
+    background: none;
+    background-color: #ffffff;
+}
+
+#nav {
+    display: flex;
+    align-items: center;
+    /* position: relative; */
+    z-index: 1000;
+    padding: 0;
+    width: 100%;
+    /* border: 2px solid red; */
+}
+
+#nav ul {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+#nav ul li {
+    /* position: relative; */
+    /* padding: 0 50px; */
+    z-index: 0;
+    height: 100px;
+}
+
+#nav ul li:hover{
+    background-color: rgb(90, 22, 22);
+}
+
+#nav ul li a {
+    /* position: relative; */
+    z-index: 2;
+    display: block;
+    padding: 0;
+    height: 100px;
+}
+
+#nav ul li a:hover{
+    color: #fff;
+}
+
+#nav ul li h3 {
+    z-index: 1;
+    width: 195px;
+    height: 100px;
+    line-height: 100px;
+    color: #000000;
+    text-align: center;
+    font-family: SourceHanSerifCN-Bold;
+    transition: 0.36s;
+}
+
+#nav ul li h3:hover{
+    color: #fff;
+}
+
+#nav ul li h3:after {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 3px;
+    color: #fff;
+    content: "";
+    -webkit-transition: all 0.5s;
+    transition: all 0.5s;
+}
+
+#nav ul li:hover h3:after {
+    width: 160px;
+    transform: translateX(-80px);
+}
+
+#nav li.on>a:before {
+    visibility: hidden;
+    opacity: 0;
+}
+
+#nav li.on>a:after {
+    visibility: visible;
+    width: 16px;
+    opacity: 1;
+}
+
+.header_box #nav ul li h3 {
+    color: #fff;
+    cursor: pointer;
+}
+
+.right_on_list li a {
+    display: flex;
+    width: 83px;
+    height: 26px;
+    transition: 0.5s;
+    align-items: center;
+    justify-content: center;
+}
+
+.right_on_list {
+    display: flex;
+    margin-left: 0.24rem;
+    align-items: center;
+}
+
+.right_on_list li {
+    margin-left: 0.01rem;
+}