@charset "UTF-8";
/* CSS Document */

* {margin: 0; padding: 0;}
*:focus {outline: none;}
html,body {background: #eff3f5;}
body {font-family: Arial, PingFang SC, '微软雅黑', Helvetica Neue, Helvetica, Tahoma, sans-serif}
img {border: 0 none; max-width: 100%;}
ul, li {display: block; list-style: none;}
a {text-decoration: none; cursor: pointer;}




.paddingEvn {padding-bottom: env(safe-area-inset-bottom);}
.fontFutura {font-family: "Futura Md BT", Futura, Arial, sans-serif; font-weight: 500;}
.fontFrutiger {font-family: Frutiger45-Light, Arial, sans-serif; font-weight: 400;}



.header {width: 100%; position: fixed; left: 0; top: 0; z-index: 999; box-sizing: border-box; padding: 50px 76px; transition: padding 200ms, background-color 200ms, transform 500ms;}
.header {display: flex; justify-content: space-between; align-items: center;}
.header .logo {font-size: 0;}
.header .logo a {display: block; position: relative;}
.header .logo a span {display: block; transition: opacity 200ms;}
.header .logo a span.white {opacity: 1;}
.header .logo a span.black {opacity: 0; position: absolute; left: 0; top: 0;}
.header .logo img {width: 161px; transition: width 200ms;}


.header .r {display: flex; align-items: center;}


.header .menu-btn {display: none;}
.header .menu-btn a {display: block; width: 20px; height: 20px; position: relative;}
.header .menu-btn a span,
.header .menu-btn a:before,
.header .menu-btn a:after {content: ''; display: block; width: 20px; height: 2px; background: #fff; border-radius: 1px; position: absolute; left: 0;}
.header .menu-btn a:before {top: 2px;}
.header .menu-btn a:after {bottom: 2px;}
.header .menu-btn a span {top: 50%; margin-top: -1px;}


.header .menu-fixed {width: 100%; display: none; position: absolute; left: 0; top: 100%; box-sizing: border-box; padding: 0 76px;}
.header .menu-fixed .center {background: #ffffff; overflow: auto;}
.header .menu-fixed .main {padding: 20px; font-size: 15px; color: #303547;}
.header .menu-fixed .main a {color: #303547; padding: 10px 20px;}
.header .menu-fixed .main .group {border-bottom: 1px solid #eee;}
.header .menu-fixed .main .group:last-child {border-bottom: 0 none;}
.header .menu-fixed .main .group .name a {display: block; transition: background-color 200ms;}
.header .menu-fixed .main .group .name a:hover {background: #eff3f5;}
.header .menu-fixed .main .group .list {border-top: 1px solid #eee; padding-left: 20px;}
.header .menu-fixed .main .group .list .item {border-bottom: 1px solid #eee;}
.header .menu-fixed .main .group .list .item:last-child {border-bottom: 0 none;}
.header .menu-fixed .main .group .list .item a {display: block; padding: 10px 20px; transition: background-color 200ms;}
.header .menu-fixed .main .group .list .item a:hover {background: #eff3f5;}
.header .menu-fixed .main .group.h .name {background: #eff3f5;}




.header .menu {display: flex; align-items: center;}
.header .menu {font-size: 19px; color: #fff;}
.header .menu a {color: #fff; transition: color 200ms;}
.header .menu .group {position: relative; margin-right: 32px; transition: margin-right 200ms;}
.header .menu .group:last-child {margin-right: 0;}
.header .menu .group .name {position: relative; padding: 24px 0;}
.header .menu .group .name:after {content: ''; width: 8px; height: 8px; background: #fff; border-radius: 50%; position: absolute; left: 50%; margin-left: -4px; bottom: 0;}
.header .menu .group .list {width: 200%; height: auto; line-height: 34px; position: absolute; left: -50%; top: 100%; padding-top: 20px; text-align: center;}
.header .menu .group .list a {display: inline-block; transition: transform 200ms;}
.header .menu .group .list a:hover {transform: translateX(5px);}
.header .menu .group .list a.round {display: block; width: 32px; height: 32px; text-align: center; line-height: 32px; margin: 0 auto; background: rgba(255, 255, 255, .1); border-radius: 50%;}
.header .menu .group .list a.round:hover {transform: translateX(0);}


.header .menu .group {overflow: hidden;}
.header .menu .group .name:after {visibility: hidden; opacity: 0; transition: opacity 200ms;}
.header .menu .group .list {visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity 200ms, transform 200ms;}
.header .menu .group:hover {overflow: visible;}
.header .menu .group:hover .name:after {visibility: visible; opacity: 1;}
.header .menu .group:hover .list {visibility: visible; opacity: 1; transform: translateY(0);}

.header .menu .group.on .name:after {visibility: visible; opacity: 1;}



.header.black .logo a span.white {opacity: 0;}
.header.black .logo a span.black {opacity: 1;}
.header.black .menu-btn a span,
.header.black .menu-btn a:before,
.header.black .menu-btn a:after {background: #303547;}
.header.black .menu a {color: #303547;}
.header.black .menu .group .name:after {background: #303547;}
.header.black .menu .group .list a.round {background: rgba(43, 60, 123, .1);}

.header.fade {padding: 15px 76px; background: #eff3f5;}
.header.hide {transform: translateY(-100%);}



.wrapper {padding-top: 160px; transition: padding-top 200ms; box-sizing: border-box;}


.footer {background: #303547; padding: 24px 76px; color: #fff; transition: padding 200ms;}
.footer .center {display: flex; justify-content: space-between; align-items: center;}
.footer .copy {flex: 1; min-width: 0; font-size: 13px; transition: font-size 200ms;}
.footer .public {display: flex; align-items: center;}
.footer .public .item {margin-right: 20px; transition: margin-right 200ms;}
.footer .public .item:last-child {margin-right: 0;}
.footer .public .item .icon {background: #434859; border-radius: 50%;}
.footer .public .item .icon a {display: flex; justify-content: center; align-items: center; font-size: 0; width: 34px; height: 34px; transition: width 200ms, height 200ms;}
.footer .public .item .icon a img {width: 20px; height: 20px; transition: width 200ms, height 200ms;}


.backtop {position: fixed; right: 76px; bottom: 124px; padding-bottom: 76px; z-index: 999;}
.backtop-box {position: relative; width: 32px; padding-bottom: 42px;}
.backtop-box .dot a {display: flex; width: 20px; height: 20px; justify-content: center; align-items: center; margin: 0 auto;}
.backtop-box .dot a:before {content: ''; display: block; width: 8px; height: 8px; background: #303547; border-radius: 50%;}
.backtop-box .btn {width: 32px; height: 32px; position: absolute; left: 50%; margin-left: -16px; top: 30px;}
.backtop-box .btn a {display: block;}
.backtop-box .btn a img {width: 32px; height: 32px;}

.backtop {display: none;}
.backtop.show {display: block;}
.backtop-box .btn {visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity 200ms, transform 200ms;}
.backtop-box.show .btn {visibility: visible; opacity: 1; transform: translateY(0);}


@media all and (max-width: 1680px) {
    .header {padding: 40px 60px;}
    .header .menu-fixed {padding: 0 60px;}
    .header.fade {padding: 15px 60px;}

    .wrapper {padding-top: 150px;}

    .footer {padding: 24px 60px;}

    .backtop {right: 60px; padding-bottom: 60px;}
}
@media all and (max-width: 1360px) {
    .header {padding: 30px 50px;}
    .header .logo img {width: 150px;}
    .header .menu {font-size: 18px;}
    .header .menu .group .list {padding-top: 10px;}
    .header .menu-fixed {padding: 0 50px;}
    .header.fade {padding: 10px 50px;}

    .wrapper {padding-top: 130px;}

    .footer {padding: 24px 50px;}

    .backtop {right: 50px; padding-bottom: 50px;}
}
@media all and (max-width: 1024px) {
    .header {padding: 20px 40px;}
    .header .logo img {width: 140px;}
    .header .menu {font-size: 17px;}
    .header .menu .group .name:after {width: 6px; height: 6px; margin-left: -3px;}
    .header .menu-fixed {padding: 0 40px;}
    .header.fade {padding: 10px 40px;}

    .wrapper {padding-top: 120px;}

    .footer {padding: 24px 40px;}

    .backtop {right: 40px; padding-bottom: 40px;}
}
@media all and (max-width: 800px) {
    .header .logo img {width: 120px;}
    .header .menu {font-size: 16px;}
    .header .menu .group {margin-right: 28px;}

    .footer .copy {font-size: 12px;}
    .footer .public .item {margin-right: 16px;}
    .footer .public .item .icon a {width: 30px; height: 30px;}
    .footer .public .item .icon a img {width: 16px; height: 16px;}
}
@media all and (max-width: 720px) {
    .header {padding: 40px;}
    .header .menu {display: none;}
    .header .menu-btn {display: block;}
    .header.fade {padding: 30px 40px;}
}
@media all and (max-width: 480px) {
    .header {padding: 30px;}
    .header .logo img {width: 110px;}
    .header .menu-fixed {padding: 0 30px;}
    .header.fade {padding: 25px 30px;}

    .wrapper {padding-top: 100px;}

    .footer {padding: 24px 30px;}
    .footer .center {display: block;}
    .footer .copy {text-align: center;}
    .footer .public {justify-content: center; padding-top: 20px;}

    .backtop {right: 30px; padding-bottom: 30px;}
}
@media all and (max-width: 420px) {
    .header {padding: 25px;}
    .header .logo img {width: 100px;}
    .header .menu-fixed {padding: 0 25px;}
    .header.fade {padding: 25px;}

    .wrapper {padding-top: 80px;}

    .footer {padding: 24px 25px;}

    .backtop {right: 25px; padding-bottom: 25px;}
}