/** collection **/
.title-pad h1 a , .title-pad h1 a:hover {color:#333; text-decoration: none;}

/* common */
.collection {letter-spacing:1px; color:#333;}
.collection .submit_orange {padding:10px 40px; font-size: 16px; line-height: 30px;} 
.collection .submit_orange-end {
    padding:10px 40px; 
    font-size: 16px; 
    line-height: 30px; 
    background:#6c6c6c; 
    -moz-border-radius:4px; 
    -webkit-border-radius:4px; 
    border-radius:4px; 
    font-weight:bold; 
    text-align:center; 
    color:#fff; 
    position: relative;
    /* left: 75px; */
    left: 0;
}

#modal-dom{
    z-index: 800;
}

.entry-info ::-webkit-input-placeholder {
    font-size: 1rem;
    color: #999999;
}
.nav-underline {
  --bs-nav-underline-gap: 1rem;
  --bs-nav-underline-border-width: 4px;
  --bs-nav-underline-link-active-color: var(--bs-cta);
  gap: var(--bs-nav-underline-gap);
}
.nav-underline .nav-link.active {
  border-bottom-color: var(--bs-cta);
}
.nav-underline .nav-link:hover, .nav-underline .nav-link:focus {
  border-bottom-color: #F8BDA0;
}

/* collection-list */
/*#collection-list .collections {margin-top:10px;}*/
#collection-list .title_line {padding-bottom:0px; border-bottom:1px solid #ccc;}
#collection-list .collection-header {position: relative;}
#collection-list .collection-header .btn {position: absolute; bottom: 20px; right: 10px; padding:10px 50px;}
#collection-list .collection-desc a {color:#333;}
#collection-list .collection-desc a:hover {color:#999; text-decoration: none;}
#collection-list .collection-title {font-weight:bold; font-size:15px; letter-spacing:2px; margin: 15px 0 10px 0;}
#collection-list .collection-gallery {background: url(/images/tintint/zh_TW/collection/collection-gallery-bg.jpg) no-repeat top left; width:100%; height:226px; background-size: 100% 100%;}
#collection-list .gallery-display .gallery-info {margin-top:25px; color:#9E9E9E;}
#collection-list .gallery-display img:hover {opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )";}
#inprogress .ongoing { margin-bottom:40px; }
#inprogress .ongoing {border:1px solid #E6E6E6; }
#inprogress .ongoing .collection-header img.collection-banner, #inprogress .finish .collection-header img.collection-banner {
    width: 100%;
}
/*.collection-prizes {margin:20px 10px 0 0;}*/
/*li.prize img {margin-left: 5px;}*/
li.prize .prize-img {display: none; position: absolute; top:-130px; left:32px;}
li.prize.hover .prize-img {display: block;}
.prize-desc {width:95px; height:95px; padding:7px 0px;}
.prize-text {text-align:center; font-weight:bold; letter-spacing:2px; margin-top: 0.25rem;}
.prize-desc:hover {opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )";}
.collection[event="love-in-life"] .prize {
    margin-left: 0px;
    margin-bottom: 0px;
}
.collection[event="love-in-life"] .prize-desc {
    width:100px;height:100px;padding: 0px;background-size: contain
}
.collection[event="travel-memory"] .prize, .collection[event="travel-light"] .prize, .collection[event="2024-in-review"] .prize,
.collection[event="idols"] .prize, .collection[event="25-lunar-newyear"] .prize, .collection[event="pet-tour"] .prize {
    margin-left: 0px;
    margin-bottom: 0px;
}
.collection[event="travel-memory"] .prize-desc,
.collection[event="travel-light"] .prize-desc,
.collection[event="forest-tour"] .prize-desc,
.collection[event="pets-off-screen"] .prize-desc,
.collection[event="the-third-act"] .prize-desc,
.collection[event="2024-in-review"] .prize-desc,
.collection[event="idols"] .prize-desc,
.collection[event="25-lunar-newyear"] .prize-desc,
.collection[event="pet-tour"] .prize-desc {
    width:100px;height:100px;padding: 0px;background-size: contain;
}

.prize-acc-01 {
    background: url(/images/tintint/zh_TW/collection/cugly-pets/collection-prize-04.gif) no-repeat top right;
}
.prize-spring-01{
    background: url(/images/tintint/zh_TW/collection/tasty-food/collection-prize-06.gif) no-repeat top right;
}
.prize-acc-02 {
    background: url(/images/tintint/zh_TW/collection/cugly-pets/collection-prize-02.png) no-repeat top right;
}
.prize-share-01 {
    background: url(/images/tintint/zh_TW/collection/cugly-pets/collection-prize-03.png) no-repeat top right;
}
.prize-popularity-01{
    background: url(/images/tintint/zh_TW/collection/happy-birthday/collection-prize-03.png) no-repeat top right;
}
.prize-focus-01{
    background: url(/images/tintint/zh_TW/collection/cugly-pets/collection-prize-01.png?t=2) no-repeat top right;
}
.prize-join-01{
    background: url(/images/tintint/zh_TW/collection/best-travel/collection-prize-05.gif) no-repeat top right;
}
#baby-first-steps .prize-text{
    color: #333;
}
#baby-first-steps .prize-acc-01 {
    background: url(/images/tintint/zh_TW/collection/baby-first-steps/collection-prize-01.png) no-repeat top right;
}
#baby-first-steps .prize-share-01 {
    background: url(/images/tintint/zh_TW/collection/baby-first-steps/collection-prize-02.png) no-repeat top right;
}
#baby-first-steps .prize-popularity-01{
    background: url(/images/tintint/zh_TW/collection/baby-first-steps/collection-prize-03.png) no-repeat top right;
}
#baby-first-steps .prize-focus-01{
    background: url(/images/tintint/zh_TW/collection/baby-first-steps/collection-prize-04.png) no-repeat top right;
}
.prize-group-01-1{
    background: url(/images/tintint/zh_TW/collection/2023summer-flower/collection-prize-01.png?t=3) no-repeat top right;
}
.prize-group-01-2{
    background: url(/images/tintint/zh_TW/collection/2023summer-street/collection-prize-01.png?t=3) no-repeat top right;
}
.prize-group-02{
    background: url(/images/tintint/zh_TW/collection/2023summer-flower/collection-prize-02.png?t=3) no-repeat top right;
}
.prize-group-03{
    background: url(/images/tintint/zh_TW/collection/2023summer-flower/collection-prize-03.png?t=3) no-repeat top right;
}
.prize-group-04{
    background: url(/images/tintint/zh_TW/collection/2023summer-flower/collection-prize-04.png?t=3) no-repeat top right;
}
.prize-group-05{
    background: url(/images/tintint/zh_TW/collection/2023summer-flower/collection-prize-05.png?t=3) no-repeat top right;
}
#collection-list .collection-expired {margin:10px 0 0 -10px; background:#efefef; padding: 0 10px; border-radius: 15px; display: inline-block;}
#collection-list .yet .collection-header {background:#000;}
#collection-list .yet .collection-header img {opacity: 0.4; filter: alpha(opacity=40); -ms-filter: "alpha( opacity=40 )";}
#collection-list .subtitled {line-height: 20px; margin: 10px 0 20px 0;}

#collection-list .box-bubble {width:150px; letter-spacing:1px; display: none;}
#collection-list .tipsy {pointer-events: none;}
#collection-list .tipsy-inner {border-radius: 6px!important; -moz-border-radius: 6px!important; -webkit-border-radius: 6px!important;}
#collection-list .box-bubble h2 {color:#fff; font-weight:bold; padding-bottom:10px;}
#collection-list .box-bubble h3 {font-size:12px; color:#adadad;}

#inprogress .collections .collection-header .collection-status {
    position: absolute; 
    top: 0px; 
    /* right: -2px; */
    right: 0;
}
#inprogress .collections .collection-header .collection-status img {width: 73px; height: 73px;}


/* collection-main */
#collection-main .subtitled , #collection-list .subtitled {line-height: 20px; margin: 10px 0 0px 3px;}
#collection-main .block-pad-large {margin-top:15px; padding-top:5px; /*border-top:1px solid #d7d7d7;*/}
#collection-main .main-header .share {margin:2px 0 0 8px;}
/*#collection-main .main-info {margin-bottom: 80px;}*/
#collection-main .main-info hr {background-color: #E6E6E6;}
#collection-main .collection-desc {text-align:left; font-size:15px; line-height:26px; margin:40px 0 20px 0;}
#collection-main .collection-prizes {margin: 15px 0 0 0;}
#collection-main .main-collection .header h1 {font-size: 18px; color: #FF6600;}
#collection-main .main-collection .pagination-pages {background: #FFF; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin:0 8px; padding:0px 10px; line-height:20px;}
#collection-main .main-collection .pagination-pages a.actived {color:#6C6C6C;}
#collection-main .main-collection .pagination-pages a:hover.actived {text-decoration: none; cursor: default!important;}
#collection-main .main-collection .footer .page-nav {margin: 10px auto;}

#collection-main .main-collection #collection-page .pagination li{
    width: auto;
    box-shadow: none;
    padding: 0;
    margin: 0;
    background: transparent;
}
#collection-main .main-collection #collection-page .pagination li.disabled{
    cursor: unset;
}
.pagination .page-link{
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-color: #333;
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: #DDDDDD;
}
/*#collection-main .main-collection ul {padding: 30px 30px 0 30px;}*/
#collection-main .my-collections ul {
    padding: 30px 15px 0 15px;
}
#collection-main .main-collection ul li,  .my-collections ul li {width: 284px; margin: 0 11px 22px 11px; padding: 10px; text-align: center; background: #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); text-align: left; cursor: pointer;}
#collection-main .main-collection ul li:hover {opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )";}
/*#collection-main .main-collection ul li:nth-child(3n+1) {margin-right: 10px;}*/
#collection-main .main-collection ul li img,  .my-collections ul li img {width: 100%;}
#collection-main .main-collection .entry-desc, .my-collections .entry-desc {padding: 2px; line-height:22px; text-align: left;}
#collection-main .main-collection .entry-auto, .my-collections .entry-auto {margin:15px 0 10px 0; color:#666; text-align: left;}
#collection-main .template {display: none;}
#collection-main .collection-date ,#collection-main .collection-link {margin:15px 0; width:290px;}
#collection-main .js-entry-start {letter-spacing:2px;}
#collection-main .main-info .js-entry-start {
    position:relative; 
    /* left:75px; */
    left: 0;
}
#collection-main .footer .js-entry-start , #collection-main .entry-preview .js-entry-start {left: 0;}
#collection-main .collection-info {width:455px; margin-bottom:20px;}
#collection-main .collection-info .js-entry-start {width:140px; line-height:22px; position: relative; left: 320px;}
/*#collection-main .footer .topBtn {
    line-height:38px; 
    font-size:13px; 
    font-weight:normal; 
    position: absolute;
    top: 0;
    right: calc(50% - 23px);

}*/
/* #collection-main .pagination-prev , #collection-main  .pagination-pages , #collection-main .pagination-next {float:left;} */
#collection-main .main-collection .entry-desc {max-height:155px; overflow:hidden;}
#collection-main .title_line .right {text-align:right;}
#collection-main .title_line .home-link {margin-top:15px;}
#collection-main .entries-award {text-align:center; padding: 0px;}
#collection-main .entries-award h3 {letter-spacing:2px; font-weight:bold; line-height: 23px; color: #DCB368;}

/* .main-collection .tabmenu {margin:0 15px;} */
.main-collection .tabbutton {float:left; padding:8px 20px; color:#333; cursor: pointer;border-right:1px solid #efefef;}
.main-collection .tabbutton:hover {background:#E3E3E3;}
.main-collection .tabmenu>a:last-child .tabbutton {
    border-right-color: transparent;
}
.main-collection .tabmenu .actived {background:#f2f2f2; /*color:#9c9c9c;*/}
.main-collection .tabmenu .actived:hover {cursor: default!important;}
.main-collection .block-pad {background:#f2f2f2;}
.main-collection .bg-f2 {background:#f2f2f2;}
/*.main-collection .header , .main-collection .footer {padding:20px 40px 0px 40px;}*/
@media screen and (max-width: 767px){
  #collection-content {
    margin-left: -1rem;
    margin-right: -1rem;
  }
}
/*.main-collection .footer {
    padding-bottom:20px;
    position: relative;
}*/
.main-collection .footer .js-entry-start ,.main-collection .footer .center {margin:5px 0; line-height:22px;}
.main-collection .footer .center {position:absolute; width:835px; text-align:center; margin:10px 0;}
.main-collection .entries-award .js-entry-start {position: static!important;}
.main-collection .entries-award h4 {line-height:28px;}
.main-collection .entries-award .link-pd {text-align:right; margin:-18px 18px 0 0;}
.main-collection .entries-award .link-pd a {color:#fff;}
.entry-preview .entry-title .author-name {color:#AFAFAF; line-height: normal; max-width:300px; overflow:hidden; margin:7px 5px 0 0; font-size:12px; font-weight:normal;}
.entry-preview .info-share span.author-name {line-height:22px; font-size:13px;}
.entry-preview .info-share .collect-ftp {margin-top:15px;}
#modals .modal-page {
    position: relative; 
    /* padding: 30px;  */
    padding: 40px 15px;
    width: 717px; 
    background-color: #fff;
    color:#333; 
    text-align: left; 
    letter-spacing:1px;
}
.entry-start .title_line , .my-collections .title_line {padding:0 0 5px 0; border-bottom:1px solid #e6e6e6; top: -10px; position: relative;}
.entry-start .title_line .left , .my-collections .title_line .left {padding-top:5px;}
.entry-start .entry-title , .entry-preview .entry-title , .my-collections .entry-title {letter-spacing:2px; font-size: 18px; font-weight:bold; margin-top:10px;}
.entry-start .entry-desc {margin:15px 1px; line-height: 21px;color:#666;}
.entry-start .entry-hint {text-align: center; padding:10px 0;}
.entry-start .entry-hint.check-eligible {color:#666;background-color: #f8f8f8;}
.entry-start .info-img {width:345px;}
.entry-start .info-personal {width:340px; padding: 10px 23px 17px 23px; color:#6c6c6c; background:#F8F8F8; margin-left: 0;}
.collect-container .info-share {
    /* width:299px;  */
    width: 330px;
    padding: 10px 23px 17px 23px; 
    color:#6c6c6c; 
    background:#EFEFEF; 
    margin-left: 27px;
}
.entry-start .info-personal {min-height: 252px;}

.entry-info {margin-top:30px;}
.entry-info textarea {width:235px; height:166px; margin:0;}
.entry-info .info-text {width:100px;}
/* .entry-start .info-row .info-title .left {width: 80;} */
.entry-info input[type="text"] {width: 336px; padding:3px; }
.entry-info input[type="text"].info-data {width: 235px;}
.entry-info .info-data {padding:3px;}

.entry-info .info-row input[type="text"], .entry-info .info-row input[type="email"], .entry-info .info-row input[type="tel"] {width: 205px;}
.entry-info .info-row .info-title, .entry-info .info-row .info-input {float: left;}

.entry-start .entry-preview-button {text-align:center;}
.entry-start .entry-preview-button .submit_orange {width: 200px; padding:10px 20px; margin: 0 auto; font-size:14px;}
.entry-start .entry-preview-button .submit_orange.done{
    pointer-events: none;
    opacity: .7;
}
.entry-start .entry-canvas {position: relative; text-align: center; max-height: 600px; min-height: 175px; background-color: #999;}
.entry-start .entry-canvas.empty {
    /* width: 717px;  */
    width: 100%;
    max-width: 717px;
    min-height: 175px; 
    margin: 0 auto; 
    background: url(/images/tintint/zh_TW/collection/camera.png) no-repeat center center #999999; 
    background-position: center 10px;
    cursor: pointer;
}
.entry-start .entry-canvas-img {max-width: 100%; max-height: 600px;aspect-ratio:2;}
.entry-start .entry-canvas-tips {display:none;}
.entry-start .empty .entry-canvas-tips {
    display:block!important; 
    position:absolute; 
    width:300px; 
    text-align:center; 
    bottom:15%; 
    color: white; 
    left: calc(50% - 150px);
}
@media screen and (min-width: 768px){
  .entry-start .empty .entry-canvas-tips {
    width:400px; 
    left: calc(50% - 200px);
  }
}
.entry-start hr , .entry-preview hr {background-color: #e6e6e6;}
.entry-start .info-title {
    margin: 10px 0; 
    /* line-height: 25px; 
    height: 25px; */
}
.modal-container.scrollable._entry {overflow-x: hidden;}

.entry-preview .entry-header {padding: 20px 0 20px 0;}
.entry-preview .entry-header b , .my-collections .entry-header b {font-size:12px; letter-spacing:1px; line-height:25px;}
.entry-preview .entry-header .entry-activitie {
    padding-top:40px;
}
.entry-preview h4 a ,.entry-preview h4 a:hover {color:#333; text-decoration: none; line-height: 30px;}

/**
.entry-preview .entry-header .entry-activitie {background:#efefef; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; padding:2px 7px; position:absolute; right:25px; margin-top:9px;}
**/
.entry-preview .entry-header .entry-activitie a:hover { text-decoration:none;}
.entry-preview .entry-header .entry-activitie {position:absolute; right:25px; margin-top:9px; padding:5px 0px;}


.entry-preview hr {margin:30px 0;}
.entry-preview .user-single {border:1px solid #E6E6E6; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; padding:15px; text-align:center; display: none;}
.entry-preview .user-single.is-owner {display: block;}
.entry-preview .user-single .single-title {font-size:16px; line-height:35px; letter-spacing:2px;}
.entry-preview .user-single .single-off {float:right;}
.entry-preview .user-single .single-info {margin:20px 0;}
.entry-preview .user-single ul {width:470px; margin:0 auto;}
.entry-preview .user-single li {float:left; width:150px; margin-left: 10px;}
.entry-preview .user-single li:nth-child(7n+1) {margin-left: 0px;}
.entry-preview .user-single .buttom_radius a {background:#E68721; padding:3px 6px 3px 14px;}
.entry-preview .user-single .buttom_radius a:hover {background:#F3A24A;}
.entry-preview .user-single .icon-close {position: inherit; float: right; display:none;}
.entry-preview .collect-bottom {margin-top:20px;}
.entry-block {position: relative; top: -70px; left: -315px;}
.entry-preview .entry-success {position:absolute; text-align:left; z-index: 5; color: #FFF; top:35px; right:15px;}
.entry-preview .entry-success .entry-success-bk {
    opacity: 0.9; 
    filter: alpha(opacity=90); 
    -ms-filter: "alpha( opacity=90 )"; 
    background: #1D1D1D; 
    width: 360px; 
    padding: 10px 15px 10px 15px; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    border-radius: 7px;
}
.entry-preview .entry-success .entry-success-bk-top {background: url(/images/tintint/common/gray_opacity_buble2.png) no-repeat top left; height: 13px; width: 17px; margin-left: 155px; padding-top: 3px;}
.entry-preview .entry-success .entry-success-bk b {font-size:15px; letter-spacing:2px;}
.entry-preview .entry-success .entry-success-bk .share-prize {margin-top:10px;}
.entry-preview .entry-success .entry-success-bk .share-prize a .btn {background: #4864B4; border: #4864B4; padding:4px 7px; color: #fff; }
.entry-preview .entry-success .entry-success-bk .share-prize .btn:hover {background:#7a99e1; border:#7a99e1;}
.entry-preview .entry-success .entry-success-bk .share-prize a:hover {text-decoration: none;}
.entry-preview .entry-success .entry-success-bk .share-prize .submit_border_orange {background:none;}
.entry-preview .line-b {padding-bottom:16px;}

.collect-container {min-height:300px;}
.collect-container .info-name {margin-top:20px; /*font-size: 12px;*/ color: #666; width: 300px; overflow: hidden;}
.collect-container .info-share {min-height: 120px;}
.collect-container .info-share .share {
    margin:5px 8px 0 0;
}
.collect-container .share_web {background:#fff; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; padding:5px 10px; line-height:18px;}
.collect-container .share_web input {
    height:16px; 
    width:115px; 
    margin:0px; 
    font-size:12px; 
    padding:0 5px;
    position: relative;
    top: 1px;
}
.vertical .share_web input {width:115px!important;}
.collect-container .collect-photo {text-align: center; float:left;}
.collect-photo img {
    max-width: 100%; 
    width: 100%;
    /* min-height:300px; 
    max-height: 600px; */
}
.collect-container .collect-photo.loading {height: 400px; background: url(/images/tintint/zh_TW/collection/loading.gif) no-repeat center center #aaaaaa;}
.collect-container.horizontal .collect-photo {
    width: 100%;
}
.collect-container.vertical .collect-photo {
    width: 350px;
}
.collect-container .info-desc {
    /* float:left;  */
    width: 345px;
    margin:20px 0; 
    line-height:22px;
}
.collect-container .collect-share {
    /* float:left;  */
    margin:20px 0 20px 0; 
    line-height:22px; 
    font-size:13px;
}
.horizontal .info-desc {width:345px;}
.vertical .collect-info {
    width:332px;
    max-height: 160px;
    /* min-height:218px; */
}
.vertical .info-desc {
    width: 300px;
    margin: 0;
}
.vertical .collect-share {
    width:325px; 
    padding-right:20px;
    margin: 0;
}
.collect-container .collect-info {max-height:160px; overflow-y:auto; width:320px;}


.entry-start .filter-processing, .entry-start .photo-uploading {
    color: #fff; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    max-height:600px; 
    top: 0; 
    left: 0;
    z-index: 2;
}
.entry-start .filter-processing {background: url(/images/tintint/zh_TW/collection/entry-processing.png) no-repeat center center #000; opacity: 0.5; filter: alpha(opacity=50); -ms-filter: "alpha( opacity=50 )";}
.entry-start .photo-uploading {background: url(/images/tintint/zh_TW/collection/entry-uploading.png) no-repeat center center #000; opacity: 0.5; filter: alpha(opacity=50); -ms-filter: "alpha( opacity=50 )";}
.entry-start .filter-processing.done, .entry-start .photo-uploading.done {display: none}

/*
.entry-start .filter-processing {color: #fff; position: absolute; background: url(/images/tintint/zh_TW/collection/entry-loading.png) no-repeat center center #000; opacity: 0.5; filter: alpha(opacity=50); -ms-filter: "alpha( opacity=50 )"; width: 100%; height: 100%; max-height:600px;}
.entry-start .filter-processing.done {display: none;}
.entry-start .uploading {color: #fff; position: absolute; background: url(/images/tintint/zh_TW/collection/entry-loading.png) no-repeat center center #000; opacity: 0.5; filter: alpha(opacity=50); -ms-filter: "alpha( opacity=50 )"; width: 100%; height: 100%; max-height:600px;}
.entry-start .uploading.done {display: none;}
*/

.entry-start .uploader {
    width:150px; 
    height:25px;
    margin-top: 60px; 
    position: relative;
}

.entry-start .uploader.empty {display: none;}

.entry-start .uploader .fileupload {
    position: absolute; 
    opacity: 0;
    z-index: 2; 
    width: 150px; 
    height: 50px;
    cursor: pointer;
}
.entry-start .uploader .fake-fileupload {width: 106px; position: absolute; z-index: 1; cursor: pointer; right:8px;}
.entry-start .uploader .btn {-moz-border-radius: 15x; -webkit-border-radius: 15px; border-radius: 15px; background:#333; border:1px solid #333; line-height:25px; padding:0 3px;color: #fff;}
.entry-filters .filters-text {text-align:center; margin-bottom:15px; color:#808080;}
/* .entry-filters .filters {padding:0 30px;} */
.entry-filters .filters .filter {
    /* float: left;  */
    background-color: #fff; 
    margin:10px 0 10px 10px; 
    text-align:center; 
    width:85px; 
    height:75px;
    cursor: pointer;
}
.entry-filters .filters .filter:hover {color:#DDB412;}
.entry-filters .filters .filter:nth-child(7n+1) {margin-left: 0px;}
.entry-filters .filters .filter img {width:50px; height:50px; border:2px solid #fff; margin-right:1px;}
.entry-filters .filters .filter img:hover {border:2px solid #DDB412;}
.entry-filters .filters .actived img {border:2px solid #F3A24A;}
.entry-filters .filters .actived img:hover {border:2px solid #F3A24A;}
.entry-filters .filters .actived:hover {cursor:default; color:#333;}
.entry-filters .filters .filter .filters-name {font-size:12px;}
.entry-uploadfail {width: 300px; background-color: #fff; padding:40px 30px; letter-spacing:1px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}

.my-collections .my-list {background:#F2F2F2; padding:10px 15px;}
.my-collections .title_line {border:0px;}
.my-collections .entry-header {margin-bottom:20px;}
.my-collections .entry-header .right {margin-top:15px;}
.my-collections .entry-prize {line-height:22px;}
.my-collections ul li {margin:0 20px 22px 20px;}
.my-collections ul.collections li {margin:0 10px 22px 10px;}
.my-collections hr {margin:20px 0;}
.my-collections .entry-like {
    float:left;
    position: relative;
    left: -15px;
}
.my-collections .entry-share {float:right; background:#4864b4; border:#4864b4; padding: 2px 20px; margin:0px 0px 5px 0px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
.my-collections .entry-share a {color:#fff; font-weight:bold;}
.my-collections .entry-share a:hover {text-decoration: none;}
.my-collections .entry-share:hover {background:#7a99e1; border:#7a99e1; }
.my-collections .no-collections {text-align:center; margin:10px 0 40px 0;}
.my-collections .no-collections b {font-size:15px; letter-spacing:2px;}
.my-collections .no-collections .js-entry-start {
    /* width:120px;  */
    margin-top:10px; 
    /*line-height: 22px;*/
}

#collection-load {display:none; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#000; color:#FFF; width:400px; text-align:center;opacity: 0.4; filter: alpha(opacity=40); -ms-filter: "alpha( opacity=40 )"; margin:0 auto; font-size: 15px;
padding:10px 0 10px 15px; position: relative; bottom: 0px;}
#collection-load.loading {display: block;}

/* collection-rules */
.collection-rules h2 {width: 56px; margin: 16px 0; font-size: 14px; background-color: gray; padding: 2px 10px; color: #fff;}
.collection-rules b {font-size:13px; letter-spacing:1px; line-height:30px; color:#666666;}
.collection-rules .prize {
    padding:20px 30px 20px 30px; 
    line-height:22px;
}
.collection-rules .collection-prizes {margin: 20px 0px 0 0px;}
.collection-rules .js-entry-start ,.collection-rules .js-entry-end{
    position: relative; 
    /*width: 250px;*/
    display: block !important;
    margin: 0 auto;
    /*line-height: 25px;*/
}
.collection-rules .block-ef {padding:15px; color:#6c6c6c;}
.collection-rules strong {color:#666666; font-size:15px; font-weight:bold;}
.collection-rules .align-center {text-align: center;}

/* collection-slot */
.collection-slot{
    width: 100%;
    /* height: 100%; */
    top: 0;
    left: 0;
}
.collection-slot h2 {width: 56px; margin: 16px 0; font-size: 14px; background-color: gray; padding: 2px 10px; color: #fff;}
.collection-slot b {font-size:13px; letter-spacing:1px; line-height:30px; color:#666666;}
.collection-slot .prize {
    padding:20px 30px 20px 30px; 
    line-height:22px;
}
.collection-slot .collection-prizes {margin: 20px 0px 0 0px;}
.collection-slot .js-entry-start ,.collection-slot .js-entry-end{
    position: relative; 
    width: 250px;
    display: block !important;
    margin: 0 auto;
    line-height: 25px;
}
.collection-slot .block-ef {padding:15px; color:#6c6c6c;}
.collection-slot strong {color:#666666; font-size:15px; font-weight:bold;}
.collection-slot .align-center {text-align: center;}

.signin-alert {background:#fff!important;}
.entry-preview .nav-banner {position: absolute; cursor: pointer; width:110px; height:250px; top: 280px; right:-150px;}
.entry-preview .nav-arrow {
    position: absolute; 
    background-color: #fff; 
    top: 200px; 
    cursor: pointer; 
    width:50px; 
    height:50px;
}
.entry-preview .prev-arrow {left: -115px; background: url(/images/tintint/common/modal-prev-arrow.png) no-repeat top left;}
.entry-preview .next-arrow {right: -120px; background: url(/images/tintint/common/modal-next-arrow.png) no-repeat top left;}
.entry-preview .prev-arrow:hover {background: url(/images/tintint/common/modal-prev-arrow-hover.png) no-repeat top left;}
.entry-preview .next-arrow:hover {background: url(/images/tintint/common/modal-next-arrow-hover.png) no-repeat top left;}
#modals .entry-uploading, #modals .entry-loading {
    padding: 40px; 
    width: 717px; 
    color:#333; 
    text-align: center; 
    letter-spacing:2px;
    font-weight:bold;
}
/* #modals .info-loading {
    padding: 40px; 
    width: 350px;
    color:#333; 
    text-align: center; 
    letter-spacing:2px;
    font-weight:bold;
} */

.hide {display: none;}

/** award **/
.smile-in-life-award {background: url(/images/tintint/zh_TW/collection/smile-in-life/award-display.png) no-repeat center; width:980px; height:462px; margin-bottom:20px;}
#collection-main .smile-in-life-award ul li {
    width:210px; 
    height:228px; 
    background:none; 
    box-shadow:none; 
    float:left; 
    padding: 0;
    margin: 0;
    text-align:center;
}
#collection-main .smile-in-life-award ul {
    padding:0px 40px 0 60px;
}
#collection-main .smile-in-life-award font {
    position:relative; 
    top:210px;
    color:#333; 
    font-weight:normal;
}
#collection-main .smile-in-life-award font:hover {color:#929292;}
.select-player {background: url(/images/tintint/zh_TW/pj/preview_bg.jpg) repeat; margin:0 20px; padding:10px 0 20px 0; font-weight:bold; color:#F2F2F2; }
/* .select-player nav {padding: 0px 12px 0 80px;} */

.walk-the-child {background: url(/images/tintint/zh_TW/collection/walk-the-child/award-display.png) no-repeat; width:916px; height:462px; margin-bottom:20px;}
#walk-the-child .prize-acc-01 {background: url(/images/tintint/zh_TW/collection/walk-the-child/collection-prize-acc-01.png) no-repeat top right;}
#walk-the-child .prize-share-01 {background: url(/images/tintint/zh_TW/collection/walk-the-child/collection-prize-share-01.png) no-repeat top right;}

/* jbmo */
.jbmo-close {
    top:10px; 
    right:10px;
}

/* new 調整 */

ul.prizes{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
li.prize{
    position: relative;
}
li.prize.hover {
    opacity: 0.7;
}
.main-header .mainImg{
    width: 100%;
    max-width: 1142px;
}
#collection-main .collection-flex, #collection-list .collection-flex{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#collection-main .collection-link{
    text-align: right;
}
.collections-showMeImg{
    float: right;
}
.main-collection .testMenu{
    width: 100%;
    display: flex;
    position: relative;
}
.main-collection .testMenu a{
    z-index: 2;
}
.myShowPhoto{
    /*position: absolute;*/
    right: 0;
    top: -5px;
}
#collection-main .title-flex{
    width: 100%;
    position: relative;
}
#collection-main .title-pad .title-left{
    width: 100%;
}
#collection-main .title-pad .title-right{
    width: 128px;
    position: absolute;
    right: 0;
    top: 0;
}
.entry-info .info-illustrate{
    width: 100%;
    margin: 10px 0;
}
.entry-info .info-flex{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.collect-container .collect-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.collect-container .info-flex{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.collect-container.vertical .info-flex{
    width: 325px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}

.entry-filters .filter-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.entry-address .entry-address-text{
    position: relative;
    top: -3px;
}
.fb-comments, .fb-comments span[style], .fb-comments iframe[style] {
    width: 100% !important;
}
.mbnone{
    display: block;
}
.mbBlock{
    display: none;
}
.collect-share .share-flex{
    display: flex;
}
.share-flex .share-icon{
    width: 39px;
    height: 28px;
}
.share-flex .share-icon >img{
    width: 100%;
    height: auto;
}
.share.giraffe-tag, .share_web_main.giraffe-tag{
    display: none;
}
 .toast{
    /* position: fixed;
    bottom: -55px;
    display: flex;
    width: 717px;
    pointer-events: none;
    justify-content: center;
    transition: bottom 1s;
    z-index: 100;
    background-color: unset;
    box-shadow: unset;
    border: unset; */
    letter-spacing: 0px;
}
/* .toast-entry{
    position: fixed;
    display: flex;
    width: auto;
    bottom: -75px;
    left: calc(50% - 165px);
    pointer-events: none;
    justify-content: center;
    transition: bottom 1s;
    z-index: 100;
}
.toast-starting{
    position: fixed;
    display: flex;
    width: auto;
    bottom: -75px;
    left: calc(50% - 95px);
    pointer-events: none;
    justify-content: center;
    transition: bottom 1s;
    z-index: 1000;
} */
.toast_main{
    position: fixed;
    bottom: -55px;
    display: flex;
    width: 100%;
    pointer-events: none;
    justify-content: center;
    transition: bottom 1s;
    z-index: 100;
    background-color: unset;
    box-shadow: unset;
    border: unset;
}
.toast.showit ,.toast_main.showit, .toast-entry.showit, .toast-starting.showit{
    bottom: 45px;
    display: flex!important;
}
/* .toast .toast-inner,*/ .toast_main .toast-inner, .toast-entry .toast-inner, .toast-starting .toast-inner{ 
    padding: 10px 15px;
    font-size: 12px;
    background-color: #281200;
    color: white;
    border-radius: 2px;
    opacity: 0.7;
}
.share-hide{
      display: none;
}
.share-tag{
    display: block;
}
.share_pbn a, .share_pbn, .share_tbn a, .share_tbn, .share_fbn a, .share_fbn, .share_lbn{
    background: none;
}
.share_fbn a:hover, .share_tbn a:hover, .share_pbn a:hover{
    background: none;
}
.share_fbn img, .share_tbn img, .share_pbn img{
    max-width: 100%;
    max-height: 100%;
}
.share_web_main{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -10;
}
.rule_modal{
    text-decoration: underline;
    cursor: pointer;
}
.rule_modal:hover{
    text-decoration: underline;
}
/* comments */
#info-comments h5{
    color: #333;
    letter-spacing: 1px;
}
#info-comments ul {
    padding: 0px 0 15px 0;
}
#info-comments .user-img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
}
#info-comments .user-img img {
    width: 32px;
    height: 32px;
    object-fit: cover;
}
#info-comments #mes-post {
    margin-bottom: 30px;
    border-bottom: 1px solid #cecece;
}
#info-comments #mes-post .block-ef {
    position: relative;
    padding: 20px 10px;
    color: #333;
    margin-bottom: 32px;
}
#info-comments #mes-post .block-ef:before {
    border-left: 10px solid rgba(255, 255, 255, 0);
    border-bottom: 12px solid #efefef;
    border-right: 10px solid rgba(255, 255, 255, 0);
    display: inline-block;
    content: '';
    position: absolute;
    top: -10px;
    left: 35px;
}

/* new slot */
:root{
    --slot-width: 980px;
    --slot-height: 600px;
}
#collection-slot, #collection-slot-modal{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 10;
    top: 0;
    left: 0;
    z-index: 1000;
}
#collection-slot-modal{
    padding: 0 50px;
}
#collection-slot-modal .collection-slot-content{
    width: 100%;
    max-width: 600px;
    position: relative;
    top: calc(50% - 300px);
}
#collection-slot-modal .collection-slot-content .post-content{
    width: 95%;
    margin: auto;
}
#collection-slot-modal .collection-slot-content .post-content .post-tag{
    width: 100%;
    border: 2px solid #CCCCCC;
    border-radius: 9px;
    padding: 8px;
}

#collection-slot .close-slot{
    width: 25px;
    height: 25px;
    top: -35px;
    right: 20px;
    font-size: 25px;
    color: #fff;
    cursor: pointer;
    z-index: 10;
}
.slot-content{
    width: 100%;
    max-width: var(--slot-width);
    height: 61.2244vw;
    /* height: 50.12vw; */
    max-height: var(--slot-height);
    margin: 0px auto;
    /* overflow: hidden; */
    position: relative;
    /*  */
    top: calc(50% - 290px);
}
.slot-content .slot-mach{
    max-width: 100%;
    width: 100%;
    height: 0;
    padding-top: 61.5%;
    background-image: url('/images/tintint/common/event/cny2016_test/slot_top.gif');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 10;
}
.slot-content .slot-start{
    max-width: 100%;
    width: 100%;
    height: 0;
    padding-top: 61.5%;
    background-image: url('/images/tintint/common/event/cny2016_test/slot_start.gif');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 11;
    cursor: pointer;
}
.slotwrapper2 {
    overflow: hidden;
    display: inline-block;
    width: 52%;
    /* height: 235px; */
    position: relative;
    left: 13%;
    top: 24%;
    margin-top: 0;
}
.slotwrapper2 ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}
.slotwrapper2 #ex-tin{
    width: 100%;
}
.slotwrapper2 ul li img{
    width: 100%;
    height: auto;
}
.slotwrapper2 ul li div{
    max-width: 100%;
    width: 100%;
    height: 0;
    padding-top: 54%;
    background-repeat: no-repeat;
    background-size: contain;
}
.link-soon{
    position: absolute;
    left: 0;
    top: 0;
    background-color: #333;
    opacity: .7;
    z-index: 10;
    width: 100%;
    height: 100%;
    color: #fff;
    line-height: 1.5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
}
#myShowPhoto-seemoreidea {
  position: absolute;
}
@media screen and (max-width: 992px){
    #myShowPhoto-seemoreidea {
      position: relative;
    }
    #collection-list .collection-gallery{
        width: 100%;
    }
    #inprogress .ongoing .collection-header img.collection-banner, #inprogress .finish .collection-header img.collection-banner {
        max-width:940px;
        width: 100%;
    }
    .title-pad{
        padding: 0 20px;
    }
    #collection-main .collection-flex, #collection-list .collection-flex{
        padding: 0;
    }
    .entry-preview .prev-arrow {
        left: 0;
        /* display: none; */
    }
    .entry-preview .next-arrow {
        right: 0;
        /* display: none; */
    }
    #collection-main .main-collection ul li, .my-collections ul li{
        width: 42%;
    }
    #collection-main .smile-in-life-award ul li{
        width: 25%;
        height: 200px;
    }
    #collection-main .smile-in-life-award font{
        top: 180px;
    }
    .collections-showMeImg{
        margin-right: 10px;
    }
    #collection-main .title-pad .title-right{
        right: 1rem;
    }
    .myShowPhoto{
        right: 10px;
    }
    .smile-in-life-award {
        width: 100%;
        height: auto;
        background-size: contain;
    }
    #collection-main .smile-in-life-award ul{
        padding: 0 40px 0 30px;
    }
    #collection-main .walk-the-child-award ul{
        padding: 30px 0 0 0;
    }
    #collection-main .collection-date, #collection-main .collection-link{
        width: 100%;
        text-align: center;
    }
    #collection-main .main-info .js-entry-start{
        /*width: 210px;
        margin: auto;*/
    }
    #collection-slot-modal {
        padding: 0 10px;
    }
    .slot-content{
        top: calc(50% - 150px);
    }
}
@media screen and (max-width: 800px){
    .collection .submit_orange-end{
        width: 215px;
        margin: auto;
    }
    #collection-main .smile-in-life-award ul li{
        width: 25%;
        height: 200px;
    }
    #collection-main .smile-in-life-award font{
        top: 180px;
    }
}
@media screen and (max-width: 785px){
    #collection-main .collection-prizes.prizeTest{
        margin: auto;
        margin-top: 0;
        margin-bottom: 10px;
    }
}
@media screen and (max-width: 750px){
    #collection-list .gallery-display{
        display: none;
    }
    #modals .modal-page{
        width: 92%;
        max-width: 717px;
        padding: 40px 15px;
    }
    .entry-info .info-flex, .collect-container .info-flex{
        display: block;
    }
    .collect-container.vertical .collect-photo{
        width: 100%;
    }
    .collect-container.vertical .info-flex{
        width: 100%;
        display: block;
    }
    .entry-start .info-img {
        width: 100%;
    }
    .entry-info input[type="text"].info-data, .entry-info input[type="email"].info-data, .entry-info input[type="tel"].info-data{
        width: 100%;
    }
    .entry-info textarea{
        width: 100%;
    }
    .entry-start .info-personal{
        width: 100%;
    }
    #collection-main .main-header .share {
        margin:2px 10px 0 0;
    }
    /*.toast ,*/.toast_main, .toast-entry, .toast-starting{
        width: 100%;
        left: 0;
    }
    #collection-list .collection-desc{
        margin: 5px 0 5px 5px;
    }
    #collection-main .main-info{
        margin-bottom: 75px;
    }
    #collection-slot-modal .collection-slot-content {
        /* height: 100%;
        max-height: 500px;
        overflow: auto; */
        top: 10px;
    }
    /* #modals .info-loading{
        width: 100%;
        max-width: 320px;
        margin: auto;
    } */
}
@media screen and (max-width: 500px){
    .mbnone{
        display: none;
    }
    .mbBlock{
        display: block;
    }
    #collection-list .collection-gallery{
        width: 100%;
    }
    #inprogress .ongoing .collection-header img.collection-banner, #inprogress .finish .collection-header img.collection-banner {
        max-width:940px;
        width: 100%;
    }
    #collection-list .gallery-display{
        display: none;
    }
    .collection_titleImg{
        width: 100%;
    }
    #inprogress .collections .collection-header .collection-status img {
        width: 60px;
        height: 60px;
    }
    #collection-list .collection-header .btn{
        bottom: 0;
        padding: 5px 30px;
    }
    #collection-main .main-collection ul li,  .my-collections ul li {
        width: 100%;
        margin: 20px 0 22px 0;
    }
    .my-collections ul.collections li {
        width: 88%;
        margin: 0 0 22px 0;
    }
    #collection-main .main-collection ul{
        padding: 0px 5px 0 15px;
    }
    #collection-main .main-collection ul#entries-list{
        padding: 0px 0 0 0;
    }
    #collection-main .collection-info{
        width: 100%;
        padding: 0 10px;
    }
    #collection-main .collection-prizes{
        margin: 15px 10px 0 10px;
    }
    #collection-main .collection-prizes.prizeTest{
        margin: auto;
        margin-top: 0;
        margin-bottom: 10px;
    }
    #collection-main .collection-date, #collection-main .collection-link{
        width: 100%;
        text-align: center;
    }
    .collection .submit_orange-end{
        width: 215px;
        margin: auto;
    }
    /*.main-collection .header, .main-collection .footer{
        padding: 20px 0 30px 0px;
    }*/

    .collections-showMeImg{
        /* float: none; */
        margin-top: 20px;
        margin-bottom: 20px;
        margin-right: 10px;
    }
    .collect-container.vertical .collect-photo {
        width: 100%;
        /* max-width: 358px; */
    }
    .collect-container .collect-share{
        width: 100%;
        margin: 20px 0 20px 0;
    }
    .vertical .collect-share {
        margin: 0;
    }
    .entry-preview .entry-header .entry-activitie{
        padding-top: 40px;
    }
    .entry-preview .entry-header .entry-activitie{
        position: relative;
        right: 0;
    }
    .select-player{
        margin: 0 0;
    }
    .main-collection .entries-award .link-pd{
        margin: 0 18px 0 0;
    }
    /*.myShowPhoto{
        top: -50px;
        right: 10px;
    }
    #collection-main .title-pad .title-right{
        top: -15px;
    }
    #collection-main .title-pad .title-right .title-img{
        display: none;
    }*/
    #collection-main .smile-in-life-award ul li{
        width: 24%;
        height: 85px;
        padding: 0;
        margin: 6px 0 10px 0;
    }
    #collection-main .smile-in-life-award font{
        top: 82px;
        font-size: 12px;
    }
    .entry-start .uploader.campus-life .fake-fileupload{
        top: 0;
    }
    .entry-start .uploader{
        margin-top: 20px;
    }
    .entry-filters .filters .filter {
        width:75px; 
        height:75px;
    }
    .vertical .info-desc {
        margin: 0;
    }
    .entry-preview .user-single ul{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .entry-preview .user-single li{
        float: none;
        width: 140px;
        margin-bottom: 20px;
        margin-left: 0;
    }
    #collection-load{
        width: 100%;
    }
    .collect-container .info-desc{
        width: 100%;
    }
    .collect-container .collect-share{
        width: 100%;
    }
    .entry-preview .entry-success .entry-success-bk{
        width: 330px;
    }
    .entry-preview .entry-success{
        right: 5px;
    }
    .collection-prizes .award-priåze, .collection-prizes .share-prize{
        display: none;
    }
    .collection-rules .prize{
        padding: 20px 0px 20px 0px;
    }
    .collection-slot .prize{
        padding: 20px 0px 20px 0px;
    }
    .collection-prizes {
        width: 100%;
        margin: 20px 0 0 0;
    }
    .collection-prizes ul.prizes{
        width: 313px;
        margin: auto;
    }
}
.hundred{
    /*padding: 10px 40px 0px 40px;*/
    margin-top: 15px;
    width: 100%;
    left: 0 !important;
    /*height: 90px;*/
    text-align: center;
}
/*.hundred-text{
    color: #333333;
    text-align: center;
}*/
.hundred-tag, .hundred-text.twenty{
    width: 100%;
    display: flex;
    flex-direction: row;
    color: #666666;
}
.hundred-tag::before, .hundred-tag::after,
.hundred-text.twenty::before, .hundred-text.twenty::after{
    content: "";
    flex: 1 1;
    border-bottom: 1px solid #cecece;
    margin: auto;
}
.hundred-tag::before, 
.hundred-text.twenty::before{
    margin-right: 10px;
}
.hundred-tag::after,
.hundred-text.twenty::after{
    margin-left: 10px;
}
.hundred-icon{
    /* width: 40px; */
    /* height: 40px; */
    width: auto;
    padding: 0 5px;
}
.hundred-text.top{
   margin-top: 18px;
}
.hundred-text.bottom{
    margin-bottom: 12px;
}
@media screen and (max-width: 750px){
    .hundred{
        width: 100%;
        margin-top: 0;
        padding: 10px 0 0px 0;
    }
}
.fb_user_image{
    width: 1px;
    height: auto;
    position: absolute;
    right: 0;
    opacity: 0;
}
@media screen and (max-height: 560px){
    #collection-slot-modal .collection-slot-content {
        height: 100%;
        max-height: 500px;
        overflow: auto;
        top: 10px;
    }
}

.collection-bookshelf{
    background-image: url(/images/tintint/common/bonus/bookshelf_w1150.png);
    background-repeat: repeat-y;
    background-position: center bottom;
    overflow: hidden;
}
.collection-bookshelf .collection-graduation-book-tag{
    width: 150px;
    height: 200px;
}
.collection-bookshelf .collection-graduation-book-tag.project01{
    background-image: url('https://www.tintint.com/images/v2/zh_TW/active/2020july/bookshelf_bunko_01.png?t=3');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center -33%;
}
.collection-bookshelf .collection-graduation-book-tag.project02{
    background-image: url('https://www.tintint.com/images/v2/zh_TW/active/2022graduation/bookshelf-display-shashinbook.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center 0%;
}
.collection-bookshelf .collection-graduation-book-tag.project03{
    background-image: url('https://www.tintint.com/images/v2/zh_TW/active/2021graduationgift/shashinbook-portrait-lh-display.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center 57%;
}
.collection-bookshelf .collection-graduation-book-tag.project04{
    background-image: url('https://www.tintint.com/images/v2/zh_TW/active/2022calendar-earlybird/bookshelf_classic-clothbound_01.png?t=0901');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center 20%;
}