body { text-align: center; }

p,div,img { margin: 0; padding: 0; }

#event2506{max-width:1020px;margin:0 auto;}
#event2506 .eventBox{position:relative;}
#event2506 .eventBox .eventBg{background-image:url('/image/event/250609/bl_250609_EQ_02.jpg');width:100%;height:806px;}
#event2506 .eventBox .cardBox{width:600px;height:800px;position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:10;}
#event2506 .eventBox .cardBox .startBtn{position:absolute;left:0;top:0;width:600px;height:800px;z-index:9;}
#event2506 .eventBox .startBtn img{width:100%;}
#event2506 .card-grid {display: grid;grid-template-columns: repeat(3, 190px);gap: 10px;perspective: 1000px;z-index:5;}
#event2506 .card {width: 190px;height:260px;cursor: pointer;}
#event2506 .card img{width:100%;}
#event2506 .card .inner {position: relative;width: 100%;height: 100%;transition: transform 0.6s;transform-style: preserve-3d;}
#event2506 .card.flipped .inner {transform: rotateY(180deg);}
#event2506 .card .front,#event2506 .card .back {position: absolute;width: 100%;height: 100%;backface-visibility: hidden;background-size: cover;background-position: center;display: flex;align-items: center;justify-content: center;}
#event2506 .card .back {transform: rotateY(180deg);}
#event2506 .card.selected-user {position: relative;border-radius: 16px;background: white;z-index: 1;}
#event2506 .card.selected-user::before {content: "";position: absolute;z-index: -1;top: -2px;left: -2px;right: -2px;bottom: -2px;border-radius: 18px;background: linear-gradient(#fdcfc8);}
#event2506 .card.correct {position: relative;border-radius: 16px;background: white;z-index: 1;}
#event2506 .card.correct::before {content: "";position: absolute;z-index: -1;top: -2px;left: -2px;right: -2px;bottom: -2px;border-radius: 18px;background: linear-gradient(#8fbce3 , #efa59b);}

#event250714 {max-width:1020px;margin:0 auto;}
#event250714 .eventBox{width:100%;height:autor;background-image:url('/image/event/250714/bl_250714_tropical_back.jpg');}
#event250714 .eventBox .ChoiceBox {position:relative;width:100%;height:900px;text-align: center;background-image:url('/image/event/250714/bl_250714_tropical_back.jpg');}
#event250714 .eventBox .ChoiceBox .ChoiceArea{width:800px;height:730px;border: 5px solid #fccd67;margin: 0px auto;border-radius: 50px;}
#event250714 .eventBox .ChoiceBox .ChoiceArea .ChoiceTxt {color:#fccd67; font-size: 2rem;margin-top: 90px;width:100%;}
#event250714 .eventBox .ChoiceBox .ChoiceArea .ChoiceImg{width:60%;}
#event250714 .eventBox .ChoiceBox .ChoiceArea .text_bottomLine {border-bottom: 1px solid #fccd67;padding-bottom:10px;}
#event250714 .eventBox .ChoiceBox .ChoiceArea .ChoiceBtnArea{width: 100%;display: flex;justify-content: center;align-items: center;margin-top:80px;}
#event250714 .eventBox .ChoiceBox .ChoiceArea .startBtn{position: relative;padding:20px;cursor:pointer;}
#event250714 .eventBox .ChoiceBox .ChoiceArea .startBtn .ChoiceTxt{width: 100%;font-size: 2rem;color: #fff;}
#event250714 .eventBox .ActionBox{position:relative;width:100%;height:1029px;text-align: center;}
#event250714 .eventBox .ActionBox .result_action{display: block;position: absolute;top:0px;left: 0px;}
#event250714 .eventBox .ActionBox #action_move1 {position: absolute;top:320px;left: 790px;z-index:22;}
#event250714 .eventBox .ActionBox #action_img_move1 {display: none;}
#event250714 .eventBox .ActionBox #action_move2 {position: absolute;top:620px;left: 710px;z-index:10;animation: fly 1s infinite ease-in-out;}
#event250714 .eventBox .ActionBox #action_move3 {position: absolute;top:630px;left: 370px;z-index:10;}
#event250714 .eventBox .ActionBox #action_img_move3 {display: none; width: 80%}
#event250714 .eventBox .ActionBox .result_action_end{display: none;position: absolute;top:0px;left: 0px;}
#event250714 .eventBox .ActionBox .result_action_message{
    display: none;position: relative;top:550px;left: 0px;z-index:10;color:#000;background:#fff;width:450px;padding-bottom:25px;padding-top:25px;margin:0 auto;border-radius: 25px;font-size:1.5rem;
}

@keyframes fly {
  0% {
    transform: translate(0px, 0px);
  }
  10% {
    transform: translate(10px, -30px);
  }
  20% {
    transform: translate(30px, -10px);
  }
  30% {
    transform: translate(40px, -40px);
  }
  40% {
    transform: translate(60px, -20px);
  }
  50% {
    transform: translate(50px, 0px);
  }
  60% {
    transform: translate(70px, 20px);
  }
  70% {
    transform: translate(40px, 30px);
  }
  80% {
    transform: translate(20px, 10px);
  }
  90% {
    transform: translate(10px, 20px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}