p {
    margin: 0
}
header {
    padding-top: 20px;
    box-sizing: border-box;
    background-image: linear-gradient(135deg, #164030 0%, #7736ff 100%), url(/static/homepage/bg_header-about.jpg), url(/static/homepage/bg_header-express.jpg), url(/static/homepage/bg_header.jpg);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center
}
header menu {
    padding: 16px;
    background: linear-gradient(135deg, rgba(22,64,48,0) 0%, rgba(119,54,255,0) 100%);
    transition: .2s 0s all ease-in-out
}
header menu.attach {
    position: fixed;
    padding: 16px;
    top: 0;
    left: 0;
    right: 0;
    min-width: 1200px;
    box-sizing: border-box;
    z-index: 999;
    background: linear-gradient(135deg, #0f266c 0%, #00e4ff 100%)
}
header menu.attach .menu-wrapper .logo {
    margin-left: 14px;
}
header  .wechat,header  .whatsapp {
    margin-left: 84px;
}

header menu .sub-menu {
    position: absolute;
    margin-top: 16px;
    padding: 20px 16px;
    white-space: nowrap;
    border-radius: 16px;
    background: white;
    color: #666;
    opacity: 0;
    transform: translate(-200vw);
    transition: .2s 0s opacity ease-in-out
    z-index: 9999;
}
header menu .sub-menu:after {
    content: "";
    position: absolute;
    height: 16px;
    width: 100%;
    top: -16px;
    left: 0;
    z-index: 2
}
header menu .sub-menu:before {
    content: "";
    position: absolute;
    left: 50%;
    top: -16px;
    transform: translate(-50%);
    border: solid 8px transparent;
    border-bottom-color: #fff;
    z-index: 2
}
header menu .sub-menu>.item {
    display: block;
    line-height: 20px;
    font-size: 14px;
    font-weight: 400
}
header menu .sub-menu>.item.active {
    color: #f66
}
header menu .sub-menu>.item:hover {
    color: #f66;
    opacity: .8
}
header menu .sub-menu>.item:active {
    opacity: 1
}
header menu .sub-menu>.item+.item {
    margin-top: 16px
}
header menu .menu-wrapper {
    margin: auto;
    display: flex;
    align-items: center;
    width: 1200px
}
header menu nav {
    margin-left: 30px;
    font-size: 22px;
    line-height: 28px;
    color: #fff
}
header menu nav:first-of-type {
    margin-left: 80px
}
header menu nav.active {
    position: relative;
    font-weight: 700
}
header menu nav.active:after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translate(-50%);
    width: 16px;
    height: 3px;
    border-radius: 3px;
    background: white
}
header menu nav:active>.sub-menu, header menu nav:hover>.sub-menu {
    opacity: 1;
    transform: translate(-4px)
}
header menu nav>label {
    cursor: pointer
}
header .logo {
    width: 120px;
    height: 78px;
    object-fit: contain
}
header .wechat,header .whatsapp  {
    width: 383px;
    height: 85x;
    box-sizing: border-box;
    border-radius: 10px;
}
header .page-title {
    margin: 56px;
    font-size: 56px;
    font-weight: 200;
    letter-spacing: 27px;
    transform: translate(27px);
    text-align: center
}
header .page-subtitle{  
    font-size: 40px;
    font-weight: 200;
    letter-spacing: 27px;
    transform: translate(27px);
    text-align: center}
footer {
    position: relative;
    height: 382px;
    background: linear-gradient(135deg, #0f266c 0%, #00e4ff 100%);
}
footer .content-wrapper {
    padding: 48px 0 56px;
    display: flex;
    align-items: flex-start
}
footer .aside-location .logo {
    height: 44px;
    margin-left:16px;
}
footer .aside-location .address {
    display: block;
    position: relative;
    margin: 32px 0 0;
    padding-left: 28px;
    width: 220px;
    font-size: 12px;
    font-weight: 400
}
footer .aside-location .address:first-of-type:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background: url(/static/homepage/icon_location.png) no-repeat;
    background-size: cover
}
footer .aside-location .address+.address {
    margin-top: 17px
}
footer .navigation {
    margin-left: 160px;
    font-size: 0
}
footer .navigation a {
    font-size: 14px
}
footer .navigation .item, footer .navigation .recommend-list {
    margin-right: 56px
}
footer .navigation .item {
    font-weight: 700
}
footer .navigation .sub-item {
    line-height: 32px;
    font-weight: 100
}
footer .navigation .recommend-list {
    display: inline-block;
    vertical-align: top
}
footer .navigation .recommend-list .title {
    margin-bottom: 12px;
    font-size: 14px
}
footer .aside-social {
    position: absolute;
    right: 0;
    width: 352px;
    display: flex;
    flex-wrap: wrap;
    padding-left: 64px
}
footer .aside-social:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    opacity: .2;
    width: 1px;
    background: white;
    z-index: 1
}
footer .aside-social .contact {
    margin-bottom: 24px
}
footer .aside-social .contact .tel {
    font-size: 32px;
    line-height: 45px;
    font-weight: 200
}
footer .aside-social .contact .work-time {
    font-size: 20px;
    line-height: 17px
    font-weight: 200
}
footer .aside-social .social-item+.social-item {
    margin-left: 40px
}
footer .aside-social .social-item .tip {
    margin-top: 16px;
    font-size: 16px;
    line-height: 22px;
    text-align: center
}
footer .aside-social .qrcode {
    width: 156px;
    height: 156px;
    box-sizing: border-box;
    border-radius: 20px;
    background: white
}
footer .beian {
    margin: 0;
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%);
    font-size: 12px;
    color: #fff;
    opacity: .8;
    text-decoration: none
}
footer .beian a:hover {
    text-decoration: underline
}
footer .secure {
    margin-left: 2px;
    height: 15px;
    object-fit: contain;
    vertical-align: -3px
}
.section-wrapper {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box
}
.content-wrapper {
    font-size: 0;
    position: relative;
    margin: auto;
    width: 1200px
}
.content-img {
    user-select: none
}