@font-face {src: url("../font/fzqkb.ttf");font-family: 'fzqk';font-weight: bold}
@font-face {src: url("../font/fzqkm.ttf");font-family: 'fzqk';font-weight: normal}
@font-face {src: url("../font/HYJinLingKeJing.ttf");font-family: 'HYJinLingKeJing';}

header {position: absolute; top: 0; left: 0; height: 4.479rem; width: 100%; z-index: 12000; background: linear-gradient(to bottom, rgba(0,0,0,.5), transparent); display: flex; align-items: center; justify-content: center;}
header .logo {position: relative; margin-left: 2.2rem; top:0.8rem; z-index: 2;background: url(../image/logo.png) center / cover no-repeat; width: 7.1875rem; height: 5.521rem;}
.header_bg {position: absolute; left: 0; top: 0; background: url("../image/top_bg.png") center / 100% 100%; width: 100%; height: 4.479rem; opacity: 0; pointer-events: none; transition: .3s opacity;}
header:hover .header_bg {opacity: 1}
header .header-box {display: flex;align-items: center;justify-content: space-between;width: 100%;}
header .nav {position: absolute; display: flex; justify-content: space-between; top: 4.3rem;left: 0; width: 100%; height: 0; background: url("../image/nav_list_bg.png") center -1.1rem / cover no-repeat; mask-image: linear-gradient(to bottom, black 70%, transparent); overflow: hidden; margin-top: 0px; transition: .3s height;}
header .h_nav_box:hover + .nav, .nav:hover {height: 29.583rem;}
header .l-zw {width: 9.3875rem;}
header .r-zw {width: 10.521rem;}
header .r-zw2 {width: 13.542rem;}
header .m-f {display: flex}
header .menu, header .btn_reserve {display: none}
header .btn_download {position: relative; background: url("../image/button_download.png") center / cover no-repeat; width: 13.542rem; height: 4.271rem;}
header .h_nav_box {position: relative; font-family: 'fzqk', serif; font-size: 1.25rem; color: #CFCFCF; width: 58.583rem;}
header .h_nav_box .h_nav {position: relative; overflow: visible; width: 8.333rem; height: 4rem; line-height: 4.7rem; text-align: center;}
header .h_nav_box .h_nav:hover::before, header .h_nav_box .h_nav.active::before {content: ''; position: absolute; left: 0; bottom: 0; background: url("../image/nav_active.png") center / cover no-repeat; width: 8.333rem; height: 3.125rem;}
header .h_nav_box .h_nav:hover .name, header .h_nav_box .h_nav.active .name {background: linear-gradient(to top, #FFF6C4, #C1A360);-webkit-background-clip: text;color: transparent; text-shadow: 0 0 0.5rem #928850;}
header .h_nav_box .e-name {position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: 'HYJinLingKeJing', serif; font-size: 0.833rem; color: transparent; background-image: linear-gradient(to bottom, #7D704C, rgba(125, 112, 76, 0));  -webkit-background-clip: text;}
header .h_nav_box .name {position: relative;}
header .btn_jl {position:relative; background: url("../image/login_btn.png") center / cover no-repeat; width: 10.521rem; height: 4.375rem;}
header .nav .nav_item {display: none}
header .nav .flex-box {position: relative; width: 8.385rem; padding-top: 1.042rem; flex-wrap: nowrap; flex-direction: column;justify-content: flex-start;}
header .nav .flex-box::after {content: ''; position: absolute; right: 0; top: 1rem; width: 0.052rem; height: 17.1875rem; background: linear-gradient(to bottom, transparent, rgba(255, 255,255,0.2), transparent);}
header .nav .flex-box:nth-of-type(3)::before {content: ''; position: absolute; left: -0.052rem; top: 1rem; width: 0.052rem; height: 17.1875rem; background: linear-gradient(to bottom, transparent, rgba(255, 255,255,0.2), transparent);}
header .nav .nav_sub_item {position: relative; width: 100%; font-size: 1.042rem; font-family: 'HYJinLingKeJing', serif; color: #838175; height: 3rem; line-height: 3rem; text-align: center; overflow: visible}
header .nav .nav_sub_item:hover {color: #F0A962}
header .nav .h_code:hover .hov_card {opacity: 1}
header .nav .hov_card {position: absolute; opacity: 0; transition: .3s opacity; pointer-events: none; left: 7rem; top: calc(50% - 4rem); background: url("../image/top_one_wave.png") center / cover no-repeat; width: 7.96875rem; height: 10.573rem;}
header .nav .hov_card.sec {background: url("../image/top_second_wave.png") center / cover no-repeat; width: 13.59375rem; height: 10.573rem;}
header .nav .hov_card .hov_tit {position: absolute; left: 0; top: 0; width: 100%; padding-left: 1rem; height: 3.3rem; text-align: center; line-height: 3.3rem; font-size: 1.042rem; color: #CFCFCF; font-family: HYJinLingKeJing, serif;}
header .nav .code {position: relative; width: 5.46875rem; height: 5.46875rem;}
header .nav .sec .code1 {left: 1.7rem;}
header .nav .code1 {position: absolute;left: 1.85rem;bottom: 1.9rem;}
header .nav .code2 {position: absolute;left: 7.5rem;bottom: 1.9rem;}
header .nav .code .name {position: absolute; bottom: -1rem; left: 0; width: 100%; text-align: center; color: #838175; font-size: 0.833rem; line-height: 0.833rem;}
header .nav .b-code {background: url("../image/b-code.png") center / cover no-repeat;}
header .nav .d-code {background: url("../image/dy-code.png") center / cover no-repeat}
header .nav .wb-code {background: url("../image/wb-code.png") center / cover no-repeat}
header .nav .qw-code {background: url("../image/qw-code.png") center / cover no-repeat}
header .nav .vx-code {background: url("../image/vx-code.png") center / cover no-repeat}
header .nav .quest-code {background: url("../image/quest-code.png") center / cover no-repeat}

.phone header {position: fixed; top: 0; background: none; height: 12.8rem; padding-left: 0;}
.phone header .h_nav_box {display: none}
.phone header .btn_download {display: none}
.phone header .header-box {width: 100rem; max-width: 100rem}
.phone header .m-f {display: block}
.phone header .header_bg {opacity: 1; height: 12.8rem;}
.phone header .btn_jl {display: none}
.phone header .nav {display: none; height: calc(100vh - 12.8rem); width: 100%; top: 12.8rem !important; margin-top: 0!important; padding: 0; mask-image: none; background: url("../image/p_nav_list_bg.png") center 0 / cover no-repeat;}
.phone header .btn_reserve {position: relative; display: block; background: url("../image/p_btn_reserve.png") center / cover no-repeat; width: 28.8rem; height: 9.6rem;}
.phone header .menu {position: relative; display: block; background: url("../image/menu.png") center / cover no-repeat; width: 14.4rem; height: 14.4rem; filter: grayscale(1)}
.phone header .menu.active {filter: grayscale(0)}
.phone header .logo {position: absolute; margin-left: 0; width: 17.07rem; height: 12.8rem; left: calc(50% - 8.53rem); top: 0;}
.phone header .nav .nav_item {display: block; font-size: 4.27rem; font-family: 'fzqk', serif; color: #CFCFCF; text-align: center; margin: 2.8rem 0;}
.phone header .nav .flex-box::after {content: none}
.phone header .nav .flex-box:nth-of-type(3)::before {content: none}
.phone header .nav .flex-box {flex-direction: row; flex-wrap: wrap; width: 100%; padding: 0 6.4rem;}
.phone header .nav .nav_sub_item {font-size: 3.2rem; width: 28.8rem; margin-bottom: 1rem; height: 5rem; line-height: 5rem;}
.phone header .nav .nav_sub_item::after {content: ''; position: absolute; right: 0; top: 0; width: 0.27rem; height: 4.27rem; background: rgba(255, 255, 255, .2);}
.phone header .nav .nav_sub_item:nth-of-type(1)::before,
.phone header .nav .nav_sub_item:nth-of-type(4)::before,
.phone header .nav .nav_sub_item:nth-of-type(7)::before {content: ''; position: absolute; left: 0; top: 0; width: 0.27rem; height: 4.27rem; background: rgba(255, 255, 255, .2);}
.phone header .nav .hov_card {display: none}