@charset "UTF-8";
/*定义全局的CSS变量*/


/*通用样式*/
.font-1 {
    font-size: 1px !important;
}

.font-2 {
    font-size: 2px !important;
}

.font-3 {
    font-size: 3px !important;
}

.font-4 {
    font-size: 4px !important;
}

.font-5 {
    font-size: 5px !important;
}

.font-6 {
    font-size: 6px !important;
}

.font-7 {
    font-size: 7px !important;
}

.font-8 {
    font-size: 8px !important;
}

.font-9 {
    font-size: 9px !important;
}

.font-10 {
    font-size: 10px !important;
}

.font-11 {
    font-size: 11px !important;
}

.font-12 {
    font-size: 12px !important;
}

.font-13 {
    font-size: 13px !important;
}

.font-14 {
    font-size: 14px !important;
}

.font-15 {
    font-size: 15px !important;
}

.font-16 {
    font-size: 16px !important;
}

.font-17 {
    font-size: 17px !important;
}

.font-18 {
    font-size: 18px !important;
}

.font-19 {
    font-size: 19px !important;
}

.font-20 {
    font-size: 20px !important;
}

.font-21 {
    font-size: 21px !important;
}

.font-22 {
    font-size: 22px !important;
}

.font-23 {
    font-size: 23px !important;
}

.font-24 {
    font-size: 24px !important;
}

.font-25 {
    font-size: 25px !important;
}

.font-26 {
    font-size: 26px !important;
}

.font-27 {
    font-size: 27px !important;
}

.font-28 {
    font-size: 28px !important;
}

.font-29 {
    font-size: 29px !important;
}

.font-30 {
    font-size: 30px !important;
}

.font-31 {
    font-size: 31px !important;
}

.font-32 {
    font-size: 32px !important;
}

.font-33 {
    font-size: 33px !important;
}

.font-34 {
    font-size: 34px !important;
}

.font-35 {
    font-size: 35px !important;
}

.font-36 {
    font-size: 36px !important;
}

.font-37 {
    font-size: 37px !important;
}

.font-38 {
    font-size: 38px !important;
}

.font-39 {
    font-size: 39px !important;
}

.font-40 {
    font-size: 40px !important;
}


/*一些有意思的颜色*/
.b-gray {

    background: #818b95
}

.b-red {
    background: #ff5473
}

.b-yellow {
    background: #ff6f06
}

.b-cyan {
    background: #08c4c1
}

.b-blue {
    background: #2997f7
}

.b-blue-2 {
    background: #5c7cff
}

.b-green {
    background: #12b928
}

.b-purple {
    background: #d448f5
}

/*这里用的颜色其实就是原来十六进制颜色透明色*/
.c-gray {
    color: rgba(136, 136, 136, 1);
    background: rgba(136, 136, 136, 0.2)
}

.c-white {
    color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.2)
}

.c-red {
    color: rgba(255, 84, 115, 1);
    background: rgba(255, 84, 115, 0.2)
}

.c-red-2 {
    color: rgba(194, 41, 46, 1);
    background: rgba(194, 41, 46, 0.2)
}

.c-yellow {
    color: rgba(255, 111, 6, 1);
    background: rgba(255, 111, 6, 0.2)
}

.c-yellow-2 {
    color: rgba(179, 103, 8, 1);
    background: rgba(179, 103, 8, 0.2)
}

.c-blue {
    color: rgba(41, 151, 247, 1);
    background: rgba(41, 151, 247, 0.2)
}

.c-blue-2 {
    color: rgba(77, 130, 249, 1);
    background: rgba(77, 130, 249, 0.2)
}

.c-cyan {
    color: rgba(8, 196, 193, 1);
    background: rgba(8, 196, 193, 0.2)
}

.c-green {
    color: rgba(18, 185, 40, 1);
    background: rgba(18, 185, 40, 0.2)
}

.c-green-2 {
    color: rgba(72, 135, 24, 1);
    background: rgba(72, 135, 24, 0.2)
}

.c-purple {
    color: rgba(213, 72, 245, 1);
    background: rgba(213, 72, 245, 0.2)
}

/*一个不错的悬停样式*/
.hvr-underline-from-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.hvr-underline-from-left:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    bottom: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
    right: 0;
}

/*一点变形动画使过渡平滑*/
.defaultTransition {
    transition: background-color 1s ease,
    width 0.6s ease, height 0.6s ease,
    left 0.6s ease, right 0.6s ease,
    top 0.6s ease, bottom 0.6s ease,
    border-radius 0.6s ease;
}

/*链接没有下划线*/
a {
    text-decoration: none;
    color: inherit;
    /*color:  rgba(224, 224, 224, 0.9);*/
}

/*无法选中*/
.not-select {
    user-select: none; /* 禁止选中文字 */
    -webkit-user-select: none; /* 兼容WebKit浏览器，如Safari和Chrome */
    -moz-user-select: none; /* 兼容Firefox */
    -ms-user-select: none; /* 兼容Edge */
    -webkit-tap-highlight-color: transparent; /* 禁止点击高亮 */
}

/*使每一块部分分明，颜色将近区分*/
.box-shadow {
    /*这个可以让用百分比的一些元素不再思考边框占用的像素*/
    box-sizing: border-box;
    box-shadow: 0 0 3px rgba(0, 0, 0, .05);
    /*添加1px的边框,所有边款-2px*/
    border: 1px solid rgba(0, 0, 0, .1);
}

/*页面样式*/
html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-size: 16px;
}

h1, h2, h3 {
    font-weight: 500;
    letter-spacing: .3rem;
    text-transform: uppercase
}


::-webkit-scrollbar {
    display: none;
}


.board {
    width: 100%;
    position: sticky;
    top: 5vh;
    height: 95vh;
    margin-top: 5vh;
    color: #fff;
    box-shadow: 0 -5px 5px rgba(0, 0, 0, .06);
    background-color: rgba(255, 255, 255, 0); /* 完全透明 */
    display: flex;
    align-items: center;
}

.board-index {
    border-radius: 0;
    top: 0 !important;
    margin-top: 0;
    height: 100vh;
    background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("../image/index/108755811_p0.jpg");
    /*background-image: url("../image/108755811_p0.jpg");*/
    background-size: cover;
    background-position: center;
}

/*代替第一张的视屏*/
.background-video {
    height: 100%;
    width: 100%;
    z-index: -1;
    object-fit: cover;
}


/*导航按钮组和导航按钮默认参数*/
.board-nav-btns, .board-nav-btn {
    position: absolute;
    top: 0;
}

/*主页导航按钮们*/
.board-nav-btns a {
    position: initial;
    width: 125px;
    margin-top: 0;
    float: left;
    white-space: nowrap;
    /*box-shadow: -5px -5px 5px rgba(0, 0, 0, .1);*/
    top: 0;
    box-sizing: border-box;
    align-items: center;
    border-top-left-radius: 20px;
    height: 5vh;
    display: flex;
    padding: 25px 35px;
    overflow: hidden;
    font-size: 1em;
    color: #fff;
}

/*卡片标题盒子默认参数*/
.board-title {
    /*这是第一张卡片头部的默认参数*/
    /*width: calc(100% - 125px);*/
    /*margin-left: 125px;*/
    position: absolute;
    box-shadow: -3px -5px 3px 1px rgba(0, 0, 0, 0.4);
    margin-top: -5vh;
    top: 0;
    box-sizing: border-box;
    align-items: center;
    border-top-left-radius: 20px;
    height: 5vh;
    display: flex;
    padding: 25px 35px;
    overflow: hidden;
    font-size: 1em;
    color: #fff;
}

/*卡片标题背景默认参数*/
.board-title-bg {
    position: absolute;
    height: 95vh;
    z-index: -1;
    top: 0;
    left: 0;
    overflow: hidden;
    /*!*background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("../image/115073801_p0.jpg");*!*/
    /*background-image: url("../image/115073801_p0.jpg");*/
    /*background-size: cover;*/
}

/*卡片内容背景默认参数*/
.board-content-bg-box {
    top: 0;
    position: absolute;
    width: 100%;
    height: 95vh;
    z-index: -1;
    overflow: hidden;
}

.board-content-bg {
    margin-top: 0vh;
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: -1;
    top: -5vh;
    /*overflow: hidden;*/
    /*background-image: url("../image/115073801_p0.jpg");*/
    /*background-size: cover;*/
    /*这样会导致没有顶部的5vh部分，缩放的时候实际会有所不同.margin-left的图片也好像会有问题。我评价是都不要用*/
    /*background-position: 0 -5vh;*/
    /*background-image: url("../image/109708072_p0(ps).png");*/
}


.board-1 {
    justify-content: center;
    align-items: center;
}

.board-2 {
    justify-content: center;
    align-items: center;
}

/*每个卡片标题盒子的宽度和向右偏移的距离*/
.board-1 .board-title {
    width: calc(100% - 125px);
    margin-left: 125px;
}

/*每个卡片标题背景的宽度和实际位置*/
/*宽度要求是总长度减去盒子向右偏移的长度*/
/*偏移量是保持和卡片内容背景位置一致*/
.board-1 .board-title-bg {
    /*width: calc(100% + 125px);*/
    margin-left: -125px;
    width: 100vw;
    height: 100vh;
    position: absolute;
    background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6)), url("../image/index/109708072_p0(ps).jpg");
    background-size: cover;
}

/*因为上面有一个卡片标题背景占用了5vh，所以图片要向上移动5vh*/
.board-1 > .board-content-bg-box > .board-content-bg {
    background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, .6)), url("../image/index/109708072_p0(ps).jpg");
    background-size: cover;
}


.board-2 .board-title {
    width: calc(100% - 250px);
    margin-left: 250px;
}

.board-2 .board-title-bg {
    /*width: calc(100% + 250px);*/
    width: 100vw;
    height: 100vh;
    margin-left: -250px;
    background: linear-gradient(to right, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url("../image/index/20240710155944385.jpg");
    background-size: cover;
}

.board-2 > .board-content-bg-box > .board-content-bg {
    background: linear-gradient(to right, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url("../image/index/20240710155944385.jpg");
    /*background:url("../image/20241203003832200.png");*/
    background-size: cover;

}


/*主页页面的模块布局*/
.board-index .left-text {
    position: absolute;
    left: 20%
}

.board-index .left-text > h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 70px
}

.board-index .left-text > h3 {
    font-size: 30px;
    margin-top: 0;
    margin-bottom: 40px
}

.board-index .left-text > div {
    display: flex;
    align-items: center
}

.board-index .left-text > div > a {
    padding: 15px 40px;
    border: 2px solid #fff;
    border-radius: 30px;
    color: #fff;
    transition: all .3s
}

.board-index .left-text > div > a:hover {
    background-color: #fff;
    color: #333 !important;
}

.board-index .left-text > div > a:active {
    transform: scale(.7)
}

.board-index .left-text > div > a:nth-child(1) {
    margin-right: 20px
}


/*向下翻页按钮*/
.float-down {
    animation: 1s ease-in-out 0s infinite alternate float;
    animation-direction: alternate-reverse;
    position: absolute;
    font-size: 40px;
    right: calc(50% - 15px);
    bottom: 7%;
    color: rgba(255, 255, 255, .5);
    transition: all .3s;
    z-index: 999;
}

@keyframes float {
    from {
        transform: translate(0, 0)
    }

    to {
        transform: translate(0, 7px)
    }
}

.float-down:hover {
    color: #fff
}

/*第一张卡片的内容*/
/*这里不适合只有10vh高度的盒子，是在想不到办法改了*/
.toolBox {
    width: 85%;
    height: 80%;
    display: grid;
    /*虽然还是没有明白2fr是什么东西但是不妨碍我使用了*/
    grid-template-columns: repeat(auto-fill, minmax(280px, 2fr));
    /*只能这样搞了，最多两行，超出部分影藏*/
    grid-template-rows: repeat(2, 45%);
    overflow: hidden;
    row-gap: 3rem;
    column-gap: 1.5rem;
    margin: 1rem 1rem 1rem 1rem;
}

.toolBox > a {
    border-style: solid;
    --un-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--un-border-opacity));
    border-width: 2px;
    display: flex;
    flex-direction: column; /* 设置子元素垂直排列 */

}

/*定义一个关键帧动画供其他调用*/
/*用于鼠标悬停微微翻动放大的样子*/
/*找不到这个动画好像动作也非常不错*/
@keyframes index-link-active {
    0% {
        transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(0);
    }
    16% {
        transform: perspective(2000px) rotateX(10deg) rotateY(5deg) translateZ(32px);
    }
    100% {
        transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(65px);
    }
}

/*这里可能真的不适合这个，太窄了。*/
.toolBox > a:hover {
    opacity: 1;
    z-index: 99;
    /*下面的圆角会使内部图片不跟着变圆，直接使用影藏。但是发现这个使用小宽度的设备鼠标悬停会有抽搐bug，但是博客主页的却没有这个问题*/
    overflow: hidden;
    border-radius: 15px;
    transform: translateY(-5px);
    /*阴影就算了好像也不好看*/
    /*box-shadow: 0 3px 20px rgba(0, 0, 0, .25);*/
    animation: index-link-active 1s cubic-bezier(0.315, 0.605, 0.375, 0.925) forwards;
}

.toolBox > a > img {
    object-fit: cover;
    width: 100%;
    height: 9rem;
}


.toolBox > a > .textBox {
    background: var(--page-color);
    padding: 0.5rem 1rem 0 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column
}

.toolBox > a > .textBox > .title {
    color: #c1508e;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin: 0;
}

.toolBox > a > .textBox > .introduction {
    color: rgba(224, 224, 224, 0.9);
    font-size: .875rem;
    line-height: 1.25rem;
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    overflow: hidden; /* 隐藏超出的内容 */
    display: -webkit-box; /* 创建一个多行文本容器 */
    -webkit-line-clamp: 3; /* 显示3行，超出显示省略号 */
    -webkit-box-orient: vertical; /* 设置盒子内容的排列方式为垂直 */
    text-overflow: ellipsis; /* 超出文本部分显示省略号 */
    margin-top: 5px;
    margin-bottom: 5px;
}

.toolBox > a > .textBox > .pageInfo {
    color: rgba(224, 224, 224, 0.9);
    font-size: .875rem;
    line-height: 1.25rem;
    text-align: right;
    /*position: relative;*/
    /*bottom: 5%;*/
    /*right: 5%;*/
    margin-top: auto
}


.board-2 .left-text {
    position: absolute;
    left: 20%
}

.board-2 .left-text > div a {
    text-decoration: underline;
}

.board-2 .left-text div a:hover {
    color: #000000; /* 默认文字颜色 */
    transition: color 0.3s ease; /* 颜色过渡效果 */
}


/*登录注册招呼密码一体样式*/

.single-bg {
    background-image: url(../image/index/89392245_p0.jpg);
    background-size: cover;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -1
}

.single-bg:after {
    content: "";
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(246, 246, 246, .85)
}

#mian-form {
    height: 100vh;
    width: 100vw;
    margin: 0;
    display: flex;
    /*上下居中即水平居中*/
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}


#mian-form > div {
    display: flex;
    /*上下居中即水平居中*/
    align-items: center;
    box-sizing: border-box;
    min-height: 60vh;
    width: 75vw;
    box-shadow: 0 6px 15px rgba(36, 37, 38, .1);
    border-radius: 3px;
    max-width: 1600px;
    margin: 0 auto;
    background-color: #fff;
}

#mian-form > div > div {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*padding: 30px 0;*/
    border-radius: 3px;
    max-width: 1600px;
    margin: 0 auto;
}

.form-img {
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 30px;
    width: calc(100% - 480px);
}

.form-content {
    background-color: #fff;
    display: flex;
    flex-direction: column; /* 使子元素垂直排列 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 100%;
    width: 450px;
}

#mian-form label {
    color: #2c2929;
    overflow: hidden;
    padding: 3px;
    font-size: 15px;
    text-align: left;
    flex-shrink: 0;
}

.form-content > p {
    padding: 10px 30px 20px;
    font-size: 1.5em;
    margin: -3px 15px 0 0;
}

.form-content > div {
    padding-top: 15px;
    padding-bottom: 15px;
    width: 90%;
}

.form-content > .input-box, .form-content > .btn-box {
    display: flex;
    justify-content: center;
}

.form-content .input-box > label {
    width: 20%;
    display: flex;
    justify-content: center;
}

.form-content .input-box > div {
    width: 80%;
    overflow: hidden;
}


.form-content > .input-box input {
    margin-left: 10px;
    border: none;
    -webkit-appearance: none;
    outline: 0;
    font-size: 14px;
    width: 75%;
    color: #222;
    padding: 3px 5px;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    transition: all .5s;
}

.form-content > .input-box .other-btn {
    position: relative;
    left: -50px;
    border: none !important;
    background: none !important;
}


.form-content > .other-btn-box {
    position: relative;
    text-align: right;
    right: 15%;
}

.form-content .other-btn {
    color: #1db4ff;
    cursor: pointer;
    transition-duration: .3s;
}

.form-content > .other-btn-box .other-btn:nth-child(1) {
    margin-right: 10px;
}

.form-content > .btn-box > .btn {
    padding: 10px 20px;
    width: 120px;
    height: 50px;
    cursor: pointer;
    border-radius: 500px;
    border: none;
    background-color: #419664;;
    color: #fafafa;
    font-size: 15px;
    outline: 0;
    -webkit-transition: all .3s;
    transition: all .3s;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, .15);
}

.form-content > .btn-box > .btn:nth-child(1) {
    background-color: #af66a6;
    margin-right: 30px;
}

/* 手机样式 */
@media screen and (max-width: 599px) {
    /*.toolBox{*/
    /*    grid-template-columns: repeat(auto-fill, minmax(250px, 2fr));*/
    /*    width: 100%;*/
    /*    height: 90%;*/
    /*}*/
    /*.toolBox > a > .textBox {*/
    /*    background: var(--page-color);*/
    /*    padding:0.2rem;*/
    /*}*/
}

/* 平板样式 */
@media screen and (min-width: 600px) and (max-width: 1023px) {
}