/*外盒样式*/
.box{
    width: 290px;
    height: 350px;
}
/*换频道box*/
.channelbox{
    width: 350px;
    height: 220px;
}
/*定时box*/
.timebox{
    width: 260px;
    height: 200px;
}
/*改密码box*/
.passbox{
    width: 290px;
    height: 400px;
}
/*登录box*/
.loginbox{
 max-width: 260px;
    height: 260px;
    margin:10px auto;

}
.rebox{
    max-width: 290px;
    height: 260px;
    margin:10px auto;

}
.loginbox2{
    margin-left: -30px; /* 向左偏移50像素 */
}



/*验证码输入框宽度*/
#authcode{
    width: 125px;
    height: 40px
}
/*验证码图片*/
#captcha_img {
    width: 80px;

}
/*账号密码验证码之类居中*/
.div{
    text-align: center;
    padding: 8px 0; /* 上下10px，左右0 */
}
/*绑定提交按钮居中*/
.btndvi{
    text-align: center;
    padding: 10px 0; /* 上下10px，左右0 */
}
/*登录按钮居中*/
.loginbtndiv{
    text-align: center;
    padding: 10px 0; /* 上下10px，左右0 */
}
/*登录按钮居中*/
.rebtndiv{
    text-align: center;
    padding: 10px 0; /* 上下10px，左右0 */
}

/*再想想返回*/
.zxx{
    text-align: center;
    padding: 10px 0; /* 上下10px，左右0 */
    margin-left: 40px; /* 向左偏移50像素 */
}
.zcfh{
    text-align: center;
    padding: 10px 0; /* 上下10px，左右0 */

}
/*注册页返回登录*/
.zcfh{
    text-align: center;
    padding: 10px 0; /* 上下10px，左右0 */

}

/*绑定按钮大小偏移*/
.bindingbtn{
    width: 260px;
    height: 45px;
    margin-left: 25px; /* 向左偏移50像素 */
}
/*登录按钮大小*/
.loginbtn{
    width: 260px;
    height: 45px;

}
/*登录按钮大小*/
.rebtn{
    width: 260px;
    height: 45px;

}
/*注册按钮大小*/
.rebtn{
    width: 260px;
    height: 45px;

}
/*换频道3个按钮大小偏移*/
.hpbtn{
    padding: 10px 0; /* 上下10px，左右0 */
    width: 280px;
    height: 45px;
    margin-left: 40px; /* 向左偏移50像素 */
}
/*时间2个按钮大小偏移*/
.timebtn{
    padding: 10px 0; /* 上下10px，左右0 */
    width: 350px;
    height: 45px;
    margin-left: 60px; /* 向左偏移50像素 */
}
.jsbtn{
    padding: 10px 0; /* 上下10px，左右0 */

    height: 45px;

    text-align:center;
    margin:20px 0;
}

/*设置时间2个按钮大小偏移*/
.hpbtn{
    padding: 10px 0; /* 上下10px，左右0 */
    width: 350px;
    height: 45px;
    margin-left: 36px; /* 向左偏移50像素 */
}
/*修改密码2个按钮偏移*/
.passbtn{
    padding: 10px 0; /* 上下10px，左右0 */
    margin-left: 66px; /* 向左偏移50像素 */
}
/*锁定账号宽度*/
.hpusername{

    width: 160px;

}
/*公告*/
#gonggao {
    color: #0598de;
    padding: 5px;
}

/*圆角*/
.yuan {
    border-radius: 20px 20px 20px 20px; /* 顺序为左上角、右上角、右下角、左下角 */
}
.zyuan {
    border-radius: 20px 0 0 0; /* 顺序为左上角、右上角、右下角、左下角 */
}
.yyuan {
    border-radius: 0 20px 0 0; /* 顺序为左上角、右上角、右下角、左下角 */
}
.xyuan {
    border-radius: 0 0 20px 20px; /* 顺序为左上角、右上角、右下角、左下角 */
}



/*首页登录外box*/
#sybox {
    align-items: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(4, 209, 252);
    background-color: #79918e6b;
    width: 420px;
    border-radius: 20px 20px 20px 20px; /* 顺序为左上角、右上角、右下角、左下角 */

}
/*首页登录注册菜单*/
.caidan {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px 20px 0 0; /* 顺序为左上角、右上角、右下角、左下角 */
}

#loginbody {
    width: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: linear-gradient(60deg, #20c0d5 0%, #3d99be 31%, #56317a 100%);

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 使容器的高度为视口高度，确保居中 */

}


.dlx {
    margin: 0 auto;
    width: 260px;
    display: flex;
    justify-content: space-between;
    padding: 2px;

}
.zddl {
    width: 100px;
    height: 20px;
font-size: 14px;
}

.wjmm {
    width: 60px;
    height: 20px;
    font-size: 14px;
}



/*用户中心box*/
#userbox {
    border-width: 2px;
    border-style: solid;
    border-color: rgb(4, 209, 252);
    background-color: #79918e6b;
    height: 100%;
    max-width: 555px;
    margin: 0 auto ;
    border-radius: 20px 20px 20px 20px; /* 顺序为左上角、右上角、右下角、左下角 */
}

.cebody {
    width: 100%;

    /*background-image: url(/style/images/img/11.jpg);
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;*/
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: linear-gradient(60deg, #20c0d5 0%, #3d99be 31%, #56317a 100%);
}
#welcome > .layui-card-body {
    padding: 0;
}

#welcome .layui-tab.layui-tab-card {
    margin: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
}

.welcome {
    /* 弹性布局 让页面元素垂直+水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 让页面始终占浏览器总高 */
    height: 360px;
}


/*修改layui默认样式*/
.layui-form-label {
    width: 56px !important;
}
.layui-input-block {
    margin-left: 86px !important;
}



.containeryl .ghost {
    /* 相对定位 */
    position: relative;
    width: 150px;
    height: 180px;
    /* 圆角属性 左上角和右上角为圆角 */
    border-radius: 75px 75px 0 0;
    background-color: #fff;
    /* 盒子阴影 inset是内阴影 啥都不加就是默认的外阴影(outset) */
    box-shadow: -17px 0 0 #dbdbdb inset, 0 0 50px #10b6e8;
    animation: ghost 2s infinite;
}
/* 眼睛 start */
.containeryl .ghost .ghostEyes {
    /* 弹性布局 */
    display: flex;
    /* 让元素平均分配宽度 */
    justify-content: space-around;
    width: 90px;
    padding-top: 50px;
    margin: 0 auto;
}
/* 利用两个伪元素做出卡姿兰大眼睛 */
.containeryl .ghost .ghostEyes::before,
.containeryl .ghost .ghostEyes::after {
    content: "";
    width: 15px;
    height: 25px;
    border-radius: 50%;
    background-color: #00034b;
}
/* 眼睛 end */

/* 腮红 start  */
/* 逻辑跟眼睛一样 */
.containeryl .ghost .ghostDimples {
    display: flex;
    justify-content: space-around;
    width: 130px;
    padding-top: 15px;
    margin: 0 auto;
}
.containeryl .ghost .ghostDimples::before,
.containeryl .ghost .ghostDimples::after {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #f9beff;
}
/* 腮红 end */

/* 脚 start  */
.containeryl .ghost .ghostFeet {
    /* 这个主要是向让四只脚水平排列  */
    display: flex;
    /* 绝对定位 */
    position: absolute;
    bottom: -13px;
    width: 100%;
}
.containeryl .ghost .ghostFeet .ghostFoot {
    width: 25%;
    height: 26px;
    border-radius: 50%;
    background-color: #fff;
}
/* 设置一下最后一个 让它跟身体的内阴影一样 */
.containeryl .ghost .ghostFeet .ghostFoot:last-child {
    /* 利用背景渐变色实现 to right 是从做到右 */
    background-image: linear-gradient(to right, #fff 55%, #dbdbdb 45%);
}
/* 脚 end */

/* 阴影 start */
.containeryl .shadow {
    width: 150px;
    height: 40px;
    margin-top: 50px;
    border-radius: 50%;
    background-color: #141415;
    /* 动画  名称 时长 infinite是无限次播放 */
    animation: shadow 2s infinite;
}
/* 阴影 end */
/* 然后制作漂浮的动画 */
@keyframes ghost {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        /* 2D位移 -15px 是向上走 */
        transform: translateY(-15px);
    }
}
@keyframes shadow {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        /* 缩放 .9比1小一点点 */
        transform: scale(0.9);
    }
}

.jisuandvi {
    margin: 0 auto;
    max-width: 290px;
    justify-content: center;
    align-items: center;

}

#box1{
    text-align:center
}

.jsdiv {
    margin: 0 auto;
    max-width: 290px;
    justify-content: center;
    align-items: center;

}

.zciframe{
    border: none;
    width:100%;
    height:350px;
    display: block;/*让底边不出现空白*/
}
.zbiframe{
    border: none;
    width:100%;
    height:450px;
    display: block;/*让底边不出现空白*/
}
.userbtn{

    margin-bottom:0;
}
/*头像容器样式*/
.avatar-container {
    display: flex;
    justify-content: center;
    width:100%;
    height: 32px;
    background-image: linear-gradient(60deg, #c9d936 0%, #ea620d 50%, #c407ef 100%);
    border-radius: 6px;
}
/*头像*/
.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #10b6e8;
    box-shadow: 0 3px 8px rgb(30, 158, 254);
    position: absolute;
    top: -17px; /* 关键：头像向上偏移80px */
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);/* 旋转360度 */
    /* 初始加载动画（只执行一次） */
    animation: rotate-once 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);/* 旋转360度 */
}

.avatar:hover {
    transform: rotate(360deg);
}

/* 初始加载时的旋转动画 */
@keyframes rotate-once {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/*结束--头像样式*/

/*等级和图标在一行显示*/
#dj {
    display: flex;
    align-items: center; /* 垂直居中 */
    gap: 2px; /* 两个div间距 */
}


/*显示等级图标*/
.icon-display {
    display: flex;
    flex-wrap: wrap; /* 核心属性：启用换行 */
    gap: 2px;

}
.user-level-display{

    margin-right: 4px; /* 距离左侧50px */
}


/*马甲和贡献在一行显示*/
#mjzpd {
    display: flex;
    align-items: center; /* 垂直居中 */
    gap: 2px; /* 两个div间距 */
}
.zpd{
    margin-right: 4px; /* 距离左侧50px */
}