@import url("reset.css");
@import url("animate.min.css");
@import url("../js/layui/css/layui.css");
@import url("//at.alicdn.com/t/font_1110676_t0yxsqza6s.css");
@font-face {
   font-family: "QXyingbikai";
   src: url("../font/QXyingbikai.ttf"); /* IE9 */
   src: url("../font/QXyingbikai.ttf") format("embedded-opentype"), /* IE6-IE8 */ url("../font/QXyingbikai.ttf") format("woff2"),
      url("//at.alicdn.com/t/font_1110676_2zuhexz6p7.woff?t=1584603518504") format("ttf"), url("../font/QXyingbikai.ttf") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
}
body {
   overflow-x: hidden;
   position: relative;
   background: url(../images/menu_bg.jpg) no-repeat center center;
   background-size: cover;
   animation: bg_move 200s linear infinite;
}
@keyframes bg_move {
   0% {
      opacity: 0.9;
      background-position: 30% center;
   }
   1% {
      opacity: 1;
   }
   100% {
      background-position: 100% 0;
   }
}
body.transparent-head {
   background-size: cover;
   background-repeat: no-repeat;
}

body.transparent-head .page-header {
   background: transparent !important;
   -webkit-box-shadow: unset !important;
   box-shadow: unset !important;
}

.no-scorllbar::-webkit-scrollbar {
   display: none;
}

.touchFeedback,
.menu-block > dt:not(.col-text) {
   -webkit-transition: opacity 0.1s linear, -webkit-transform 0.1s linear;
   transition: opacity 0.1s linear, -webkit-transform 0.1s linear;
   transition: transform 0.1s linear, opacity 0.1s linear;
   transition: transform 0.1s linear, opacity 0.1s linear, -webkit-transform 0.1s linear;
}

.touchFeedback:active,
.menu-block > dt:active:not(.col-text) {
   -webkit-transform: scale(0.8);
   transform: scale(0.8);
   opacity: 0.5;
}

.fl-between,
.page-header {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
}

.fl-center {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}

.fl-start {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   justify-content: flex-start;
}

.fl-around {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: distribute;
   justify-content: space-around;
}

.out-frame {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
}

.mid-center {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.menu-block {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   -ms-flex-line-pack: start;
   align-content: flex-start;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   justify-content: flex-start;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   width: 1000px;
   max-height: 100rem;
   overflow-y: auto;
}

.menu-block::-webkit-scrollbar {
   display: none;
}

.menu-block > dt {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;

   user-select: none;
   width: 240px;
   height: 155px;
   margin: 0 13px 12px 0;
   text-align: center;
   color: #ffffff;
   -webkit-transition: -webkit-transform 0.1s linear;
   transition: -webkit-transform 0.1s linear;
   transition: transform 0.1s linear;
   transition: transform 0.1s linear, -webkit-transform 0.1s linear;
   background-size: 100%;
}
.menu-block > dt:not(.col-text) {
   cursor: pointer;
}

.menu-block > dt:not(.col-text) a,
.menu-block > dt:not(.col-text) .nav {
   width: 100%;
   height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
}

.menu-block > dt i {
   color: #fff;
   font-size: 41px;
   padding: 36px 0 29px;
}

.menu-block > dt span {
   color: #fff;
   font-size: 16px;
}

.menu-block .col-text {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: distribute;
   justify-content: space-around;
   font-family: QXyingbikai;
   font-size: 25px;
   font-style: normal;
}
.menu-block .col-text a {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: distribute;
   justify-content: space-around;
   font-family: QXyingbikai;
   font-size: 25px;
   font-style: normal;
   width: 67%;
   height: 100%;
   color: #fff;
}
.menu-block .col-text a:hover {
   color: #fff;
}
.menu-block .col-text em {
   width: 3rem;
   word-break: break-all;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   font-style: normal;
   font-size: 25px;
}
.menu-block dt:nth-child(4n-3) {
   background-color: rgba(154, 118, 70, 0.8);
}
.menu-block dt:nth-child(4n-2) {
   background-color: rgba(124, 36, 35, 0.8);
}
.menu-block dt:nth-child(4n-1) {
   background-color: rgba(82, 60, 62, 0.8);
}
.menu-block dt:nth-child(4n) {
   background-color: rgba(39, 53, 64, 0.8);
   margin-right: 0;
}
.tips-nav-box {
   font-size: 16px;
   line-height: 2;
   display: flex;
   flex-direction: column;
}
.tips-nav-box a {
   padding: 0 10px;
   box-sizing: border-box;
}
.tips-nav-box a:hover {
   color: #a64c49;
   background-color: #fff;
}

.logo {
   width: 187px;
   position: absolute;
   top: 2%;
   left: 2%;
}
.logo img {
   /*width: 100%;*/
   object-fit: contain;
}