﻿body {
    margin-top: 80px !important;
}

header {
    height: 80px;
    position: fixed;
    top: 0;
    width: 100%;
    border-bottom: 1px solid #F7F7F7;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 9999;
}

header>div {
    height: 100%;
}

header .logo {
    float: left;
    margin-top: 25px;
    height: 24px;
}

header ul.navbar {
    margin-left: 4.78%;
}

header ul.navbar>li {
    float: left;
    margin-left: 2.14%;
    cursor: pointer;
}

header ul.navbar>li .nav {
    line-height: 80px;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
}

header ul.navbar>li:hover .nav {
    color: #C60000;
}

header ul.navbar .product li:hover a {
    color: #C60000;
}

header .searchDiv {
    display: block;
    float: right;
    margin-right: 3.5%;
    position: relative;
}

header .searchDiv .searchInput {
    margin-top: 20px;
    box-sizing: border-box;
    width: 177px;
    height: 38px;
    background: rgba(250, 251, 252, 0);
    border: 1px solid #999999;
    opacity: 0.3;
    border-radius: 18px;
    padding: 0 19px;
    line-height: 38px;
    font-size: 13px;
    color: #999999;
}

header .searchDiv .icon {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 32px;
    right: 19px;
    z-index: -1;
}

header .phoneDiv {
    float: right;
    margin-top: 20px;
}

header .phoneDiv .title {
    font-size: 12px;
    color: #666666;
}

header .phoneDiv .phone {
    margin-top: 1px;
    font-size: 20px;
    font-family: DINPro;
    font-weight: bold;
    color: #B52519;
}


/* 子菜单 */

header ul.navbar>li.sub {
    position: relative;
}

header ul.navbar>li.sub .downIcon {
    float: right;
    margin-top: 38px;
    margin-left: 7px;
}

header ul.navbar>li.sub>div {
    display: none;
    position: fixed;
    width: 100%;
    top: 80px;
    left: 0;
    background: #FFFFFF;
    box-shadow: 0px 15px 30px 0px rgb(0 0 0 / 10%);
    box-sizing: border-box;
}

/* hover  */

header ul.navbar>li.sub:hover>div {
    display: block;
}


/* product */

header .product .content {
    margin-top: 43px;
    margin-bottom: 50px;
    display: flex;
    text-align: center;
}

header .product .content>div {
    flex: 1 1 0;
    border-left: 1px solid #E8E8E8;
}

header .product .content>div:last-of-type {
    border-right: 1px solid #E8E8E8;
}

header .product .content .title {
    display: block;
    margin-top: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
}

header .product .content .title:hover {
    color: #C60000;
}

header .product .content img {
    margin-top: 2px;
    height: 56px;
}

header .product .content ul {
    margin-top: 10px;
}

header .product .content ul li {
    font-size: 14px;
    color: #333333;
    line-height: 29px;
}

/* support */

header .support .content {
    margin-top: 39px;
    margin-bottom: 34px;
    height: 129px;
}

header .support .content>a {
    display: block;
    height: 100%;
    background: #FAFAFA;
}

header .support .content>a.linkBlock {
    float: left;
    width: 9.5%;
    margin-right: 1.8%;
}

header .support .content>a.phoneBlock {
    float: right;
    width: 32%;
}


header .support .content>a.linkBlock img {
    display: block;
    height: 54px;
    margin: 23px auto 0;
}

header .support .content>a.linkBlock.qrcode img {
    height: 64px;
    margin-top: 17px;
}

header .support .content>a.linkBlock .title {
    font-size: 14px;
    color: #333333;
    margin-top: 22px;
    text-align: center;
}

header .support .content>a.linkBlock.qrcode .title {
    margin-top: 17px;
}

header .support .content>a.phoneBlock .title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    margin-left: 14.19%;
    margin-top: 26px;
}

header .support .content>a.phoneBlock .phone {
    font-size: 50px;
    font-family: DINPro;
    font-weight: bold;
    color: #B52519;
    margin-left: 14.41%;
}

/* commercial */

header .commercial .content {
    margin-top: 29px;
    margin-bottom: 29px;
    height: 144px;
}

header .commercial .content>a {
    float: left;
    display: block;
    height: 100%;
    width: 30%;
    margin-right: 5%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

header .commercial .content>a:last-of-type {
    margin-right: 0;
}

header .commercial .content>a .title {
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    text-align: center;
    line-height: 144px;
}

/* purchase */
header .purchase .content {
    margin-top: 36px;
    margin-bottom: 37px;
    height: 129px;
}

header .purchase .content>a {
    float: left;
    display: block;
    height: 100%;
    width: 19%;
    margin-left: 2%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

header .purchase .content>a:first-of-type {
    margin-right: 2%;
    margin-left: 0;
    width: 24%;
}

header .purchase .content>a:last-of-type {
    margin-right: 0%;
    margin-left: 0;
    width: 10%;
}

header .purchase .content>a .title {
    width: 100%;
    text-align: center;
    height: 16px;
    font-size: 16px;
    color: #333333;
    margin-top: 90px;
}
header .purchase .content>a .lastTitle {
    position:absolute;
    left: 11%;
    bottom: 5px;
    height: 16px;
    font-size: 16px;
    font-weight: 500; 
    color: #333333;
}
header .purchase .content>a .lastTitle:hover {
    color: #C60000;
}


/* about */
header .about .content {
    margin-top: 39px;
    margin-bottom: 34px;
    height: 129px;
}

header .about .content>a {
    display: block;
    float: left;
    background: #FAFAFA;
    height: 100%;
    width: 9.571%;
    margin-right: 1.732%;
}

header .about .content>a:last-of-type {
    margin-right: 0;
}

header .about .content>a img {
    display: block;
    margin: 24px auto 0;
    height: 52px;
}

header .about .content .title {
    width: 100%;
    font-size: 14px;
    color: #333333;
    text-align: center;
    margin-top: 22px;
}

/* enjoyer */
header .enjoyer .content {
    margin-top: 29px;
    margin-bottom: 29px;
    height: 144px;
}

header .enjoyer .content>a {
    float: left;
    display: block;
    height: 100%;
    width: 15%;
    margin-right: 2%;
}

header .enjoyer .content>a img{
    z-index: -1;
}

header .enjoyer .content>a:last-of-type {
    margin-right: 0;
}

header .enjoyer .content>a .title {
    width: 100%;
    text-align: center;
    line-height: 144px;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
}