/*-------滚动条整体样式----*/
::-webkit-scrollbar {
    width:8px;
    height:8px;
}
/*滚动条里面小方块样式*/
::-webkit-scrollbar-thumb {
    border-radius:100px;
    -webkit-box-shadow:inset 0 0 5px rgba(255,255,255,0.2);
    background:#bbb;
}
/*滚动条里面轨道样式*/
::-webkit-scrollbar-track {
    -webkit-box-shadow:inset 0 0 5px rgba(255,255,255,0.2);
    border-radius:0;
    background:rgba(255,255,255,0.1);
}
/*-------end 滚动条整体样式----*/


@media (max-width: 600px) {
    /*.sidebar-nav{ display: none; }*/
    /*.fixed-bottom{ display: none; }*/
    #sidebarMenu{
        top: 0;
    }
    .alert-center{
        width: 80%;
    }
}



@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}



/* 定义关键帧 */
@keyframes bg-ani {
    0% {
        width: 20vw;
        transform: translate3d(-1500px, 100px, 80px);
    }
    10% {
        width: 20vw;
        transform: translate3d(-1000px, 100px, 80px);
    }
    30% {
        width: 20vw;
        transform: translate3d(-1000px, 100px, 80px);
    }

    60% {
        width: 6vw;
        transform: translate3d(600px, 200px, 20px);

    }
    100% {
        width: 6vw;
        transform: translate3d(600px, 200px, 20px);

    }
}


.bg-animation {
    animation: bg-ani 36s infinite;
}
.star-animation {
    animation: rotate 10s infinite;
    transition: top 1s, left 1s, width 1s;
}

/*整体框架*/
.section-style{
    border-radius: 0 0 50px 0;
    margin: 30px 0 0 0;
    padding: 20px 0 20px 0;
}
a {
    color: #6c757d;
    text-decoration:none;
}
a:hover{
    color: #212529;
    text-decoration:none;
}

body {

}
/*body::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    background-image: url('https://www.corm.cc/upload/img/boby.png');*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*    filter: blur(4px);*/
/*    -webkit-filter: blur(4px);*/
/*    z-index: -1;*/
/*}*/

/* 基本的下拉框样式 */
select {
    width: 40%;
    height: 30px;
    padding: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    appearance: none; /* 移除默认外观 */
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Chrome, Safari, and Opera */
}

/* 隐藏默认的下拉箭头 */
select::-ms-expand {
    display: none; /* Internet Explorer 11 and earlier */
}


.w-64px {
    width: 64px;
}
.h-64px {
    height: 64px;
}
/*end 整体框架*/


/*headerNav*/
.fix-icon-header{
    z-index: 1050;
    position: fixed;
    right: 20px;
    top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    /* background-color: #e3e3e3; */
}
.fix-icon-header>div:hover{
    background-color: #007bff;
    color: #fff;
}
.first-icon-header{
    text-align: center;
    line-height: 36px;
    width: 52px;
    height: 52px;
    background: #eee;
    border-radius: 50%;
    margin-right: 20px;
}
.second-icon-header{
    text-align: center;
    line-height: 36px;
    width: 52px;
    height: 52px;
    background: #ffdced;
    border-radius: 50%;
    margin-right: 20px;
}
.three-icon-header{
    /*visibility: hidden;*/
    text-align: center;
    line-height: 36px;
    width: 52px;
    height: 52px;
    background: #eee;
    border-radius: 50%;
}



/*end headerNav*/


/*悬浮按钮*/
.first-icon{
    text-align: center;
    line-height: 36px;
    width: 40px;
    height: 40px;
    background: #eee;
    border-radius: 50%;
    margin-right: 20px;
}
.second-icon{
    text-align: center;
    line-height: 36px;
    width: 40px;
    height: 40px;
    background: #ffdced;
    border-radius: 50%;
    margin-right: 20px;
}
.three-icon{
    /*visibility: hidden;*/
    text-align: center;
    line-height: 36px;
    width: 38px;
    height: 38px;
    background: #eee;
    border-radius: 50%;
}
.fix-icon{
    z-index: 1050;
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    /* background-color: #e3e3e3; */
}
.fix-icon>div:hover{
    background-color: #007bff;
    color: #fff;
}
/*end 悬浮按钮*/

/*证件格式*/

.card:hover{
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%)
}
.margin-credentials{
    margin-bottom: 0;
    margin-left: -36px
}
.valid-until-credentials{
    color: #f8f9fa;
    font-weight: 800;
    background-color: rgb(255 71 89);
}
.valid-credentials{
    color: #212529;
    font-weight: 800;
    background-color: #f8f9fa;
}
/*end 证件格式*/

/*按钮*/
.credentials-button{
    border:0;
    padding-top: 2px;
    padding-bottom: 2px;
}

.button-flyff {
    /* 设置按钮的基本样式 */
    display: inline-block;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid #b9b9b9;
    border-radius: 6px;
    cursor: pointer;

    /* 设置立体渐变背景 */
    background-image: linear-gradient(to bottom,  #e9e9e9,#ffffff, #f5ebeb, #ffffff, #e9e9e9);
    box-shadow: inset 0px -18px 2px 0px rgb(0 0 0 / 10%), 0 4px 8px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
}
    /* 设置按钮的悬停效果 */
.button-flyff:hover {
         transform: translateY(-2px);
         box-shadow:
                 0 3px 6px rgba(0, 0, 0, 0.15),
                 0 6px 12px rgba(0, 0, 0, 0.2),
                 0 12px 24px rgba(0, 0, 0, 0.25);
}

    /* 设置按钮的点击效果 */
.button-flyff:active {
         transform: translateY(1px);
         box-shadow:
                 0 1px 3px rgba(0, 0, 0, 0.1),
                 0 2px 6px rgba(0, 0, 0, 0.15),
                 0 4px 12px rgba(0, 0, 0, 0.2);
}


.button-flyff-text {
    font-size: 16px;
    font-weight: bold;
    color: #f8f8f8;
    text-shadow:
            2px 2px 4px #a0a0a0, -2px -2px 4px #a0a0a0; /* 第二个阴影：水平偏移-2px，垂直偏移-2px，模糊距离4px，颜色为黑色 *//* 第一个阴影：水平偏移2px，垂直偏移2px，模糊距离4px，颜色为黑色 */
}


/* end按钮*/


/*公司内容*/
.border-company{
    border: 1px solid #eee;

}
/*公司内容*/

.focus{background:#007bff;color:#fff}
.focus-a{background:#343a40;color:#fff}


/*边框*/

.three-color-border {
    border-radius: 6px;
    position: relative;
    padding: 8px;
    background-color: #f8f9fa !important; /* 或者你想要的背景色 */
    /*background-color: #ffffffd9; !* 或者你想要的背景色 *!*/
}

.three-color-border::before,
.three-color-border::after {
    content: "";
    position: absolute;
    border-radius: 6px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.three-color-border::before {
    box-shadow: 0 0 0 3px #ca895e, 0 0 0 4px #e9a480;
    z-index: -1;
}

.three-color-border::after {
    box-shadow: 0 0 0 6px #cc8a3b;
    z-index: -2;
}

.card-flyff{
    flex: 1 1 auto;
    min-height: 1px;
    padding: .25rem;
}

.ultimate-color{
    /* 创建一个45度角的红色到蓝色的线性渐变 */
    background-image: linear-gradient(45deg, #d4719f, #aa0c53);
       /* 创建一个多色线性渐变，从上到下的过渡 */
}

.ultimate-color-text {
    position: relative;
    padding: 4px;
    font-weight: 600;
    font-size: 80%;
    z-index: 2; /* 确保文本显示在背景之上 */
    /* 创建一个多色线性渐变，从上到下的过渡 */
    background-image: linear-gradient(to bottom, #ffffff, #ffffff,#ffffff,orange,yellow, orange,yellow,yellow);
    /* 文本填充颜色设置为透明 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ultimate-color-border {
    border-radius: 6px;
    position: relative;
}

.ultimate-color-border::before,
.ultimate-color-border::after {
    content: "";
    position: absolute;
    border-radius: 6px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ultimate-color-border::before {
    box-shadow: 0 0 0 1px #e391ec, 0 0 0 2px #fffffd;
    z-index: -1;
}

.ultimate-color-border::after {
    box-shadow: 0 0 0 3px #222047;
    z-index: -2;
}

.other-color-text {
    position: relative;
    padding: 4px;
    font-weight: 600;
    font-size: 80%;
    z-index: 2; /* 确保文本显示在背景之上 */
    /* 创建一个多色线性渐变，从上到下的过渡 */
    background-image: linear-gradient(to bottom, #b1b1b1, #dbb89d,#B1B1B1, #f1e3d2,#f1e3d2, orange,#dbb89d,#dbb89d);
    /* 文本填充颜色设置为透明 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.other-color-border {
    border-radius: 6px;
    position: relative;
}

.other-color-border::before,
.other-color-border::after {
    content: "";
    position: absolute;
    border-radius: 6px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.other-color-border::before {
    box-shadow: 0 0 0 1px #312c2c, 0 0 0 2px #fffffd;
    z-index: -1;
}

.other-color-border::after {
    box-shadow: 0 0 0 3px #222047;
    z-index: -2;
}

/*内框*/

.inner-shadow-border {
    border: 0;
    padding: 10px 20px;
    margin: 20px 8px;
    background-color: white;
    box-shadow: inset  0 10px 4px 0px rgb(0 0 0 / 20%);
    border-radius: 10px; /* 可选，为div添加圆角 */
}
.inner-shadow-mini-border {
    padding: 2px 2px;
    margin: 20px 8px;
    background-color: white;
    box-shadow: inset  0 10px 4px 0px rgb(0 0 0 / 20%);
    border-radius: 6px; /* 可选，为div添加圆角 */
}
/*卡槽*/
.card-slot{
    border: 0;
    margin: 10px 10px;
    background-color: white;
    box-shadow: inset 0 10px 4px 0px rgb(0 0 0 / 20%);
    border-radius: 10px;
}

/*类 Window 的标题栏*/

.window-flyff {
    position: relative;
}

.title-bar-flyff {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-image: linear-gradient(to bottom, #d9ae7b, #fed09d, #d9ae7b,#fed09d, #d9ae7b,#fed09d, #d9ae7b,#fed09d,#d9ae7b,#fed09d,#d9ae7b);
    padding: 2px;
    cursor: move; /* Optional: Gives a visual cue that the title bar can be moved */
    z-index: 10; /* Ensure it's above other content within the div */
}

.title-text-flyff {
    font-weight: bold;
    margin-left: 5px;
    color: #f8f8f8;
    text-shadow: 2px -2px 2px #d95b33, -2px 2px 2px #d95b33, 2px 2px 2px #d95b33, -2px -2px 2px #d95b33; /* 第二个阴影：水平偏移-2px，垂直偏移-2px，模糊距离4px，颜色为黑色 *//* 第一个阴影：水平偏移2px，垂直偏移2px，模糊距离4px，颜色为黑色 */
}

/*宠物*/

.pet-lv-flyff{
    width: 64px;        /* 定义div的宽度 */
    height: 64px;       /* 定义div的高度 */
    background-size: cover;                         /* 背景图片覆盖整个div */
    background-repeat: no-repeat;
}
.pet-lv-flyff-null{
    background-image: url('https://www.corm.cc/upload/icon/pets/pet_null.png');/* 设置背景图片 */
}
.pet-lv-flyff-f{
    background-image: url('https://www.corm.cc/upload/icon/pets/pet_f.png');
}
.pet-lv-flyff-e{
    background-image: url('https://www.corm.cc/upload/icon/pets/pet_e.png');
}
.pet-lv-flyff-d{
    background-image: url('https://www.corm.cc/upload/icon/pets/pet_d.png');
}
.pet-lv-flyff-c{
    background-image: url('https://www.corm.cc/upload/icon/pets/pet_c.png');
}
.pet-lv-flyff-b{
    background-image: url('https://www.corm.cc/upload/icon/pets/pet_b.png');
}
.pet-lv-flyff-a{
    background-image: url('https://www.corm.cc/upload/icon/pets/pet_a.png');
}
.pet-lv-flyff-s{
    background-image: url('https://www.corm.cc/upload/icon/pets/pet_s.png');
}

.step {
    margin-bottom: 20px;
}
.step button {
    margin-top: 10px;
}

.icon {
    cursor: pointer;   /* 鼠标悬停时显示手形 */
    width: 48px;        /* 定义div的宽度 */
    height: 48px;       /* 定义div的高度 */
    background-size: cover;                         /* 背景图片覆盖整个div */
    background-repeat: no-repeat;
}

.icon.selected { /* 选中后的样式 */
    box-shadow: inset  0 10px 4px 0px rgb(0 0 0 / 20%);
    filter: contrast(1.2); /* 降低亮度，增加对比度 */
}

.icon.disabled {  /* 禁用后的样式 */
    pointer-events: none;
    filter: brightness(50%); /* 50%的亮度，你可以根据需要调整这个值 */
}

.fa-icon-1{
    background-image: url('https://www.corm.cc/upload/items/petunicorn01_00.png');
}
.fa-icon-2{
    background-image: url('https://www.corm.cc/upload/items/petdragon01_00.png');
}
.fa-icon-3{
    background-image: url('https://www.corm.cc/upload/items/petangel01_01.png');
}
.fa-icon-4{
    background-image: url('https://www.corm.cc/upload/items/peteagle01_01.png');
}
.fa-icon-5{
    background-image: url('https://www.corm.cc/upload/items/petninefox01_01.png');
}
.fa-icon-6{
    background-image: url('https://www.corm.cc/upload/items/petrabbit02_01.png');
}
.fa-icon-7{
    background-image: url('https://www.corm.cc/upload/items/petwhitetiger01_01.png');
}
.fa-icon-8{
    background-image: url('https://www.corm.cc/upload/items/petkingcrab01_1.png');
}
.fa-icon-9{
    background-image: url('https://www.corm.cc/upload/items/petbarbarylion01_00.png');
}
/*元素强化*/
.element-card {
    cursor: pointer;   /* 鼠标悬停时显示手形 */
    width: 36px;        /* 定义div的宽度 */
    height: 36px;       /* 定义div的高度 */
    background-size: cover;                         /* 背景图片覆盖整个div */
    background-repeat: no-repeat;
}

.element-card.selected { /* 选中后的样式 */
    box-shadow: inset  0 10px 4px 0px rgb(0 0 0 / 20%);
    filter: contrast(1.2); /* 降低亮度，增加对比度 */
}

.element-card.disabled {  /* 禁用后的样式 */
    pointer-events: none;
    filter: brightness(50%); /* 50%的亮度，你可以根据需要调整这个值 */
}

.ele-icon-1{
    background-image: url('https://www.corm.cc/upload/items/genmatelewind.png');
}
.ele-icon-2{
    background-image: url('https://www.corm.cc/upload/items/genmateleearth.png');
}
.ele-icon-3{
    background-image: url('https://www.corm.cc/upload/items/genmateleeletri.png');
}
.ele-icon-4{
    background-image: url('https://www.corm.cc/upload/items/genmatelewater.png');
}
.ele-icon-5{
    background-image: url('https://www.corm.cc/upload/items/genmatelefire.png');
}

/*转盘类*/
.ly-plate{
    position:relative;
    width:454px;
    height:454px;
    margin: 50px auto;
}

.rotate-bg{
    width: 454px;
    height: 454px;
    background: url(https://www.corm.cc/upload/img/ly-plate.png);
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 0;
}

.ly-plate div.lottery-star{
    width:130px;
    height:130px;
    position:absolute;
    top:164px;
    left:164px;
    /*text-indent:-999em;
    overflow:hidden;
    background:url(rotate-static.png);
    -webkit-transform:rotate(0deg);*/
    outline:none
}

.ly-plate div.lottery-star #lotteryBtn{
    cursor: pointer;
    position: absolute;
    top:0;
    left:0;
    *left:-107px
}

/*职业技能模拟*/

.skill-img-show {
    position: relative;
    display: inline-block; /* 或者使用其他适合你布局的display属性 */
}

.skill-img-show img {
    display: block; /* 防止图片下方有空隙 */
    width: 100%;    /* 根据需要调整宽度 */
    height: auto;   /* 保持图片比例 */
}

.skill-img-show p {
    position: absolute;
    bottom: 0;
    right: 0;
    color: white; /* 根据需要调整颜色 */
    text-shadow: 0 0 8px #E2A021, 0 0 8px #E2A021, 0 0 8px #e2a021; /* 发光效果 */
    padding: 1px 6px; /* 根据需要调整内边距 */
    margin: 0;    /* 移除默认外边距 */
    font-weight: bolder;
}

/*左侧导航栏*/

.sidebar-nav{
    height: 100vh;
    top: 40px;
    width: 100vw;
    z-index: 400;
    position: fixed;
    transition: width 1s; /* 过渡效果应用于宽度，‌持续2秒 */
}

.navbar-flyff {
    /* 设置按钮的基本样式 */
    text-decoration: none;
    cursor: pointer;

    /* 设置立体渐变背景 */
    background-image: linear-gradient(to bottom,  #ffffff30,#ededed30, #ededed59, #fdf7f742, #efefefbf);
    box-shadow: inset 0px -18px 2px 0px rgb(0 0 0 / 6%), 0 4px 8px rgb(0 0 0 / 13%), 0 8px 16px rgb(0 0 0 / 25%);
}

.navbar-flyff-text {
    font-size: 16px;
    font-weight: bold;
    color: #f8f8f8;
    text-shadow:
            1px 3px 4px #575757, -5px 2px 4px #919191; /* 第二个阴影：水平偏移-2px，垂直偏移-2px，模糊距离4px，颜色为黑色 *//* 第一个阴影：水平偏移2px，垂直偏移2px，模糊距离4px，颜色为黑色 */
}

/*兑奖券*/
.coupon-code-card{
    background-image: url('https://www.corm.cc/upload/icon/ticket-perforated.svg');
    background-size: contain; /* 或 'cover', 'auto' 等 */
    background-repeat: no-repeat; /* 或 'repeat', 'repeat-x', 'repeat-y' 等 */
    background-position: left; /* 或其他位置值 */
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    transition: filter 0.3s ease;
}

.coupon-code-card:hover {
    filter: brightness(0.2) contrast(2.2); /* 降低亮度并增加对比度来加深颜色 */
}



.float-box {
    position: absolute;
    width: 260px; /* 根据需要调整 */
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 999;
}

.float-box-header {
    position: fixed;
    width: 260px; /* 根据需要调整 */
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 999;
}

/*祝福系统*/
#lotteryContainerFirst,#lotteryContainerSecond {
    height: 250px;
    overflow: hidden;
    position: relative;
    border: 0;
    padding: 10px 20px;
    margin: 20px 8px;
    background-color: white;
    box-shadow: inset  0 10px 4px 0px rgb(0 0 0 / 20%);
    border-radius: 10px; /* 可选，为div添加圆角 */
}

#lotteryWrapperFirst,#lotteryWrapperSecond{
    display: flex;
    flex-direction: column;
    position: absolute;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 0.5s ease-out; /* 添加缓动效果 */
}

.lotteryItem {
    flex: 0 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    color: #333;
}

.rolling {
    animation: scrollUp 0.2s linear infinite; /* 更快但分步的滚动效果 */
}


.highlight {
    background-color: yellow; /* 或者你想要的其他高亮颜色 */
    color: red; /* 文字颜色，可选 */
    font-weight: bold; /* 字体加粗，可选 */
}

@keyframes scrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

/*底部标签*/
.fixed-footer{
    position: fixed;
    /* right: 0; */
    bottom: 15px;
    left: 0;
    z-index: 1030;
}
/*底部提示*/
.result-tips{
    position: fixed;
    justify-content: flex-end;
    height: auto;
    bottom: 70px;
    right: 20px;
    z-index: 400;
}

/*武器进度条*/
.progress-bar-weapon{
    font-weight: 800;
    overflow: inherit;
    color: #000000;
    background-color: #ffd8a6;
}

/*警告栏*/
.alert-center{
    /* 通过设置top、left为50%，使元素的左上角位于屏幕中心 */
    top: 50%;
    left: 50%;
    /* 利用transform属性，将元素中心对准屏幕中心 */
    transform: translate(-50%, -50%);
    /* 可根据需要设置其他样式，例如宽度、高度、背景色等 */
    width: 70%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}