@charset "UTF-8";
.app-header-container {position:fixed;top:0;left:0;width:100%;z-index:100;height:var(--app-header-height);padding-right:var(--app-fs-28);background:#fff;box-shadow: rgba(33, 35, 38, 0.1) 0 10px 10px -10px;}
.app-header-wrapper {width:100%;height:100%;}
.app-header-logo { width: var(--app-fs-182); font-size:0;}
.app-header-nav {height:100%;font-size:var(--app-fs-18);color:#333;}
.app-header-nav > ul {height:100%;}
.app-header-first-nav > a {position:relative;display:flex;align-items:center;height:100%;padding:0 var(--app-fs-16);margin:0 var(--app-fs-10);}
.app-header-first-nav > a:after {content:'';position:absolute;bottom:0;left:50%;width:0;height:4px;background:var(--app-color-main);transform:translateX(-50%);transition:width .3s;}
.app-header-login {height: var(--app-fs-42);padding:0 var(--app-fs-20);border-radius:99px;font-size:var(--app-fs-14);color:#333;background:#f3f3f3;cursor:pointer;}
.app-header-login .icon { width: var(--app-fs-22); margin-right:12px;}
.mo-nav { position: relative; display: none; width: 1em; height: 1em; font-size: var(--app-fs-50); margin-left: .5em; }
.mo-nav .iconfont { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); font-size: 1em; color: var(--app-color-main); }
.mo-nav .icon-caidan { transform: translate(-50%, -50%) scale(1); }
.mo-nav .icon-guanbi { transform: translate(-50%, -50%) scale(0); }
.mo-nav.on .icon-caidan { transform: translate(-50%, -50%) scale(0); }
.mo-nav.on .icon-guanbi { transform: translate(-50%, -50%) scale(1); }
.mo-nav-wrap { position: fixed; top: var(--app-header-height); left: 0; width: 100%; height: 0; opacity: 0; transition: .36s; overflow-x: hidden; overflow-y: auto; border-top: 1px solid #f5f5f5; background: rgba(0,0,0, .5); }
.mo-nav-wrap.on { height: calc(100% - var(--app-header-height)); opacity: 1; }
.app-mo-header-nav { height: 100%; background: #fff; }
.app-mo-header-nav ul { flex-direction: column; }
.app-mo-header-first-nav a { display: flex; align-items: center; justify-content: space-between; font-size: 16px; padding: 20px; border-bottom: 1px solid #f5f5f5; color: #333; transition: transform 0.3s 0.3s, opacity 0.3s 0.3s; opacity: 0; transform: translateY(-30px); }
.app-mo-header-first-nav a i { color: rgba(51,51,51,.5); }
.mo-nav-wrap.on .app-mo-header-first-nav a { transform: translateY(0); opacity: 1; }

.switch-language { position: relative; width: 110px; height: var(--app-fs-42); padding: 0 var(--app-fs-20); margin-right: var(--app-fs-20); border-radius: 99px; font-size: var(--app-fs-14); color: #333; background: #f3f3f3; cursor: pointer; }
.switch-language .text { margin-right: .5em; }
.switch-language .iconfont { transform: rotate(90deg); }
.switch-language .switch-language-wrap { width: 100%; position: absolute; top: 40%; left: 0; z-index: 91; height: 0; max-height: 0; margin: 12px 0 5px; border-radius: 4px; padding-top: 0; background-color: #f2f3f6; transform-origin: center top; transition: all .5s ease; overflow: hidden; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; }
.switch-language .switch-language-wrap li a { display: flex; padding: 0 20px; border-radius: 4px; font-size: var(--app-fs-14); line-height: 36px; white-space: nowrap;}
.switch-language.open .switch-language-wrap {max-height: 100vh;height: 100px;padding-top: 15px;}

@media (hover:hover) {
    .app-header-first-nav > a:hover:after {width:100%;}
    .app-header-first-nav > a:hover {color:var(--app-color-main);}
    .app-header-login .not-logged:hover {opacity:.8;}
    .switch-language .switch-language-wrap li a:hover {background-color: #A21C30; color: #fff;}
}


@media (max-width: 992px) {
    :root {
        --app-header-height: 76px;
    }
    .switch-language,
    .app-header-login { height: 40px; }
}

@media (max-width: 768px) {
    :root {
        --app-header-height: 66px;
    }
    .app-header-container { padding: 0 var(--app-fs-28); }
    .app-header-left { margin-left: auto; }
    .app-header-wrapper { justify-content: normal; }
    .switch-language { width: auto; padding: 5px 20px; }
    .app-header-login { padding: 8px 10px; }
    .app-header-login .icon { margin-right: 8px; }
    .app-header-nav { display: none; }
    .mo-nav { display: flex; align-items: center; justify-content: center; }
    .switch-language,
    .app-header-login { height: 34px; }
}

@media (max-width: 600px) {

}

@media (max-width: 375px) {

}