.prize-acc-02 {
  background: url(/images/tintint/zh_TW/collection/2023summer-sunset/collection-prize-03.png?t=3) no-repeat top right;
}

.prize-share-01 {
  background: url(/images/tintint/zh_TW/collection/2023summer-sunset/collection-prize-01.png?t=3) no-repeat top right;
}
.prize-share-02 {
  background: url(/images/tintint/zh_TW/collection/2023summer-sunset/collection-prize-02.png?t=3) no-repeat top right;
}
.prize-focus-01{
  background: url(/images/tintint/zh_TW/collection/2023summer-sunset/collection-prize-04.png?t=3) no-repeat top right;
}
.prize-focus-02{
  background: url(/images/tintint/zh_TW/collection/2023summer-sunset/collection-prize-05.png?t=3) no-repeat top right;
}

.entry-start .info-address {
  margin: 10px 0;
}


.collect-container .info-address-text {
  /* display: inline-block;  */
  font-size:13px; 
  max-width:290px;
  height: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
.prize-text {
  color: #333;
}

.collect-container .info-address-icon,
#collection-main .main-collection .entry-address .entry-address-icon,
#collection-main .my-collections .entry-address .entry-address-icon {
  height: 25px;
  width: 18px;
  margin-right: 5px;
  display: inline-flex;
  background: url(/images/tintint/zh_TW/collection/best-travel/collection-info_place.gif) no-repeat 50% 3px;
}
.collect-container .info-address-icon-img,
#collection-main .main-collection .entry-address .entry-address-icon-img,
#collection-main .my-collections .entry-address .entry-address-icon-img {
  width: 12px;
  height: 18px;
  margin-right: 5px;
  aspect-ratio: unset;
}

#collection-main .main-collection .entry-address .entry-address-text, .entry-address .entry-address-text{
  max-width: 210px;
  height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  word-wrap: break-word;
  word-break: normal;
  /* display: inline-block; */
  font-size:13px;
  position: relative;
  top: 0;
}
#collection-main .my-collections ul{
  padding: 30px 0 0 0;
}

.collect-container .info-address .info-address-text {
  max-width: 290px;
  word-wrap: break-word;
  word-break: normal;
  position: relative;
  top: -3px;
}

/*.collect-container .collect-info {
  margin-bottom: 20px;
}*/

.collect-container .info-name {
  margin-top: 15px; 
  margin-left: 5px;
}
.entry-preview .entry-header .right {
  padding-top: 12px;
}

#modals .modal-page.entry-preview{
  width: 440px;
}

#collection-main .main-collection .entry-auto, 
.my-collections .entry-auto { 
  margin: 0px;
  height: 20px;
  max-width: 230px; 
  overflow: hidden;
  /* text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box; */
}

.entry-preview .nav-banner {
  position: fixed;
  cursor: pointer;
  left: initial;
  right:inherit;
  top:290px;
  margin-left:780px;
}

#collection-main .giraffe-halloween2022-award ul {padding:30px 70px 0 70px;}

#collection-main .giraffe-halloween2022-award ul li {
  width: 209px;
  height: 228px;
  background: none;
  box-shadow: none;
  float: left;
  padding: 0;
  margin: 0;
  text-align: center;
}

#collection-main .giraffe-halloween2022-award font {
  position: relative;
  top: 170px;
}
.entry-start .uploader.giraffe-halloween2022{
  width:140px; 
  height:auto;
  margin-top: 0; 
  margin-bottom: 0px;
  position: relative;
}
.entry-start .uploader .fileupload{
  width: 140px;
  height: 40px;
}
.entry-start .upload-flex{
  width: 100%;
  display: flex;
}
.arrawFlex{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.entry-start .uploader.giraffe-halloween2022 .fake-fileupload {
  width: 110px; 
  position: relative; 
  z-index: 1; 
  cursor: pointer; 
  right: 0px;
}

.entry-start .uploader-crop button{
  width: 110px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 15px;
  background: #333;
  border: 1px solid #333;
  padding: 0 3px;
  line-height: 25px;
  color: #fff;
}
.entry-start .uploader-crop.done{
  pointer-events: none;
  opacity: .7;
}

.entry-canvas .entry-canvas-preview {
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0px;
}
.entry-canvas .entry-canvas-preview.cropImg{
  left: calc(50% - 190px);
  background-color: #fff;
  border: 1px solid black;
}

.snapcard>li>img {
  height: auto;
  object-fit: cover;
}

#entries-list.snapcard>li>.entry-desc {
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

#entries-list.snapcard>li>.entry-address{
  margin: 10px 0;
}

.entry-preview.snapcard-open .collect-photo>img{
  aspect-ratio: 128 / 128; 
  /* object-fit: cover; */
  object-fit: contain;
  background: #fff;
}
/* 暫時 */
#collection-main .main-collection ul.snapcard li img, .my-collections ul.campus-collection li img{
  aspect-ratio: 128 / 128;
  /* object-fit: cover; */
  object-fit: contain;
  background: #fff;
}
.collect-container .collect-image{
  width: 350px;
}

.entry-preview.snapcard-open .collect-photo {
  padding: 18.56px;
  box-shadow: 0px 0px 18px -7px rgb(153 134 117 / 80%);
  padding-top: 69.6px;
  background-image: url('https://static1.tintint.com/images/banners/1/558/233/106011874/o/eb46cf92da79207a4d0cbea23fa8664a.png');
  background-size: contain; 
  position: relative;
}
.entry-preview.snapcard-open .collect-photo .card-info-heart{
  position: absolute;
  top: 28px;
  left: 48px;
  font-size: 12px;
  color: rgb(51,51,51);
}
.entry-preview.snapcard-open .collect-photo .card-heart-img{
  position: absolute;
  width: 18px;
  top: 30px;
  left: 22px;
  aspect-ratio: unset;
}
.entry-preview.snapcard-open .collect-photo .info-logo{
  position: absolute;
  width: 25%;
  top: 4%;
  right: 10px;
  aspect-ratio: unset;
}
.entry-preview.snapcard-open .collect-photo .info-tag{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 42%;
  aspect-ratio: unset;
}

/* .entry-preview.snapcard-open .collect-photo>.info-desc .collect-info {display: none;} */

.entry-preview.snapcard-open .collect-photo>.info-desc {text-align: left;width: 100%;}

.entry-preview.snapcard-open .info-flex {
  background-image: url(https://static1.tintint.com/images/stickers/1/528/375/22122864/m/a41e33d1ac85d93ddd27a58abb5aa454.png);
  background-size: 108.3%;
  width: calc(50% - 9.5px);
  box-shadow: 0px 0px 2px grey;background-position: center;height: 501px;}

.entry-preview.snapcard-open .info-flex>.info-desc {
  width: 100%;
  height: 81%;
}

.entry-preview.snapcard-open .info-flex .collect-info {
  max-height: 100%;
  padding: 31px 30px;
  line-height: 38px;
  margin: 0px;
  width: 100%;overflow: auto;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
}

.entry-preview.snapcard-open .info-flex .info-address, .entry-preview.snapcard-open .info-flex .info-name {display: none;}

.entry-preview.snapcard-open .info-flex>.info-share {display: none;}

.entry-preview.snapcard-open .collect-photo .info-name {
  margin-top: 0px;
}

.entry-preview.snapcard-open .info-flex .collect-info>* {
  scroll-snap-align: center;
  scroll-snap-stop: normal;
  display: inline-block;
}

.entry-preview .entry-header .entry-activitie{
  position: relative;
  right: unset;
  margin-top: 0;
  text-align: right;
}

.snapcard-open .collect-container {
  min-height:490px;
}

#collection-main .main-collection .entry-heart {
  position: absolute;
  top: 5%;
  left: 39px;

  /* heartCount後 */
  /* position: relative;
  top: 1px;
  left: 21px;
  margin-bottom: 30px; */
  font-size: 12px;
  color: rgb(51,51,51);
}
.my-collections .entry-heart {
  position: absolute;
  top: 5%;
  left: 14%;
  font-size: 12px;
  color: rgb(51,51,51);
}
#collection-main .main-collection ul.snapcard li, .my-collections ul.campus-collection li{
  padding: 18.56px;
  padding-top: 60.6px;
  /* heartCount後 */
  background-image: url('https://static1.tintint.com/images/banners/1/558/233/106011874/o/eb46cf92da79207a4d0cbea23fa8664a.png');
  background-size: contain; 
  background-repeat: no-repeat;
  box-shadow: 7px 7px 18px -7px rgb(153 134 117 / 80%);
}
#collection-main .main-collection ul.snapcard li .card-heart,
.my-collections ul.campus-collection li .card-heart{
  position: absolute;
  width: 5%;
  top: 5.5%;
  left: 18px;
  aspect-ratio: unset;
}
#collection-main .main-collection ul.snapcard li .card-logo,
.my-collections ul.campus-collection li .card-logo{
  position: absolute;
  width: 25%;
  top: 4%;
  right: 10px;
  aspect-ratio: unset;
}
#collection-main .main-collection ul.snapcard li .card-tag,
.my-collections ul.campus-collection li .card-tag{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  aspect-ratio: unset;
}
.snapcard-open .collect-container .collect-info {
  /* height: 93px; */
  height: 46px;
  overflow-y: auto;
  width: 100%;
}
.snapcard-open .collect-container .collect-address {
  height: 25px;
  max-height: 60px;
  margin: 15px 0 0 0;
  width: 100%;
}
.my-collections ul.campus-collection li .entry-desc{
  width: 100%;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
.my-collections ul{
  font-weight: 500;
}
.entry-preview .info-share .collect-ftp li > a {
  width: 17px;
  height: 17px;
  margin-top: -4px;
}
.col-flex-type{
  flex-wrap: wrap;
  /* justify-content: center; */
  margin-top: 30px;
}
.collect-ftp .share_fbn, .collect-ftp .share_tbn, .collect-ftp .share_pbn{
  width: 28px;
  height: 28px;
}
.collect-ftp .share_fbn a, .collect-ftp .share_tbn a, .collect-ftp .share_pbn a{
  width: 28px;
  height: 28px;
}
.share_fbn a:hover , .share_tbn a:hover ,.share_pbn a:hover{
  background: none;
}
.collect-ftp .share_tbn a:hover, .collect-ftp .share_pbn a:hover{
  width: 28px;
  height: 28px;
}

.collect-ftp .share-tag a.fb_icon {
  background-image: url(/images/tintint/common/player/share/logo_fb_round_gray.png);
}
.collect-ftp .share-tag a.line_icon {
  background-image: url(/images/tintint/common/player/share/logo_line_round_gray.png);
}
.collect-ftp .share-tag a.copy_icon {
  background-image: url(/images/tintint/common/player/share/btn_copylink_round_gray.png);
}

.collect-container .share_web{
  margin-top: 15px;
  z-index: -1;
}
.collect-container .share_web input {
  height:auto; 
}
.entry-preview .entry-header{
  padding: 0 0 20px 0;
  width: 350px;
  margin: auto;
}
.entry-preview .entry-title{
  margin-top: 0;
}
.share_web_main{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -10;
}
.share_fbn img, .share_tbn img, .share_pbn img{
  max-width: 100%;
  max-height: 100%;
}
.entry-preview .info-share .collect-ftp li img{
  max-width: 100%;
  max-height: 100%;
}
/* .collect-ftp .share_fbn a, .collect-ftp .share_fbn, .collect-ftp .share_tbn a, .collect-ftp .share_tbn, .collect-ftp .share_pbn a, .collect-ftp .share_pbn,
.entry-linkBtn .share_fbn a, .entry-linkBtn .share_fbn, .entry-linkBtn .share_tbn a, .entry-linkBtn .share_tbn, .entry-linkBtn .share_pbn a, .entry-linkBtn .share_pbn{
  background: none !important;
} */

.collect-container .collect-flex{
  justify-content: center;
}

/* .toast{
  position: fixed;
  bottom: -55px;
  display: flex;
  width: 100%;
  left: 0;
  pointer-events: none;
  justify-content: center;
  transition: bottom 1s;
  z-index: 100;
  background-color: unset;
  box-shadow: unset;
  border: unset;
} */
.collection-rules .prize-title,
.collection-slot .prize-title{
  font-size: 16px;
  font-weight: bolder;
}
.collection-rules.campusLife-rule .prize,
.collection-slot.campusLife-rule .prize{
  padding: 0px 30px;
}
.collection-rules ol,
.collection-slot ol {
  list-style-type: decimal;
  list-style-position: inside;
  margin-bottom: 0;
}
ul.prizes{
  flex-wrap: wrap;
  justify-content: center;
}
li.prize{
  margin-right: 0 !important;
  margin-left: 10px;
  margin-bottom: 10px;
}
#collection-main .collection-info.graduation-info{
  width: 380px;
}
.share-txt{
  color: #EB0C4B;
}
#collection-main .share{
  margin: 0;
}
#collection-main .entry-linkBtn .share{
  margin: 0 8px 0 0;
}
.info-contain {
  width: 350px;
  position: relative;
}
.entry-preview .entry-success {
  top: unset;
  bottom: -75px;
  right: 13px;
}
.entry-preview .entry-success .entry-success-bk{
  width: auto;
  padding: 10px 20px 10px 20px;
}
.entry-preview .entry-success .entry-success-bk .entry-success-txt{
  margin-left: 5px;
}
.entry-preview .entry-success .entry-success-bk-up{
  background: url(/images/tintint/common/gray_opacity_buble.png) no-repeat top left;
  height: 13px;
  width: 17px;
  margin: auto;
  padding-top: 3px;
  /* transform: rotateX(180deg); */
}
.post-finish{
  position: fixed;
  display: flex;
  width: auto;
  bottom: -55px;
  left: calc(50% - 45px);
  pointer-events: none;
  justify-content: center;
  transition: bottom 1s;
  z-index: 100;
}
.post-finish.showit{
  bottom: 45px;
}
.post-finish .post-inner{
  padding: 10px 15px;
  font-size: 16px;
  background-color: #281200;
  color: white;
  border-radius: 2px;
  opacity: 0.7;
}
.my-collections .entry-linkBtn {
  float: right;
  display: flex;
  padding: 2px 5px;
  margin: 5px 0px 5px 0px;
}
.my-collections .iptCopy{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.entry-linkBtn .share, .entry-linkBtn .share a{
  width: 25px;
  height: 25px;
}
.entry-preview .nav-arrow{
  top: 390px;
  z-index: 10;
}
.entry-preview .arrawFlex .next-arrow{
  background: url(/images/tintint/zh_TW/collection/giraffe-halloween2022/modal-next-arrow.png) no-repeat top left;
  right: -60px;
}
.entry-preview .arrawFlex .prev-arrow{
  background: url(/images/tintint/zh_TW/collection/giraffe-halloween2022/modal-prev-arrow.png) no-repeat top left;
  left: -60px;
}
.dkArrow{
  display: flex;
}
.mbArrow{
  display: none;
}
.vertical .collect-share{
  margin-top: 25px;
}
.heart-rules{
  /* padding: 0 20px; */
  padding: 0 10px;
}
.cardHeart{
  position: absolute;
  width: 40px;
  height: 40px;
  top: 20px;
  left: 20px;
  cursor: pointer;
}
.cardHeart.none{
  pointer-events: none;
}
.entry-preview .entry-success .entry-success-bk .submit_border_orange{
  background: none;
  width: 107px;
  margin: auto;
  display: block;
  margin-top: 10px;
}
.award-prize .award-prize-img, .share-prize .award-prize-img{
  width: 134px;
}
.award-prize .award-prize-img img,
.share-prize .award-prize-img img{
  width: 100%;
  height: auto;
}
.share_pbn a, .share_pbn, .share_tbn a, .share_tbn, .share_fbn a, .share_fbn, .share_lbn{
  background: none;
}
#collection-main[event=giraffe-halloween2022] .giraffe-tag{
  display: block !important;
}
.collect-ftp .share-tag, .collect-ftp .share-tag a {
  width: 28px;
  height: 28px;
  overflow: hidden;
}
.collect-ftp .share-tag a img, .collect-ftp .share-tag img {
  width: 100%;
}
.collect-ftp .share-tag a {
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
}
.info-heart{
  padding: 30px 0;
}
.spring-slot-2023{
  border: 1px solid #B23333;
  font-size: 15px;
  font-weight: 700;
  color: #333333;
  padding: 19px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.spring-slot-2023 .btn-default{
  --bs-btn-bg: #B23333;
  --bs-btn-border-color: #B23333;
}
.spring-slot-2023 .btn-default:hover{
  --bs-btn-hover-bg: #EB3E24;
  --bs-btn-hover-border-color: #EB3E24;
}
.my-collections ul.collections li{
  width: 305px;
}
@media screen and (max-width: 992px){
  .giraffe-halloween2022-award {
    width: 100%;
    height: auto;
    background-size: contain;
  }
  #collection-main .giraffe-halloween2022-award ul {
    padding:0 20px 0 20px;
  }
  #collection-main .giraffe-halloween2022-award ul li{
    width: 25%;
    height: 200px;
  }
  .entry-canvas .entry-canvas-preview {
    left: 0;
  }
  .arrawFlex{
    position: relative;
  }
  .entry-preview .arrawFlex .nav-arrow{
    /* position: unset; */
    top: 0;
  }
  .entry-preview .arrawFlex .next-arrow{
    right: 0;
  }
  .entry-preview .arrawFlex .prev-arrow{
    left: 0;
  }
  #collection-main .collection-info.giraffe-info{
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
@media screen and (max-width: 900px){
  #collection-main .collection-prizes.prizeTest {
    margin: auto;
  }
}
@media screen and (max-width: 750px){
  #collection-main .collection-prizes{
    margin: auto;
  }
  .collect-container.vertical .collect-photo, .collect-container.vertical .collect-image{
    width: 100%;
    max-width: 320px;
    margin: auto;
  }
  .entry-preview .entry-header{
    width: 100%;
    max-width: 320px;
    margin: auto;
  }
  .info-contain{
    width: 100%;
    max-width: 320px;
    margin: auto;
  }
  .collect-container .collect-share {
    width: 100%;
  }
  .snapcard-open .collect-container .collect-share{
    margin-top: 20px;
  }
  .arrawFlex{
    position: relative;
    margin-top: 20px;
  }
  .dkArrow{
    display: none;
  }
  .mbArrow{
    display: flex;
  }
  .my-collections .entry-heart {
    top: 5%;
    left: 14%;
  }
  .entry-preview .nav-arrow{
    top: 475px;
  }
  .entry-preview .entry-success{
    right: calc(30% - 44px);
  }
  #modals .modal-page.entry-preview{
    width: 92%;
    max-width: 440px;
  }
}
@media screen and (max-width: 720px){
  .entry-preview.snapcard-open .collect-photo {
    width: 100%;
  }
  .collect-container .share_web{
    position: relative;
    top: 0;
  }
}
@media screen and (max-width: 645px){
  .my-collections .entry-heart {
    top: 5%;
    left: 14%;
  }
}
@media screen and (max-width: 540px){
  .collection-prizes ul.prizes {
    width: 315px;
    margin: auto;
  }
  .collection-rules.campusLife-rule .prize,
  .collection-slot.campusLife-rule .prize {
    padding: 0px 20px;
  }
  .award-prize .award-prize-img, .share-prize .award-prize-img{
    width: 33%;
  }
  #collection-main .collection-info.graduation-info{
    width: 100%;
  }
  .entry-preview .nav-arrow {
    top: 300px;
  }
}
@media screen and (max-width: 500px){
  .giraffe-halloween2022-award {
    width: 100%;
    height: 210px;
    background-size: contain;
  }
  #collection-main .main-collection ul{
    padding: 0px 5px 0 15px;
  }
  #collection-main .main-collection ul#entries-list{
    padding: 0px 0 0 0;
    max-width: 350px;
    margin: auto;
  }
  #collection-main .giraffe-halloween2022-award ul li{
    width: 24%;
    height: 100px;
  }
  #collection-main .giraffe-halloween2022-award font{
    top: 90px;
    font-size: 12px;
  }
  #collection-main .collection-info.giraffe-info{
    width: 100%;
    padding: 0 20px;
  }
  .entry-start .uploader.giraffe-halloween2022 .fileupload{
    top: 0;
  }
  .entry-start .uploader .fake-fileupload{
    top: 0;
  }
  .entry-canvas .entry-canvas-preview {
    left: 0;
  }
  .entry-canvas .entry-canvas-preview.cropImg{
    left: 0;
  }
  .entry-preview.snapcard-open .collect-photo {
    width: 100%;
  }
  .snapcard-open .collect-container .collect-share{
    margin-top: 20px;
  }
  .info-contain{
    width: 100%;
  }
  .entry-preview .info-share .collect-ftp li > a {
    width: 40px;
    height: 40px;
    margin-top: -4px;
  }
  .col-flex-type{
    flex-wrap: wrap;
    margin-top: 30px;
  }
  .share_fbn, .share_tbn, .share_pbn{
    width: 40px;
    height: 40px;
  }
  .main-header .share_fbn, .main-header .share_tbn, .main-header .share_pbn{
    width: 17px;
    height: 17px;
  }
  .share_fbn a, .share_tbn a, .share_pbn a{
    width: 40px;
    height: 40px;
  }
  .main-header .share_fbn a, .main-header .share_tbn a, .main-header .share_pbn a{
    width: 17px;
    height: 17px;
  }
  .my-collections .entry-heart {
    top: 5%;
    left: 14%;
  }
  ul.prizes{
    width: 313px;
    margin: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .entry-start .info-personal{
    padding: 10px 20px 17px 20px;
  }
  .entry-preview .entry-header .entry-activitie{
    padding: 5px 0px;
  }
  .my-collections ul.collections li{
    width: 100%;
  }
  #collection-main .main-collection .entry-heart{
    top: 5.5%;
    left: 14%;
  }
}
@media screen and (max-width: 420px){
  .entry-preview.snapcard-open .collect-photo .card-heart-img{
    top: 26px;
    left: 20px;
  }
  .my-collections .entry-heart {
    top: 5%;
    left: 14%;
  }
  .entry-preview.snapcard-open .collect-photo .card-info-heart {
    top: 25px;
    left: 46px;
  }
  #collection-main .main-collection .entry-heart{
    top: 5.5%;
    left: 14%;
  }
}
@media screen and (max-width: 390px){
  .my-collections .entry-heart {
    top: 5%;
    left: 14%;
  }
}
@media screen and (max-width: 380px){
  .my-collections .entry-heart {
    top: 4.5%;
    left: 14%;
  }
}

/* heart */
.heart-parent {
  position: relative;
}

#heart-icon {
  line-height: 40px;
  display: flex;
  align-items: center;
  /* justify-content: center; */
}

.heart-shape {
  width: 40px;
  height: 40px;
  border: 1px solid;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.heart-shape.none{
  pointer-events: none;
}
.white-heart-content{
  width: 35px;
  height: 35px;
  border: 1px solid;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.white-heart{
  width: 35px;
  height: 35px;
  font-family: "Font Awesome 5 Free";
  display: flex;
  justify-content: center;
  align-items: center;
}
.white-heart:before {
  content: "\f004";
}

/* btn heart animation*/
[id='toggle-heart'] {
  position: absolute;
  left: -100vw;
}
label#only-display-heart {
  position: absolute;
  width: 38px;
  height: 40px;
  font-family: "Font Awesome 5 Free";
  pointer-events: none;
  /* box-shadow: 0px 0px 0px 1px red; */
}
label#only-display-heart:before {
  content: "\f004";
}
[id='toggle-heart'] + label {
  color: transparent!important;
}
[id='toggle-heart']:checked ~ label {
  color: #EB0A4B;
  will-change: font-size;
  animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
  font-weight: 900;
}
[id='toggle-heart']:checked + label:before, [id='toggle-heart']:checked + label:after {
  animation: inherit;
  animation-timing-function: ease-out;
}
[id='toggle-heart']:checked + label:before {
  will-change: transform, border-width, border-color;
  animation-name: bubble; 
  animation-duration: 1s;
  z-index: 1;
}
[id='toggle-heart']:checked + label:after {
  will-change: opacity, box-shadow;
  animation-name: particles;
  z-index: 1;
}

[for='toggle-heart'] {
  align-self: center;
  position: relative;
  color: #aab8c2;
  font-size: 1.2em;
  user-select: none;
  cursor: pointer;
  width: 100%;
}
[for='toggle-heart']:before, [for='toggle-heart']:after {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  content: '';
}
[for='toggle-heart']:before {
  box-sizing: border-box;
  margin: -2.25rem;
  border: solid 2.25rem #ACE0F5;
  width: 4.5rem;
  height: 4.5rem;
  transform: scale(0);
}
[for='toggle-heart']:after {
  margin: -0.1875rem;
  width: 0.375rem;
  height: 0.375rem;
  box-shadow: 0.32476rem -3rem 0 -0.20625rem #ff8080,
             -0.32476rem -2.625rem 0 -0.20625rem #ffed80,
              2.54798rem -1.61656rem 0 -0.20625rem #ffed80,
              1.84982rem -1.89057rem 0 -0.20625rem #a4ff80,
              2.85252rem 0.98418rem 0 -0.20625rem #a4ff80,
              2.63145rem 0.2675rem 0 -0.20625rem #80ffc8,
              1.00905rem 2.84381rem 0 -0.20625rem #80ffc8,
              1.43154rem 2.22414rem 0 -0.20625rem #80c8ff,
             -1.59425rem 2.562rem 0 -0.20625rem #80c8ff,
             -0.84635rem 2.50595rem 0 -0.20625rem #a480ff,
             -2.99705rem 0.35095rem 0 -0.20625rem #a480ff,
             -2.48692rem 0.90073rem 0 -0.20625rem #ff80ed,
             -2.14301rem -2.12438rem 0 -0.20625rem #ff80ed,
             -2.25479rem -1.38275rem 0 -0.20625rem #ff8080;
}

@keyframes heart {
  0%, 17.5% {
    font-size: 0;
  }
}
@keyframes bubble {
  15% {
    transform: scale(1);
    border-color: #D9F0F9;
    border-width: 2.25rem;
  }
  30%, 100% {
    transform: scale(1);
    border-color: #EFFAFF;
    border-width: 0;
  }
}
@keyframes particles {
  0%, 20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    box-shadow: 0.32476rem -2.4375rem 0 0rem #ff8080,
               -0.32476rem -2.0625rem 0 0rem #ffed80,
                2.1082rem -1.26585rem 0 0rem #ffed80,
                1.41004rem -1.53985rem 0 0rem #a4ff80,
                2.30412rem 0.85901rem 0 0rem #a4ff80,
                2.08305rem 0.14233rem 0 0rem #80ffc8,
                0.76499rem 2.33702rem 0 0rem #80ffc8, 1.18748rem 1.71734rem 0 0rem #80c8ff, -1.35019rem 2.0552rem 0 0rem #80c8ff, -0.60229rem 1.99916rem 0 0rem #a480ff, -2.44865rem 0.22578rem 0 0rem #a480ff, -1.93852rem 0.77557rem 0 0rem #ff80ed, -1.70323rem -1.77366rem 0 0rem #ff80ed, -1.81501rem -1.03204rem 0 0rem #ff8080;
  }
}
@media screen and (min-width: 1024px) and (max-height: 700px){
  .entry-preview .nav-arrow {
    top: 240px;
  }
}
/* preview image */
.collection-copy-content .preview-info-desc{
  width: 50%;
  position: absolute;
  top: 58%;
  left: 25%;
  font-size: 1rem;
}
.collection-copy-content .preview-info-desc .preview-info{
  height: 8vh;
  max-height: 40px;
  overflow-y: auto;
  width: 100%;
  /* line-height: 1.4rem; */
}
.collection-copy-content .preview-info-desc .preview-address{
  height: 4vh;
  max-height: 20px;
  margin-top: 1vh;
  overflow-y: auto;
  width: 100%;
}
.collection-copy-content .preview-info-desc .preview-address .info-address-icon{
  height: 1.8vh;
  width: 1.2vh;
  margin-right: 5px;
  display: inline-flex;
  background: url(/images/tintint/zh_TW/collection/best-travel/collection-info_place.gif) no-repeat 50% 0px;
  background-size: contain;
}
.collection-copy-content .preview-info-desc .preview-address .info-address-icon-img{
  width: 12px;
  height: 18px;
  margin-right: 5px;
}
.collection-copy-content .preview-info-desc .preview-address .info-address-text{
  max-width: 290px;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
.collection-copy-content .preview-info-desc .preview-name{
  font-size: 12px;
  color: #AFAFAF;
  overflow: hidden;
  height: 2.5vh;
  max-height: 17.5px;
  width: 100%;
}