@import url("init-wU_w4va.css");


@property --theme-color-r {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --theme-color-g {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --theme-color-b {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --theme-color-a {
    syntax: "<number> | <percentage>";
    inherits: true;
    initial-value: 1;
}

/*@property --theme-color {*/
/*    syntax: "<color>";*/
/*    inherits: true;*/
/*    initial-value: rgb(0,0,0, 1);*/
/*}*/

/* 自定义字体 */
@font-face {
    font-family: 'Gotham';
    src: url('/images/Gotham-Medium.otf') format('opentype');
    font-weight: normal;
}


:root {
    --page-max-width: 70vw;
    --theme-color-r: 29;
    --theme-color-g: 118;
    --theme-color-b: 255;
    --theme-color: rgba(var(--theme-color-r), var(--theme-color-g), var(--theme-color-b) , var(--theme-color-a));
    --theme-color-hover: #0088c2;
    --theme-color-active: #0077a3;
    --theme-color-text: rgb(255, 255, 255);
    min-width: 320px;
    overflow-x: hidden;
}
:root[disabledScroll]{
    overflow: hidden;
}

.container{
    margin: auto;
}

.Header{height: 120px;display: flex;justify-content: space-between;align-items: center;margin:  auto;gap: 15px;padding: 0 calc((100% - var(--page-max-width)) / 2); background-color: #ffffff; position: sticky;top: 0;left: 0;z-index: 111;box-shadow: 0 0 10px 1px rgba(0,0,0,0.1);}
.Header .top{}
.Header .logo{height: 80px;width: auto;background: #9f9f9f;transition: all 0.3s linear;}
.Header .logo img{height: 100%;}

.Header .buttons{
    display: flex;
    align-items: center;
    column-gap: 20px
}

.Header .searchBtn{display: flex; width: 30px; height: 30px; color: #333333; justify-content: center; align-items: center; font-size: 1.2rem; border-radius: 2px; cursor: pointer;position: relative;}
.Header .searchBtn:hover{color: var(--theme-color-hover);}
.Header .searchBtn::after{content: ""; width: 1px; height: 1.5rem; position: absolute; right: calc(100% + 6px); background: #cdcdcd;}

.Header .navBtn{
    --c: #333;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    position: relative;
    cursor: pointer;
}

.Header .navBtn::after{content: ""; width: 1px; height: 1rem; position: absolute; right: calc(100% + 10px); background: #cdcdcd;}

.Header .nav {
    padding: 0 calc((100% - var(--page-max-width)) / 2);
    display: flex;
    justify-self: end;
    gap: 30px;
    margin-right: 1.2rem;
    align-items: center;
}

.Header .nav .item{
    /*flex: 1;*/
    text-align: center;
    --theme-color-a: 0;
    background: rgb(var(--theme-color-r), var(--theme-color-g), var(--theme-color-b) , var(--theme-color-a));
    position: relative;
    font-size: 1.3rem;
    color: #333;
}
.Header .nav .item::before{
    content: "";
    background-color: transparent;
    position: absolute;
    top: calc(100% + 5px);
    width: 50%;
    height: 3px;
    transition: all .2s;
    left: 0;
    border-radius: 3px;
}
.Header .nav .item:hover::before {
    background: var(--theme-color);
    left: 25%;
}


.sidebar{width: 100%; height: 400px; flex-direction: column; align-items: flex-end; display: flex;justify-content: flex-end; background-image: url(/images/sidebar-bg2.jpeg); background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: rgba(0,0,0,.5);position: relative;}
.sidebar .name{width: var(--page-max-width); margin: 0 auto 4.5rem; color: #FFFFFF; display: flex; justify-content: space-between;}
.sidebar .name .nameText{ font-size: 3.4rem; text-shadow: 2px 2px 4px #414141; font-weight: bold;}
.sidebar .name .position{font-size: 1.2rem; font-weight: 400; display: flex; align-items: center;}
.sidebar .name:is( + .list){margin-bottom: 0}
.sidebar .list{width: 100%; box-sizing: border-box; padding: 0 calc((100% - var(--page-max-width)) / 2); background: #f9f9f9; display: flex; flex-wrap: wrap; gap: 1rem 2rem; border-bottom: 1px solid #efefef; overflow: hidden;}
.sidebar .list .item{min-height: 5rem; min-width: 12rem; color: #333333; font-size: 1.2rem; display: flex; align-items: center;position: relative; justify-content: center; padding: 0 1rem;}
.sidebar .list .item:not(.cur):first-child::before{content: ""; width: 1px; height: 1em; background: rgb(213, 213, 213); position: absolute; left: -1px; top: 50%; transform: translateY(-50%)}
/*.sidebar .list .item::before{content: ""; width: 1px; height: 1em; background: rgb(213, 213, 213); position: absolute; left: 0; top: 50%; transform: translateY(-50%)}*/
.sidebar .list .item::after{content: ""; width: 1px; height: 1em; background: rgb(213, 213, 213); position: absolute; right: -1rem; top: 50%; transform: translateY(-50%)}
.sidebar .list .item.cur{background: var(--theme-color); color: #FFFFFF;}
.sidebar .list .item.cur::after{display: none;}
.sidebar .list .item:has(+ .item.cur)::after{display: none;}
.sidebar .list .item:not(.cur):hover{ background: #f5f5f5;}

.Footer{width: 100%;display: flex;flex-direction: column;flex-wrap: wrap;color: #f9f9f9; line-height: 1.5; font-size: 14px;}

.Footer .top{display: flex; flex-direction: column; gap: 2rem; background: #3484ff; padding: 3rem 1rem; color: #FFFFFF; align-items: center;}
.Footer .top .title{font-size: 30px;}
.Footer .top .desc{font-size: 18px; text-align: center;}

.Footer .center{width: 100%; max-width: var(--page-max-width); padding: 2rem calc((100% - var(--page-max-width)) / 2);background-color: #0944a5; display: flex; justify-content: space-between; gap: 1rem 10rem; flex-wrap: wrap;}
.Footer .center .attrs{overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;}
.Footer .center .attrs .attr{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.Footer .center .flink{display: flex; flex: 1; flex-direction: column; min-width: 300px;}
.Footer .center .flink .title{border-bottom: 1px solid rgba(255,255,255,0.5); padding: 5px; position: relative;}
.Footer .center .flink .title::before{content: ""; width: 4em; height: 1px; background-color: #a5d82a; position: absolute; bottom: -1px; left: 5px;}
.Footer .center .flink .links{width: calc(100% - 20px); display: flex; padding: 10px;}
.Footer .center .flink .links .item{display: flex; align-items: center; gap: 5px;}
.Footer .center .flink .links .item::before{content: ""; width: 4px; height: 4px; background-color: rgba(255,255,255,0.5);}
.Footer .center .qrCodes{display: flex; gap: 1rem; justify-content: center;}
.Footer .center .qrCodes img{width: 120px; height: 120px; background-color: rgba(0,0,0,0.1);}
.Footer .center .qrCodes .title{width: 100%; text-align: center;}

.Footer .bottom{width: 100%; max-width: var(--page-max-width);padding: 15px calc((100% - var(--page-max-width)) / 2); display: flex; align-items: center; justify-content: center; gap: 1rem; background: #0f1c31;}

@media (max-width: 1340px) {
    :root{
        font-size: 14px;
        --page-max-width: calc(90vw - 20px);
    }
    .Header .top{
        /*padding: 0 10px;*/
    }
    .Header .top .logo{
        height: 60px;
    }
    .Footer{
        width: auto;
        /*padding: 50px 10px;*/
    }
    .Footer .bottom{flex-direction: column;}
}

@media (max-width: 1024px) {
    .Footer .center{flex-direction: column; gap: 1.5rem}
    .Footer .center .attrs{align-items: center;}
}

@media (max-width: 768px) {
    :root{
        font-size: 14px;
        --page-max-width: calc(100vw - 20px);
    }

    .sidebar{
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        overflow-x: auto;
    }
    .sidebar .name .nameText{
        height: 1.5em;
        line-height: 1.5em;
        font-size: 1.7rem;
    }
    .Header{
        padding: 0 10px;
        height: 60px;
    }
    .Header .logo{
        height: 40px;
    }
    .Header .searchBtn::after{
        display: none;
    }
    .Header .navBtn{
        display: flex;
    }
    .Header .nav{
        position: fixed;
        top: 60px;
        left: 0;
        height: calc(100% - 60px);
        z-index: 111;
        flex-direction: column;
        width: 100%;
        transform: translateX(100%);
        transition: all 0.3s ease-in-out;
        background: var(--theme-color);
    }
    .Header .nav.show{
        transform: translateX(0);
    }
    .Header .nav .item{
        flex: none;
    }
    
    .Footer{
        /*gap: 50px;*/
        flex-direction: column;
        font-size: 12px;
    }
    .Footer .top .title{font-size: 18px}
    .Footer .top .desc{font-size: 12px;}
    .Footer .center .qrCodes {display: none;}
}


[observe]{
    opacity: 0;
}