@font-face {
    font-family: 'HYXLSJ';
    src: url(../fonts/HYXLSJ.TTF);
}

body{
    /* font-family: SOURCEHANSANSCN; */
    font-family: "microsoft Yahei";
    /* letter-spacing: 1px; */
    font-smooth: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; /* For Firefox on macOS */
    text-rendering: optimizeLegibility;
}

.header{
    width: 100%;
    height: 90px;
    left: 0;
    top: 0;
    z-index: 20;
    position: fixed;
    display: none;
    font-family: 'HYXLSJ';
}

.header-inner{
    width: 100%;
    height: 90px;
    background-color: #191919;
    position: relative;
    z-index: 2;
    /* box-shadow: 0px 0px 80px rgba(85, 62, 30, .5); */
}

.logo{
    margin-top: 15px;
    margin-left: 50px;
    margin-right: 50px;
}

.header-list{
    display: inline-block;
    vertical-align: top;
    float: right;
    margin-right: 55px;
    height: 90px;
}

.header-list >li{
    display: inline-block;
    position: relative;
    width: 110px;
    height: 90px;
    line-height: 90px;
    margin: 0 20px;
    vertical-align: top;
    margin-top: 0px;
    cursor: pointer;
}

.header-list >li a{
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: white;
}

.header-list >li:hover:after{
    display: inline-block;
    content: '';
    width: 113px;
    height: 4px;
    background: url(../img/pc/nav-hl.png) center center no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    margin-left: -56px;
    bottom: 24px;
}

.header-list >li:nth-child(1){
    background: url(../img/pc/header-bg.png) 0px 31px no-repeat;
    background-size: 965px 114px;
}

.header-list >li:nth-child(2){
    background: url(../img/pc/header-bg.png) -138px 31px no-repeat;
    background-size: 965px 114px;
}

.header-list >li:nth-child(3){
    background: url(../img/pc/header-bg.png) -260px 31px no-repeat;
    background-size: 965px 114px;
}

.header-list >li:nth-child(4){
    background: url(../img/pc/header-bg.png) -385px 31px no-repeat;
    background-size: 965px 114px;
}

.header-list >li:nth-child(5){
    background: url(../img/pc/header-bg.png) -545px 31px no-repeat;
    background-size: 965px 114px;
}

.header-list >li:nth-child(6){
    background: url(../img/pc/header-bg.png) -705px 31px no-repeat;
    background-size: 965px 114px;
}

.header-list >li:nth-child(7){
    background: url(../img/pc/header-bg.png) -860px 31px no-repeat;
    background-size: 965px 114px;
}


.header-list >li:hover:nth-child(1){
    background: url(../img/pc/header-bg.png) 0px -57px no-repeat;
}

.header-list >li:hover:nth-child(2){
    background: url(../img/pc/header-bg.png) -138px -57px no-repeat;
}

.header-list >li:hover:nth-child(3){
    background: url(../img/pc/header-bg.png) -260px -57px no-repeat;
}

.header-list >li:hover:nth-child(4){
    background: url(../img/pc/header-bg.png) -385px -57px no-repeat;
}

.header-list >li:hover:nth-child(5){
    background: url(../img/pc/header-bg.png) -545px -57px no-repeat;
}

.header-list >li:hover:nth-child(6){
    background: url(../img/pc/header-bg.png) -705px -57px no-repeat;
}

.header-list >li:hover:nth-child(7){
    background: url(../img/pc/header-bg.png) -860px -64px no-repeat;
}

.header-list >li:hover:nth-child(5):hover ul{
    /* top: 89px; */
    opacity: 1;
    height: 126px;
    padding-top: 10px;
}

.header-list >li:hover:nth-child(5):hover ul li:hover a{
    color: #f8daa2;
}

.header-inner-list{
    /* margin-top: 89px; */
    width: 100%;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    height: 0px;
    /* height: 96px; */
    overflow: hidden;
    transition: 0.3s;
    position: absolute;
    left: 0;
    top: 89px;
    z-index: 1;
    opacity: 0;
}

.header-inner-list a{
    color: rgba(255, 255, 255, .7);
}

.contact-inner{
    width: 100%;
    height: 205px;
    position: absolute;
    left: 0;
    top: -105px;
    transition: 0.5s;
    background: url(../img/pc/header-contact-bg.png) center center no-repeat;
    background-size: cover;
    z-index: 1;
}

.contact-inner.on{
    top: 90px;
}

.contact-inner ul{
    float: right;
    margin-top: 20px;
    margin-right: 60px;
}

.contact-inner ul li{
    display: inline-block;
    margin: 0 30px;
    width: 90px;
    height: 114px;
    position: relative;
    vertical-align: top;
}

.contact-inner ul li a{
    display: inline-block;
    width: 100%;
    height: 100%;
}

.contact-inner ul li::after{
    display: inline-block;
    content: '';
    width: 1px;
    height: 86px;
    background-color: #a1824a;
    position: absolute;
    top: 5px;
    right: -29px;
}

.contact-inner ul li:nth-child(2){
    background: url(../img/pc/header-link.png) 0px 0px no-repeat;
    background-size: 540px 113px;
}

.contact-inner ul li:nth-child(3){
    background: url(../img/pc/header-link.png) -90px 0px no-repeat;
    background-size: 540px 113px;
}
.contact-inner ul li:nth-child(4){
    background: url(../img/pc/header-link.png) -180px 0px no-repeat;
    background-size: 540px 113px;
}
.contact-inner ul li:nth-child(5){
    background: url(../img/pc/header-link.png) -270px 0px no-repeat;
    background-size: 540px 113px;
}
.contact-inner ul li:nth-child(6){
    background: url(../img/pc/header-link.png) -360px 0px no-repeat;
    background-size: 540px 113px;
}
.contact-inner ul li:nth-child(7){
    background: url(../img/pc/header-link.png) -450px 0px no-repeat;
    background-size: 540px 113px;
}

.contact-inner ul li:hover:nth-child(2){
    background: url(../img/pc/header-link-hl.png) 0px 0px no-repeat;
    background-size: 540px 113px;
}

.contact-inner ul li:hover:nth-child(3){
    background: url(../img/pc/header-link-hl.png) -90px 0px no-repeat;
    background-size: 540px 113px;
}
.contact-inner ul li:hover:nth-child(4){
    background: url(../img/pc/header-link-hl.png) -180px 0px no-repeat;
    background-size: 540px 113px;
}
.contact-inner ul li:hover:nth-child(5){
    background: url(../img/pc/header-link-hl.png) -270px 0px no-repeat;
    background-size: 540px 113px;
}
.contact-inner ul li:hover:nth-child(6){
    background: url(../img/pc/header-link-hl.png) -360px 0px no-repeat;
    background-size: 540px 113px;
}
.contact-inner ul li:hover:nth-child(7){
    background: url(../img/pc/header-link-hl.png) -450px 0px no-repeat;
    background-size: 540px 113px;
}

.contact-inner ul li:nth-child(7)::after{
    display: none;
}

.header-inner-cover{
    width: 100%;
    height: 191px;
    position: absolute;
    left: 0;
    top: -90px;
    background: url(../img/pc/header-drop-bg.png) center center no-repeat;
    background-size: cover;
    z-index: 1;
    transition: 0.3s;
}

.header-inner-cover.on{
    top: 90px;
}

.footer-box{
    /* height: 305px; */
    width: 100%;
    margin-top: 290px;
    overflow: hidden;
    position: relative;
    background-color: black;
    color: #a7a7a7;
}

.footer-box a{
    color: #a7a7a7;
}

.footer-inner{
    width: 1400px;
    margin: 0 auto;
    padding: 90px 0;
}

.copyright{
    text-align: left;
    font-size: 16px;
    line-height: 24px;
    display: inline-block;
}

.footer-right{
    float: right;
    text-align: right;
}

.limit{
    display: inline-block;
    width: 60px;
    vertical-align: top;
    margin-bottom: 10px;
}

.limit img{
    width: 100%;
}

.footer-link-box li{
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
    position: relative;
}

.footer-link-box li a,
.footer-link-box li >div{
    display: inline-block;
    width: 24px;
    height: 24px;
}

.footer-link-box li:nth-child(1) a{
    background: url(../img/pc/bottom-link-icon.png) 0px -46px no-repeat ;
    background-size: 279px 67px;
}

.footer-link-box li:nth-child(2) div:nth-child(1){
    background: url(../img/pc/bottom-link-icon.png) -45px -46px no-repeat ;
    background-size: 279px 67px;
}

.footer-link-box li:nth-child(2) div:nth-child(2){
    position: absolute;
    left: -90px;
    top: -210px;
    opacity: 0;
    transition: 0.3s;
}

.footer-link-box li:nth-child(2):hover div:nth-child(2){
    opacity: 1;
}

.footer-link-box li:nth-child(3) a{
    background: url(../img/pc/bottom-link-icon.png) -87px -46px no-repeat ;
    background-size: 279px 67px;
}

.footer-link-box li:nth-child(4) a{
    background: url(../img/pc/bottom-link-icon.png) -127px -46px no-repeat ;
    background-size: 279px 67px;
}

.footer-link-box li:nth-child(5) a{
    background: url(../img/pc/bottom-link-icon.png) -169px -46px no-repeat ;
    background-size: 279px 67px;
}

.footer-link-box li:nth-child(6) a{
    background: url(../img/pc/bottom-link-icon.png) -211px -46px no-repeat ;
    background-size: 279px 67px;
}

.footer-link-box li:nth-child(7) a{
    background: url(../img/pc/bottom-link-icon.png) -256px -46px no-repeat ;
    background-size: 279px 67px;
}


.footer-link-box li:nth-child(1) a:hover{
    background: url(../img/pc/bottom-link-icon.png) 0px 0px no-repeat ;
}

.footer-link-box li:nth-child(2) > div:nth-child(1):hover{
    background: url(../img/pc/bottom-link-icon.png) -45px 0px no-repeat ;
}

.footer-link-box li:nth-child(3) a:hover{
    background: url(../img/pc/bottom-link-icon.png) -87px 0px no-repeat ;
}

.footer-link-box li:nth-child(4) a:hover{
    background: url(../img/pc/bottom-link-icon.png) -127px 0px no-repeat ;
}

.footer-link-box li:nth-child(5) a:hover{
    background: url(../img/pc/bottom-link-icon.png) -169px 0px no-repeat ;
}

.footer-link-box li:nth-child(6) a:hover{
    background: url(../img/pc/bottom-link-icon.png) -211px 0px no-repeat ;
}

.footer-link-box li:nth-child(7) a:hover{
    background: url(../img/pc/bottom-link-icon.png) -256px 0px no-repeat ;
}

.float-box{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.float-ios-dl,
.float-and-dl,
.float-web-dl{
    display: block;
    width: 158px;
    height: 48px;
    margin: 0 auto;
    margin-bottom: 10px;
    filter: grayscale(0%);
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    font-size: 18px;
    font-family: 'HYXLSJ';
    color: white;
    line-height: 48px;
}

.float-ios-dl{
    color: #a18555;
}

.float-box span{
    display: inline-block;
    position: relative;
    z-index: 2;
}

.float-ios-dl span:nth-child(1),
.float-and-dl span:nth-child(1),
.float-web-dl span:nth-child(1){
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(../img/pc/float-dl-icon.png) 0px 0px no-repeat;
    margin-top: 12px;
    vertical-align: top;
    margin-left: 25px;
}

.float-web-dl span:nth-child(1){
    background-position:0px -44px ;
}

.float-and-dl span:nth-child(1){
    background-position:0px -22px ;
}

.float-ios-dl::after,
.float-and-dl::after,
.float-web-dl::after,
.yjcm-float a::after{
    display: inline-block;
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    background-color: #7a7a7a;
    opacity: 0.3;
    left: -100%;
    z-index: 1;
    transition: 0.3s;
}

.float-ios-dl::after{
    background-color: #ab9060;
}

.float-and-dl::after{
    background-color: #e4c896 ;
}

.yjcm-float a:hover::after,
.float-ios-dl:hover::after,
.float-and-dl:hover::after,
.float-web-dl:hover::after{
    /* filter: grayscale(50%); */
    /* zoom: 1.05; */
    /* scale: 1.05; */
    left: 0;
}

.float-link{
    background: url(../img/pc/index-download.jpg) center center no-repeat;
    background-size: cover;
}

.float-ios-dl{
    background: url(../img/pc/ios-download.jpg) center center no-repeat;
    background-size: cover;
}

.float-and-dl{
    background: url(../img/pc/and-download.jpg) center center no-repeat;
    background-size: cover;
}

.float-web-dl{
    background: url(../img/pc/web-download.jpg) center center no-repeat;
    background-size: cover;
}

.yjcm-float{
    width: 193px;
    height: 246px;
    background: url(../img/pc/yjcm-float-bg.png) center center no-repeat;
    background-size: contain;
    margin-top: -10px;
    text-align: center;
}

.yjcm-float a{
    display: inline-block;
    width: 100px;
    height: 32px;
    /* background: url(../img/pc/yjcm-btn.png) center center no-repeat;
    background-size: contain; */
    transition: 0.3s;
    margin-top: 167px;
    position: relative;
    overflow: hidden;
    font-size: 18px;
    font-family: 'HYXLSJ';
    color: white;
    line-height: 32px;
    background-color: black;
    text-align: center;
    margin-left: 10px;
}