.game-btn-text{
    font-size:1.5rem;
  }
  .banner-text-shadow{
    text-shadow:1px 4px 8px #111;
  }
  .company-text-cn p{
    font-size:1.2rem;
    font-weight:400;
  }
  .company-text-cn{
    min-height: 207px;
  }
  .company-text-title{
    font-size:1rem !important;
    font-weight: 600 !important;
  }
  .box-user-classic h5{
    font-weight: 600;
    font-size: 1.3rem;
  }
  .img-size{
    height:255px;
    width:370;
  }
  .parent-img{
    max-width:129px !important ;
    max-height:152px !important;
  }
  .wow{
    max-height:376px;
  }
  .rank-font-1{
    font-size: 1.5rem !important;
    font-weight: 600 !important;
  }
  .rank-font-time{
    font-size: 1rem;
    font-weight: 400;
  }
  .gameimg{
    max-width:100%;
    height: 100%;
    padding:5%;
  }
  .test-img{
    aspect-ratio: 1 / 1;
  }
  .nav-pills .nav-link.active, .nav-pills .show > .nav-link{
    background-color:#63ad8c;
  }
  .bg-color-se{
    background-color: rgb(99 173 140 / 50%);
  }
  .login-index{
    width: 100px;
    height: 100px;
    background-color: white;
    position: absolute;
    border-radius: 100%;
    position: fixed;
    right: 25px;
    bottom: 20px;
    z-index: 120;
    font-size: 2rem;
    border: 6px white solid;
    color: #495057;
    background-color: #fcf1c0;
    box-shadow: 0px 6px 33px rgba(0, 0, 0, 0.3);
    font-weight: bold;
  }
  .modal-title{
    font-size: 2rem;
  }
  .modal-header {
    height: auto;
    position: relative;
  }
  .fake-link{
    cursor: pointer;
  }
  .media-GameModal-show{
    display: none;
  }
  .media-GameModal-hidden{
    display: block;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .media-rank-show{
    display: none;
  }
  .media-rank-hidden{
    display: block;
    flex: 0 0 25%;
    max-width: 25%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }
  .main-background-color{
    background-color: #63ad8c;
  }
  .border-none{
    border: none;
  }
  .color-white{
    color:white;
  }
  .my-center{
    display: flex;
    justify-content: center;
  }
  .check-in-btn{
    border: none;
    background: none;
  }
  .btn-my-primary{
    color: #fff;
    background-color: #63ad8c;
    border-color: #63ad8c;
  }
  .swiper-button-next{
    color: black;
    font-weight: 800;
    font-size: 3rem;
  }
  .swiper-button-prev{
    color: black;
    font-weight: 800;
    font-size: 3rem;
  }
  .carousel-control-prev-icon{
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFE057' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e") !important;
  }
  .carousel-control-next-icon{
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFE057' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") !important;
  }

.custom-modal-dialog{
  max-width: 80%; 
}
.custom-modal-short-content {
  background-image: url('../../img/senior_cup/2025cup/short_modal_bg2.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; /*確保整張圖片都顯示*/
  background-color: #000; 
  color: #fff;
  border-radius: 15px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  padding:1% 6% 14% 6%;
}
.custom-modal-content {
  background-image: url('../../img/senior_cup/2025cup/ai_modal_bg.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; /*確保整張圖片都顯示*/
  background-color: #000; 
  color: #fff;
  border-radius: 15px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  padding:1% 6% 14% 6%;
}
.custom-modal-body{
  display:flex;
  flex-direction: column;
}
.custom-modal-body-award{
  flex:.1;
  display:flex;
  justify-content: end;
}
.custom-modal-body-content{
   flex:.9;
   display:flex;
   flex-direction: row;
   padding-top:7.5%;
}
.custom-modal-body-content-img{
  flex:.4;
}
.custom-modal-body-content-summary{
   display:flex;
   flex:.6;
   overflow-y: auto;
   flex-direction: column;
}
.work-title{
  flex:.1;
  color:#000;
  padding-left:5%;
}
.work-author{
  flex:.1;
  color:#000;
  padding-left:5%;
}
.work-intro{
  flex:.6;
  color:#000;
  overflow-y: auto;
  padding-left:5%;
}
.preserve-space{
  flex:.2;
}
.modal-award{
  font-size:20px;
  font-weight: bold;
  color:#ffffff;
}
.work-text{
  font-size:18px;
  font-weight: bold;
  color:#843f08;
}
.work-p{
  font-size:16px;
  color: #000;
  text-align: justify;
}
@media screen and (max-width: 768px){
  .wow{
    max-height:100%;
  }
}
@media screen and (min-width: 992px){
  .media-banner{
    margin-top: 5rem;
  }
}
@media (min-width: 768px) and (max-width: 1024px){
  .gameimg{
    max-width:100%;
    padding:20%;
  }
  .login-index{
    border-radius: 100%;
  }

}

@media screen and (max-width: 576px){
  .media-GameModal-show{
    display: block;
    width: 100%;
  }
  .media-GameModal-hidden{
    display: none;
  }
  .custom-modal-dialog{
    max-width: 90%; 
    margin: auto;
  }
  .custom-modal-content,.custom-modal-short-content {
    aspect-ratio:unset;
    background-image: none;
    background-color: #ff7171;
    padding:10px;
  }
  .custom-modal-body-content{
    
    flex-direction: column;
  }
  .work-title{
    padding-left:0px;
  }
  .work-author{
    padding-left:0px;
  }
    .work-intro{
    padding-left:0px;
  }
}

@media screen and (max-width: 767px){
  .media-rank-show{
    display: block;
    width: 100%;
  }
  .media-rank-hidden{
    display: none;
  }
}
@media (min-width: 577px) and (max-width: 992px) {
  .custom-modal-dialog {
    max-width: 80%;
  }

}
@media (min-width: 993px) {
  .custom-modal-dialog {
    max-width: 70%;
  }

}

.banner-btn{
  background-color: #29a7e1;
  color: white;
  border: 0.4vw solid white;
  font-size: 2.3vw;
  border-radius: 5rem;
  padding: 0.7vw;
}
.carousel-indicators{
  bottom: -3rem !important;
}
.carousel-indicators li {
  background-color: #FFE057 !important;
  height: 6px !important;
}
.btn-img{
  cursor: pointer;
}
.video-container > div{
  display:flex;
  flex-direction: column;
}
.video-box{
  padding:0px;
  margin-bottom:25px;
}
.video-summary{
font-weight:bold;
font-size:18px;
}

.video-btn{
  padding : 15px 0;
  text-align: center;

}
.video-btn >div,.video-btn >a{
  border-radius: 50px;
  font-weight:bold;
  font-size:18px;
  color:#fff !important;
  padding : 5px 20px;
  background-color: #f29600 !important;
}
.video-btn >div:hover ,.video-btn >a:hover{
  color:#111!important;
}
.poll-btn{
  text-align: center;
  margin-bottom:25px;
}
.center-content{
  text-align: center;
}
.no-bg{
  background-color: rgb(255,255,255,0) !important;
  border:none !important;
}
.padding-poll-box{
  padding:15px 15px 0px 15px;
  border-radius:0px;
  border-bottom:none;
}
.poll-section{
  background-color:#F5F0DE;
}
.CHtitle{
  font-size:28px !important;
}
.card-vote{
  color:#8c8c8c;
}

.color-red{color:red;}
.info-bar{
  padding:0px;
  display:flex;
  flex-direction:row;
}
.info-bar-number{
  display:flex;
  align-items: flex-end;
  color:#000;
  flex:0.6;
  background-color: #fff;
  font-size: 16px;
}
.info-bar-more{
  flex:0.3;
  color:#fff;
  font-weight:700;
  text-align: center;
  background-color:#ffa91c;
  padding:10px;
  cursor: pointer;
  font-size: 20px;
}
.info-bar-more:hover{
  color:#000;
}
.info-bar-vote{
  
  display:flex;
  flex:0.4;
  background-color:#fff;
  align-items: flex-end;
  justify-content:end;
  font-size: 36px;
  color: #f29600;
  cursor: pointer;
}
.vote-number{
  color: red;
  font-weight:700;
}
.prize-image .prize-1st-label {
  color: #fff;
  text-shadow: rgb(173, 55, 0) 2px 2px 2px;
  background: linear-gradient(45deg, #FFD700, #FFEA00, #FFC700);
  font-size: 18px;
  font-weight: 700;
  line-height: 12px;
  text-transform: uppercase;
  padding: 10px 20px; 
  position: absolute;
  top: 10px;
  left: 0px;
  z-index: 1;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top:solid 3px rgb(235, 151, 25);
  border-right:solid 3px rgb(235, 151, 25);
  border-bottom:solid 3px rgb(235, 151, 25);
}
.prize-image .prize-2nd-label {
  color: #fff;
  text-shadow: rgb(109, 109, 109) 2px 2px 2px;
  background: linear-gradient(45deg, #C0C0C0, #D3D3D3, #B0B0B0);
  font-size: 18px;
  font-weight: 700;
  line-height: 12px;
  text-transform: uppercase;
  padding: 10px 20px; 
  position: absolute;
  top: 10px;
  left: 0px;
  z-index: 1;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top:solid 3px rgb(175, 175, 175);
  border-right:solid 3px rgb(175, 175, 175);
  border-bottom:solid 3px rgb(175, 175, 175);
}
.prize-image .prize-3rd-label {
  color: #fff;
  text-shadow: #A75D33 2px 2px 2px;
  background: linear-gradient(45deg, #B87333, #e7934d, #A75D33);
  font-size: 18px;
  font-weight: 700;
  line-height: 12px;
  text-transform: uppercase;
  padding: 10px 20px; 
  position: absolute;
  top: 10px;
  left: 0px;
  z-index: 1;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top:solid 3px #A75D33;
  border-right:solid 3px #A75D33;
  border-bottom:solid 3px #A75D33;
}
.prize-image .prize-team-label {
  color: #fff;
  text-shadow: #A75D33 2px 2px 2px;
  background: linear-gradient(45deg, #8a4221, #ce7b37, #8a4221);
  font-size: 18px;
  font-weight: 700;
  line-height: 12px;
  text-transform: uppercase;
  padding: 10px 20px; 
  position: absolute;
  top: 10px;
  left: 0px;
  z-index: 1;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top:solid 3px #A75D33;
  border-right:solid 3px #A75D33;
  border-bottom:solid 3px #A75D33;
}
.prize-image .prize-4th-label {
  color: #fff;
  text-shadow: #635f2f 2px 2px 2px;
  background: linear-gradient(45deg, #c7c282, #ebe6a1, #c7c282);
  font-size: 18px;
  font-weight: 700;
  line-height: 12px;
  text-transform: uppercase;
  padding: 10px 20px; 
  position: absolute;
  top: 10px;
  left: 0px;
  z-index: 1;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top:solid 3px #706c35;
  border-right:solid 3px #706c35;
  border-bottom:solid 3px #706c35;
}
.bg-light-yellow{
  background-color: #F5F0DE;
}
.poll-modal-desc{
  font-size:18px;
  font-weight: 700;
  padding: 5px 35px 5px 0px;
}
.design_idea{
  border-left: solid 5px #8a4221;
  display:block;
  padding-left: 5px;
  font-weight:700;

}
.vote_heart{
  color :#525252;
  cursor: pointer;
}
.vote_heart_toggle{
  color :#ed2f21;
  cursor: pointer;
}
.vote_heart:hover{
  color:#ed2f21;
  text-shadow:2px 2px 5px rgb(207,127,0,.6);
}
.voted_heart{
  color:#ed2f21;
}
.vote-box{
  
  margin-bottom:25px;
}
.bg-w{
  background-color: #fff;
}
.modal-poll{
  margin: 7rem auto !important;
  
}
.GamedescBlock{
  height:100%;
  display:flex;
  flex-direction: column;
}
#GameDataDesc{
flex:.6;
}
#GamevoteSuccess{
  display:flex;
  flex:.1;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 24px;
}
#GamevoteBlock{
  display:flex;
  flex:.3;
}

.modal-bar-number{
  display:flex;
  align-items: center;
  color:#000;
  flex:0.6;
  background-color: rgba(255, 255, 255, 0);
  font-size: 24px;
}

.modal-bar-vote{
  
  display:flex;
  flex:0.4;
  background-color:rgba(255, 255, 255, 0);
  align-items: center;
  justify-content: end;
  font-size: 46px;
  color: #f29600;
  cursor: pointer;
}
.vote-number-modal{
  color: red;
  font-weight:700;
}
.modal-bar-success{

}

/*長輩圖藝廊獎章label*/
.prize-label-common{
  font-size: 22px;
  line-height: 12px;
  font-weight: 700;
  padding: 15px 20px;
  text-transform: uppercase;
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 1;
  box-shadow: 5px 5px 5px rgba(0,0,0,.5);
  /*
  border-top-right-radius: 20px;
  */
  border-bottom-right-radius: 20px;
}
.prize-image .prize-1-label {
  color: #fff;
  text-shadow: rgb(173, 55, 0) 2px 2px 2px;
  background: linear-gradient(45deg, #FFD700, #FFEA00, #FFC700);
  border:solid 3px rgb(235, 151, 25);
  /*
  border-top:solid 3px rgb(235, 151, 25);
  border-right:solid 3px rgb(235, 151, 25);
  border-bottom:solid 3px rgb(235, 151, 25);
  */
}
.prize-image .prize-2-label {
  color: #fff;
  text-shadow: rgb(173, 55, 0) 2px 2px 2px;
  background: linear-gradient(45deg, #f0ae33, #fac35d, #db891e);
  border:solid 3px rgb(235, 151, 25);
  /*
  border-top:solid 3px rgb(175, 175, 175);
  border-right:solid 3px rgb(175, 175, 175);
  border-bottom:solid 3px rgb(175, 175, 175);
  */
}
.prize-image .prize-3-label {
  color: #fff;
  text-shadow: #A75D33 2px 2px 2px;
  background: linear-gradient(45deg, #B87333, #e7934d, #A75D33);
  border:solid 3px #A75D33;
  /*
  border-top:solid 3px #A75D33;
  border-right:solid 3px #A75D33;
  border-bottom:solid 3px #A75D33;
  */
}
.prize-image .prize-4-label {
  color: #fff;
  text-shadow: #635f2f 2px 2px 2px;
  background: linear-gradient(45deg, #c7c282, #ebe6a1, #c7c282);
  border:solid 3px #706c35;
  /*
  border-top:solid 3px #706c35;
  border-right:solid 3px #706c35;
  border-bottom:solid 3px #706c35;
  */
}
.prize-image .prize-5-label {
  color: #fff;
  text-shadow: #A75D33 2px 2px 2px;
  background: linear-gradient(45deg, #8a4221, #ce7b37, #8a4221);
  border:solid 3px #A75D33;
  /*
  border-top:solid 3px #A75D33;
  border-right:solid 3px #A75D33;
  border-bottom:solid 3px #A75D33;
  */
}
.pic-summary{
 
}
.pic-summary .pic-title{
  font-size:18px;
  font-weight:bold;
}
.pic-summary .pic-author{
  font-size:18px;
  color:#474747;
}
.yellow-i{
  color:#f29600;
}
.vote-zone{
  display:flex;
  font-size:20px;
  justify-content: start;
  align-items: center;

}
.like_number{
  color:#000;
  font-weight:700;
}

.img-container{
    width:100%;
    height:200px;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position: center !important;
    box-shadow: inset 0 0 2em rgba(0,0,0,.5);
    position: relative;
    transition: all 0.3s ease; 
    cursor: pointer;
}
/* 初始狀態下隱藏放大鏡符號 */
.img-container::before {
    content: "\1F50D"; /* 放大鏡符號的 Unicode */
    font-size: 48px;
    color: white;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}
/* Hover 狀態下讓背景變暗、顯示放大鏡符號 */
.img-container:hover {
    box-shadow: inset 0 0 2em rgba(0,0,0,0);
    background-color: rgba(0, 0, 0, 0.4) !important; /* 變暗效果 */
    background-blend-mode: darken; /* 混合模式使背景變暗 */
}

.img-container:hover::before {
    opacity: 1; /* 顯示放大鏡符號 */
}
.modal-body-img{
    width:100%;
}