/*PC버전/공용 설정*/

#contents{}
.voteMo {display: none;}

.posr{position: relative;}
.posa{position: absolute;}
.voteExTop{text-align: center;font-size: 1.2em;font-weight: 600;display: flex;align-items: center;justify-content: center;margin-top: 30px;}
.voteExTop > p {display: inline-block;margin-left: 10px; text-align: left;}

/*검색*/
.event-top-full-search { padding: 0 0 20px 0; height: 30px; text-align: center; }
.event-top-full-search select, .event-top-full-search .search-form { display: inline-block; vertical-align: middle; }
.event-top-full-search select { height: 30px; margin-right: 4px; }
.event-top-full-search .search-form { width: 300px; }

.evt124vote_bnPc{background:url(../images/ko/img-event/vote_bn_pc2025.png) no-repeat center top #7266ed;width: 100%;min-width: 1200px;height: 240px;text-align: center;} 
.evt124vote_bnPc > a{margin: 170px 0px 0px 0px;display: inline-block}
.evt124vote_bnPc > a > img{    width: 380px;height: 70px;}
.voteExTop > img {width:32px;}  

.voteSh{max-width: 1170px;width: 100%; min-width: 1170px;margin: 30px auto;}
.voteSh  select {height: 34px;}
input[type="text"].votesh-input{width: 300px;height: 34px;}
.voteSh > form {text-align: center;/*display: flex;  width: 100%;  justify-content: space-between;*/}

.event-comment-w100per{width: 100%;margin-top: 30px;border-top: #ddd solid 1px;border-bottom: #ddd solid 1px;}
.event-comment-w100per form{width: 90%;margin: 0 auto;border-right: 1px solid #ddd;border-left: 1px solid #ddd}
.evt-comment-list .col-list-container{padding-top: 20px;    border-top: 1px #ddd solid;margin: 20px 12px;}
.evt-comment-list .col-list-container:first-child{padding-top: 0px;border-top: 0px;}
.evt-comment-list:last-child{border: 0;}


div.popevt-detail{border-top: 10px #333 solid;}
img.titleFlag{right: 30px; width: 15%;}
p.titletext{font-size: 2em;font-weight: 600; padding: 30px 22% 10px 30px;line-height: 1.4;}
p.titletext-s{font-size: 1.3em;
  padding: 0px 22% 20px 30px;
  color: #777;}
.popevt-contents{padding: 30px;border-top: 1px #d9d9d9 solid;border-bottom: 1px #d9d9d9 solid;}
.popevt-close{text-align: right;padding: 20px 30px 30px 30px;}


/*영상 팝업창*/
.dim-overlay {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5);z-index: 900;display: block; /* 처음부터 표시 */}
.dim-overlay.hidden {display: none;}
.quick_yuotube_aws2024 {position: fixed;bottom: 50%;right: 50%;transform: translate(50%, 50%);width: 50%;height: 500px;transition: all 0.5s ease;z-index: 1000;cursor: pointer;}

.close_youtube2024{background-color: black;
  color: #999;
  margin: 20px 0px;
  padding: 10px 20px;
  position: absolute;
  bottom: -90px;
  right: 50%;
  z-index: 1001;
  font-weight: 600;
  border-radius: 3px;}
.quick_yuotube_aws2024.shrunk {width: 250px;height: 60px;bottom: 20px;right: 0px;transform: translate(0, 0);}
.quick_video,
.quick_youtubeplay {width: 100%;height: 100%;display: block;}
.quick_youtubeplay {object-fit: cover;display: none;}
.quick_yuotube_aws2024.shrunk .quick_video {display: none;}
.quick_yuotube_aws2024.shrunk .quick_youtubeplay {display: block;}




/*테블릿버전 설정 -- 1500px보다 작은 경우*/
@media (max-width: 1200px) { 
  .main19-quick{display: none;}
}

/*리스트*/
.vote-post {
  display: grid;
  gap: 20px;  /* 카드 간격 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  /* 기본 1열 */
  width: 90%;
  margin: 0px auto;
}
.vote-list {width: 100%; /* Grid에 맞게 너비 조정 */
  border: 1px solid #ddd;border-radius: 8px;background-color: #fff;overflow: hidden;
  text-align: center;position: relative;box-shadow: 0 3px 4px rgba(221, 221, 221, 0.5);
  transition: box-shadow 0.3s ease; /* 부드러운 전환 효과 */}
.vote-list:hover{box-shadow: 0 10px 4px rgba(221, 221, 221, 0.5);border: 1px solid #adadad;}
.vote-list-image {height: 220px;background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.vote-list-smimg{width: auto;
  height: 100%;}
.vote-list-text{height: 90px;}
.vote-list-buttons {display: flex;border-top: 1px solid #ddd;}
.vote-button {flex: 1;padding: 18px 0;cursor: pointer;display: flex;justify-content: center;align-items: center;}
.vote-complete {color: #333;border-right: 1px solid #ddd;}
.vote-complete:hover{font-weight: 600;}
.vote-complete input[type="checkbox"] {display: none; /* 체크박스는 화면에 보이지 않음 */}
.vote-complete .vote-text {font-size: 1em;user-select: none; /* 텍스트 선택 방지 */}
.vote-complete input[type="checkbox"]:checked + .vote-text { content: '❤️ 좋아요';color: #333;font-weight: 400;}
.vote-details {color: #333; background: #fff; border: 0px;}
.vote-details:hover{font-weight: 600;}
.vote-list-title {padding: 10px 10px 0px 10px;color: #333;text-align: left;font-weight: 600; font-size: 1.1em;display: block;overflow: hidden;max-height: 46px;}
.vote-list-schoolname {font-size: 0.9em;color: #888;padding: 5px 10px 10px 10px;text-align: left;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;}
.schoollable{width: 90px;position: absolute;top: 0px;right:4px;}

html {
  scroll-behavior: smooth;
}
.pgdown {position: fixed;right: 20px;bottom: 24px;width: 110px;height: 50px;background-color: #333;color: white;display: flex;justify-content: center;align-items: center;border-radius: 100px;transition: opacity 0.5s ease, visibility 0.5s;opacity: 1;z-index: 99;}
.pgdown:hover{color: #fff;font-weight: 600;}
.pgdown.hide {opacity: 0;visibility: hidden;}
.event-comment-midPoint{position: absolute; top: -450px;}
.evt-commentWrap{border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;margin-top: 50px;}
.evt-commentConts{max-width: 1200px; border-right: 1px solid #ddd; border-left: 1px solid #ddd;margin: 0px auto;}
.evt-comment-list:last-child .evt-comment-list{border-bottom:0px;}


/*모달창*/
    /* 모달 배경 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5); /* 반투명 검정 배경 */
      display: none; /* 기본적으로 숨김 */
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    /* 모달 창 */
    .vote-popupModalCancel {
      background-color: #fff;
      width: 350px;
      border-radius: 8px;
      padding: 50px 00px 30px 00px;
      text-align: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .vote-popupModalCancel img {
      width: 150px;
      margin-bottom: 20px;
    }

    .vote-popupModalCancel-content {
      font-size: 16px;
      margin-bottom: 20px;
    }

    .vote-popupModalCancel-buttons {
      display: flex;
      justify-content: center;
    }

    .vote-popupbutton {
      padding: 15px 50px;
      border-radius: 4px;
      cursor: pointer;
    }

    .confirm {
      background-color: #333;
      color: white;
    }

    .cancel {
      background-color: white;
      color: #333;
      border: 1px solid #999;
    }

    /* 모달 표시 클래스 */
    .modal-overlay.active {
      display: flex;
    }






/* 반응형 설정 - 섬네일 리스트  */

/* 1200px 이상 */
@media (min-width: 1200px) {
  .vote-post {
    grid-template-columns: repeat(4, 1fr); 
    min-width: 1200px;max-width: 1200px;
    gap: 30px; 
  }
  .event-comment-w100per form{max-width: 1200px;min-width: 1200px;}
}

/* 태블릿 */
@media (max-width: 1199px) and (min-width: 768px) {
  .evt124vote_bnPc{background:url(../images/ko/img-event/vote_bn_pc2025.png) no-repeat center top #7266ed;min-width: 100%;height: 240px;text-align: center;} 
  .evt124vote_bnPc > a{margin: 200px 0px 0px 70% ;display: inline-block}

  .voteSh{max-width: 90%; min-width: 90px;padding: 15px 0px;}
  .vote-post {grid-template-columns: repeat(3, 1fr);}
  .evt-commentConts{width: 90%}
}

/* 모바일 */
@media (max-width: 767px) {
  .votePc {display: none;}
  .voteMo {display: contents;}
  .mobile img {width: 100% ;height: auto;} 
  .evt124vote_bnMo{background:url(../images/ko/img-event/vote_bn_mo2025.png) no-repeat center top;background-size: contain; text-align:right;}
  .evt124vote_bnMo > a{display: inline-block;width: 100%;}
  .voteExTop > img {width: 10%;height: auto;margin-left: 10%;max-width: 45px;}
  .voteExTop > p{margin-right: 10%;}

  .voteSh{max-width: 90%; min-width: 90px;padding: 15px 0px;}
  .vote-txt{display: none;}
  input[type="text"].votesh-input{max-width: 50%; }
  .event-write, .event-write button{width: 78px !important;}
  
  .vote-post {grid-template-columns: repeat(2, 1fr); /* 모바일에서 2개 */}
  .schoollable{width: 35%;}
  
  .pgdown {display: flex;}
  .evt-commentConts{width: 90%;}
  .quick_yuotube_aws2024 {width: 90%;height: 500px;transition: all 0.5s ease}

}