@charset "utf-8";
/* tag cockfight設定 */
.cockfight_main [class*="dc_new_"],
.cockfight_main [class*="dc_hot_"] {
    position: initial;
}
.cockfight_main .dc_new_cockfight::before {background-image:url('/images/dc_new_08.png');}
.cockfight_main .dc_hot_cockfight::after {background-image:url('/images/dc_hot_08.png');}
.cockfight_main .dc_new_cockfight::before,
.cockfight_main .dc_hot_cockfight::after {
    width: 40px;
    left: 1px;
    top: 1px;
}

.cockfight_main * {box-sizing: border-box;}
.cockfight_main {
    background-image: url('/images_plus/cn/cockfight/common/bg_cf.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.cockfight_wrap {
    height: 605px;
    margin: 0 auto;
    position: relative;
    width: 1090px;
}

/* === cock stratr === */
.effect_wrap {
    position: relative;
    height: 605px;
    -webkit-perspective: 605;
    perspective: 605;
    overflow: hidden;
    pointer-events: none;
}
.layer {
    position: absolute;
    will-change: transform;
}
.cock_group {
    height: 605px;
    width: 1090px;
    margin-left: -49%;
    margin-top: -21%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
}
.layer_cock1,
.layer_cock2,
.layer_cock3 {
    background-repeat: no-repeat;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(.85);
    transform: scale(.85);
}
.layer_cock1 {
    background-image: url('/images_plus/cn/cockfight/common/element_bg.png');
    height: 592px;
    width: 997px;
    left: 29%;
    top: 14%;
}
.layer_cock2,
.layer_cock3 {
    -webkit-filter: drop-shadow(4px 18px 7px rgb(0 0 0 / 70%));
    filter: drop-shadow(4px 18px 7px rgb(0 0 0 / 70%));

}
.layer_cock2 {
    background-image: url('/images_plus/cn/cockfight/common/element_chickenR.png?v1');
    height: 370px;
    width: 440px;
    left: 61%;
    top: 5%;
    /* animation: layer_cock2 1s cubic-bezier(0.6,-0.28, 0.65, 1.31); */
    animation: layer_cock2 1s cubic-bezier(0.6,-0.28, 0.65, 1.31), wut 0.8s ease-in infinite alternate;
}
.layer_cock3 {
    background-image: url('/images_plus/cn/cockfight/common/element_chickenL.png?v1');
    height: 425px;
    width: 425px;
    left: 37%;
    top: 19%;
    /* animation: layer_cock3 1s cubic-bezier(0.6,-0.28, 0.65, 1.31); */
    animation: layer_cock3 1s cubic-bezier(0.6,-0.28, 0.65, 1.31), wut 1s ease-in infinite alternate;
}
/* === cock end === */

/* === cockfight_platform start === */
.cockfight_content {
    position: absolute;
    left: 0;
    top: 100px;
}
.cf_title {margin-bottom: 50px;}
li.cf_item {
    background-color: #000;
    border-radius: 15px;
    height: 103px;
    width: 310px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.1s linear;
}
li.cf_item + li.cf_item {
    margin-top: 13px;
}
li.cf_item.active,
li.cf_item:hover {
    box-shadow: 0 0 0 3px #ac8a02;
}
a.playgame_modal {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
a.playgame_modal img{
    display: inline-block;
    max-height: 103px;
}
.cf_btn {
    background-color: #f3c301;
    border-radius: 6px;
    display: inline-block;
    color: #000;
    font-size: 17px;
    line-height: 53px;
    height: 53px;
    width: 159px;
    margin-left: 10px;
    text-align: center;
    transition: 0.25s linear;
}
li.cf_item.active .cf_btn,
li.cf_item:hover .cf_btn {
    background-color: rgb(255 255 255 / 3%);
    color: #f3c301;
}
.game_name {
    color: #fff;
    font-size: 16px;
    display: none;
}
/* === cockfight_platform end === */


@keyframes layer_cock2 {
    0% {
        margin-top: -3%;
        margin-left: 6%;
    }

    50% {
        margin-top: 0%;
        margin-left: 0%;
    }
    100% {
    }
}
@keyframes layer_cock3 {
    0% {
        margin-top: 4%;
        margin-left: -6%;
    }

    50% {
        margin-top: 0%;
        margin-left: 0%;
    }
    100% {
    }
}
@keyframes wut {
    0% {
        transform:scale(0.85) translate3d(0, 0px, 0);
    }
    10% {
        transform:scale(0.85) translate3d(0, -5px, 0);
    }

    40% {
        transform:scale(0.85) translate3d(6px, 5px, 0);
    }

    50% {
        transform:scale(0.85) translate3d(0, 3px, 0);
    }
}