.championship-event{width:100%;margin:0 auto;max-width:1200px;text-align:center}

.championship-event .btn-reserve{display:inline-block;margin:30px 0 0 ;font-weight:400;line-height:1.4;font-size:35px;color:#fff !important;padding:12px 80px;background:#3C3429;border:1px solid #A0896A;}
.championship-event .btn-reserve b{font-family: 'bodyfriendB';}

.championship-event.step1{position:relative;}
.championship-event.step1 .btn-reserve{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);}
.championship-event.step1 .btn-reserve em{font-size:30px;}
.championship-event.step1 .btn-reserve em > b{font-size:inherit;}

.championship-event.card-container-step2{padding:60px 0;background:url(https://bodyfriend.speedgabia.com/img/bodyfriend/event/championship202606/event_step2_bg-min.png)no-repeat center/cover;}
.championship-event .step-num{display:inline-block;margin-bottom:10px;padding:10px 40px;font-size:25px;color:#fff;background: linear-gradient(to bottom,  #938266 0%,#b09f85 100%); border:1px solid #B7A790;}
.championship-event .sub-title{margin:10px 0 0;font-family: 'bodyfriendB';font-size:30px !important;}
.championship-event .title,
.championship-event .title *{font-family: 'bodyfriendB';font-size:60px !important}
.championship-event .title {display: block;margin:10px 0 30px 0;color:#8B7656;}
.championship-event .title > em{color:#000;}
.championship-event .sub-des{margin-top:30px;font-family: 'bodyfriendB';font-size:30px !important;line-height:1.4;}
.championship-event .cuation{margin-top:15px;font-family: 'bodyfriendB';color:#8F8F8F;font-size:30px !important;line-height:1.4;}
.championship-event.card-container-step2 .btn-reserve b{font-size:40px;}

.championship-event .card-container{perspective: 800px;position:relative;width:calc(100% - 160px);height:700px;margin:0 auto;border:1px solid #A0896A;background:url(https://bodyfriend.speedgabia.com/img/bodyfriend/event/championship202606/event_step2_container_bg-min.png) no-repeat center;overflow:hidden;z-index:1}
.championship-event .card-container::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url(https://bodyfriend.speedgabia.com/img/bodyfriend/event/championship202606/event_step2-container_bg-item-min.png) no-repeat center;background-position:center 100%;background-size:90%;z-index:1}
.championship-event .position-card{position:absolute;width:180px;height:190px;background:transparent;text-align:center;cursor:pointer;
transition:transform .6s cubic-bezier(0.25, 1, 0.5, 1), top 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28), left 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28), filter .2s;
transform:translateX(-50%) rotateY(45deg);z-index:10;will-change: transform, top, left;}
.championship-event .position-card .card-img{width:100%;height:100%;object-fit:contain;display:block}
.championship-event .position-card:hover{transform:translateX(-50%) translateY(-6px);filter:drop-shadow(0 8px 16px #0003);z-index:20}
.championship-event .position-card.active {
    transform: translateX(-50%) rotateY(0deg);
}
.championship-event .position-card.selected {
    top:50%;
    left:50%;
    transform: translate(-50%, -50%) rotateY(365deg) scale(1.8);
    z-index: 100;
}
.championship-event .badge{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:inline-block;padding:3px 8px;border-radius:4px;font-size:11px;z-index:2px}
.championship-event .modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:url(https://bodyfriend.speedgabia.com/img/bodyfriend/event/championship202606/event_step2_container_bg-min.png)no-repeat center;backdrop-size:contain;display:none;justify-content:center;align-items:center;z-index:1000}
.championship-event .modal-content{background:transparent;padding:0;width:100%;height:100%;position:relative;text-align:left;}
.championship-event .modal-close{position:absolute;top:15px;right:15px;font-size:20px;cursor:pointer;color:#fff;text-shadow:0 2px 4px #00000080;transition:transform .15s;z-index:30}
.championship-event .modal-close:hover{transform:scale(1.1)}
.championship-event .modal-body{width:100%;display: flex;justify-content: center;height:100%;}
.championship-event .modal-body img{width:300px;height:auto;display:block;border-radius:12px}

.championship-event .item1{top:13%;left:30%;}
.championship-event .item2{top:18%;left:50%;}
.championship-event .item3{top:13%;left:70%;}
.championship-event .item4{top:40%;left:20%;}
.championship-event .item5{top:45%;left:40%;}
.championship-event .item6{top:45%;left:60%;}
.championship-event .item7{top:40%;left:80%;}
.championship-event .item8{top:70%;left:50%;}

@media all and (max-width:900px){
.championship-event .btn-reserve{font-size:30px;}
.championship-event.step1 .btn-reserve em{font-size:25px;}
}
@media all and (max-width:830px){
    .championship-event .card-container{width:calc(100% - 40px);}
    .championship-event .card-container::before{background-size:100%;}
    .championship-event .position-card{width:160px;height:160px;}
    .championship-event .modal-body img{width:200px;}

    .championship-event .step-num{font-size:20px !important;padding:5px 20px;}
    .championship-event .cuation,
    .championship-event .sub-des,
    .championship-event .sub-title{font-size:25px !important}
    .championship-event .btn-reserve {font-size:22px !important}
    .championship-event.card-container-step2 .btn-reserve b{font-size:26px !important;}
    .championship-event .title, .championship-event .title *{font-size:55px !important}
}
@media all and (max-width:768px){
    .championship-event .btn-reserve{font-size:20px;padding:12px 70px}
    .championship-event.step1 .btn-reserve em{font-size:18px;}
}
@media all and (max-width:640px){
    .championship-event .card-container{height:430px;}
    .championship-event .card-container::before{background-size:95%;}
    .championship-event .position-card{width:100px;height:120px;}

    .championship-event .step-num{font-size:15px !important;}
    .championship-event .cuation,
    .championship-event .sub-des,
    .championship-event .sub-title{font-size:20px !important}
    .championship-event .btn-reserve {padding:8px 40px;font-size:18px !important;width:260px;}
    .championship-event.card-container-step2 .btn-reserve b{font-size:22px !important;}
    .championship-event.step1 .btn-reserve em{font-size:15px;}
    .championship-event .title, .championship-event .title *{font-size:50px !important}
}

@media all and (max-width:450px){
    .championship-event .card-container{height:350px;}
    .championship-event .position-card{width:80px;height:90px;}
    .championship-event .card-container::before{background-size:100%;}
    .championship-event .step-num{font-size:11px !important;padding:2px 8px;}
    .championship-event .cuation,
    .championship-event .sub-des,
    .championship-event .sub-title{font-size:15px !important}
    .championship-event .btn-reserve {font-size:14px !important;width:200px;}
    .championship-event.card-container-step2 .btn-reserve b{font-size:16px !important;}
    .championship-event.step1 .btn-reserve em{font-size:13px;}
    .championship-event .title, .championship-event .title *{font-size:37px !important}

}

@media all and (max-width:360px){
    .championship-event.card-container-step2{padding:45px 0;}
    .championship-event .step-num{font-size:9px !important;padding:1px 6px;}
    .championship-event .cuation,
    .championship-event .sub-des,
    .championship-event .sub-title{font-size:12px !important}
    .championship-event .btn-reserve {padding:6px 40px;font-size:12px !important;width:178px;}
    .championship-event .btn-reserve > b{font-size:14px !important;}
    .championship-event.step1 .btn-reserve{bottom:6%;}
    .championship-event.step1 .btn-reserve em{font-size:11px;}
    .championship-event .title, .championship-event .title *{font-size:25px !important}
    .championship-event .position-card{width:75px;height:85px;}

}