@charset "utf-8";

/* 定义一些常量方便统一修改 */
:root {
    --main-color: #d6a441; /* 主色调 */
    --main-color-rgb: 214, 164, 65; /* 主色调的RGB，主要用于基于主色调调整不透明度，使用示例：background: rgba(var(--main-color-rgb), 0.15) */
    --color-black: #181818; /* 黑色 */
    --color-white: #ffffff; /* 白色 */
    --color-grey: #acacac; /* 灰色 */
    --color-red: #fa5151; /* 红色 */
    --border-color: #cbcbcb; /* 边框颜色 */
    --border-radius: 1.25rem; /* 通用圆角弧度 */
    --font-size-large: 5.86666666rem;
    --font-size-primary: 4.53333333rem; /* 主要字体大小，使用场景举例：文章正文、列表内标题 */
    --font-size-small: 3.73333333rem;
    --font-size-smaller: 3.2rem;
    --gap-size: 3.2rem; /* 空白间隙尺寸（左右两端各占3.2rem，实际可用宽度为93.6rem） */
    --line-height: 1.618;
}

/* 使用媒体查询实现1px边框 */
@media (-webkit-min-device-pixel-ratio: 1),(min-resolution: 1dppx) {
    :root {
        --border-1px: 1px
    }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx) {
    :root {
        --border-1px: 0.5px
    }
}

@media (-webkit-min-device-pixel-ratio: 3),(min-resolution: 3dppx) {
    :root {
        --border-1px: 0.33333px
    }
}

@media (-webkit-min-device-pixel-ratio: 4),(min-resolution: 4dppx) {
    :root {
        --border-1px: 0.25px;
    }
}

@media (-webkit-min-device-pixel-ratio: 5),(min-resolution: 5dppx) {
    :root {
        --border-1px: 0.2px;
    }
}

* {
    padding: 0;
    margin: 0;
    line-height: 1;
    border: none;
    list-style: none;
    outline: 0;
    resize: none;
}

a:link, a:visited, a:hover, a:focus, a:active {
    text-decoration: none;
    color: var(--color-black);
}

img {
    border: none;
}

/* 统一使用rem单位，无论设备分辨率是多少，宽度都是100rem */
html {
    font-size: 1vw;
}

.ml-gs {
    margin-left: var(--gap-size)
}

.mr-gs {
    margin-right: var(--gap-size);
}

button[disabled] {
    border-color: var(--color-grey) !important;
    background: var(--color-grey) !important;
    cursor: not-allowed;
}

ul.bottom {
    position: fixed;
    z-index: 9999;
    left: 0;
    bottom: -2.55rem;
    width: 100rem;
    height: auto;
    padding: 2.5rem 0;
    border-top: var(--border-1px) solid var(--border-color);
    background: var(--color-white);
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    flex-direction: row;
    text-align: center;
    justify-content: space-around;

}

ul.bottom li {
    display: flex;
    list-style: none;
    flex-direction: column;
    font-size: 3.5rem;
}

ul.bottom li i {
    display: inline-block;
    clear: both;
    margin-bottom: 1.25rem;
    font-size: 5rem;
    position: relative;
}

ul.bottom li i .red-dot {
    position: absolute;
    font-size: 3rem;
    width: 3rem;
    height: 3rem;
    left: -2rem;
    top: -1.5rem;
    border-radius: 50%;
    padding: 2.5rem;
    background: var(--color-red);
    color: var(--color-white);
    border: 1px solid var(--color-white);
    display: none;
    align-items: center;
    justify-content: center;
}

ul.bottom li.activated {
    color: var(--main-color);
}

ul.bottom li.activated i {
    color: var(--main-color);
}

.backtotop {
    position: fixed;
    bottom: 15vh;
    right: 20px;
    display: none;
    cursor: pointer;
    font-size: 7vw;
    z-index: 9999;
}

.backtotop:hover {
    color: #333
}

.layui-layer-dialog {
    width: 80vw !important;
}
.layui-layer-dialog .layui-layer-content {
/*        width: 70vw;*/
    text-align: center;
    font-size: 4vw;
    line-height: 1;
    border-bottom: 1px solid var(--color-grey);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4vw;
}

.layui-layer-dialog .layui-layer-content .layui-layer-ico {
    margin-right: 3vw;
    position: initial;
}

.layui-layer-btn {
    display: flex;
    justify-content: space-evenly;
    padding: 4vw 0;
}

.layui-layer-btn .layui-layer-btn0, .layui-layer-btn .layui-layer-btn1 {
    margin: 0;
    width: 25vw;
    height: auto;
    text-align: center;
    font-size: 4vw;
    padding: 2vw 2vw;
}

.layui-layer-btn .layui-layer-btn0 {
    background-color: #FF7518;
}